Release: sign-in and sign-up redesign

.storybook/preview.ts

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react-vite";
 
 const preview: Preview = {
     parameters: {
+        layout: "fullscreen",
         controls: {
             matchers: {
                 color: /(background|color)$/i,

package.json

@@ -18,15 +18,16 @@
     "license": "MIT",
     "keywords": [],
     "dependencies": {
+        "@fontsource/inter": "^5.3.0",
+        "@fontsource/jetbrains-mono": "^5.3.0",
+        "@keycloakify/email-native": "~260007.0.0",
+        "@tabler/icons-react": "^3.46.0",
         "keycloakify": "^11.8.42",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "@keycloakify/email-native": "~260007.0.0",
-        "@tabler/icons-react": "^3.46.0"
+        "react-dom": "^18.2.0"
     },
     "devDependencies": {
         "@eslint/js": "^9.15.0",
-        "storybook": "^9.0.16",
         "@storybook/react-vite": "^9.0.16",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
@@ -41,6 +42,7 @@
         "eslint-plugin-storybook": "^9.0.16",
         "globals": "^15.12.0",
         "prettier": "3.3.1",
+        "storybook": "^9.0.16",
         "typescript": "^5.2.2",
         "typescript-eslint": "^8.15.0",
         "vite": "^5.0.8"

src/.gitignore

@@ -4,66 +4,66 @@
 # === Owned files end =====
 
 # === @keycloakify/email-native v260007.0.0 ===
-/email/html/email-test.ftl
 /email/theme.properties
-/email/messages/messages_cs.properties
-/email/html/event-login_error.ftl
+/email/html/email-test.ftl
 /email/html/email-update-confirmation.ftl
+/email/html/email-verification-with-code.ftl
 /email/html/email-verification.ftl
+/email/html/event-login_error.ftl
+/email/html/event-remove_credential.ftl
 /email/html/event-remove_totp.ftl
+/email/html/event-update_credential.ftl
 /email/html/event-update_password.ftl
-/email/html/event-remove_credential.ftl
-/email/html/email-verification-with-code.ftl
+/email/html/event-update_totp.ftl
 /email/html/event-user_disabled_by_permanent_lockout.ftl
-/email/text/email-test.ftl
 /email/html/event-user_disabled_by_temporary_lockout.ftl
-/email/html/event-update_totp.ftl
 /email/html/executeActions.ftl
-/email/html/event-update_credential.ftl
 /email/html/identity-provider-link.ftl
 /email/html/org-invite.ftl
 /email/html/password-reset.ftl
 /email/html/template.ftl
-/email/messages/messages_ca.properties
 /email/messages/messages_ar.properties
-/email/messages/messages_fa.properties
-/email/messages/messages_es.properties
-/email/messages/messages_fi.properties
-/email/messages/messages_hu.properties
+/email/messages/messages_ca.properties
+/email/messages/messages_cs.properties
+/email/messages/messages_da.properties
 /email/messages/messages_de.properties
 /email/messages/messages_el.properties
-/email/messages/messages_ka.properties
 /email/messages/messages_en.properties
-/email/messages/messages_ja.properties
-/email/messages/messages_ru.properties
-/email/messages/messages_pl.properties
-/email/messages/messages_no.properties
-/email/messages/messages_lt.properties
+/email/messages/messages_es.properties
+/email/messages/messages_fa.properties
+/email/messages/messages_fi.properties
 /email/messages/messages_fr.properties
+/email/messages/messages_hu.properties
 /email/messages/messages_it.properties
-/email/messages/messages_sk.properties
-/email/messages/messages_th.properties
-/email/messages/messages_sv.properties
+/email/messages/messages_ja.properties
+/email/messages/messages_ka.properties
+/email/messages/messages_lt.properties
+/email/messages/messages_nl.properties
+/email/messages/messages_no.properties
+/email/messages/messages_pl.properties
 /email/messages/messages_pt_BR.properties
-/email/messages/messages_da.properties
-/email/messages/messages_zh_CN.properties
-/email/messages/messages_uk.properties
 /email/messages/messages_pt.properties
-/email/messages/messages_nl.properties
+/email/messages/messages_ru.properties
+/email/messages/messages_sk.properties
+/email/messages/messages_sv.properties
+/email/messages/messages_th.properties
 /email/messages/messages_tr.properties
+/email/messages/messages_uk.properties
+/email/messages/messages_zh_CN.properties
+/email/messages/messages_zh_TW.properties
+/email/text/email-test.ftl
+/email/text/email-update-confirmation.ftl
+/email/text/email-verification-with-code.ftl
+/email/text/email-verification.ftl
 /email/text/event-login_error.ftl
 /email/text/event-remove_credential.ftl
-/email/text/email-verification-with-code.ftl
+/email/text/event-remove_totp.ftl
 /email/text/event-update_credential.ftl
 /email/text/event-update_password.ftl
-/email/text/email-verification.ftl
-/email/text/identity-provider-link.ftl
-/email/text/password-reset.ftl
-/email/text/event-remove_totp.ftl
-/email/text/executeActions.ftl
-/email/text/org-invite.ftl
 /email/text/event-update_totp.ftl
-/email/text/event-user_disabled_by_temporary_lockout.ftl
-/email/text/email-update-confirmation.ftl
 /email/text/event-user_disabled_by_permanent_lockout.ftl
-/email/messages/messages_zh_TW.properties
+/email/text/event-user_disabled_by_temporary_lockout.ftl
+/email/text/executeActions.ftl
+/email/text/identity-provider-link.ftl
+/email/text/org-invite.ftl
+/email/text/password-reset.ftl

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: 09b09a6c36072d5cf2f8484ab3dc720d28ec8c126df1bafb0b2214a0139848c7
+// Hash: b0aa286dba4ed04c111c1265bdb6a76ba45c22a3d9b9e8dcf36302267d40c51a
 
 /* eslint-disable */
 
@@ -47,3 +47,10 @@ export function KcPage(props: { kcContext: KcContext; fallback?: ReactNode }) {
         </Suspense>
     );
 }
+
+// NOTE: This is exported here only because in Webpack environnement it works differently
+export const BASE_URL = import.meta.env.BASE_URL;
+
+// NOTE: This is only exported here because you're supposed to import type from different packages
+// Depending of if you are using Vite, Webpack, ect...
+export type { Meta, StoryObj } from "@storybook/react-vite";

src/login/KcContext.ts

@@ -10,6 +10,20 @@ export type KcContextExtension = {
     };
 };
 
-export type KcContextExtensionPerPage = {};
+export type KcContextExtensionPerPage = {
+    "signed-in.ftl": {};
+    "register.ftl": {
+        social?: {
+            displayInfo?: boolean;
+            providers?: {
+                loginUrl: string;
+                alias: string;
+                providerId: string;
+                displayName: string;
+                iconClasses?: string;
+            }[];
+        };
+    };
+};
 
 export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

src/login/KcPage.tsx

@@ -1,12 +1,27 @@
 import type { ClassKey } from "keycloakify/login";
 import DefaultPage from "keycloakify/login/DefaultPage";
-import { Suspense, lazy } from "react";
+import { Suspense, lazy, type ReactNode } from "react";
 import type { KcContext } from "./KcContext";
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/jetbrains-mono/400.css";
+import "@fontsource/jetbrains-mono/500.css";
+import "@fontsource/jetbrains-mono/600.css";
+import "@fontsource/jetbrains-mono/700.css";
 import "./assets/civic-theme.css";
-import CustomTemplate, { type CustomTemplateProps } from "./components/CustomTemplate";
+import CustomTemplate from "./components/CustomTemplate";
 import { useI18n } from "./i18n";
 
 const Login = lazy(() => import("./pages/Login"));
+const Error = lazy(() => import("./pages/Error"));
+const LoginIdpLinkConfirm = lazy(() => import("./pages/LoginIdpLinkConfirm"));
+const LoginIdpLinkConfirmOverride = lazy(() => import("./pages/LoginIdpLinkConfirmOverride"));
+const Info = lazy(() => import("./pages/Info"));
+const SignedIn = lazy(() => import("./pages/SignedIn"));
+const IdpReviewUserProfile = lazy(() => import("./pages/IdpReviewUserProfile"));
+const LoginResetPassword = lazy(() => import("./pages/LoginResetPassword"));
 const Register = lazy(() => import("./pages/Register"));
 const UserProfileFormFields = lazy(() => import("./UserProfileFormFields"));
 
@@ -17,8 +32,22 @@ export default function KcPage(props: { kcContext: KcContext }) {
 
     const { i18n } = useI18n({ kcContext });
 
-    const Template = (props: Omit<CustomTemplateProps, "kcContext">) => (
-        <CustomTemplate {...props} kcContext={kcContext} />
+    const Template = (templateProps: {
+        children?: ReactNode;
+        displayMessage?: boolean;
+        socialProvidersNode?: ReactNode;
+        infoNode?: ReactNode;
+        headerNode?: ReactNode;
+    }) => (
+        <CustomTemplate
+            kcContext={kcContext}
+            displayMessage={templateProps.displayMessage}
+            socialProvidersNode={templateProps.socialProvidersNode}
+            infoNode={templateProps.infoNode}
+            headerNode={templateProps.headerNode}
+        >
+            {templateProps.children}
+        </CustomTemplate>
     );
 
     return (
@@ -35,6 +64,78 @@ export default function KcPage(props: { kcContext: KcContext }) {
                                 doUseDefaultCss={true}
                             />
                         );
+                    case "error.ftl":
+                        return (
+                            <Error
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "login-idp-link-confirm.ftl":
+                        return (
+                            <LoginIdpLinkConfirm
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "login-idp-link-confirm-override.ftl":
+                        return (
+                            <LoginIdpLinkConfirmOverride
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "info.ftl":
+                        return (
+                            <Info
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "signed-in.ftl":
+                        return (
+                            <SignedIn
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                            />
+                        );
+                    case "idp-review-user-profile.ftl":
+                        return (
+                            <IdpReviewUserProfile
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                                UserProfileFormFields={UserProfileFormFields}
+                                doMakeUserConfirmPassword={false}
+                            />
+                        );
+                    case "login-reset-password.ftl":
+                        return (
+                            <LoginResetPassword
+                                kcContext={kcContext}
+                                i18n={i18n}
+                                classes={classes}
+                                Template={Template}
+                                doUseDefaultCss={true}
+                            />
+                        );
                     case "register.ftl":
                         return (
                             <Register
@@ -70,6 +171,9 @@ const classes = {
     kcFormGroupClass: "form-group",
     kcLabelClass: "control-label",
     kcInputClass: "form-control",
+    // NOTE: The Keycloak default also carries a "required" class, which our label
+    // asterisk rules force to `color: inherit`, turning error messages black.
+    kcInputErrorMessageClass: "civic-field-error",
     kcButtonClass: "btn",
     kcButtonPrimaryClass: "btn-primary",
     kcButtonDefaultClass: "btn-default",

src/login/KcPageStory.tsx

@@ -11,12 +11,14 @@ const kcContextExtension: KcContextExtension = {
         ...kcEnvDefaults
     }
 };
-const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {
+    "signed-in.ftl": {},
+    "register.ftl": {}
+};
 
 export const { getKcContextMock } = createGetKcContextMock({
     kcContextExtension,
     kcContextExtensionPerPage,
-    overrides: {},
     overridesPerPage: {}
 });