initial commit. Cloned timetracker repository

bo/src/views/PasswordRecoveryView.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useValidation } from '@/composable/useValidation'
+import type { FormError } from '@nuxt/ui'
+import { useI18n } from 'vue-i18n'
+import { i18n } from '@/plugins/i18n'
+
+const { t } = useI18n()
+const router = useRouter()
+const authStore = useAuthStore()
+const validation = useValidation()
+
+const email = ref('')
+const submitted = ref(false)
+
+async function handleRecover() {
+  const success = await authStore.requestPasswordReset(email.value)
+  if (success) {
+    submitted.value = true
+  }
+}
+
+function goToLogin() {
+  router.push({ name: 'login' })
+}
+
+function goToRegister() {
+  router.push({ name: 'register' })
+}
+
+
+function validate(): FormError[] {
+  validation.reset()
+  validation.validateEmail(email, 'email', i18n.t('validate_error.email_required'))
+  return validation.errors
+}
+
+</script>
+
+<template>
+  <div class="h-[100vh] flex items-center justify-center px-4 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md flex flex-col gap-4">
+
+      <!-- Success State -->
+      <template v-if="submitted">
+        <div class="text-center flex flex-col gap-4">
+          <UIcon name="i-heroicons-envelope" class="w-12 h-12 mx-auto text-primary-500" />
+          <h2 class="text-xl font-semibold dark:text-white text-black">{{ $t('general.check_your_email') }}</h2>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {{ $t('general.password_reset_link_sent_notice') }}
+          </p>
+          <UButton color="neutral" variant="outline" block @click="goToLogin" class="dark:text-white text-black">
+            {{ $t('general.back_to_sign_in') }}
+          </UButton>
+        </div>
+      </template>
+
+      <!-- Form State -->
+      <template v-else>
+        <div class="text-center">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {{ $t('general.enter_email_for_password_reset') }}
+          </p>
+        </div>
+
+        <UForm :validate="validate" @submit="handleRecover" class="flex flex-col gap-3">
+          <UAlert v-if="authStore.error" color="error" variant="subtle" icon="i-heroicons-exclamation-triangle"
+            :title="authStore.error" :close-button="{ icon: 'i-heroicons-x-mark-20-solid', variant: 'link' }"
+            @close="authStore.clearError" />
+
+          <UFormField :label="$t('general.email_address')" name="email" required
+            class="w-full dark:text-white text-black">
+            <UInput v-model="email" :placeholder="$t('general.enter_your_email')" :disabled="authStore.loading"
+              class="w-full dark:text-white text-black" />
+          </UFormField>
+
+          <UButton type="submit" block :loading="authStore.loading"
+            class="text-white bg-(--color-blue-600) dark:bg-(--color-blue-500)">
+            {{ $t('general.send_password_reset_link') }}
+          </UButton>
+        </UForm>
+
+        <div class="text-center flex flex-col gap-3 border-t dark:border-(--border-dark) border-(--border-light) pt-4">
+          <UButton color="neutral" variant="outline" :loading="authStore.loading"
+            class="w-full flex justify-center dark:text-white text-black" @click="goToLogin">
+            {{ $t('general.back_to_sign_in') }}
+          </UButton>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {{ $t('general.dont_have_an_account') }}
+            <UButton variant="link" size="sm" @click="goToRegister"
+              class="text-(--color-blue-600) dark:text-(--color-blue-500)">{{ $t('general.create_account_now') }}
+            </UButton>
+          </p>
+        </div>
+      </template>
+
+    </div>
+  </div>
+</template>