From 5c05ed5e20ad9517df94b3ca5d0ed1c1c7df3603 Mon Sep 17 00:00:00 2001
From: Simon Mellerin <simon.mellerin@makina-corpus.com>
Date: Thu, 10 Oct 2024 14:16:54 +0200
Subject: [PATCH] #49 - connection - from 'username' to 'e-mail address'

---
 .../OcConnectionForm/OcConnectionForm.vue           | 12 ++++++------
 src/declarations.ts                                 |  2 +-
 src/helpers/http.ts                                 |  2 +-
 src/locales/en.ts                                   |  2 +-
 src/locales/fr.ts                                   |  2 +-
 src/pages/connection.vue                            |  6 +++---
 src/stores/account.ts                               | 13 +++++++------
 7 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/OcConnectionForm/OcConnectionForm.vue b/src/components/OcConnectionForm/OcConnectionForm.vue
index b906195..39fef0a 100644
--- a/src/components/OcConnectionForm/OcConnectionForm.vue
+++ b/src/components/OcConnectionForm/OcConnectionForm.vue
@@ -2,11 +2,11 @@
   <Form
     class="flex flex-col gap-2"
     :validation-schema="validationSchema"
-    @submit="emit('login', $event.username, $event.password)"
+    @submit="emit('login', $event.email, $event.password)"
   >
-    <Field name="username" v-slot="{ field, errorMessage }">
-      <label for="username">{{ t('connection.username') }}</label>
-      <InputText id="username" v-bind="field" :invalid="!!errorMessage" />
+    <Field name="email" v-slot="{ field, errorMessage }">
+      <label for="email">{{ t('connection.emailAddress') }}</label>
+      <InputText id="email" v-bind="field" :invalid="!!errorMessage" />
       <Message v-if="errorMessage" severity="error">{{ errorMessage }}</Message>
     </Field>
     <Field name="password" v-slot="{ value, errorMessage, handleChange }">
@@ -40,14 +40,14 @@ import Message from 'primevue/message'
 import Password from 'primevue/password'
 
 const emit = defineEmits<{
-  login: [username: string, password: string]
+  login: [email: string, password: string]
 }>()
 
 const { t } = useI18n()
 
 const validationSchema = toTypedSchema(
   yup.object({
-    username: yup.string().required().label(t('connection.username')),
+    email: yup.string().required().label(t('connection.emailAddress')),
     password: yup.string().required().label(t('connection.password'))
   })
 )
diff --git a/src/declarations.ts b/src/declarations.ts
index 1ee6e8a..7aba1f0 100644
--- a/src/declarations.ts
+++ b/src/declarations.ts
@@ -63,7 +63,7 @@ export type OcTreeNode = {
 }
 
 export type Credentials = {
-  username: string
+  email: string
   password: string
 }
 
diff --git a/src/helpers/http.ts b/src/helpers/http.ts
index 7e3648d..076c252 100644
--- a/src/helpers/http.ts
+++ b/src/helpers/http.ts
@@ -18,7 +18,7 @@ export function httpFetch(
       options?.method ?? 'GET',
       url,
       true,
-      options?.auth?.username,
+      options?.auth?.email,
       options?.auth?.password
     );
 
diff --git a/src/locales/en.ts b/src/locales/en.ts
index f2834d9..4828b39 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -53,7 +53,7 @@ export default {
   },
   connection: {
     catchphrase: 'One account, different community data-sharing areas',
-    username: 'Username',
+    emailAddress: 'E-amil address',
     password: 'Password',
     login: 'Login',
     logout: 'Logout',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index cee97fe..e449f3a 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -53,7 +53,7 @@ export default {
   },
   connection: {
     catchphrase: 'Un seul compte, différents espaces communautaires de partage de données',
-    username: 'Nom d\'utilisateur',
+    emailAddress: 'Adresse e-mail',
     password: 'Mot de passe',
     login: 'Connexion',
     logout: 'Déconnexion',
diff --git a/src/pages/connection.vue b/src/pages/connection.vue
index f66fc46..f4bf3c7 100644
--- a/src/pages/connection.vue
+++ b/src/pages/connection.vue
@@ -71,12 +71,12 @@ const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
   }
 ])
 
-async function connection(username: string, password: string) {
-  const profileInfos = await getProfileInfos({ username: username, password: password })
+async function connection(email: string, password: string) {
+  const profileInfos = await getProfileInfos({ email, password })
 
   if (profileInfos) {
     accountStore.auth = {
-      username: username,
+      email: email,
       password: password
     }
     accountStore.infos = profileInfos.infos
diff --git a/src/stores/account.ts b/src/stores/account.ts
index c343fd1..61a4371 100644
--- a/src/stores/account.ts
+++ b/src/stores/account.ts
@@ -17,11 +17,12 @@ export const useAccountStore = defineStore<string, AccountState>('account', () =
   const localAuth = localStorage.getItem('token')
 
   if (localAuth !== null) {
-    const [username, password] = atob(localAuth).split(':')
-
-    auth.value = {
-      username: username,
-      password: password,
+    const [email, password] = atob(localAuth).split(':')
+    if (email && password) {
+      auth.value = {
+        email: email,
+        password: password,
+      }
     }
   }
 
@@ -33,7 +34,7 @@ export const useAccountStore = defineStore<string, AccountState>('account', () =
 
   watch(auth, (auth: Credentials) => {
     if (auth) {
-      localStorage.setItem("token", btoa(`${auth.username}:${auth.password}`));
+      localStorage.setItem("token", btoa(`${auth.email}:${auth.password}`));
     } else {
       localStorage.removeItem("token")
     }
-- 
GitLab