✨ Complete all user management with forms and DB

modules/app/pages/join/index.vue

@@ -1,27 +1,41 @@
 <script setup lang="ts">
 import { object, string, boolean, type InferType } from 'yup'
 import type { Database } from '@pel/supabase/types'
-import type { FormSubmitEvent } from '#ui/types'
+import type { FormSubmitEvent, FormErrorEvent } from '#ui/types'
 
 definePageMeta({
   name: 'Join',
 })
 
-const user = useSupabaseUser()
+const { testPassword } = usePasswordStrength()
+const { inputStyle, formGroupStyle } = useFoStyle()
+const config = useRuntimeConfig()
+
+const router = useRouter()
+const toast = useToast()
 const { auth } = useSupabaseClient<Database>()
 
 const schema = object({
-  mail: string().email('Invalid email').required('Required'),
-  password: string().min(6).required('Required'),
-  firstname: string().required('Required'),
-  lastname: string().required('Required'),
-  isAdult: boolean().required('Required'),
+  email: string().lowercase().trim().email('Il semble que l\'email ne soit pas bon').required('Champ obligatoire'),
+  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'),
+  firstname: string().lowercase().trim().required('Champ obligatoire'),
+  lastname: string().lowercase().trim().required('Champ obligatoire'),
+  isAdult: boolean().oneOf([true], 'Pour pouvoir t\'inscrire tu dois être majeur (ou bientôt)'),
 })
 
 type Schema = InferType<typeof schema>
 
+const form = ref<HTMLFormElement | null>(null)
+const isJoining = ref(false)
 const state = reactive({
-  mail: undefined,
+  email: undefined,
   password: undefined,
   firstname: undefined,
   lastname: undefined,
@@ -29,12 +43,12 @@ const state = reactive({
 })
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
+  isJoining.value = true
+
   // Do something with event.data
   const formSubmit = event.data
-  console.log(event.data)
-
   const { data, error } = await auth.signUp({
-    email: formSubmit.mail,
+    email: formSubmit.email,
     password: formSubmit.password,
     options: {
       data: {
@@ -42,46 +56,94 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         lastname: formSubmit.lastname,
         is_adult: formSubmit.isAdult,
       },
+      emailRedirectTo: `${config.public.baseUrl}/join/valid`,
     },
   })
 
-  // TODO
-  // [x] create member in database if user logged in
+  if (error) {
+    console.log(error)
+    toast.add({
+      title: 'Erreur',
+      description: 'Une erreur est survenue lors de l\'inscription',
+      color: 'red',
+    })
+  } else {
+    console.log(data)
+    // Redirect to the waiting page
+    toast.add({
+      title: 'Super !',
+      description: 'On a bien reçu ton inscription, un email de validation t\'a été envoyé',
+      color: 'green',
+    })
+    router.push({ name: 'JoinWaiting' })
+  }
 
-  if (error) console.log(error)
+  isJoining.value = false
+}
+
+async function onError(event: FormErrorEvent) {
+  console.log(event.errors)
+  const element = document.getElementById(event.errors[0].id)
+  element?.focus()
+  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
 }
 </script>
 
 <template>
-  <UCard class="container mx-auto">
-    <h1 class="text-2xl uppercase">Rejoindre Paris est Ludique!</h1>
+  <UCard class="container mx-auto max-w-screen-lg">
+    <h1 class="text-2xl uppercase mb-4">Rejoindre Paris est Ludique!</h1>
     <p class="font-light">Pour rejoindre la Force orange de Paris est Ludique!, il est nécessaire de compléter le
       formulaire ci-dessous:
     </p>
 
-    <UForm :schema="schema" :state="state" @submit="onSubmit">
-      <UFormGroup label="Adresse courriel" eager-validation>
-        <UInput placeholder="Adresse courriel" name="mail" type="email" v-model="state.mail" />
+    <UForm ref="form" :schema="schema" :state="state" @submit="onSubmit" @error="onError">
+      <UFormGroup :ui="formGroupStyle.ui" label="Adresse courriel" name="email">
+        <template #default="{ error }">
+          <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" placeholder="Adresse courriel" v-model="state.email"
+            :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
+        </template>
       </UFormGroup>
 
-      <UFormGroup label="Password" eager-validation>
-        <UInput placeholder="Password" type="password" v-model="state.password" />
-      </UFormGroup>
-      <PasswordStrength v-model="state.password" />
-
-      <div class="flex md:flex-row flex-col gap-4">
-        <UFormGroup label="Prénom" class="flex-1" eager-validation>
-          <UInput placeholder="Prénom" name="firstname" v-model="state.firstname" />
-        </UFormGroup>
-
-        <UFormGroup label="Nom de famille" class="flex-1" eager-validation>
-          <UInput placeholder="Nom de famille" name="lastname" v-model="state.lastname" />
-        </UFormGroup>
+      <div class="flex md:flex-row flex-col gap-4 my-4">
+        <div class="flex-1">
+          <UFormGroup :ui="formGroupStyle.ui" label="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>
+        </div>
+        <div class="flex-1">
+          <PasswordStrength v-model="state.password" />
+        </div>
       </div>
 
-      <UCheckbox name="isAdult" label="Je serais majeur avant la prochaine édition." v-model="state.isAdult" />
+      <div class="flex md:flex-row flex-col gap-4 mb-4">
+        <div class="flex-1">
+          <UFormGroup :ui="formGroupStyle.ui" label="Prénom" name="firstname">
+            <template #default="{ error }">
+              <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" placeholder="Roger" v-model="state.firstname"
+                :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
+            </template>
+          </UFormGroup>
+        </div>
 
-      <UButton type="submit">S'inscrire</UButton>
+        <div class="flex-1">
+          <UFormGroup :ui="formGroupStyle.ui" label="Nom de famille" name="lastname">
+            <template #default="{ error }">
+              <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" placeholder="Rabbit" v-model="state.lastname"
+                :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
+            </template>
+          </UFormGroup>
+        </div>
+      </div>
+
+      <UFormGroup name="isAdult" class="mb-4">
+        <UCheckbox label="Je serais majeur avant la prochaine édition." v-model="state.isAdult" />
+      </UFormGroup>
+
+      <UButton type="submit" :loading="isJoining" :disabled="isJoining">S'inscrire</UButton>
     </UForm>
   </UCard>
 </template>

modules/app/pages/join/valid.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'JoinValid',
+})
+
+const user = useSupabaseUser()
+
+// TODO : Add the necessary code to handle the validation of the user's email address
+// http://localhost:3000/join/valid?error=access_denied&error_code=403&error_description=Email+link+is+invalid+or+has+expired#error=access_denied&error_code=403&error_description=Email+link+is+invalid+or+has+expired
+</script>
+
+<template>
+  <UCard class="container mx-auto max-w-screen-md">
+    <h1 class="text-2xl uppercase mb-4">Bravo ! Tu as vaillament réussi à valider ton compte Force Orange</h1>
+    <p class="font-light">
+      Tu peux maintenant te connecter à ton compte et profiter de toutes les fonctionnalités de Force Orange.
+    </p>
+
+    <UButton v-if="user" to="/" color="primary" class="mt-4">
+      Retour à l'accueil
+    </UButton>
+
+    <UButton v-else to="/signin" color="primary" class="mt-4">
+      Se connecter
+    </UButton>
+  </UCard>
+</template>

modules/app/pages/join/waiting.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'JoinWaiting',
+})
+
+const user = useSupabaseUser()
+</script>
+
+<template>
+  <UCard class="container mx-auto  max-w-screen-md">
+    <h1 class="text-2xl uppercase mb-4">En attente de validation</h1>
+    <p class="font-light">
+      Un email de validation t'a été envoyé à ton adresse de courriel.<br>
+      Merci de cliquer sur le lien pour valider ton inscription sur Force Orange.<br>
+    </p>
+
+    <UButton v-if="user" to="/" color="primary" class="mt-4">
+      Retour à l'accueil
+    </UButton>
+
+    <UButton v-else to="/signin" color="primary" class="mt-4">
+      Se connecter
+    </UButton>
+  </UCard>
+</template>