Initial commit

nuxt/pages/forgot-password/index.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['guest'], layout: 'auth' })
+
+const form = ref();
+
+const state = reactive({
+  email: "",
+});
+
+const { refresh: onSubmit, status: forgotStatus } = useFetch<any>("forgot-password", {
+  method: "POST",
+  body: state,
+  immediate: false,
+  watch: false,
+  async onResponse({ response }) {
+    if (response?.status === 422) {
+      form.value.setErrors(response._data?.errors);
+    } else if (response._data?.ok) {
+      useToast().add({
+        title: "Success",
+        description: response._data.message,
+        color: "emerald",
+      });
+    }
+  }
+});
+</script>
+
+<template>
+  <UMain>
+    <UPage>
+      <div class="mx-auto flex min-h-screen w-full items-center justify-center">
+        <UCard class="w-96">
+          <template #header>
+            <div class="space-y-4 text-center ">
+              <h1 class="text-2xl font-bold">
+                Forgot Password
+              </h1>
+              <p class="text-sm">
+                Remember your password? <NuxtLink to="/login" class="text-primary hover:text-primary-300 font-semibold">
+                  Login here
+                </NuxtLink>
+              </p>
+            </div>
+          </template>
+
+          <UForm ref="form" :state="state" class="space-y-8" @submit="onSubmit">
+            <UFormGroup label="Email" name="email">
+              <UInput v-model="state.email" />
+            </UFormGroup>
+
+            <UButton block size="md" type="submit" :loading="forgotStatus === 'pending'" icon="i-heroicons-envelope">
+              Reset Password
+            </UButton>
+          </UForm>
+
+          <!-- <UDivider label="OR" class=" my-4"/> -->
+        </UCard>
+      </div>
+    </UPage>
+  </UMain>
+</template>