✨ Complete all user management with forms and DB

modules/app/composables/auth.ts

@@ -0,0 +1,13 @@
+export const useAuth = () => {
+  const user = useSupabaseUser()
+  const { auth } = useSupabaseClient()
+
+  auth.onAuthStateChange(async (event) => {
+    if (event === 'SIGNED_OUT')
+      navigateTo('/')
+  })
+
+  return {
+    user
+  }
+}

modules/app/composables/foStyle.ts

@@ -0,0 +1,20 @@
+export const useFoStyle = () => {
+  return {
+    inputStyle: {
+      ui: {
+        placeholder: 'placeholder-transparent',
+      },
+      attrs: {
+        variant: 'none'
+      }
+    },
+    formGroupStyle: {
+      ui: {
+        wrapper: 'flex flex-col md:flex-row rounded-lg py-1 px-4 border-b-2 border-orange-500 has-[:focus]:bg-orange-100 has-[:focus]:border-t-2 has-[:focus]:border-x-2 has-[:focus]:border-b-0 mb-6',
+        inner: 'flex-2 content-center',
+        container: 'flex-1 mt-auto relative',
+        error: 'text-red-500 text-sm absolute top[-100%] left-0 mt-2 pointer-events-none',
+      },
+    },
+  }
+}

modules/app/composables/passwordStrength.ts

@@ -2,7 +2,7 @@ import { zxcvbn, zxcvbnOptions, type ZxcvbnResult } from '@zxcvbn-ts/core'
 import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
 import * as zxcvbnEnPackage from '@zxcvbn-ts/language-fr'
 
-export const usePasswordStrength = (password: Ref<string | undefined>) => {
+export const usePasswordStrength = (password?: Ref<string | undefined>) => {
 
   // 0 # too guessable: risky password. (guesses < 10 ^ 3)
   // 1 # very guessable: protection from throttled online attacks. (guesses < 10 ^ 6)
@@ -25,18 +25,25 @@ export const usePasswordStrength = (password: Ref<string | undefined>) => {
 
   zxcvbnOptions.setOptions(options)
 
-  watchDebounced(password, (newPassword) => {
-    if (!newPassword) {
-      strength.value = {
-        score: 0,
-      }
-      return
-    }
+  function testPassword(password: string) {
+    return zxcvbn(password.trim())
+  }
 
-    strength.value = zxcvbn(newPassword.trim())
-  }, { immediate: true, debounce: 500 })
+  if (password) {
+    watchDebounced(password, (newPassword) => {
+      if (!newPassword) {
+        strength.value = {
+          score: 0,
+        }
+        return
+      }
+
+      strength.value = zxcvbn(newPassword.trim())
+    }, { immediate: true, debounce: 500 })
+  }
 
   return {
     strength,
+    testPassword,
   }
 } 

modules/app/composables/profile.ts

@@ -0,0 +1,66 @@
+export const useProfile = () => {
+  const user = useSupabaseUser()
+  const client = useSupabaseClient()
+  const toast = useToast()
+
+  const loading = ref(false)
+  const profile = ref<{
+    firstname: string
+    lastname: string
+    displayname?: string
+  } | null>(null)
+
+  const displayName = computed(() => {
+    if (!profile.value) {
+      return '...'
+    }
+
+    const { firstname, lastname, displayname } = profile.value || {}
+
+    if (!displayname) {
+      return `${firstname || ''} ${lastname || ''}`.trim()
+    }
+
+    return displayname
+  })
+
+  const waitingMailValidation = computed(() => {
+    return user.value && !user.value?.email_confirmed_at
+  })
+
+
+  async function getProfile() {
+    loading.value = true
+
+    const { data, error } = await useAsyncData('profiles', async () => {
+      if (!user.value) {
+        return
+      }
+
+      const { data, error } = await client.from('profiles').select('id,firstname,lastname,displayname,mail').eq('id', user.value.id).single()
+      return data
+    })
+
+    if (error.value) {
+      toast.add({ color: 'red', description: error.value?.message, title: 'Error' })
+    } else {
+      profile.value = data.value
+    }
+
+    loading.value = false
+  }
+
+  watch(user, (user) => {
+    if (user && !loading.value) {
+      getProfile()
+    }
+  }, { immediate: true })
+
+  return {
+    user,
+    loading,
+    profile,
+    displayName,
+    waitingMailValidation,
+  }
+}