add smtp port on front

front/src/components/modals/AddAccountModal.vue

@@ -11,35 +11,49 @@ const email = ref("");
 const pwd = ref("");
 const xoauth = ref("");
 const xoauth2 = ref("");
-const host = ref("");
-const port = ref(993);
+const imapHost = ref("");
+const imapPort = ref(993);
+const smtpHost = ref("");
+const smtpPort = ref(465);
 
 const error = ref("");
 
 const knownHosts = {
     "outlook.com": {
-        host: "outlook.office365.com",
+        imap: "outlook.office365.com",
+        smtp: "outlook.office365.com",
     },
     "hotmail.com": {
-        host: "outlook.office365.com",
+        imap: "outlook.office365.com",
+        smtp: "outlook.office365.com",
     },
     "live.com": {
-        host: "outlook.office365.com",
+        imap: "outlook.office365.com",
+        smtp: "outlook.office365.com",
     },
     "zoho.com": {
-        host: "imap.zoho.eu",
+        imap: "imap.zoho.eu",
+        smtp: "smtp.zoho.eu",
     },
     "yahoo.com": {
-        host: "imap.mail.yahoo.com",
+        imap: "imap.mail.yahoo.com",
+        smtp: "smtp.mail.yahoo.com",
     },
     "icloud.com": {
-        host: "imap.mail.me.com",
+        imap: "imap.mail.me.com",
+        smtp: "smtp.mail.me.com",
     },
 };
 
-const refHost = computed({
+const refSmtpHost = computed({
     set: (val) => {
-        host.value = val;
+        smtpHost.value = val;
+    },
+});
+
+const refImapHost = computed({
+    set: (val) => {
+        imapHost.value = val;
     },
 });
 
@@ -62,7 +76,7 @@ function checkError() {
         err.value = "You need at least one authentification method.";
     } else if ([pwd.value, xoauth.value, xoauth2.value].filter((val) => val != "").length > 1) {
         err.value = "You need only one authentification method.";
-    } else if (host.value == "" || port.value == "") {
+    } else if (smtpHost.value == "" || smtpPort.value == "" || imapHost.value == "" || imapPort.value == "") {
         err.value = "You need to complete the port and the host.";
     } else {
         err.value = "";
@@ -77,8 +91,10 @@ function addAccountRequest() {
         pwd: pwd.value,
         xoauth: xoauth.value,
         xoauth2: xoauth2.value,
-        host: host.value,
-        port: port.value,
+        imapHost: imapHost.value,
+        imapPort: imapPort.value,
+        smtpHost: smtpHost.value,
+        smtpPort: smtpPort.value,
         tls: true,
     };
 
@@ -98,15 +114,14 @@ watchEffect(() => {
 });
 
 function mailChange() {
-    console.log(email.value);
     if (email.value.includes("@")) {
         const domain = email.value.split("@")[1];
-        if (!knownHosts[domain]) {
-            refHost.value = "imap." + domain;
-        } else {
-            refHost.value = knownHosts[domain].host;
+        if (imapHost.value == "") {
+            refImapHost.value = knownHosts[domain]?.imap ?? `imap.${domain}`;
+        }
+        if (smtpHost.value == "") {
+            refSmtpHost.value = knownHosts[domain]?.smtp ?? `smtp.${domain}`;
         }
-        // todo check if manual
     }
 }
 </script>
@@ -117,10 +132,17 @@ function mailChange() {
         <Modal v-if="modal" title="Add new account" @close-modal="modal = false">
             <template v-slot:body>
                 <div class="field">
-                    <Input label="Email:" :onChange="mailChange" v-model="email" type="email" required />
+                    <Input
+                        label="Email:"
+                        :onChange="mailChange"
+                        v-model="email"
+                        type="email"
+                        placeholder="email"
+                        required
+                    />
                 </div>
 
-                <fieldset>
+                <!-- <fieldset>
                     <legend>Authentification method</legend>
                     <div class="field">
                         <Input label="Plain password:" v-model="pwd" type="password" />
@@ -131,12 +153,19 @@ function mailChange() {
                     <div class="field">
                         <Input label="Xoauth2:" v-model="xoauth2" type="text" />
                     </div>
+                </fieldset> -->
+
+                <fieldset class="config">
+                    <legend>Imap</legend>
+                    <Input v-model="imapHost" class="host" type="text" placeholder="host" />
+                    <Input v-model="imapPort" class="port" type="number" placeholder="port" />
+                </fieldset>
+                <fieldset class="config">
+                    <legend>Smtp</legend>
+                    <Input v-model="smtpHost" class="host" type="text" placeholder="host" />
+                    <Input v-model="smtpPort" class="port" type="number" placeholder="port" />
                 </fieldset>
 
-                <div class="config">
-                    <Input v-model="host" id="host" type="text" placeholder="imap host" />
-                    <Input v-model="port" id="port" type="number" placeholder="port" />
-                </div>
                 <!-- tls -->
                 <div>
                     <Button :disabled="error != ''" :onClick="addAccountRequest" text="Add" />
@@ -168,15 +197,16 @@ fieldset {
 }
 
 .config {
+    display: block;
     margin: 10px 0;
 }
 
-#host {
+.host {
     margin-right: 8px;
-    width: calc(95% - 100px);
 }
 
-#port {
+.port {
+    display: inline-flex;
     width: 70px;
 }
 </style>