✨ 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>

modules/app/pages/signin/confirm.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Database } from '@pel/supabase/types'
+
+const user = useSupabaseUser()
+const { auth } = useSupabaseClient<Database>()
+
+watch(user, () => {
+  if (user.value)
+    return navigateTo('/')
+}, { immediate: true })
+
+onMounted(async () => {
+  const token_hash = window.location.hash.replace('#', '')
+  const type = 'signup'
+
+  const { error } = await auth.verifyOtp({ token_hash, type })
+  if (error) console.log(error)
+})
+</script>
+
+<template>
+  <div>
+    <p class="u-text-black">
+      Redirecting...
+    </p>
+  </div>
+</template>

modules/app/pages/signin/index.vue

@@ -1,12 +1,49 @@
 <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: 'Signin',
 })
 
+const user = useSupabaseUser()
+const { auth } = useSupabaseClient<Database>()
+
+const schema = object({
+  mail: string().email('Invalid email').required('Required'),
+  password: string().required('Required'),
+})
+
+type Schema = InferType<typeof schema>
+
 const state = reactive({
   mail: undefined,
   password: undefined,
 })
+
+async function onSignin(event: FormSubmitEvent<Schema>) {
+  const formSubmit = event.data
+
+  const { data, error } = await auth.signInWithPassword({
+    email: formSubmit.mail,
+    password: formSubmit.password
+  })
+
+  // TODO: add possibility to signin with magic link -> signInWithOtp
+  // const { data, error } = await auth.signInWithOtp({
+  //   email: 'example@email.com',
+  //   options: {
+  //     // set this to false if you do not want the user to be automatically signed up
+  //     shouldCreateUser: false,
+  //     emailRedirectTo: 'https://example.com/welcome',
+  //   },
+  // })
+
+  // TODO confirm signin
+
+  if (error) console.log(error)
+}
 </script>
 
 <template>
@@ -14,7 +51,7 @@ const state = reactive({
   <UCard>
     <h1 class="text-2xl uppercase">Qui êtes-vous ?</h1>
 
-    <UForm :state="state">
+    <UForm :state="state" @submit="onSignin">
       <UFormGroup label="Adresse courriel">
         <UInput name="mail" v-model="state.mail" />
       </UFormGroup>