@plutocms/supabase 0.0.1-alpha.10 → 0.0.1-alpha.12

package/app/composables/auth.ts

@@ -5,6 +5,8 @@ interface PlutoSupabaseAuthOptions {
 }
 
 export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
+  const toast = useToast()
+
   const supabase = useSupabaseClient()
   const supabaseSession = useSupabaseSession()
 
@@ -31,6 +33,13 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       if (error) {
         console.error(`Error signing in user: ${error?.message}`)
 
+        toast.add({
+          title: 'Could not log in',
+          description: error?.message,
+          icon: 'lucide:circle-x',
+          color: 'error',
+        })
+
         isSubmitting.value = false
 
         return
@@ -76,6 +85,12 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
 
     if (options?.showToast) {
       console.warn(`User logged out`)
+
+      toast.add({
+        title: 'Logged out successfully',
+        icon: 'lucide:check',
+        color: 'success',
+      })
     }
 
     if (options?.redirectTo) {

package/app/middleware/auth.ts

@@ -19,6 +19,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   if (
     !isLoggedIn.value &&
     to.path.startsWith('/admin') &&
+    to.path !== '/admin/confirm' &&
     to.path !== '/admin/signup' &&
     to.path !== '/admin/login'
   ) {

package/app/pages/admin/(auth)/confirm.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+})
+
+useHead({
+  title: 'Account Verification',
+})
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <UCard class="w-100">
+      <div class="space-y-6 py-10">
+        <div class="text-center space-y-4">
+          <hgroup class="flex flex-col gap-y-1">
+            <span class="text-5xl">
+              <UIcon name="lucide:mail-check" class="inline-block" />
+            </span>
+
+            <h1 class="text-3xl font-bold">Account verified!</h1>
+          </hgroup>
+
+          <p>
+            Your account has been successfully verified. You can now start using
+            the Dashboard.
+          </p>
+
+          <div class="flex items-center justify-center gap-x-4">
+            <UButton to="/admin" color="primary" icon="lucide:layout-dashboard">
+              Go to Dashboard
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>

package/app/pages/admin/(auth)/signup.vue

@@ -7,6 +7,8 @@ useHead({
   title: 'Sign Up',
 })
 
+const toast = useToast()
+
 const form = ref({
   email: '',
   username: '',
@@ -21,12 +23,15 @@ const passwordMatch = computed(() => {
   return form.value.password === form.value.confirm_password
 })
 
+const isEmailVerificationMessageVisible = ref<boolean>(false)
+
 async function submitForm() {
   if (!passwordMatch.value) {
     return
   }
 
   isSubmitting.value = true
+
   try {
     await $fetch('/api/signup', {
       method: 'POST',
@@ -38,9 +43,24 @@ async function submitForm() {
       },
     })
 
-    navigateTo('/admin/login?rel=new')
+    toast.add({
+      title: 'Account created successfully',
+      description: 'You still need to verify your email before you can log in.',
+      icon: 'lucide:check',
+      color: 'success',
+    })
+
+    isEmailVerificationMessageVisible.value = true
   } catch (error) {
     console.error('Error signing up:', error)
+
+    toast.add({
+      title: 'Could not create account',
+      description:
+        error instanceof Error ? error.message : 'An unknown error occurred.',
+      icon: 'lucide:circle-x',
+      color: 'error',
+    })
   } finally {
     isSubmitting.value = false
   }
@@ -50,11 +70,45 @@ async function submitForm() {
 <template>
   <div class="grid h-full place-items-center">
     <UCard class="w-100">
-      <form @submit.prevent="submitForm">
+      <div v-if="isEmailVerificationMessageVisible" class="space-y-6 py-10">
+        <div class="text-center space-y-4">
+          <hgroup class="flex flex-col gap-y-1">
+            <span class="text-5xl">
+              <UIcon name="lucide:mail-warning" class="inline-block" />
+            </span>
+
+            <h1 class="text-3xl font-bold">Almost there!</h1>
+          </hgroup>
+
+          <p>
+            A verification link has been sent to your email. Please check your
+            inbox and follow the instructions to verify your account.
+          </p>
+
+          <UAlert icon="lucide:check" color="success" variant="outline">
+            <template #description>
+              You can close this page. You will be logged in automatically once
+              you verify your email.
+            </template>
+          </UAlert>
+
+          <UAlert
+            icon="lucide:alert-triangle"
+            color="warning"
+            variant="outline"
+          >
+            <template #description>
+              If you don't see the email, please check your spam folder.
+            </template>
+          </UAlert>
+        </div>
+      </div>
+
+      <form v-else @submit.prevent="submitForm">
         <div class="flex flex-col gap-y-6">
           <h1 class="text-3xl font-bold">Create Account</h1>
 
-          <UFormField label="Email">
+          <UFormField label="Email" required>
             <UInput
               v-model="form.email"
               type="email"
@@ -65,7 +119,7 @@ async function submitForm() {
           </UFormField>
 
           <div class="flex gap-x-4">
-            <UFormField label="Username">
+            <UFormField label="Username" required>
               <UInput
                 v-model="form.username"
                 placeholder="e.g: johndoe"
@@ -75,7 +129,7 @@ async function submitForm() {
               />
             </UFormField>
 
-            <UFormField label="Display Name">
+            <UFormField label="Display Name" required>
               <UInput
                 v-model="form.display_name"
                 placeholder="e.g: John Doe"
@@ -85,7 +139,7 @@ async function submitForm() {
             </UFormField>
           </div>
 
-          <UFormField :error="!passwordMatch" label="Password">
+          <UFormField :error="!passwordMatch" label="Password" required>
             <UInput
               v-model="form.password"
               placeholder="••••"
@@ -95,7 +149,7 @@ async function submitForm() {
             />
           </UFormField>
 
-          <UFormField :error="!passwordMatch" label="Confirm Password">
+          <UFormField :error="!passwordMatch" label="Confirm Password" required>
             <UInput
               v-model="form.confirm_password"
               placeholder="••••"