feat(account): add forgot password page

components/account/AccountLoginInner.vue

@@ -21,13 +21,13 @@ 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>;
@@ -43,26 +43,26 @@ 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">
+                    {{ $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/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/features/account-management.md

@@ -0,0 +1,83 @@
+# Account management
+
+## Account Recovery
+
+The **Account Recovery** page provides users with a secure way to initiate a password reset via email. When a user submits an email address:
+
+- If the email is **registered**, a recovery link is sent and a generic success message is displayed.
+- If the email is **not registered**, a generic success message is still displayed to prevent account enumeration.
+
+### Component Structure
+
+This page is composed of layered components:
+
+1. **`pages/account/recover.vue`** – wraps the recovery component in a responsive layout.
+
+2. **`components/account/AccountRecover.vue`** – manages the logic, loading state, and message display.
+
+3. **`components/account/AccountRecoverInner.vue`** – provides the form UI and emits the form submission event. Customizable via **named slots**.
+
+---
+
+### Named Slots
+
+The `AccountRecoverInner.vue` component exposes several named slots for UI customization:
+
+| Slot Name         | Description                                                  |
+|-------------------|--------------------------------------------------------------|
+| `wrapper`         | Wraps the component, including form and messages             |
+| `success-message` | Overrides the default success alert                          |
+| `alert-icon`      | Overrides the default success alert icon                     |
+| `header`          | Overrides the default heading                                |
+| `info-text`       | Overrides the informational text displayed below the heading |
+| `form`            | Wraps the form                                               |
+| `buttons`         | Wraps the buttons                                            |
+| `back-button`     | Overrides the back to login button                           |
+| `submit-button`   | Overrides the submit button                                  |
+
+---
+
+### Props
+
+`AccountRecoverInner.vue` accepts two optional props:
+
+| Prop Name            | Type      | Description                                 |
+|----------------------|-----------|---------------------------------------------|
+| `isLoading`          | `boolean` | Controls a loading spinner on submit button |
+| `showSuccessMessage` | `boolean` | Controls whether the success message shows  |
+
+---
+
+### Events
+
+| Event Name | Payload               | Description                      |
+|------------|-----------------------|----------------------------------|
+| `recover`  | `{ email: string }`   | Emitted when form is submitted   |
+
+---
+
+### Usage Example: Custom Header & Message
+
+```vue
+<AccountRecoverInner>
+    <template #header>
+        <h1 class="text-2xl font-bold text-primary">Reset Your Password</h1>
+        <p class="text-sm text-gray-500">Enter your email to receive a recovery link.</p>
+        <hr class="my-4" />
+    </template>
+
+    <template #success-message>
+        <UiAlert variant="successful" class="mb-4">
+            <Icon name="mdi:check" class="mr-2" />
+            <span>We've sent a link to your inbox—check your email!</span>
+        </UiAlert>
+    </template>
+</AccountRecoverInner>
+```
+
+### Technical Notes
+
+This component uses the `resetPassword` method from the `useCustomerPassword` composable under the hood.
+
+You can learn more about the `useCustomerPassword` composable in the Shopware Frontends documentation:  [Shopware Frontends – useCustomerPassword](https://frontends.shopware.com/packages/composables/useCustomerPassword.html)
+

i18n/locales/de-DE/account.json

@@ -13,19 +13,25 @@
             "register": "Registrieren",
             "logout": "Abmelden"
         },
-        "login": {
-            "email": {
-                "label": "Ihre E-Mail-Adresse",
-                "placeholder": "E-Mail-Adresse",
-                "error": "Bitte geben Sie eine valide E-Mail-Adresse ein"
-            },
-            "password": {
-                "label": "Ihr Passwort",
-                "placeholder": "••••••••",
-                "forgotten": "Passwort vergessen",
-                "errorGeneral": "Bitte geben Sie ein Password ein",
-                "errorLength": "Ihr Passwort muss mind. {length} Zeichen lang sein"
-            }
+        "email": {
+            "label": "Ihre E-Mail-Adresse",
+            "placeholder": "E-Mail-Adresse",
+            "error": "Bitte geben Sie eine valide E-Mail-Adresse ein"
+        },
+        "password": {
+            "label": "Ihr Passwort",
+            "placeholder": "••••••••",
+            "forgotten": "Passwort vergessen",
+            "errorGeneral": "Bitte geben Sie ein Passwort ein",
+            "errorLength": "Ihr Passwort muss mind. {length} Zeichen lang sein"
+        },
+        "recover": {
+            "header": "Passwort-Wiederherstellung",
+            "information": "Wir senden Ihnen eine Bestätigungs-E-Mail. Klicken Sie auf den darin enthaltenen Link, um Ihr Passwort zu ändern.",
+            "submitButton": "E-Mail anfordern",
+            "backButton": "Zurück zum Login",
+            "successHeader": "E-Mail gesendet",
+            "successMessage": "Eine Bestätigungs-E-Mail mit einem Link zum Zurücksetzen des Passworts wurde versandt, wenn die angegebene E-Mail-Adresse registriert ist."
         },
         "customer": {
             "accountType": "Accounttyp",
@@ -87,4 +93,4 @@
             }
         }
     }
-}
+}

i18n/locales/en-GB/account.json

@@ -13,19 +13,25 @@
             "register": "Sign up",
             "logout": "Logout"
         },
-        "login": {
-            "email": {
-                "label": "Your Email Address",
-                "placeholder": "Email address",
-                "error": "Please enter a valid email address"
-            },
-            "password": {
-                "label": "Your Password",
-                "placeholder": "••••••••",
-                "forgotten": "Password forgotten",
-                "errorGeneral": "Please enter a password",
-                "errorLength": "Your password must be at least {length} characters long"
-            }
+        "email": {
+            "label": "Your Email Address",
+            "placeholder": "Email address",
+            "error": "Please enter a valid email address"
+        },
+        "password": {
+            "label": "Your Password",
+            "placeholder": "••••••••",
+            "forgotten": "Password forgotten",
+            "errorGeneral": "Please enter a password",
+            "errorLength": "Your password must be at least {length} characters long"
+        },
+        "recover": {
+            "header": "Password recovery",
+            "information": "We will send you a confirmation email. Click the link in that email in order to change your password.",
+            "submitButton": "Request email",
+            "backButton": "Back to login",
+            "successHeader": "Email sent",
+            "successMessage": "A confirmation email with a password reset link has been sent if the email address provided is registered."
         },
         "customer": {
             "accountType": "Account type",

pages/account/recover.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="container relative flex justify-center py-4">
+        <div class="w-full md:w-2/3 xl:w-1/2">
+            <AccountRecover />
+        </div>
+    </div>
+</template>