Init

resources/js/Pages/Auth/ResetPassword.vue

@@ -0,0 +1,105 @@
+<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 props = defineProps<{
+  email: string
+  token: string
+}>()
+
+const { config } = useAuth()
+
+const form = useForm({
+  token: props.token,
+  email: props.email,
+  password: '',
+  password_confirmation: '',
+})
+
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true,
+  },
+  {
+    name: 'password',
+    type: 'password',
+    label: 'New password',
+    placeholder: 'Enter your new password',
+    required: true,
+  },
+  {
+    name: 'password_confirmation',
+    type: 'password',
+    label: 'Confirm password',
+    placeholder: 'Confirm your new password',
+    required: true,
+  },
+]
+
+const schema = v.pipe(
+  v.object({
+    email: v.pipe(v.string('Email is required'), v.nonEmpty('Email is required'), v.email('Please enter a valid email')),
+    password: v.pipe(v.string('Password is required'), v.nonEmpty('Password is required'), v.minLength(8, 'Password must be at least 8 characters')),
+    password_confirmation: v.pipe(v.string('Please confirm your password'), v.nonEmpty('Please confirm your password')),
+  }),
+  v.forward(
+    v.partialCheck(
+      [['password'], ['password_confirmation']],
+      input => input.password === input.password_confirmation,
+      'Passwords do not match',
+    ),
+    ['password_confirmation'],
+  ),
+)
+
+type Schema = v.InferOutput<typeof schema>
+
+function onSubmit(event: FormSubmitEvent<Schema>) {
+  form.email = event.data.email
+  form.password = event.data.password
+  form.password_confirmation = event.data.password_confirmation
+
+  form.post('/reset-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.resetPassword.submit_label, loading: form.processing }"
+      :disabled="form.processing"
+      :ui="{ header: 'hidden' }"
+      @submit="onSubmit"
+    >
+      <template v-if="hasErrors" #validation>
+        <UAlert
+          color="error"
+          icon="i-lucide-alert-circle"
+          :title="firstError"
+        />
+      </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>