Init

resources/js/Pages/Auth/ForgotPassword.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui'
+import { useForm } from '@inertiajs/vue3'
+import * as v from 'valibot'
+import { computed } from 'vue'
+import { useAuth } from '@/composables/useAuth'
+import AuthLayout from '@/layouts/AuthLayout.vue'
+
+const { config, flash } = useAuth()
+
+const form = useForm({
+  email: '',
+})
+
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true,
+  },
+]
+
+const schema = v.object({
+  email: v.pipe(v.string('Email is required'), v.nonEmpty('Email is required'), v.email('Please enter a valid email')),
+})
+
+type Schema = v.InferOutput<typeof schema>
+
+function onSubmit(event: FormSubmitEvent<Schema>) {
+  form.email = event.data.email
+  form.post('/forgot-password')
+}
+
+const hasErrors = computed(() => Object.keys(form.errors).length > 0)
+const firstError = computed(() => Object.values(form.errors)[0])
+</script>
+
+<template>
+  <AuthLayout>
+    <UAuthForm
+      :schema="schema"
+      :fields="fields"
+      :submit="{ label: config.forgotPassword.submit_label, loading: form.processing }"
+      :disabled="form.processing"
+      :ui="{ header: 'hidden' }"
+      @submit="onSubmit"
+    >
+      <template v-if="hasErrors || flash.status" #validation>
+        <UAlert
+          v-if="hasErrors"
+          color="error"
+          icon="i-lucide-alert-circle"
+          :title="firstError"
+        />
+        <UAlert
+          v-if="flash.status"
+          color="success"
+          icon="i-lucide-check-circle"
+          :title="flash.status"
+        />
+      </template>
+
+      <template #footer>
+        <span class="text-muted">
+          Remember your password?
+          <ULink to="/login" class="text-primary font-medium">
+            Sign in
+          </ULink>
+        </span>
+      </template>
+    </UAuthForm>
+  </AuthLayout>
+</template>