✨ User can signup / signin (WIP)

modules/app/pages/join/index.vue

@@ -1,14 +1,18 @@
 <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'
 
 definePageMeta({
   name: 'Join',
 })
 
+const user = useSupabaseUser()
+const { auth } = useSupabaseClient<Database>()
+
 const schema = object({
   mail: string().email('Invalid email').required('Required'),
-  password: string().required('Required'),
+  password: string().min(6).required('Required'),
   firstname: string().required('Required'),
   lastname: string().required('Required'),
   isAdult: boolean().required('Required'),
@@ -16,8 +20,6 @@ const schema = object({
 
 type Schema = InferType<typeof schema>
 
-const strenght = ref(0)
-
 const state = reactive({
   mail: undefined,
   password: undefined,
@@ -28,7 +30,25 @@ const state = reactive({
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   // Do something with event.data
+  const formSubmit = event.data
   console.log(event.data)
+
+  const { data, error } = await auth.signUp({
+    email: formSubmit.mail,
+    password: formSubmit.password,
+    options: {
+      data: {
+        firstname: formSubmit.firstname,
+        lastname: formSubmit.lastname,
+        is_adult: formSubmit.isAdult,
+      },
+    },
+  })
+
+  // TODO
+  // [x] create member in database if user logged in
+
+  if (error) console.log(error)
 }
 </script>
 
@@ -40,27 +60,21 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     </p>
 
     <UForm :schema="schema" :state="state" @submit="onSubmit">
-      <UFormGroup label="Adresse courriel">
-        <UInput placeholder="Adresse courriel" name="mail" type="mail" v-model="state.mail" />
+      <UFormGroup label="Adresse courriel" eager-validation>
+        <UInput placeholder="Adresse courriel" name="mail" type="email" v-model="state.mail" />
       </UFormGroup>
 
-      <UFormGroup label="Password">
+      <UFormGroup label="Password" eager-validation>
         <UInput placeholder="Password" type="password" v-model="state.password" />
       </UFormGroup>
-      <UMeter :value="strenght" :max="100">
-        <template #label="{ percent }">
-          <p class="text-sm font-thin">
-            le mot de passe est fort
-          </p>
-        </template>
-      </UMeter>
+      <PasswordStrength v-model="state.password" />
 
       <div class="flex md:flex-row flex-col gap-4">
-        <UFormGroup label="Prénom" class="flex-1">
+        <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">
+        <UFormGroup label="Nom de famille" class="flex-1" eager-validation>
           <UInput placeholder="Nom de famille" name="lastname" v-model="state.lastname" />
         </UFormGroup>
       </div>