Merge branch 'main' into feature/add-login-reset-password-page

garronej · web-flow · commit 37ea37f58623 · 2025-11-20T18:06:56.000+01:00
Signed-off-by: Joseph Garrone &lt;joseph.garrone@data.gouv.fr&gt;
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Keycloak DSFR Theme
 
 Welcome to the Keycloak DSFR Theme, a Keycloak theme with [react-dsfr](https://github.com/codegouvfr/react-dsfr) and [Keycloakify](https://www.keycloakify.dev/).  
-To see the theme in action, please visit [the SILL](https://sill-preprod.lab.sspcloud.fr/) and attempt to log in.  
+To see the theme in action, please visit [the SILL](https://code.gouv.fr/sill/) and attempt to log in.  
 This theme is configurable at runtime, via providing environnement variable, there is no need to clone this repository.  
 Simply use the bundled .jar file that is released an asset with every new [GitHub Release of this project](https://github.com/codegouvfr/keycloak-theme-dsfr/releases).
 
@@ -28,6 +28,7 @@ Several environment variables can be used to tailor the theme to your needs:
 ```env
 DSFR_THEME_HOME_URL
 DSFR_THEME_SERVICE_TITLE
+DSFR_THEME_SERVICE_TAG_LINE
 DSFR_THEME_BRAND_TOP
 DSFR_NOTICE_TITLE
 DSFR_NOTICE_DESCRIPTION
@@ -45,6 +46,8 @@ If you are deploying Keycloak on Kubernetes using Helm, here's how to configure
       value: https://code.gouv.fr
     - name: DSFR_THEME_SERVICE_TITLE
       value: CodeGouv
+    - name: DSFR_THEME_SERVICE_TAG_LINE
+      value: My tag line
     - name: DSFR_THEME_BRAND_TOP
       value: "République<br/>Française"
     - name: DSFR_NOTICE_TITLE
diff --git a/src/account/Template.tsx b/src/account/Template.tsx
@@ -71,6 +71,14 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                         }}
                     />
                 }
+                serviceTagline={
+                  <span
+                      dangerouslySetInnerHTML={{
+                        __html:
+                            kcContext.properties.DSFR_THEME_SERVICE_TAG_LINE || ""
+                      }}
+                  />
+                }
                 quickAccessItems={[
                     ...(referrer?.url
                         ? [
diff --git a/src/kc.gen.tsx b/src/kc.gen.tsx
@@ -1,5 +1,5 @@
 // This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
-// Hash: 415229e332a814cae52152aa8f2b43dab69ceadc6ed220a115d8a8349abbde0b
+// Hash: 1ded21a7b8002bb4044342419812de41d9262e5530b9ef4de8909352536a5744
 
 /* eslint-disable */
 
@@ -16,6 +16,7 @@ export const themeNames: ThemeName[] = ["DSFR"];
 export type KcEnvName =
     | "DSFR_THEME_HOME_URL"
     | "DSFR_THEME_SERVICE_TITLE"
+    | "DSFR_THEME_SERVICE_TAG_LINE"
     | "DSFR_THEME_BRAND_TOP"
     | "DSFR_NOTICE_TITLE"
     | "DSFR_NOTICE_DESCRIPTION"
@@ -24,6 +25,7 @@ export type KcEnvName =
 export const kcEnvNames: KcEnvName[] = [
     "DSFR_THEME_HOME_URL",
     "DSFR_THEME_SERVICE_TITLE",
+    "DSFR_THEME_SERVICE_TAG_LINE",
     "DSFR_THEME_BRAND_TOP",
     "DSFR_NOTICE_TITLE",
     "DSFR_NOTICE_DESCRIPTION",
@@ -33,9 +35,10 @@ export const kcEnvNames: KcEnvName[] = [
 export const kcEnvDefaults: Record<KcEnvName, string> = {
     DSFR_THEME_HOME_URL: "",
     DSFR_THEME_SERVICE_TITLE: "",
+    DSFR_THEME_SERVICE_TAG_LINE: "",
     DSFR_THEME_BRAND_TOP: "République<br/>Française",
-    DSFR_NOTICE_TITLE: "Mon super titre",
-    DSFR_NOTICE_DESCRIPTION: "Ma super description",
+    DSFR_NOTICE_TITLE: "",
+    DSFR_NOTICE_DESCRIPTION: "",
     DSFR_NOTICE_SEVERITY: "info"
 };
 
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
@@ -14,6 +14,8 @@ 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"));
 
 const doMakeUserConfirmPassword = false;
 
@@ -85,6 +87,22 @@ export default function KcPage(props: { kcContext: KcContext }) {
                                 Template={Template}
                                 doUseDefaultCss={false}
                             />
+                          );
+                    case "login-page-expired.ftl":
+                        return (
+                            <LoginPageExpired
+                                 {...{ kcContext, i18n, classes }}
+                                Template={Template}
+                                doUseDefaultCss={false}
+                            />
+                          );
+                    case "login-verify-email.ftl":
+                        return (
+                            <LoginVerifyEmail
+                                {...{ kcContext, i18n, classes }}
+                                Template={Template}
+                                doUseDefaultCss={false}
+                            />
                         );
                     default:
                         return (
diff --git a/src/login/Template.tsx b/src/login/Template.tsx
@@ -90,6 +90,14 @@ export default function Template(props: Props) {
                         }}
                     />
                 }
+                serviceTagline={
+                  <span
+                      dangerouslySetInnerHTML={{
+                        __html:
+                            kcContext.properties.DSFR_THEME_SERVICE_TAG_LINE || ""
+                      }}
+                  />
+                }
             />
             <main role="main" id="content">
                 {(kcContext.properties.DSFR_NOTICE_TITLE || kcContext.properties.DSFR_NOTICE_DESCRIPTION) && (
diff --git a/src/login/pages/LoginPageExpired.stories.tsx b/src/login/pages/LoginPageExpired.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-page-expired.ftl" });
+
+const meta = {
+    title: "login/login-page-expired.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+/**
+ * WithCustomUrl:
+ * - Purpose: Tests the page with a custom restart flow URL.
+ * - Scenario: Simulates a page expired scenario with a specific URL to restart the authentication flow.
+ * - Key Aspect: Ensures the "click here to login" link points to the correct restart URL.
+ */
+export const WithCustomUrl: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginRestartFlowUrl: "https://hubee.com/auth/restart"
+                }
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx
@@ -0,0 +1,47 @@
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { url } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("pageExpiredTitle")}
+        >
+            <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
+                <div className={fr.cx("fr-col-12")}>
+                    <div className={fr.cx("fr-callout")}>
+                        <p className={fr.cx("fr-callout__text")}>{msg("pageExpiredMsg1")}</p>
+                        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "1rem" }}>
+                            <a className={fr.cx("fr-btn", "fr-btn--secondary", "fr-btn--icon-right", "fr-icon-refresh-line")} href={url.loginRestartFlowUrl}>
+                                {msg("doClickHere")}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={fr.cx("fr-col-12")}>
+                    <div className={fr.cx("fr-callout")}>
+                        <p className={fr.cx("fr-callout__text")}>{msg("pageExpiredMsg2")}</p>
+                        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "1rem" }}>
+                            <a className={fr.cx("fr-btn", "fr-btn--icon-right", "fr-icon-arrow-right-line")} href={url.loginAction}>
+                                {msg("doClickHere")}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Template>
+    );
+}
diff --git a/src/login/pages/LoginVerifyEmail.stories.tsx b/src/login/pages/LoginVerifyEmail.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-verify-email.ftl" });
+
+const meta = {
+    title: "login/login-verify-email.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                user: {
+                    email: "user@example.com"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithCustomEmail:
+ * - Purpose: Tests the page with a specific email address.
+ * - Scenario: Simulates a user with a custom email address to verify the display.
+ * - Key Aspect: Ensures the email is correctly displayed in the verification message.
+ */
+export const WithCustomEmail: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                user: {
+                    email: "thais@hubee.com"
+                }
+            }}
+        />
+    )
+};
diff --git a/src/login/pages/LoginVerifyEmail.tsx b/src/login/pages/LoginVerifyEmail.tsx
@@ -0,0 +1,64 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+import Alert from "@codegouvfr/react-dsfr/Alert";
+import { fr } from "@codegouvfr/react-dsfr";
+
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, user } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("emailVerifyTitle")}
+        >
+            <Alert
+                severity="info"
+                description={msgStr("emailVerifyInstruction1", user?.email ?? "")}
+                className={fr.cx("fr-mb-4w")}
+                small
+            />
+
+            <div className={kcClsx("kcFormGroupClass")}>
+                <p className={fr.cx("fr-text--sm", "fr-mb-3w")}>
+                    {msgStr("emailVerifyInstruction2")}{" "}
+                    <form action={url.loginAction} method="post" style={{ display: "inline" }}>
+                        <input type="hidden" name="email" value={user?.email ?? ""} />
+                        <button
+                            type="submit"
+                            className={fr.cx("fr-link")}
+                            style={{
+                                background: "none",
+                                border: "none",
+                                padding: 0,
+                                cursor: "pointer"
+                            }}
+                        >
+                            {msgStr("doClickHere")} {msgStr("emailVerifyInstruction3")}
+                        </button>
+                    </form>
+                </p>
+            </div>
+
+            <div className={kcClsx("kcFormGroupClass")} style={{ display: "flex", justifyContent: "flex-end" }}>
+                <a className={fr.cx("fr-link")} href={url.loginUrl}>
+                    {msg("backToLogin")}
+                </a>
+            </div>
+        </Template>
+    );
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
             environmentVariables: [
                 { name: "DSFR_THEME_HOME_URL", default: "" },
                 { name: "DSFR_THEME_SERVICE_TITLE", default: "" },
+                { name: "DSFR_THEME_SERVICE_TAG_LINE", default: "" },
                 { name: "DSFR_THEME_BRAND_TOP", default: "République<br/>Française" },
                 { name: "DSFR_NOTICE_TITLE", default: "" },
                 { name: "DSFR_NOTICE_DESCRIPTION", default: "" },
