initial commit. Cloned timetracker repository

bo/src/views/ResetPasswordForm.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } 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 route = useRoute()
+const authStore = useAuthStore()
+const validation = useValidation()
+
+const new_password = ref('')
+const confirm_new_password = ref('')
+const showNewPassword = ref(false)
+const showConfirmPassword = ref(false)
+const resetToken = ref('')
+const submitted = ref(false)
+
+onMounted(() => {
+    resetToken.value = (route.query.token as string) || ''
+    if (!resetToken.value) {
+        router.push({ name: 'password-recovery' })
+    }
+})
+
+async function handleReset() {
+    const success = await authStore.resetPassword(resetToken.value, new_password.value)
+    if (success) {
+        submitted.value = true
+    }
+}
+
+function goToLogin() {
+    router.push({ name: 'login' })
+}
+
+function validate(): FormError[] {
+    validation.reset()
+    validation.validatePasswords(
+        new_password,
+        'new_password',
+        confirm_new_password,
+        'confirm_new_password',
+        i18n.t('validate_error.confirm_password_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-check-circle" class="w-12 h-12 mx-auto text-green-500" />
+                    <h2 class="text-xl font-semibold dark:text-white text-black">
+                        {{ $t('general.password_updated') }}
+                    </h2>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">
+                        {{ $t('general.password_updated_description') }}
+                    </p>
+                    <UButton block @click="goToLogin" class="dark:text-white text-black">
+                        {{ $t('general.back_to_sign_in') }}
+                    </UButton>
+                </div>
+            </template>
+
+            <!-- Form State -->
+            <template v-else>
+                <UForm :validate="validate" @submit="handleReset" 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.new_password')" name="new_password" required class="w-full dark:text-white text-black">
+                        <UInput v-model="new_password" :type="showNewPassword ? 'text' : 'password'"
+                            :placeholder="$t('general.enter_your_new_password')" :disabled="authStore.loading"
+                            class="w-full dark:text-white text-black" :ui="{ trailing: 'pe-1' }">
+                            <template #trailing>
+                                <UIcon color="neutral" variant="link" size="sm"
+                                    :name="showNewPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                                    :aria-label="showNewPassword ? 'Hide password' : 'Show password'"
+                                    :aria-pressed="showNewPassword" aria-controls="new_password"
+                                    @click="showNewPassword = !showNewPassword" />
+                            </template>
+                        </UInput>
+                    </UFormField>
+
+                    <UFormField :label="$t('general.confirm_password')" name="confirm_new_password" required
+                        class="w-full dark:text-white text-black">
+                        <UInput v-model="confirm_new_password" :type="showConfirmPassword ? 'text' : 'password'"
+                            :placeholder="$t('general.confirm_your_new_password')" :disabled="authStore.loading"
+                            class="w-full dark:text-white text-black" :ui="{ trailing: 'pe-1' }">
+                            <template #trailing>
+                                <UIcon color="neutral" variant="ghost" size="sm"
+                                    :name="showConfirmPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                                    @click="showConfirmPassword = !showConfirmPassword" />
+                            </template>
+                        </UInput>
+                    </UFormField>
+
+                    <UButton type="submit" block :loading="authStore.loading" class="text-white! bg-(--color-blue-600) dark:bg-(--color-blue-500)">
+                        {{ $t('general.reset_password') }}
+                    </UButton>
+
+                    <div class="text-center border-t dark:border-(--border-dark) border-(--border-light) pt-4">
+                        <UButton color="neutral" variant="ghost" @click="goToLogin" class="dark:text-white text-black">
+                            {{ $t('general.back_to_sign_in') }}
+                        </UButton>
+                    </div>
+                </UForm>
+            </template>
+
+        </div>
+    </div>
+</template>