UpdateHEADmain

1 files changed, 39 insertions, 53 deletions

diff --git a/app/src/components/Panel.vue b/app/src/components/Panel.vue
index eb92af7..8bd911d 100644
--- a/app/src/components/Panel.vue
+++ b/app/src/components/Panel.vue
@@ -7,7 +7,7 @@
     <div class="grid-x">
       <div class="cell">
         <label>
-          Server <input type="text" :value="modelValue.server" required @input="emit('server', $event.target.value)">
+          Server <input type="text" v-model="modelValue.server" required>
         </label>
       </div>
     </div>
@@ -16,24 +16,23 @@
         <label>
           Port
           <Select
-            :model-value="modelValue.port"
+            v-model="modelValue.port"
             required
             :options="ports"
             :config="{ tags: true }"
-            @update:modelValue="(value) => emit('port', value)"
           />
         </label>
       </div>
     </div>
     <label>
-      Username <input type="text" :value="modelValue.username" @input="emit('username', $event.target.value)">
+      Username <input type="text" v-model="modelValue.username">
     </label>
     <label>
-      Passwort <input type="password" :value="modelValue.password" @input="emit('password', $event.target.value)">
+      Passwort <input type="password" v-model="modelValue.password">
     </label>
     <div class="grid-x">
       <div class="cell">
-        <input :id="`tls-${uid}`" type="checkbox" :checked="modelValue.tls" @input="emit('tls', $event.target.checked)">
+        <input :id="`tls-${uid}`" type="checkbox" v-model="modelValue.tls">
         <label :for="`tls-${uid}`">TLS enabled</label>
       </div>
     </div>
@@ -43,60 +42,47 @@
   </form>
 </template>
 
-<script>
-import Select from './Select';
-import dynamicModelObjectEmit from '~/mixins/dynamicModelObjectEmit';
+<script setup>
+import { inject, onMounted, ref } from 'vue';
+import Select from '~/components/Select';
 
-export default {
-  components: {
-    Select,
-  },
+const props = defineProps(['modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
-  mixins: [
-    dynamicModelObjectEmit,
-  ],
+const $electron = inject('electron');
 
-  emits: ['connect'],
+const uid = crypto.getRandomValues(new Uint8Array(1));
+const apiMessage = ref({
+  type: '',
+  msg: '',
+});
 
-  data () {
-    return {
-      uid: crypto.getRandomValues(new Uint8Array(1)),
-      apiMessage: {
-        type: '',
-        msg: '',
-      },
+const ports = ref([...new Set([
+  143,
+  993,
+  Number(props.modelValue.port),
+])].map((port) => ({ id: port, text: port })));
 
-      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!',
-      };
-    });
+function connect() {
+  $electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(props.modelValue)));
+  emit('connect');
+}
 
-    this.$electron.ipcRenderer.on('imap:connect:error', (event, error) => {
-      this.apiMessage = {
-        type: 'error',
-        msg: error,
-      };
-    });
-  },
+onMounted(() => {
+  $electron.ipcRenderer.on('imap:connect:reply', (_event, _success) => {
+    apiMessage.value = {
+      type: 'success',
+      msg: 'Connected!',
+    };
+  });
 
-  methods: {
-    connect () {
-      this.$electron.ipcRenderer.send('imap:connect', JSON.parse(JSON.stringify(this.modelValue)));
-      this.$emit('connect');
-    },
-  },
-};
+  $electron.ipcRenderer.on('imap:connect:error', (_event, error) => {
+    apiMessage.value = {
+      type: 'error',
+      msg: error,
+    };
+  });
+});
 </script>
 
 <style lang="scss">