Adds progress log and ui enhancements

4 files changed, 95 insertions, 29 deletions

diff --git a/app/src/App.vue b/app/src/App.vue
index 98240ae..87365a2 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,3 +1,19 @@
 <template>
   <router-view />
 </template>
+
+<script>
+import 'foundation-sites/dist/js/foundation.cjs';
+
+export default {};
+</script>
+
+<style lang="scss">
+@import '~foundation-sites/dist/css/foundation.min.css';
+
+body {
+  font-size: 1rem;
+  font-family: Helvetica, sans-serif;
+  padding: 1rem;
+}
+</style>
diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue
index 3ae4000..527a8a9 100644
--- a/app/src/components/Panel.vue
+++ b/app/src/components/Panel.vue
@@ -1,21 +1,35 @@
 <template>
-  <div class="panel">
-    <label>
-      Server <input type="text" :value="modelValue.server" @input="emit('server', $event.target.value)">
-    </label>
-    <label>
-      Port <input type="text" :value="modelValue.port" @input="emit('port', $event.target.value)">
-    </label>
+  <form data-abide @submit.prevent="$emit('connect')">
+    <div class="grid-x">
+      <div class="cell">
+        <label>
+          Server <input type="text" :value="modelValue.server" required @input="emit('server', $event.target.value)">
+        </label>
+      </div>
+    </div>
+    <div class="grid-x">
+      <div class="cell">
+        <label>
+          Port <input type="text" :value="modelValue.port" required @input="emit('port', $event.target.value)">
+        </label>
+      </div>
+    </div>
     <label>
       Username <input type="text" :value="modelValue.username" @input="emit('username', $event.target.value)">
     </label>
     <label>
-      Passwort <input type="text" :value="modelValue.password" @input="emit('password', $event.target.value)">
+      Passwort <input type="password" :value="modelValue.password" @input="emit('password', $event.target.value)">
     </label>
-    <button @click="$emit('connect')">
+    <div class="grid-x">
+      <div class="cell">
+        <input :id="`tls-${uid}`" type="checkbox" :checked="modelValue.tls" @input="emit('tls', $event.target.checked)">
+        <label :for="`tls-${uid}`">TLS enabled</label>
+      </div>
+    </div>
+    <button class="button" type="submit">
       Connect
     </button>
-  </div>
+  </form>
 </template>
 
 <script>
@@ -27,6 +41,12 @@ export default {
   ],
 
   emits: ['connect'],
+
+  data () {
+    return {
+      uid: crypto.getRandomValues(new Uint8Array(1)),
+    };
+  },
 };
 </script>
 
diff --git a/app/src/pages/Home.vue b/app/src/pages/Home.vue
index bfe92bf..8385a46 100644
--- a/app/src/pages/Home.vue
+++ b/app/src/pages/Home.vue
@@ -1,22 +1,38 @@
 <template>
   <div class="wrap">
     <div class="panels">
-      <Panel v-model="from" @connect="connectFrom" />
-      <Panel v-model="to" @connect="connectTo" />
+      <div>
+        <h1>FROM</h1>
+        {{ from.error }}
+        <Panel v-model="from" @connect="connectFrom" />
+        <ul v-if="from.folders">
+          <Folders :folder="from.folders" />
+        </ul>
+      </div>
+
+      <div>
+        <h1>TO</h1>
+        {{ to.error }}
+        <Panel v-model="to" @connect="connectTo" />
+        <ul v-if="to.folders">
+          <Folders :folder="to.folders" />
+        </ul>
+      </div>
     </div>
-    <button @click="migrate">
+
+    <button class="button" @click="migrate">
       Migrate!
     </button>
 
-    <h1>FROM</h1>
-    <ul v-if="from.folders">
-      <Folders :folder="from.folders" />
-    </ul>
-
-    <h1>TO</h1>
-    <ul v-if="to.folders">
-      <Folders :folder="to.folders" />
-    </ul>
+    <div class="progress-screen">
+      <b>{{ progress }}</b>
+      <br>
+      <div class="progress-screen__log">
+        <div v-for="(msg, idx) in log" :key="idx">
+          {{ msg }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -31,7 +47,10 @@ export default {
   },
 
   data () {
-    return {};
+    return {
+      progress: '',
+      log: [],
+    };
   },
 
   computed: {
@@ -61,6 +80,18 @@ export default {
     this.$electron.ipcRenderer.on('imap:listTree:to:reply', (event, folders) => {
       this.to.folders = folders;
     });
+
+    this.$electron.ipcRenderer.on('imap:from:error', (event, error) => {
+      this.from.error = error;
+    });
+    this.$electron.ipcRenderer.on('imap:to:error', (event, error) => {
+      this.to.error = error;
+    });
+
+    this.$electron.ipcRenderer.on('imap:migrate:progress', (event, progress) => {
+      this.progress = progress;
+      this.log.push(progress);
+    });
   },
 
   methods: {
@@ -73,6 +104,9 @@ export default {
     },
 
     async migrate () {
+      this.progress = '';
+      this.log = [];
+
       this.$electron.ipcRenderer.send('imap:migrate', {
         from: JSON.parse(JSON.stringify(this.from)),
         to: JSON.parse(JSON.stringify(this.to)),
@@ -83,12 +117,6 @@ export default {
 </script>
 
 <style lang="scss">
-body {
-  margin: 0;
-  font-size: 1rem;
-  font-family: Helvetica, sans-serif;
-}
-
 .panels {
   display: flex;
   justify-content: space-between;
diff --git a/app/src/store.js b/app/src/store.js
index 818689b..294380c 100644
--- a/app/src/store.js
+++ b/app/src/store.js
@@ -8,12 +8,14 @@ export default createStore({
         port: 3143,
         username: 'from@example.org',
         password: 'password',
+        tls: false,
       },
       to: {
         server: 'localhost',
         port: 31432,
         username: 'to@example.org',
         password: 'password',
+        tls: false,
       },
     };
   },