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>