create custom component

front/src/components/basic/Button.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { defineProps } from "vue";
+const props = defineProps({
+    onClick: { type: Function },
+    text: { type: String },
+});
+</script>
+
+<template>
+    <span>
+        <button @click="props.onClick">{{ props.text }}</button>
+    </span>
+</template>
+
+<style scoped lang="scss">
+button {
+    padding: 5px;
+    padding: 7px 18px;
+    background-color: #09a35b;
+    color: var(--primary-text);
+    border-radius: 5px;
+    border: none;
+    text-decoration: none;
+    display: inline-block;
+    transition: opacity 0.5s;
+
+    &:hover {
+        opacity: 0.6;
+    }
+}
+</style>

front/src/components/basic/Input.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { defineProps, defineEmits } from "vue";
+const props = defineProps({
+    type: { type: String, required: true },
+    required: { type: Boolean, default: false },
+    onChange: { type: Function },
+    placeholder: { type: String },
+    label: { type: String },
+    vModel: { type: String },
+    modelValue: {},
+});
+defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+    <span>
+        <label v-show="props.label">{{ props.label }}</label>
+        <input
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :type="props.type"
+            :required="props.required"
+            @change="props.onChange"
+            :placeholder="props.placeholder"
+        />
+    </span>
+</template>
+
+<style scoped lang="scss">
+label {
+    color: var(--secondary-text);
+}
+
+input {
+    -webkit-box-flex: 1;
+    background-color: var(--quaternary-background);
+    border: none;
+    border-radius: 4px;
+    color: var(--primary-text);
+    -ms-flex: 1;
+    flex: 1;
+    font-family: inherit;
+    font-size: 1.4rem;
+    font-weight: 400;
+    min-width: 0;
+    padding: 8px 9px;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+/* Firefox */
+input[type="number"] {
+    appearance: textfield;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+</style>

front/src/components/modals/AddAccountModal.vue

@@ -2,8 +2,10 @@
 import { ref, computed, watchEffect } from "vue";
 import Modal from "./Modal";
 import API from "../../services/imapAPI";
+import Input from "../basic/Input.vue";
+import Button from "../basic/Button.vue";
 
-const modal = ref(false);
+const modal = ref(true);
 
 const email = ref("");
 const pwd = ref("");
@@ -96,6 +98,7 @@ watchEffect(() => {
 });
 
 function mailChange() {
+    console.log(email.value);
     if (email.value.includes("@")) {
         const domain = email.value.split("@")[1];
         if (!knownHosts[domain]) {
@@ -110,37 +113,33 @@ function mailChange() {
 
 <template>
     <div>
-        <button @click="modal = true">Add Account</button>
+        <Button :onClick="(modal = true)" text="Add Account" />
         <Modal v-if="modal" title="Add new account" @close-modal="modal = false">
             <template v-slot:body>
                 <div class="field">
-                    <label>Email: </label>
+                    <Input label="Email:" :onChange="mailChange" v-model="email" type="email" required />
-                    <input @change="mailChange" v-model="email" type="email" required />
                 </div>
 
                 <fieldset>
                     <legend>Authentification method</legend>
                     <div class="field">
-                        <label>Plain password:</label>
+                        <Input label="Plain password:" v-model="pwd" type="password" />
-                        <input v-model="pwd" type="password" />
                     </div>
                     <div class="field">
-                        <label>Xoauth:</label>
+                        <Input label="Xoauth:" v-model="xoauth" type="text" />
-                        <input v-model="xoauth" type="text" />
                     </div>
                     <div class="field">
-                        <label>Xoauth2:</label>
+                        <Input label="Xoauth2:" v-model="xoauth2" type="text" />
-                        <input v-model="xoauth2" type="text" />
                     </div>
                 </fieldset>
 
                 <div class="config">
-                    <input v-model="host" id="host" type="text" placeholder="imap host" />
+                    <Input v-model="host" id="host" type="text" placeholder="imap host" />
-                    <input v-model="port" id="port" type="number" placeholder="port" />
+                    <Input v-model="port" id="port" type="number" placeholder="port" />
                 </div>
                 <!-- tls -->
                 <div>
-                    <button :disabled="error != ''" @click="addAccountRequest">Add</button>
+                    <Button :disabled="error != ''" :onClick="addAccountRequest" text="Add" />
                     {{ error }}
                 </div>
             </template>
@@ -148,26 +147,16 @@ function mailChange() {
     </div>
 </template>
 
-<style>
+<style lang="scss">
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
-    appearance: textfield;
-}
-
 .field {
     margin-bottom: 5px;
 }
 
-.field > input {
+.field {
-    margin-top: 2px;
+    input {
-    width: 95%;
+        margin-top: 2px;
+        width: 95%;
+    }
 }
 
 fieldset {
@@ -190,43 +179,4 @@ fieldset {
 #port {
     width: 70px;
 }
-
-button {
-    padding: 5px;
-    padding: 7px 18px;
-    background-color: #09a35b;
-    color: var(--primary-text);
-    border-radius: 5px;
-    border: none;
-    text-decoration: none;
-    display: inline-block;
-    transition: opacity 0.5s;
-}
-
-button:hover {
-    opacity: 0.6;
-}
-
-input {
-    -webkit-box-flex: 1;
-    background-color: var(--quaternary-background);
-    border: none;
-    border-radius: 4px;
-    color: var(--primary-text);
-    -ms-flex: 1;
-    flex: 1;
-    font-family: inherit;
-    font-size: 1.4rem;
-    font-weight: 400;
-    min-width: 0;
-    padding: 8px 9px;
-}
-
-label {
-    color: var(--secondary-text);
-}
-
-input:focus {
-    outline: none;
-}
 </style>