@plutocms/supabase 0.0.1-alpha.13 → 0.0.1-alpha.15

package/app/assets/css/tailwind.css

@@ -0,0 +1,2 @@
+@import '@nuxt/ui' source(none);
+@import 'tailwindcss' source(none);

package/app/composables/auth.ts

@@ -100,6 +100,72 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
     if (authOptions?.route && authOptions.route.path.startsWith('/admin')) {
       return navigateTo('/admin/login')
     }
+
+    return navigateTo('/admin/login')
+  }
+
+  async function requestPasswordReset(email: string) {
+    isSubmitting.value = true
+
+    try {
+      await $fetch('/api/auth/reset-password', {
+        method: 'POST',
+        body: { email },
+      })
+
+      return { success: true }
+    } catch (error) {
+      toast.add({
+        title: 'Could not send reset email',
+        description:
+          error instanceof Error ? error.message : 'An unknown error occurred.',
+        icon: 'lucide:circle-x',
+        color: 'error',
+      })
+
+      return { success: false }
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+
+  async function updatePassword(password: string) {
+    isSubmitting.value = true
+
+    try {
+      const { error } = await supabase.auth.updateUser({ password })
+
+      if (error) {
+        toast.add({
+          title: 'Could not update password',
+          description: error.message,
+          icon: 'lucide:circle-x',
+          color: 'error',
+        })
+
+        return { success: false }
+      }
+
+      toast.add({
+        title: 'Password updated successfully',
+        icon: 'lucide:check',
+        color: 'success',
+      })
+
+      return { success: true }
+    } catch (error) {
+      toast.add({
+        title: 'Could not update password',
+        description:
+          error instanceof Error ? error.message : 'An unknown error occurred.',
+        icon: 'lucide:circle-x',
+        color: 'error',
+      })
+
+      return { success: false }
+    } finally {
+      isSubmitting.value = false
+    }
   }
 
   return {
@@ -108,5 +174,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
     user,
     login,
     logout,
+    requestPasswordReset,
+    updatePassword,
   }
 }

package/app/middleware/auth.ts

@@ -5,10 +5,15 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
     route: to as RouteLocationNormalizedGeneric,
   })
 
-  if (
-    isLoggedIn.value &&
-    (to.path === '/admin/login' || to.path === '/admin/signup')
-  ) {
+  const allowedUnauthenticatedPaths = [
+    '/admin/login',
+    '/admin/signup',
+    '/admin/confirm',
+    '/admin/setup',
+    '/admin/forgot-password',
+  ]
+
+  if (isLoggedIn.value && allowedUnauthenticatedPaths.includes(to.path)) {
     return navigateTo(
       to.query.redirect
         ? decodeURIComponent(to.query.redirect as string)
@@ -19,14 +24,15 @@ 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'
+    !allowedUnauthenticatedPaths.includes(to.path)
   ) {
     if (from.query.redirect) {
-      logout({ redirectTo: from.query.redirect as string, showToast: true })
+      return logout({
+        redirectTo: from.query.redirect as string,
+        showToast: true,
+      })
     } else {
-      logout()
+      return logout()
     }
   }
 })

package/app/pages/admin/(auth)/forgot-password.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+})
+
+useHead({
+  title: 'Forgot Password',
+})
+
+const { isSubmitting, requestPasswordReset } = await useAuth()
+
+const email = ref('')
+const isEmailSent = ref(false)
+
+async function submitForm() {
+  const result = await requestPasswordReset(email.value)
+
+  if (result.success) {
+    isEmailSent.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <UCard class="w-100">
+      <div v-if="isEmailSent" 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" class="inline-block" />
+            </span>
+
+            <h1 class="text-3xl font-bold">Check your inbox</h1>
+          </hgroup>
+
+          <p>
+            If an account exists for <strong>{{ email }}</strong
+            >, a password reset link has been sent. Check your email and follow
+            the link.
+          </p>
+
+          <div class="flex items-center justify-center">
+            <UButton variant="link" to="/admin/login" class="px-0">
+              Back to Login
+            </UButton>
+          </div>
+        </div>
+      </div>
+
+      <form v-else @submit.prevent="submitForm">
+        <div class="flex flex-col gap-y-6">
+          <hgroup class="flex flex-col gap-y-1">
+            <h1 class="text-3xl font-bold">Forgot Password</h1>
+            <p class="text-sm text-muted">
+              Enter your email and we'll send you a reset link.
+            </p>
+          </hgroup>
+
+          <UFormField label="Email">
+            <UInput
+              v-model="email"
+              placeholder="victor@example.com"
+              type="email"
+              class="w-full"
+              autocomplete="email"
+              required
+            />
+          </UFormField>
+
+          <div class="flex items-center justify-between gap-x-4">
+            <UFormField>
+              <UButton :loading="isSubmitting" type="submit" icon="lucide:send">
+                Send Reset Link
+              </UButton>
+            </UFormField>
+
+            <UFormField>
+              <UButton variant="link" to="/admin/login" class="px-0">
+                Back to Login
+              </UButton>
+            </UFormField>
+          </div>
+        </div>
+      </form>
+    </UCard>
+  </div>
+</template>

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

@@ -67,7 +67,7 @@ function submitForm() {
             </UFormField>
           </div>
 
-          <div>
+          <div class="flex items-center justify-between">
             <UButton
               variant="link"
               icon="lucide:arrow-left"
@@ -76,6 +76,10 @@ function submitForm() {
             >
               Back to Home
             </UButton>
+
+            <UButton variant="link" to="/admin/forgot-password" class="px-0">
+              Forgot password?
+            </UButton>
           </div>
         </div>
       </form>

package/app/pages/admin/(auth)/update-password.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+})
+
+useHead({
+  title: 'Update Password',
+})
+
+const { isSubmitting, updatePassword } = await useAuth()
+
+const form = ref({
+  password: '',
+  confirm_password: '',
+})
+
+const passwordMatch = computed(() => {
+  return form.value.password === form.value.confirm_password
+})
+
+const isPasswordUpdated = ref(false)
+
+async function submitForm() {
+  if (!passwordMatch.value) {
+    return
+  }
+
+  const result = await updatePassword(form.value.password)
+
+  if (result.success) {
+    isPasswordUpdated.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <UCard class="w-100">
+      <div v-if="isPasswordUpdated" 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:lock-keyhole" class="inline-block" />
+            </span>
+
+            <h1 class="text-3xl font-bold">Password Updated!</h1>
+          </hgroup>
+
+          <p>
+            Your password has been changed. You can now log in with your new
+            password.
+          </p>
+
+          <div class="flex items-center justify-center">
+            <UButton to="/admin/login" color="primary" icon="lucide:log-in">
+              Go to Login
+            </UButton>
+          </div>
+        </div>
+      </div>
+
+      <form v-else @submit.prevent="submitForm">
+        <div class="flex flex-col gap-y-6">
+          <hgroup class="flex flex-col gap-y-1">
+            <h1 class="text-3xl font-bold">Update Password</h1>
+            <p class="text-sm text-muted">Enter your new password below.</p>
+          </hgroup>
+
+          <UFormField label="New Password">
+            <UInput
+              v-model="form.password"
+              placeholder="••••"
+              type="password"
+              class="w-full"
+              autocomplete="new-password"
+              required
+            />
+          </UFormField>
+
+          <UFormField
+            :error="
+              form.confirm_password && !passwordMatch
+                ? 'Passwords do not match.'
+                : undefined
+            "
+            label="Confirm New Password"
+          >
+            <UInput
+              v-model="form.confirm_password"
+              placeholder="••••"
+              type="password"
+              class="w-full"
+              autocomplete="new-password"
+              required
+            />
+          </UFormField>
+
+          <div class="flex items-center justify-between gap-x-4">
+            <UFormField>
+              <UButton
+                :loading="isSubmitting"
+                :disabled="!passwordMatch"
+                type="submit"
+                icon="lucide:lock-keyhole"
+              >
+                Update Password
+              </UButton>
+            </UFormField>
+
+            <UFormField>
+              <UButton variant="link" to="/admin/login" class="px-0">
+                Back to Login
+              </UButton>
+            </UFormField>
+          </div>
+        </div>
+      </form>
+    </UCard>
+  </div>
+</template>

package/app/pages/admin/setup.vue

@@ -124,7 +124,7 @@ function handleStepChange(step: number) {
 <template>
   <UApp>
     <div class="flex justify-center items-center h-screen">
-      <UCard class="w-[500px]">
+      <UCard class="w-125">
         <div class="flex flex-col gap-y-8">
           <UStepper ref="stepper" v-model="currentStep" :items="items" linear />