Splits UI into steps and enhances log messages

3 files changed, 140 insertions, 3 deletions

diff --git a/app/src/components/Folders.vue b/app/src/components/Folders.vue
index b801c1a..5c5c388 100644
--- a/app/src/components/Folders.vue
+++ b/app/src/components/Folders.vue
@@ -19,3 +19,10 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+ul {
+  padding-left: 1em;
+  list-style-type: dot;
+}
+</style>
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>
 
diff --git a/app/src/components/Select.vue b/app/src/components/Select.vue
new file mode 100644
index 0000000..f2d1187
--- /dev/null
+++ b/app/src/components/Select.vue
@@ -0,0 +1,81 @@
+<template>
+  <select />
+</template>
+
+<script>
+import 'select2/dist/js/select2.min';
+import $ from 'jquery';
+
+export default {
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+
+    modelValue: {
+      type: [Number, String],
+      required: true,
+    },
+
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  watch: {
+    options (value) {
+      $(this.$el)
+        .empty().select2({ data: value });
+    },
+
+    modelValue (value) {
+      $(this.$el)
+        .val(value)
+        .trigger('change');
+    },
+  },
+
+  mounted () {
+    $(this.$el)
+      .select2({ ...this.config, data: this.options })
+      .val(this.modelValue)
+      .trigger('change')
+      .on('change', (ev) => {
+        this.$emit('update:modelValue', ev.target.value);
+      });
+  },
+
+  unmounted () {
+    $(this.$el)
+      .off()
+      .select2('destroy');
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~select2/dist/css/select2.min.css';
+
+.select2 {
+  &-selection {
+    height: 2.4375rem !important;
+    border-radius: 0 !important;
+    border: 1px solid #cacaca !important;
+
+    &__rendered {
+      padding: .5rem;
+      font-size: 1rem !important;
+      line-height: 1.5 !important;
+    }
+
+    &__arrow {
+      height: 2.4375rem !important;
+      top: 0;
+    }
+  }
+}
+</style>