feat(account): add forgot password page

components/account/AccountLoginInner.vue

@@ -16,18 +16,20 @@ const emits = defineEmits<{
     login: [loginData: LoginData];
 }>();
 
+const closeDialog = inject('closeDialog');
+
 const { t } = useI18n();
 
 const schema = z.object({
     username: z
         .string({
-            required_error: t('account.login.email.error'),
+            required_error: t('account.email.error'),
         })
         .email(),
 
     password: z
         .string({
-            required_error: t('account.login.password.errorGeneral'),
+            required_error: t('account.password.errorGeneral'),
         }),
 });
 export type LoginData = z.infer<typeof schema>;
@@ -44,26 +46,30 @@ const login = async (loginData: LoginData) => {
         :schema="schema"
         :field-config="{
             username: {
-                label: $t('account.login.email.label'),
+                label: $t('account.email.label'),
                 inputProps: {
                     type: 'email',
-                    placeholder: $t('account.login.email.placeholder'),
+                    placeholder: $t('account.email.placeholder'),
                 },
             },
             password: {
-                label: $t('account.login.password.label'),
+                label: $t('account.password.label'),
                 inputProps: {
                     type: 'password',
-                    placeholder: $t('account.login.password.placeholder'),
+                    placeholder: $t('account.password.placeholder'),
                 },
             },
         }"
         @submit="login"
     >
         <div class="mt-0! grid">
             <slot name="password-forgotten">
-                <NuxtLinkLocale to="/account/todo" class="mb-6 justify-self-start py-2 text-sm underline underline-offset-4">
-                    {{ $t('account.login.password.forgotten') }}
+                <NuxtLinkLocale
+                    to="/account/recover"
+                    class="mb-6 justify-self-start py-2 text-sm underline underline-offset-4"
+                    @click="closeDialog?.()"
+                >
+                    {{ $t('account.password.forgotten') }}
                 </NuxtLinkLocale>
             </slot>
 

components/account/AccountRecover.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { RecoverData } from './AccountRecoverInner.vue';
+
+const isLoading = ref(false);
+const showSuccessMessage = ref(false);
+
+const customerStore = useCustomerStore();
+const { getStorefrontUrl } = useInternationalization();
+
+const recover = async (recoverData: RecoverData) => {
+    isLoading.value = true;
+
+    try {
+        await customerStore.resetPassword({
+            ...recoverData,
+            storefrontUrl: getStorefrontUrl(),
+        });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+        // catch but do nothing
+    } finally {
+        showSuccessMessage.value = true;
+        isLoading.value = false;
+    }
+};
+</script>
+
+<template>
+    <AccountRecoverInner
+        :is-loading="isLoading"
+        :show-success-message="showSuccessMessage"
+        @recover="(recoverData: RecoverData) => recover(recoverData)"
+    />
+</template>

components/account/AccountRecoverInner.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import * as z from 'zod';
+const { t } = useI18n();
+
+withDefaults(
+    defineProps<{
+        isLoading?: boolean;
+        showSuccessMessage?: boolean;
+    }>(),
+    {
+        isLoading: false,
+        showSuccessMessage: false,
+    },
+);
+
+const emits = defineEmits<{
+    recover: [recoverData: RecoverData];
+}>();
+
+const schema = z.object({
+    email: z
+        .string({
+            required_error: t('account.email.error'),
+        })
+        .email(),
+});
+
+export type RecoverData = z.infer<typeof schema>;
+
+const recover = (recoverData: RecoverData) => {
+    emits('recover', recoverData);
+};
+</script>
+
+<template>
+    <slot name="wrapper">
+        <div v-auto-animate>
+            <slot name="success-message">
+                <template v-if="showSuccessMessage">
+                    <UiAlert variant="successful" class="mb-4 flex gap-4">
+                        <slot name="alert-icon">
+                            <Icon name="mdi:check" class="size-4 shrink-0" />
+                        </slot>
+
+                        <div>
+                            <UiAlertTitle>{{ $t('account.recover.successHeader') }}</UiAlertTitle>
+                            <UiAlertDescription>
+                                {{ $t('account.recover.successMessage') }}
+                            </UiAlertDescription>
+                        </div>
+                    </UiAlert>
+                </template>
+            </slot>
+
+            <slot name="header">
+                <h1 class="text-lg font-semibold">{{ $t('account.recover.header') }}</h1>
+                <hr>
+            </slot>
+
+            <slot name="info-text">
+                <p class="pb-4 pt-2 text-sm">{{ $t('account.recover.information') }}</p>
+            </slot>
+
+            <slot name="form">
+                <UiAutoForm
+                    class="space-y-6"
+                    :schema="schema"
+                    :field-config="{
+                        email: {
+                            label: $t('account.email.label'),
+                            inputProps: {
+                                type: 'email',
+                                placeholder: $t('account.email.placeholder'),
+                            },
+                        }
+                    }"
+                    @submit="recover"
+                >
+                    <slot name="buttons">
+                        <div class="flex flex-wrap gap-4">
+                            <slot name="back-button">
+                                <UiButton variant="outline" class="w-fit grow sm:grow-0">
+                                    <NuxtLinkLocale to="/account/login">{{ $t('account.recover.backButton') }}</NuxtLinkLocale>
+                                </UiButton>
+                            </slot>
+
+                            <slot name="submit-button">
+                                <UiButton type="submit" :is-loading="isLoading" class="min-w-52 grow">
+                                    {{ $t('account.recover.submitButton') }}
+                                </UiButton>
+                            </slot>
+                        </div>
+                    </slot>
+                </UiAutoForm>
+            </slot>
+        </div>
+    </slot>
+</template>

components/layout/header/LayoutHeaderAccountInner.vue

@@ -13,6 +13,12 @@ defineEmits<{
 }>();
 
 const { formatLink } = useInternationalization();
+
+const dialogOpen = ref(true);
+
+provide('closeDialog', () => {
+    dialogOpen.value = false;
+});
 </script>
 
 <template>
@@ -104,7 +110,7 @@ const { formatLink } = useInternationalization();
             <!-- guest view -->
             <template v-else>
                 <slot name="guest">
-                    <UiDialog>
+                    <UiDialog v-model:open="dialogOpen">
                         <UiDialogTrigger class="w-full">
                             <slot name="action-login">
                                 <UiDropdownMenuItem class="cursor-pointer" @select.prevent="">

components/ui/alert/index.ts

@@ -11,6 +11,7 @@ export const alertVariants = cva(
             variant: {
                 default: 'bg-white text-gray-950',
                 destructive: 'border-red-500/50 text-red-500',
+                successful: 'border-green-500/50 text-green-500',
             },
         },
         defaultVariants: {

docs/.vitepress/config.ts

@@ -32,6 +32,7 @@ export default defineConfig({
                 items: [
                     { text: 'CMS System', link: '/how-to/cms-system' },
                     { text: 'Error Handling', link: '/how-to/error-handling'},
+                    { text: 'Account Management', link: '/how-to/account-management'},
                 ],
             },
         ],