diff options
author | Daniel Weipert <code@drogueronin.de> | 2023-11-07 23:47:37 +0100 |
---|---|---|
committer | Daniel Weipert <code@drogueronin.de> | 2023-11-07 23:47:37 +0100 |
commit | 7e4a2e3e3a45f0dd302ab3b0e3ac49ad7189eba4 (patch) | |
tree | c2a65bd1af9bb55de7680625557260566a1e6087 /app/src/components/Panel.vue | |
parent | 30c8c2f2b05bab8b962b51c0faeb282980324a5c (diff) |
Diffstat (limited to 'app/src/components/Panel.vue')
-rw-r--r-- | app/src/components/Panel.vue | 92 |
1 files changed, 39 insertions, 53 deletions
diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue index eb92af7..8bd911d 100644 --- a/app/src/components/Panel.vue +++ b/app/src/components/Panel.vue @@ -7,7 +7,7 @@ <div class="grid-x"> <div class="cell"> <label> - Server <input type="text" :value="modelValue.server" required @input="emit('server', $event.target.value)"> + Server <input type="text" v-model="modelValue.server" required> </label> </div> </div> @@ -16,24 +16,23 @@ <label> Port <Select - :model-value="modelValue.port" + v-model="modelValue.port" required :options="ports" :config="{ tags: true }" - @update:modelValue="(value) => emit('port', value)" /> </label> </div> </div> <label> - Username <input type="text" :value="modelValue.username" @input="emit('username', $event.target.value)"> + Username <input type="text" v-model="modelValue.username"> </label> <label> - Passwort <input type="password" :value="modelValue.password" @input="emit('password', $event.target.value)"> + Passwort <input type="password" v-model="modelValue.password"> </label> <div class="grid-x"> <div class="cell"> - <input :id="`tls-${uid}`" type="checkbox" :checked="modelValue.tls" @input="emit('tls', $event.target.checked)"> + <input :id="`tls-${uid}`" type="checkbox" v-model="modelValue.tls"> <label :for="`tls-${uid}`">TLS enabled</label> </div> </div> @@ -43,60 +42,47 @@ </form> </template> -<script> -import Select from './Select'; -import dynamicModelObjectEmit from '~/mixins/dynamicModelObjectEmit'; +<script setup> +import { inject, onMounted, ref } from 'vue'; +import Select from '~/components/Select'; -export default { - components: { - Select, - }, +const props = defineProps(['modelValue']); +const emit = defineEmits(['update:modelValue']); - mixins: [ - dynamicModelObjectEmit, - ], +const $electron = inject('electron'); - emits: ['connect'], +const uid = crypto.getRandomValues(new Uint8Array(1)); +const apiMessage = ref({ + type: '', + msg: '', +}); - data () { - return { - uid: crypto.getRandomValues(new Uint8Array(1)), - apiMessage: { - type: '', - msg: '', - }, +const ports = ref([...new Set([ + 143, + 993, + Number(props.modelValue.port), +])].map((port) => ({ id: port, text: port }))); - ports: [...new Set([ - 143, - 993, - Number(this.modelValue.port), - ])].map((port) => ({ id: port, text: port })), - }; - }, - - mounted () { - this.$electron.ipcRenderer.on('imap:connect:reply', (event, success) => { - this.apiMessage = { - type: 'success', - msg: 'Connected!', - }; - }); +function connect() { + $electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(props.modelValue))); + emit('connect'); +} - this.$electron.ipcRenderer.on('imap:connect:error', (event, error) => { - this.apiMessage = { - type: 'error', - msg: error, - }; - }); - }, +onMounted(() => { + $electron.ipcRenderer.on('imap:connect:reply', (_event, _success) => { + apiMessage.value = { + type: 'success', + msg: 'Connected!', + }; + }); - methods: { - connect () { - this.$electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(this.modelValue))); - this.$emit('connect'); - }, - }, -}; + $electron.ipcRenderer.on('imap:connect:error', (_event, error) => { + apiMessage.value = { + type: 'error', + msg: error, + }; + }); +}); </script> <style lang="scss"> |