Initial commit

8 files changed, 228 insertions, 0 deletions

diff --git a/app/src/App.vue b/app/src/App.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/app/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/app/src/components/Folders.vue b/app/src/components/Folders.vue
new file mode 100644
index 0000000..b801c1a
--- /dev/null
+++ b/app/src/components/Folders.vue
@@ -0,0 +1,21 @@
+<template>
+  <li>
+    <div>
+      {{ folder.root ? '' : folder.name }}
+    </div>
+    <ul v-if="folder.folders">
+      <Folders v-for="(child, idx) in folder.folders" :key="idx" :folder="child" />
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    folder: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue
new file mode 100644
index 0000000..3ae4000
--- /dev/null
+++ b/app/src/components/Panel.vue
@@ -0,0 +1,34 @@
+<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>
+    <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)">
+    </label>
+    <button @click="$emit('connect')">
+      Connect
+    </button>
+  </div>
+</template>
+
+<script>
+import dynamicModelObjectEmit from '../mixins/dynamicModelObjectEmit';
+
+export default {
+  mixins: [
+    dynamicModelObjectEmit,
+  ],
+
+  emits: ['connect'],
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/app/src/index.js b/app/src/index.js
new file mode 100644
index 0000000..46dc556
--- /dev/null
+++ b/app/src/index.js
@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+import router from './router';
+import store from './store';
+import App from './App';
+
+const app = createApp(App);
+
+app.config.globalProperties.$electron = require('electron');
+
+app.use(router);
+app.use(store);
+
+app.mount('#app');
diff --git a/app/src/mixins/dynamicModelObjectEmit.js b/app/src/mixins/dynamicModelObjectEmit.js
new file mode 100644
index 0000000..93701c8
--- /dev/null
+++ b/app/src/mixins/dynamicModelObjectEmit.js
@@ -0,0 +1,16 @@
+export default {
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  methods: {
+    emit (key, value) {
+      this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
+    },
+  },
+};
diff --git a/app/src/pages/Home.vue b/app/src/pages/Home.vue
new file mode 100644
index 0000000..2fe4030
--- /dev/null
+++ b/app/src/pages/Home.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="wrap">
+    <div class="panels">
+      <Panel v-model="from" @connect="connectFrom" />
+      <Panel v-model="to" @connect="connectTo" />
+    </div>
+    <button @click="migrate">
+      Migrate!
+    </button>
+
+    <h1>FROM</h1>
+    <ul v-if="from.folders">
+      <Folders :folder="from.folders" />
+    </ul>
+    <code>
+      {{ from.folders }}
+    </code>
+
+    <h1>TO</h1>
+    <ul v-if="to.folders">
+      <Folders :folder="to.folders" />
+    </ul>
+    <code>
+      {{ to.folders }}
+    </code>
+  </div>
+</template>
+
+<script>
+import Panel from '../components/Panel.vue';
+import Folders from '../components/Folders';
+
+export default {
+  components: {
+    Panel,
+    Folders,
+  },
+
+  data () {
+    return {};
+  },
+
+  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;
+    });
+  },
+
+  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 () {
+
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;
+  font-size: 1rem;
+  font-family: Helvetica, sans-serif;
+}
+
+.panels {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/app/src/router.js b/app/src/router.js
new file mode 100644
index 0000000..7676449
--- /dev/null
+++ b/app/src/router.js
@@ -0,0 +1,12 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import Home from './pages/Home';
+
+export default createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      component: Home,
+    },
+  ],
+});
diff --git a/app/src/store.js b/app/src/store.js
new file mode 100644
index 0000000..db5a9fa
--- /dev/null
+++ b/app/src/store.js
@@ -0,0 +1,30 @@
+import { createStore } from 'vuex';
+
+export default createStore({
+  state () {
+    return {
+      from: {
+        server: 'localhost',
+        port: '3143',
+        username: 'd@cool.de',
+        password: 'lolo11',
+      },
+      to: {
+        server: '',
+        port: '',
+        username: '',
+        password: '',
+      },
+    };
+  },
+
+  mutations: {
+    setFrom (state, payload) {
+      state.from = Object.assign(state.from, payload);
+    },
+
+    setTo (state, payload) {
+      state.to = Object.assign(state.to, payload);
+    },
+  },
+});