Merge branch 'main' into feature/add-login-page-expired-page

Signed-off-by: Joseph Garrone <joseph.garrone@data.gouv.fr>

Author: garronej

README.md

@@ -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

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
                         ? [

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"
 };
 

src/login/KcPage.tsx

@@ -14,6 +14,7 @@ const Register = lazy(() => import("./pages/Register"));
 const LoginUpdateProfile = lazy(() => import("./pages/LoginUpdateProfile"));
 const LoginUpdatePassword = lazy(() => import("./pages/LoginUpdatePassword"));
 const LoginPageExpired = lazy(() => import("./pages/LoginPageExpired"));
+const LoginVerifyEmail = lazy(() => import("./pages/LoginVerifyEmail"));
 
 const doMakeUserConfirmPassword = false;
 
@@ -81,6 +82,14 @@ export default function KcPage(props: { kcContext: KcContext }) {
                     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}

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) && (

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"
+                }
+            }}
+        />
+    )
+};

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>
+    );
+}

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: "" },