diff options
Diffstat (limited to 'app/src/components/Panel.vue')
-rw-r--r-- | app/src/components/Panel.vue | 55 |
1 files changed, 52 insertions, 3 deletions
diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue index 527a8a9..eb92af7 100644 --- a/app/src/components/Panel.vue +++ b/app/src/components/Panel.vue @@ -1,5 +1,9 @@ <template> - <form data-abide @submit.prevent="$emit('connect')"> + <form @submit.prevent="connect"> + <div v-show="apiMessage.type" class="callout" :class="{ success: apiMessage.type === 'success', alert: apiMessage.type === 'error' }"> + <p>{{ apiMessage.msg }}</p> + </div> + <div class="grid-x"> <div class="cell"> <label> @@ -10,7 +14,14 @@ <div class="grid-x"> <div class="cell"> <label> - Port <input type="text" :value="modelValue.port" required @input="emit('port', $event.target.value)"> + Port + <Select + :model-value="modelValue.port" + required + :options="ports" + :config="{ tags: true }" + @update:modelValue="(value) => emit('port', value)" + /> </label> </div> </div> @@ -33,9 +44,14 @@ </template> <script> -import dynamicModelObjectEmit from '../mixins/dynamicModelObjectEmit'; +import Select from './Select'; +import dynamicModelObjectEmit from '~/mixins/dynamicModelObjectEmit'; export default { + components: { + Select, + }, + mixins: [ dynamicModelObjectEmit, ], @@ -45,8 +61,41 @@ export default { data () { return { uid: crypto.getRandomValues(new Uint8Array(1)), + apiMessage: { + type: '', + msg: '', + }, + + 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!', + }; + }); + + this.$electron.ipcRenderer.on('imap:connect:error', (event, error) => { + this.apiMessage = { + type: 'error', + msg: error, + }; + }); + }, + + methods: { + connect () { + this.$electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(this.modelValue))); + this.$emit('connect'); + }, + }, }; </script> |