@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

package/keycloak-theme/login/i18n.ts

@@ -1,51 +1,47 @@
-import { i18nBuilder } from "@keycloakify/login-ui/i18n";
-import type { ThemeName } from "../kc.gen";
-
-/** @see: https://docs.keycloakify.dev/features/i18n */
-const { I18nProvider, useI18n } = i18nBuilder
-    .withThemeName<ThemeName>()
-    .withCustomTranslations({
-        en: {
-            welcomeMessage:
-                "Welcome to Acme inc - Your gateway to seamless planning and organization.",
-            loginAccountTitle: "Login to your account",
-            registerTitle: "Register a new account",
-            email: "Email",
-            enterCredentials: "Enter your credentials below to login",
-            noAccount: "Don't have an account?",
-            doRegister: "Sign up",
-            home: "Home",
-            "organization.selectTitle": "Choose Your Organization",
-            "organization.pickPlaceholder": "Pick an organization to continue"
-        },
-        ar: {
-            welcomeMessage: "مرحبًا بك في Acme inc - بوابتك إلى التخطيط والتنظيم السلس.",
-            loginAccountTitle: "تسجيل الدخول  إلى حسابك",
-            registerTitle: "تسجيل حساب جديد",
-            email: "البريد الإلكتروني",
-            enterCredentials: "أدخل بيانات الاعتماد الخاصة بك أدناه لتسجيل الدخول",
-            doRegister: "إنشاء حساب",
-            noAccount: "ليس لديك حساب؟",
-            home: "الصفحة الرئيسية",
-
-            "organization.selectTitle": "اختر مؤسستك",
-            "organization.pickPlaceholder": "اختر مؤسسة للمتابعة"
-        },
-        fr: {
-            welcomeMessage:
-                "Bienvenue sur Acme inc Votre passerelle vers une planification et une organisation sans faille.",
-            loginAccountTitle: "Connectez-vous à votre compte",
-            registerTitle: "Créer    un nouveau compte",
-            email: "E-mail",
-            enterCredentials:
-                "Entrez vos informations d'identification ci-dessous pour vous connecter",
-            doRegister: "S'inscrire",
-            noAccount: "Vous n'avez pas de compte?",
-            home: "Accueil",
-            "organization.selectTitle": "Choisissez Votre Organisation",
-            "organization.pickPlaceholder": "Sélectionnez une organisation pour continuer"
-        }
-    })
-    .build();
-
-export { I18nProvider, useI18n };
+import { i18nBuilder } from "@keycloakify/login-ui/i18n";
+import type { ThemeName } from "../kc.gen";
+
+/** @see: https://docs.keycloakify.dev/features/i18n */
+const { I18nProvider, useI18n } = i18nBuilder
+    .withThemeName<ThemeName>()
+    .withCustomTranslations({
+        en: {
+            welcomeMessage:
+                "Welcome to Acme inc - Your gateway to seamless planning and organization.",
+            loginAccountTitle: "Login to your account",
+            registerTitle: "Register a new account",
+            email: "Email",
+            enterCredentials: "Enter your credentials below to login",
+            noAccount: "Don't have an account?",
+            doRegister: "Sign up",
+            "organization.selectTitle": "Choose Your Organization",
+            "organization.pickPlaceholder": "Pick an organization to continue"
+        },
+        ar: {
+            welcomeMessage: "مرحبًا بك في Acme inc - بوابتك إلى التخطيط والتنظيم السلس.",
+            loginAccountTitle: "تسجيل الدخول  إلى حسابك",
+            registerTitle: "تسجيل حساب جديد",
+            email: "البريد الإلكتروني",
+            enterCredentials: "أدخل بيانات الاعتماد الخاصة بك أدناه لتسجيل الدخول",
+            doRegister: "إنشاء حساب",
+            noAccount: "ليس لديك حساب؟",
+            "organization.selectTitle": "اختر مؤسستك",
+            "organization.pickPlaceholder": "اختر مؤسسة للمتابعة"
+        },
+        fr: {
+            welcomeMessage:
+                "Bienvenue sur Acme inc Votre passerelle vers une planification et une organisation sans faille.",
+            loginAccountTitle: "Connectez-vous à votre compte",
+            registerTitle: "Créer    un nouveau compte",
+            email: "E-mail",
+            enterCredentials:
+                "Entrez vos informations d'identification ci-dessous pour vous connecter",
+            doRegister: "S'inscrire",
+            noAccount: "Vous n'avez pas de compte?",
+            "organization.selectTitle": "Choisissez Votre Organisation",
+            "organization.pickPlaceholder": "Sélectionnez une organisation pour continuer"
+        }
+    })
+    .build();
+
+export { I18nProvider, useI18n };

package/keycloak-theme/login/mocks/getKcContextMock.ts

@@ -1,18 +1,22 @@
-import { createGetKcContextMock } from "@keycloakify/login-ui/KcContext/getKcContextMock";
-import type { KcContextExtension, KcContextExtensionPerPage } from "../KcContext";
-import { themeNames, kcEnvDefaults } from "../../kc.gen";
-
-const kcContextExtension: KcContextExtension = {
-    themeName: themeNames[0],
-    properties: {
-        ...kcEnvDefaults
-    }
-};
-const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
-
-export const { getKcContextMock } = createGetKcContextMock({
-    kcContextExtension,
-    kcContextExtensionPerPage,
-    overrides: {},
-    overridesPerPage: {}
-});
+import { createGetKcContextMock } from "@keycloakify/login-ui/KcContext/getKcContextMock";
+import { kcEnvDefaults, themeNames } from "../../kc.gen";
+import type { KcContextExtension, KcContextExtensionPerPage } from "../KcContext";
+
+const kcContextExtension: KcContextExtension = {
+    themeName: themeNames[0],
+    client: {
+        baseUrl: "https://my-theme.keycloakify.dev"
+    },
+    darkMode: true,
+    properties: {
+        ...kcEnvDefaults
+    }
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+    kcContextExtension,
+    kcContextExtensionPerPage,
+    overrides: {},
+    overridesPerPage: {}
+});

package/keycloak-theme/login/pages/PageIndex.tsx

@@ -1,134 +1,134 @@
-
-import { Suspense, lazy } from "react";
-import { useKcContext } from "../KcContext";
-
-
-const Page_login = lazy(() => import("./login"));
-const Page_register = lazy(() => import("./register"));
-const Page_info = lazy(() => import("./info"));
-const Page_error = lazy(() => import("./error"));
-const Page_login_reset_password = lazy(() => import("./login-reset-password"));
-const Page_login_verify_email = lazy(() => import("./login-verify-email"));
-const Page_terms = lazy(() => import("./terms"));
-const Page_login_oauth2_device_verify_user_code = lazy(() => import("./login-oauth2-device-verify-user-code"));
-const Page_login_oauth_grant = lazy(() => import("./login-oauth-grant"));
-const Page_login_otp = lazy(() => import("./login-otp"));
-const Page_login_password = lazy(() => import("./login-password"));
-const Page_login_username = lazy(() => import("./login-username"));
-const Page_webauthn_authenticate = lazy(() => import("./webauthn-authenticate"));
-const Page_webauthn_register = lazy(() => import("./webauthn-register"));
-const Page_login_update_password = lazy(() => import("./login-update-password"));
-const Page_link_idp_action = lazy(() => import("./link-idp-action"));
-const Page_login_update_profile = lazy(() => import("./login-update-profile"));
-const Page_login_idp_link_confirm = lazy(() => import("./login-idp-link-confirm"));
-const Page_login_page_expired = lazy(() => import("./login-page-expired"));
-const Page_login_idp_link_email = lazy(() => import("./login-idp-link-email"));
-const Page_login_config_totp = lazy(() => import("./login-config-totp"));
-const Page_logout_confirm = lazy(() => import("./logout-confirm"));
-const Page_idp_review_user_profile = lazy(() => import("./idp-review-user-profile"));
-const Page_update_email = lazy(() => import("./update-email"));
-const Page_select_authenticator = lazy(() => import("./select-authenticator"));
-const Page_saml_post_form = lazy(() => import("./saml-post-form"));
-const Page_delete_credential = lazy(() => import("./delete-credential"));
-const Page_code = lazy(() => import("./code"));
-const Page_delete_account_confirm = lazy(() => import("./delete-account-confirm"));
-const Page_frontchannel_logout = lazy(() => import("./frontchannel-logout"));
-const Page_login_recovery_authn_code_config = lazy(() => import("./login-recovery-authn-code-config"));
-const Page_login_recovery_authn_code_input = lazy(() => import("./login-recovery-authn-code-input"));
-const Page_login_reset_otp = lazy(() => import("./login-reset-otp"));
-const Page_login_x509_info = lazy(() => import("./login-x509-info"));
-const Page_webauthn_error = lazy(() => import("./webauthn-error"));
-const Page_login_passkeys_conditional_authenticate = lazy(() => import("./login-passkeys-conditional-authenticate"));
-const Page_login_idp_link_confirm_override = lazy(() => import("./login-idp-link-confirm-override"));
-const Page_select_organization = lazy(() => import("./select-organization"));
-
-export function PageIndex() {
-    const { kcContext } = useKcContext();
-
-    return (
-
-        <Suspense>
-            {(() => {
-                switch (kcContext.pageId) {
-                    case "login.ftl":
-                        return <Page_login />;
-                    case "register.ftl":
-                        return <Page_register />;
-                    case "info.ftl":
-                        return <Page_info />;
-                    case "error.ftl":
-                        return <Page_error />;
-                    case "login-reset-password.ftl":
-                        return <Page_login_reset_password />;
-                    case "login-verify-email.ftl":
-                        return <Page_login_verify_email />;
-                    case "terms.ftl":
-                        return <Page_terms />;
-                    case "login-oauth2-device-verify-user-code.ftl":
-                        return <Page_login_oauth2_device_verify_user_code />;
-                    case "login-oauth-grant.ftl":
-                        return <Page_login_oauth_grant />;
-                    case "login-otp.ftl":
-                        return <Page_login_otp />;
-                    case "login-username.ftl":
-                        return <Page_login_username />;
-                    case "login-password.ftl":
-                        return <Page_login_password />;
-                    case "webauthn-authenticate.ftl":
-                        return <Page_webauthn_authenticate />;
-                    case "webauthn-register.ftl":
-                        return <Page_webauthn_register />;
-                    case "login-update-password.ftl":
-                        return <Page_login_update_password />;
-                    case "link-idp-action.ftl":
-                        return <Page_link_idp_action />;
-                    case "login-update-profile.ftl":
-                        return <Page_login_update_profile />;
-                    case "login-idp-link-confirm.ftl":
-                        return <Page_login_idp_link_confirm />;
-                    case "login-idp-link-email.ftl":
-                        return <Page_login_idp_link_email />;
-                    case "login-page-expired.ftl":
-                        return <Page_login_page_expired />;
-                    case "login-config-totp.ftl":
-                        return <Page_login_config_totp />;
-                    case "logout-confirm.ftl":
-                        return <Page_logout_confirm />;
-                    case "idp-review-user-profile.ftl":
-                        return <Page_idp_review_user_profile />;
-                    case "update-email.ftl":
-                        return <Page_update_email />;
-                    case "select-authenticator.ftl":
-                        return <Page_select_authenticator />;
-                    case "saml-post-form.ftl":
-                        return <Page_saml_post_form />;
-                    case "delete-credential.ftl":
-                        return <Page_delete_credential />;
-                    case "code.ftl":
-                        return <Page_code />;
-                    case "delete-account-confirm.ftl":
-                        return <Page_delete_account_confirm />;
-                    case "frontchannel-logout.ftl":
-                        return <Page_frontchannel_logout />;
-                    case "login-recovery-authn-code-config.ftl":
-                        return <Page_login_recovery_authn_code_config />;
-                    case "login-recovery-authn-code-input.ftl":
-                        return <Page_login_recovery_authn_code_input />;
-                    case "login-reset-otp.ftl":
-                        return <Page_login_reset_otp />;
-                    case "login-x509-info.ftl":
-                        return <Page_login_x509_info />;
-                    case "webauthn-error.ftl":
-                        return <Page_webauthn_error />;
-                    case "login-passkeys-conditional-authenticate.ftl":
-                        return <Page_login_passkeys_conditional_authenticate />;
-                    case "login-idp-link-confirm-override.ftl":
-                        return <Page_login_idp_link_confirm_override />;
-                    case "select-organization.ftl":
-                        return <Page_select_organization />;
-                }
-
-            })()}
-        </Suspense>
-    );
-}
+
+import { Suspense, lazy } from "react";
+import { useKcContext } from "../KcContext";
+
+
+const Page_login = lazy(() => import("./login"));
+const Page_register = lazy(() => import("./register"));
+const Page_info = lazy(() => import("./info"));
+const Page_error = lazy(() => import("./error"));
+const Page_login_reset_password = lazy(() => import("./login-reset-password"));
+const Page_login_verify_email = lazy(() => import("./login-verify-email"));
+const Page_terms = lazy(() => import("./terms"));
+const Page_login_oauth2_device_verify_user_code = lazy(() => import("./login-oauth2-device-verify-user-code"));
+const Page_login_oauth_grant = lazy(() => import("./login-oauth-grant"));
+const Page_login_otp = lazy(() => import("./login-otp"));
+const Page_login_password = lazy(() => import("./login-password"));
+const Page_login_username = lazy(() => import("./login-username"));
+const Page_webauthn_authenticate = lazy(() => import("./webauthn-authenticate"));
+const Page_webauthn_register = lazy(() => import("./webauthn-register"));
+const Page_login_update_password = lazy(() => import("./login-update-password"));
+const Page_link_idp_action = lazy(() => import("./link-idp-action"));
+const Page_login_update_profile = lazy(() => import("./login-update-profile"));
+const Page_login_idp_link_confirm = lazy(() => import("./login-idp-link-confirm"));
+const Page_login_page_expired = lazy(() => import("./login-page-expired"));
+const Page_login_idp_link_email = lazy(() => import("./login-idp-link-email"));
+const Page_login_config_totp = lazy(() => import("./login-config-totp"));
+const Page_logout_confirm = lazy(() => import("./logout-confirm"));
+const Page_idp_review_user_profile = lazy(() => import("./idp-review-user-profile"));
+const Page_update_email = lazy(() => import("./update-email"));
+const Page_select_authenticator = lazy(() => import("./select-authenticator"));
+const Page_saml_post_form = lazy(() => import("./saml-post-form"));
+const Page_delete_credential = lazy(() => import("./delete-credential"));
+const Page_code = lazy(() => import("./code"));
+const Page_delete_account_confirm = lazy(() => import("./delete-account-confirm"));
+const Page_frontchannel_logout = lazy(() => import("./frontchannel-logout"));
+const Page_login_recovery_authn_code_config = lazy(() => import("./login-recovery-authn-code-config"));
+const Page_login_recovery_authn_code_input = lazy(() => import("./login-recovery-authn-code-input"));
+const Page_login_reset_otp = lazy(() => import("./login-reset-otp"));
+const Page_login_x509_info = lazy(() => import("./login-x509-info"));
+const Page_webauthn_error = lazy(() => import("./webauthn-error"));
+const Page_login_passkeys_conditional_authenticate = lazy(() => import("./login-passkeys-conditional-authenticate"));
+const Page_login_idp_link_confirm_override = lazy(() => import("./login-idp-link-confirm-override"));
+const Page_select_organization = lazy(() => import("./select-organization"));
+
+export function PageIndex() {
+    const { kcContext } = useKcContext();
+
+    return (
+
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "login.ftl":
+                        return <Page_login />;
+                    case "register.ftl":
+                        return <Page_register />;
+                    case "info.ftl":
+                        return <Page_info />;
+                    case "error.ftl":
+                        return <Page_error />;
+                    case "login-reset-password.ftl":
+                        return <Page_login_reset_password />;
+                    case "login-verify-email.ftl":
+                        return <Page_login_verify_email />;
+                    case "terms.ftl":
+                        return <Page_terms />;
+                    case "login-oauth2-device-verify-user-code.ftl":
+                        return <Page_login_oauth2_device_verify_user_code />;
+                    case "login-oauth-grant.ftl":
+                        return <Page_login_oauth_grant />;
+                    case "login-otp.ftl":
+                        return <Page_login_otp />;
+                    case "login-username.ftl":
+                        return <Page_login_username />;
+                    case "login-password.ftl":
+                        return <Page_login_password />;
+                    case "webauthn-authenticate.ftl":
+                        return <Page_webauthn_authenticate />;
+                    case "webauthn-register.ftl":
+                        return <Page_webauthn_register />;
+                    case "login-update-password.ftl":
+                        return <Page_login_update_password />;
+                    case "link-idp-action.ftl":
+                        return <Page_link_idp_action />;
+                    case "login-update-profile.ftl":
+                        return <Page_login_update_profile />;
+                    case "login-idp-link-confirm.ftl":
+                        return <Page_login_idp_link_confirm />;
+                    case "login-idp-link-email.ftl":
+                        return <Page_login_idp_link_email />;
+                    case "login-page-expired.ftl":
+                        return <Page_login_page_expired />;
+                    case "login-config-totp.ftl":
+                        return <Page_login_config_totp />;
+                    case "logout-confirm.ftl":
+                        return <Page_logout_confirm />;
+                    case "idp-review-user-profile.ftl":
+                        return <Page_idp_review_user_profile />;
+                    case "update-email.ftl":
+                        return <Page_update_email />;
+                    case "select-authenticator.ftl":
+                        return <Page_select_authenticator />;
+                    case "saml-post-form.ftl":
+                        return <Page_saml_post_form />;
+                    case "delete-credential.ftl":
+                        return <Page_delete_credential />;
+                    case "code.ftl":
+                        return <Page_code />;
+                    case "delete-account-confirm.ftl":
+                        return <Page_delete_account_confirm />;
+                    case "frontchannel-logout.ftl":
+                        return <Page_frontchannel_logout />;
+                    case "login-recovery-authn-code-config.ftl":
+                        return <Page_login_recovery_authn_code_config />;
+                    case "login-recovery-authn-code-input.ftl":
+                        return <Page_login_recovery_authn_code_input />;
+                    case "login-reset-otp.ftl":
+                        return <Page_login_reset_otp />;
+                    case "login-x509-info.ftl":
+                        return <Page_login_x509_info />;
+                    case "webauthn-error.ftl":
+                        return <Page_webauthn_error />;
+                    case "login-passkeys-conditional-authenticate.ftl":
+                        return <Page_login_passkeys_conditional_authenticate />;
+                    case "login-idp-link-confirm-override.ftl":
+                        return <Page_login_idp_link_confirm_override />;
+                    case "select-organization.ftl":
+                        return <Page_select_organization />;
+                }
+
+            })()}
+        </Suspense>
+    );
+}

package/keycloak-theme/login/pages/code/Page.stories.tsx

@@ -11,93 +11,77 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
+export const Default: Story = {};
+
+export const Arabic: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
 };
 
-export const WithDarkModeDisabled: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                properties: {
-                    ENABLE_THEME_TOGGLE: "false"
-                }
-            }}
-        />
-    )
+export const French: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr",
+                rtl: false
+            }
+        }
+    }
 };
 
-export const WithDarkModeEnabled: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                properties: {
-                    ENABLE_THEME_TOGGLE: "true"
-                }
-            }}
-        />
-    )
+
+/**
+ * This reflects the state when "Dark Theme" is set to "Disabled" in the realm settings 
+ * (Theme configuration tab of the Keycloak Admin UI).
+ * 
+ * You should enable this configuration if you want to hide the "dark mode switch" 
+ * and ensure that the theme always renders in light mode, even if the user's system 
+ * preference is set to dark.
+ */
+export const WithDarkModeForbidden: Story = {
+    args: {
+        kcContext: {
+            darkMode: false
+        }
+    }
 };
 
 export const WithErrorCode: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                code: {
-                    success: false,
-                    error: "Failed to generate code"
-                }
-            }}
-        />
-    )
-};
-export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
-};
-export const French: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            code: {
+                success: false,
+                error: "Failed to generate code"
+            }
+        }
+    }
 };
 export const WithFrenchLanguage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                },
-                code: {
-                    success: true,
-                    code: "XYZ789"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            },
+            code: {
+                success: true,
+                code: "XYZ789"
+            }
+        }
+    }
 };
 export const WithHtmlErrorMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                code: {
-                    success: false,
-                    error: "Something went wrong. <a href='https://example.com'>Try again</a>"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            code: {
+                success: false,
+                error: "Something went wrong. <a href='https://example.com'>Try again</a>"
+            }
+        }
+    }
 };