Merge pull request #29 from damienlethiec/feature/add-login-page-expired-page

feat: add themed LoginPageExpired 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 LoginPageExpired = lazy(() => import("./pages/LoginPageExpired"));
 const LoginVerifyEmail = lazy(() => import("./pages/LoginVerifyEmail"));
 
 const doMakeUserConfirmPassword = false;
@@ -78,6 +79,14 @@ export default function KcPage(props: { kcContext: KcContext }) {
                                 doUseDefaultCss={false}
                             />
                         );
+                    case "login-page-expired.ftl":
+                        return (
+                            <LoginPageExpired
+                                 {...{ kcContext, i18n, classes }}
+                                Template={Template}
+                                doUseDefaultCss={false}
+                            />
+                          );
                     case "login-verify-email.ftl":
                         return (
                             <LoginVerifyEmail

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

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