Merge branch '49-email-no-username' into 'main'

#49 - connection - from 'username' to 'e-mail address'

Closes #49

See merge request !47

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'))
   })
 )

src/declarations.ts

@@ -63,7 +63,7 @@ export type OcTreeNode = {
 }
 
 export type Credentials = {
-  username: string
+  email: string
   password: string
 }
 

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
     );
 

src/locales/en.ts

@@ -53,7 +53,7 @@ export default {
   },
   connection: {
     catchphrase: 'One account, different community data-sharing areas',
-    username: 'Username',
+    emailAddress: 'E-mail address',
     password: 'Password',
     login: 'Login',
     logout: 'Logout',

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',

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

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")
     }