✨ User can signup / signin (WIP)

modules/app/components/FOHeader.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { Database } from '@pel/supabase/types'
+
+defineOptions({
+  name: 'FOHeader',
+})
+
+const links = [{
+  label: 'Les actus',
+  to: '/'
+}, {
+  label: 'Rejoindre FO',
+  to: '/join'
+}]
+
+const user = useSupabaseUser()
+const { auth } = useSupabaseClient<Database>()
+
+const signOut = async () => {
+  const { error } = await auth.signOut()
+  if (error) console.log(error)
+}
+</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" />
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+      {{ user?.user_metadata.firstname }}
+      <UButton v-if="user" @click="signOut" variant="soft">Se déconnecter</UButton>
+      <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" />
+</template>

modules/app/components/PasswordStrength.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'PasswordStrength',
+})
+
+const props = defineProps<{
+  modelValue: string | undefined
+}>()
+const emit = defineEmits(['update:modelValue'])
+const data = useVModel(props, 'modelValue', emit)
+
+const { strength } = usePasswordStrength(data)
+const color = computed(() => {
+  if (strength.value.score === 1) return 'red'
+  if (strength.value.score === 2) return 'orange'
+  if (strength.value.score === 3) return 'yellow'
+  if (strength.value.score === 4) return 'green'
+  return 'blue'
+})
+</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
+        </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>
+  </UMeter>
+</template>