Merge pull request #28 from damienlethiec/feature/add-login-reset-password-page

feat: add themed LoginResetPassword page

Author: garronej

src/login/KcPage.tsx

@@ -13,6 +13,7 @@ const Login = lazy(() => import("./pages/Login"));
 const Register = lazy(() => import("./pages/Register"));
 const LoginUpdateProfile = lazy(() => import("./pages/LoginUpdateProfile"));
 const LoginUpdatePassword = lazy(() => import("./pages/LoginUpdatePassword"));
+const LoginResetPassword = lazy(() => import("./pages/LoginResetPassword"));
 const LoginPageExpired = lazy(() => import("./pages/LoginPageExpired"));
 const LoginVerifyEmail = lazy(() => import("./pages/LoginVerifyEmail"));
 
@@ -79,6 +80,14 @@ export default function KcPage(props: { kcContext: KcContext }) {
                                 doUseDefaultCss={false}
                             />
                         );
+                    case "login-reset-password.ftl":
+                        return (
+                            <LoginResetPassword
+                                {...{ kcContext, i18n, classes }}
+                                Template={Template}
+                                doUseDefaultCss={false}
+                            />
+                          );
                     case "login-page-expired.ftl":
                         return (
                             <LoginPageExpired

src/login/pages/LoginResetPassword.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-reset-password.ftl" });
+
+const meta = {
+    title: "login/login-reset-password.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+/**
+ * WithUsernameError:
+ * - Purpose: Tests when there is an error with the email/username input (e.g., user not found).
+ * - Scenario: Simulates the case where the user enters an invalid or non-existent email, and an error message is displayed.
+ * - Key Aspect: Ensures the email input field shows an error message when validation fails.
+ */
+export const WithUsernameError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-reset-password-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "username",
+                    getFirstError: () => "User not found."
+                }
+            }}
+        />
+    )
+};

src/login/pages/LoginResetPassword.tsx

@@ -0,0 +1,68 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import Button from "@codegouvfr/react-dsfr/Button";
+import Input from "@codegouvfr/react-dsfr/Input";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { I18n } from "../i18n";
+import type { KcContext } from "../KcContext";
+
+export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, messagesPerField } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={!messagesPerField.existsError("username")}
+            headerNode={msg("emailForgotTitle")}
+        >
+            <form
+                id="kc-reset-password-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <Input
+                        label={msgStr("email")}
+                        state={messagesPerField.existsError("username") ? "error" : "default"}
+                        stateRelatedMessage={messagesPerField.getFirstError("username")}
+                        nativeInputProps={{
+                            type: "email",
+                            id: "username",
+                            name: "username",
+                            autoFocus: true,
+                            autoComplete: "email"
+                        }}
+                    />
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+                    <div id="kc-form-buttons" className={fr.cx("fr-mt-3w")} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                        <Button type="submit">{msgStr("doSubmit")}</Button>
+
+                        <div>
+                            <a className={fr.cx("fr-link")} href={url.loginUrl}>
+                                {msg("backToLogin")}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}