✨ Complete all user management with forms and DB

modules/app/components/FOHeader.vue

@@ -5,38 +5,57 @@ defineOptions({
   name: 'FOHeader',
 })
 
-const links = [{
-  label: 'Les actus',
-  to: '/'
-}, {
-  label: 'Rejoindre FO',
-  to: '/join'
-}]
-
-const user = useSupabaseUser()
+const router = useRouter()
+const { user, displayName, waitingMailValidation, loading } = useProfile()
 const { auth } = useSupabaseClient<Database>()
 
+const links = computed(() => {
+  const tmp = []
+
+  if (!user.value) {
+    tmp.push({
+      label: 'Rejoindre FO',
+      to: '/join'
+    })
+  } else {
+    tmp.push({
+      label: 'Les actus',
+      to: '/news'
+    })
+  }
+
+  return tmp
+})
+
 const signOut = async () => {
   const { error } = await auth.signOut()
   if (error) console.log(error)
+  router.push('/')
 }
 </script>
 
 <template>
   <UHeader :links="links" class="bg-white dark:bg-gray-900 rounded-xl shadow-lg mx-4 mt-4">
     <template #left>
-      <!-- <p class="font-logo text-orange-500 stroke-5 stroke-black-500 text-hlogo">Force Orange</p> -->
-      <NuxtImg src="/assets/img/logo-fo.svg" alt="Force Orange" />
+      <NuxtLink to="/">
+        <NuxtImg src="/assets/img/logo-fo.svg" alt="Force Orange" />
+      </NuxtLink>
     </template>
 
     <template #right>
       <UColorModeButton />
-      {{ user?.user_metadata.firstname }}
-      <UButton v-if="user" @click="signOut" variant="soft">Se déconnecter</UButton>
+
+      <template v-if="user">
+        <UButton to="/profile" :loading="loading" icon="i-mdi-account-circle">
+          {{ displayName }}
+        </UButton>
+        <UButton @click="signOut" variant="soft">Se déconnecter</UButton>
+      </template>
+
       <UButton v-else to="/signin" variant="soft">Se connecter</UButton>
     </template>
   </UHeader>
 
-  <UNotification v-if="user && !user?.email_confirmed_at" title="N'oubliez pas de confirmer votre adresse de courriel !"
-    :id="1" :timeout="0" />
+  <UNotification v-if="waitingMailValidation" title="N'oublies pas de confirmer ton adresse de courriel !" :id="1"
+    :timeout="0" />
 </template>

modules/app/components/PasswordStrength.vue

@@ -20,22 +20,40 @@ const color = computed(() => {
 </script>
 
 <template>
-  <UMeter :value="strength.score" :max="4" :color="color">
-    <template #label>
-      <p class="text-sm font-thin">
-        <template v-if="strength.score === 1">
-          Le mot de passe est faible
+  <div>
+    <p class="text-sm">
+      force de ton mot de passe :
+    </p>
+    <div class="flex">
+
+      <UMeter :value="strength.score" :max="4" :color="color">
+        <template #label>
+          <p class="text-sm font-thin">
+            <template v-if="strength.score === 1">
+              Le mot de passe est faible
+            </template>
+            <template v-else-if="strength.score === 2">
+              Le mot de passe est moyen
+            </template>
+            <template v-else-if="strength.score === 3">
+              Le mot de passe est bon
+            </template>
+            <template v-else-if="strength.score === 4">
+              Le mot de passe est fort
+            </template>
+          </p>
         </template>
-        <template v-else-if="strength.score === 2">
-          Le mot de passe est moyen
+      </UMeter>
+      <UPopover>
+        <UIcon name="i-mdi-info-circle" color="blue" class="w-5 h-5 m-2 hover:text-blue-300" />
+        <template #panel>
+          <p class="max-w-sm p-4 text-gray-400 font-thin">
+            Un mot bon mot de passe est souvent lié au nombres de charactères (une phrase est un bon mot de
+            passe) et à sa complexité à deviner (non, votre code postal et le nom de votre lapin n'est pas un bon motde
+            passe)
+          </p>
         </template>
-        <template v-else-if="strength.score === 3">
-          Le mot de passe est bon
-        </template>
-        <template v-else-if="strength.score === 4">
-          Le mot de passe est fort
-        </template>
-      </p>
-    </template>
-  </UMeter>
+      </UPopover>
+    </div>
+  </div>
 </template>

modules/app/components/WIPNotif.vue

@@ -0,0 +1,4 @@
+<template>
+  <UAlert color="amber" class="my-4" icon="i-mdi-dice" title="Ça arrive bientôt !!!"
+    description="Force Orange est encore en cours de développement mais sera fréquement mis à jour ! en attendant surveille bien ta boîte de courriel avec les Gazettes de PEL." />
+</template>

modules/app/components/profile/EmailUpdateForm.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { object, string, type InferType } from 'yup'
+import type { Database } from '@pel/supabase/types'
+import type { FormSubmitEvent } from '#ui/types'
+
+definePageMeta({
+  name: 'EmailUpdateForm',
+})
+
+const emit = defineEmits(['success', 'error'])
+
+const toast = useToast()
+const { auth } = useSupabaseClient<Database>()
+const { inputStyle, formGroupStyle } = useFoStyle()
+
+const loading = ref(false)
+const schema = object({
+  email: string().lowercase().trim().email('Il semble que l\'email ne soit pas bon').required('Champ obligatoire'),
+})
+
+type Schema = InferType<typeof schema>
+
+const state = reactive({
+  email: undefined,
+})
+
+async function onSave(event: FormSubmitEvent<Schema>) {
+  loading.value = true
+
+  const formSubmit = event.data
+  const { data, error } = await auth.updateUser({
+    email: formSubmit.email,
+  })
+
+  if (error) {
+    console.log(error)
+    toast.add({
+      title: 'Erreur',
+      description: 'Une erreur est survenue lors de l\'envoi du nouveau courriel',
+      color: 'red',
+    })
+
+    emit('error')
+  } else {
+    console.log(data)
+
+    toast.add({
+      title: 'Adresse de courriel changé',
+      description: 'Nouveau courriel sauvegardé, vérifie tes mails pour confirmer le changement',
+      color: 'orange',
+    })
+
+    emit('success')
+  }
+
+  loading.value = false
+}
+</script>
+
+<template>
+  <h1 class="text-2xl uppercase">Modification de votre adresse de couriel</h1>
+
+  <UForm :schema="schema" :state="state" @submit="onSave">
+    <UFormGroup :ui="formGroupStyle.ui" label="Nouvelle adresse courriel" name="email">
+      <template #default="{ error }">
+        <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" placeholder="Adresse courriel" type="email"
+          v-model="state.email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
+      </template>
+    </UFormGroup>
+
+    <p class="mt-8 text-center">
+      <UButton type="submit" variant="soft" :disabled="loading" :loading="loading">
+        Sauvegarder la nouvelle adresse
+      </UButton>
+    </p>
+  </UForm>
+</template>

modules/app/components/profile/PasswordUpdateForm.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { object, string, type InferType } from 'yup'
+import type { Database } from '@pel/supabase/types'
+import type { FormSubmitEvent } from '#ui/types'
+
+definePageMeta({
+  name: 'PasswordUpdateForm',
+})
+
+const emit = defineEmits(['success', 'error'])
+
+const toast = useToast()
+const { auth } = useSupabaseClient<Database>()
+const { testPassword } = usePasswordStrength()
+const { inputStyle, formGroupStyle } = useFoStyle()
+
+const loading = ref(false)
+
+const schema = object({
+  password: string().min(6, 'Il faudrait un minimum de 6 charactères').test({
+    name: 'password',
+    message: 'Le mot de passe n\'est pas assez fort ~~',
+    test: (value) => {
+      if (!value) return false
+      return testPassword(value).score >= 3
+    },
+  }).required('Champ obligatoire'),
+})
+
+type Schema = InferType<typeof schema>
+
+const state = reactive({
+  password: undefined,
+})
+
+async function onSave(event: FormSubmitEvent<Schema>) {
+  loading.value = true
+  const formSubmit = event.data
+
+  const { data, error } = await auth.updateUser({
+    password: formSubmit.password,
+  })
+
+  if (error) {
+    console.log(error)
+    toast.add({
+      title: 'Erreur',
+      description: 'Une erreur est survenue lors de l\'envoi du nouveau mot de passe',
+      color: 'red',
+    })
+
+    emit('error')
+  } else {
+    console.log(data)
+
+    toast.add({
+      title: 'Mot de passe changé',
+      description: 'Nouveau mot de passe sauvegardé, vérifie tes mails pour confirmer le changement',
+      color: 'orange',
+    })
+
+    emit('success')
+  }
+
+  loading.value = false
+}
+</script>
+
+<template>
+  <h1 class="text-2xl uppercase">Réinitialiser votre mot de passe</h1>
+  <p>Nous pouvons envoyer un lien de récupération à l’adresse courriel associé à votre compte.</p>
+
+  <UForm :schema="schema" :state="state" @submit="onSave" class="my-8">
+    <UFormGroup :ui="formGroupStyle.ui" label="Nouveau mot de passe" name="password">
+      <template #default="{ error }">
+        <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" placeholder="***" type="password" v-model="state.password"
+          :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
+      </template>
+    </UFormGroup>
+
+    <PasswordStrength v-model="state.password" />
+
+    <p class="mt-8 text-center">
+      <UButton type="submit" variant="soft" :disabled="loading" :loading="loading">Sauvegarder le nouveau mot de passe
+      </UButton>
+    </p>
+  </UForm>
+</template>