From 077fb2827afc3985af5089bb4f738029b3a213e8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 27 Jul 2023 17:42:59 +0200
Subject: [PATCH] login: add login error

---
 locales/en-US.json |  2 ++
 pages/login.vue    | 37 ++++++++++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/locales/en-US.json b/locales/en-US.json
index 16f6652..9396012 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -33,6 +33,8 @@
   "good_practices_about_user_password": "Pick a user password of at least 8 characters - though it is good practice to use longer ones (i.e. a passphrase) and/or use various kind of characters (uppercase, lowercase, digits and special characters).",
   "wrong_current_password": "The current password is wrong",
   "invalid_mail": "Invalid e-mail address",
+  "possibly_invalid_username": "Username is possibly invalid",
+  "possibly_invalid_password": "Password is possibly invalid",
   "invalid_domain": "Invalid domain in",
   "invalid_mailforward": "Invalid e-mail forwarding address",
   "mail_already_used": "E-mail address already in use",
diff --git a/pages/login.vue b/pages/login.vue
index d2ed808..fb86d46 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/yup'
 import * as yup from 'yup'
 
 definePageMeta({
@@ -12,7 +14,16 @@ const head = useLocaleHead({
 const { t } = useI18n()
 const isLoggedIn = useIsLoggedIn()
 
-async function login(form) {
+const { handleSubmit, setErrors } = useForm({
+  validationSchema: toTypedSchema(
+    yup.object({
+      username: yup.string().required(),
+      password: yup.string().required(),
+    }),
+  ),
+})
+
+const login = handleSubmit(async (form) => {
   const { error } = await useApi('/login', {
     method: 'POST',
     body: { credentials: form.username + ':' + form.password },
@@ -28,14 +39,12 @@ async function login(form) {
     isLoggedIn.value = true
     await navigateTo('/')
   } else {
-    // FIXME : display an error or something
+    setErrors({
+      username: t('possibly_invalid_username'),
+      password: t('possibly_invalid_password'),
+    })
   }
-}
-
-const schema = {
-  username: yup.string().required(),
-  password: yup.string().required(),
-}
+})
 </script>
 
 <template>
@@ -46,7 +55,7 @@ const schema = {
       src="/assets/img/logo-white.svg"
     />
 
-    <BaseForm :schema="schema" @submit="login">
+    <form novalidate @submit="login">
       <FormField
         name="username"
         :label="t('username')"
@@ -54,7 +63,12 @@ const schema = {
         class="mb-4"
         row
       >
-        <TextInput name="username" type="text" :placeholder="t('username')" />
+        <TextInput
+          name="username"
+          type="text"
+          :placeholder="t('username')"
+          autocomplete="username"
+        />
       </FormField>
 
       <FormField
@@ -68,11 +82,12 @@ const schema = {
           name="password"
           type="password"
           :placeholder="t('password')"
+          autocomplete="current-password"
         />
       </FormField>
 
       <YButton :text="t('login')" type="submit" block />
-    </BaseForm>
+    </form>
   </main>
 </template>