Splits UI into steps and enhances log messages

4 files changed, 194 insertions, 129 deletions

diff --git a/app/src/pages/Home.vue b/app/src/pages/Home.vue
deleted file mode 100644
index 8385a46..0000000
--- a/app/src/pages/Home.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="panels">
-      <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 class="button" @click="migrate">
-      Migrate!
-    </button>
-
-    <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>
-
-<script>
-import Panel from '../components/Panel.vue';
-import Folders from '../components/Folders';
-
-export default {
-  components: {
-    Panel,
-    Folders,
-  },
-
-  data () {
-    return {
-      progress: '',
-      log: [],
-    };
-  },
-
-  computed: {
-    from: {
-      set (value) {
-        this.$store.commit('setFrom', value);
-      },
-      get () {
-        return this.$store.state.from;
-      },
-    },
-    to: {
-      set (value) {
-        this.$store.commit('setTo', value);
-      },
-      get () {
-        return this.$store.state.to;
-      },
-    },
-  },
-
-  mounted () {
-    this.$electron.ipcRenderer.on('imap:listTree:from:reply', (event, folders) => {
-      this.from.folders = folders;
-    });
-
-    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: {
-    connectFrom () {
-      this.$electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(this.from)));
-    },
-
-    connectTo () {
-      this.$electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(this.to)));
-    },
-
-    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)),
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.panels {
-  display: flex;
-  justify-content: space-between;
-}
-
-ul {
-  padding-left: 1em;
-  list-style-type: dot;
-}
-</style>
diff --git a/app/src/pages/Steps/1-From.vue b/app/src/pages/Steps/1-From.vue
new file mode 100644
index 0000000..e1bd82e
--- /dev/null
+++ b/app/src/pages/Steps/1-From.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>From</h1>
+
+    <Panel v-model="from" />
+
+    <router-link to="/steps/2">
+      next
+    </router-link>
+  </div>
+</template>
+
+<script>
+import Panel from '~/components/Panel';
+
+export default {
+  components: {
+    Panel,
+  },
+
+  computed: {
+    from: {
+      set (value) {
+        this.$store.commit('setFrom', value);
+      },
+      get () {
+        return this.$store.state.from;
+      },
+    },
+  },
+};
+</script>
diff --git a/app/src/pages/Steps/2-To.vue b/app/src/pages/Steps/2-To.vue
new file mode 100644
index 0000000..1cce01d
--- /dev/null
+++ b/app/src/pages/Steps/2-To.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <router-link to="/steps/1">
+      previous
+    </router-link>
+
+    <h1>To</h1>
+
+    <Panel v-model="to" @connect="connect" />
+
+    <router-link to="/steps/3">
+      next
+    </router-link>
+  </div>
+</template>
+
+<script>import Panel from '~/components/Panel';
+
+export default {
+  components: {
+    Panel,
+  },
+
+  computed: {
+    to: {
+      set (value) {
+        this.$store.commit('setTo', value);
+      },
+      get () {
+        return this.$store.state.to;
+      },
+    },
+  },
+
+  mounted () {
+    this.$electron.ipcRenderer.on('imap:listTree:to:reply', (event, folders) => {
+      this.to.folders = folders;
+    });
+
+    this.$electron.ipcRenderer.on('imap:to:error', (event, error) => {
+      this.to.error = error;
+    });
+  },
+
+  methods: {
+    connect () {
+      this.$electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(this.to)));
+    },
+  },
+};
+</script>
diff --git a/app/src/pages/Steps/3-Migrate.vue b/app/src/pages/Steps/3-Migrate.vue
new file mode 100644
index 0000000..c8d2e39
--- /dev/null
+++ b/app/src/pages/Steps/3-Migrate.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <router-link to="/steps/2">
+      previous
+    </router-link>
+
+    <div>
+      From
+      <div class="input-group">
+        <input type="text" disabled :value="from.server"> <input type="text" disabled :value="from.port">
+      </div>
+    </div>
+    <div>
+      To
+      <div class="input-group">
+        <input type="text" disabled :value="to.server"> <input type="text" disabled :value="to.port">
+      </div>
+    </div>
+
+    <div>
+      Bedingungen
+      <br>
+      <input type="text">
+    </div>
+
+    <ul v-if="from.folders">
+      <Folders :folder="from.folders" />
+    </ul>
+
+    <button class="button" @click="migrate">
+      Migrate!
+    </button>
+
+    <div class="progress-screen">
+      <b>{{ progress }}</b>
+      <br>
+      <b>{{ progressMessages }}</b>
+      <br>
+      <div class="progress-screen__log">
+        <div v-for="(msg, idx) in log" :key="idx">
+          {{ msg }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Folders from '~/components/Folders';
+
+export default {
+  components: {
+    Folders,
+  },
+
+  data () {
+    return {
+      progress: '',
+      log: [],
+      progressMessages: '',
+    };
+  },
+
+  computed: {
+    from: {
+      set (value) {
+        this.$store.commit('setFrom', value);
+      },
+      get () {
+        return this.$store.state.from;
+      },
+    },
+    to: {
+      set (value) {
+        this.$store.commit('setTo', value);
+      },
+      get () {
+        return this.$store.state.to;
+      },
+    },
+  },
+
+  mounted () {
+    this.$electron.ipcRenderer.on('imap:listTree:from:reply', (event, folders) => {
+      this.from.folders = folders;
+    });
+    this.$electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(this.from)));
+
+    this.$electron.ipcRenderer.on('imap:migrate:progress', (event, progress) => {
+      this.progress = progress;
+      this.log.push(progress);
+    });
+    this.$electron.ipcRenderer.on('imap:migrate:progress:messages', (event, progress) => {
+      this.progressMessages = progress;
+    });
+  },
+
+  methods: {
+    async migrate () {
+      this.progress = '';
+      this.log = [];
+      this.progressMessages = '';
+
+      this.$electron.ipcRenderer.send('imap:migrate', JSON.parse(JSON.stringify({
+        from: this.from,
+        to: this.to,
+      })));
+    },
+  },
+};
+</script>