@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.7

package/keycloak-theme/login/pages/saml-post-form/Page.tsx

@@ -1,66 +1,66 @@
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useEffect, useState } from "react";
-import { assert } from 'tsafe/assert';
-import { Template } from "../../components/Template";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "saml-post-form.ftl");
-
-    const { msgStr, msg } = useI18n();
-
-    const { samlPost } = kcContext;
-
-    const [htmlFormElement, setHtmlFormElement] = useState<HTMLFormElement | null>(null);
-
-    useEffect(() => {
-        if (htmlFormElement === null) {
-            return;
-        }
-
-        // Storybook
-        if (samlPost.url === "#") {
-            alert("In a real Keycloak the user would be redirected immediately");
-            return;
-        }
-
-        htmlFormElement.requestSubmit();
-    }, [htmlFormElement]);
-
-    return (
-        <Template
-            headerNode={msg("saml.post-form.title")}
-        >
-            <p>{msg("saml.post-form.message")}</p>
-            <form
-                name="saml-post-binding"
-                method="post"
-                action={samlPost.url}
-                ref={setHtmlFormElement}
-            >
-                {samlPost.SAMLRequest && (
-                    <input
-                        type="hidden"
-                        name="SAMLRequest"
-                        value={samlPost.SAMLRequest}
-                    />
-                )}
-                {samlPost.SAMLResponse && (
-                    <input
-                        type="hidden"
-                        name="SAMLResponse"
-                        value={samlPost.SAMLResponse}
-                    />
-                )}
-                {samlPost.relayState && (
-                    <input type="hidden" name="RelayState" value={samlPost.relayState} />
-                )}
-                <noscript>
-                    <p>{msg("saml.post-form.js-disabled")}</p>
-                    <input type="submit" value={msgStr("doContinue")} />
-                </noscript>
-            </form>
-        </Template>
-    );
-}
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { useEffect, useState } from "react";
+import { assert } from 'tsafe/assert';
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "saml-post-form.ftl");
+
+    const { msgStr, msg } = useI18n();
+
+    const { samlPost } = kcContext;
+
+    const [htmlFormElement, setHtmlFormElement] = useState<HTMLFormElement | null>(null);
+
+    useEffect(() => {
+        if (htmlFormElement === null) {
+            return;
+        }
+
+        // Storybook
+        if (samlPost.url === "#") {
+            alert("In a real Keycloak the user would be redirected immediately");
+            return;
+        }
+
+        htmlFormElement.requestSubmit();
+    }, [htmlFormElement]);
+
+    return (
+        <Template
+            headerNode={msg("saml.post-form.title")}
+        >
+            <p>{msg("saml.post-form.message")}</p>
+            <form
+                name="saml-post-binding"
+                method="post"
+                action={samlPost.url}
+                ref={setHtmlFormElement}
+            >
+                {samlPost.SAMLRequest && (
+                    <input
+                        type="hidden"
+                        name="SAMLRequest"
+                        value={samlPost.SAMLRequest}
+                    />
+                )}
+                {samlPost.SAMLResponse && (
+                    <input
+                        type="hidden"
+                        name="SAMLResponse"
+                        value={samlPost.SAMLResponse}
+                    />
+                )}
+                {samlPost.relayState && (
+                    <input type="hidden" name="RelayState" value={samlPost.relayState} />
+                )}
+                <noscript>
+                    <p>{msg("saml.post-form.js-disabled")}</p>
+                    <input type="submit" value={msgStr("doContinue")} />
+                </noscript>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/saml-post-form/index.ts

@@ -1,3 +1,3 @@
-import { Page } from "./Page";
-
-export default Page;
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/select-authenticator/Page.stories.tsx

@@ -12,101 +12,91 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
-};
+export const Default: Story = {};
 
 export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
 };
 export const French: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            }
+        }
+    }
 };
 
 export const WithDifferentAuthenticationMethods: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                auth: {
-                    authenticationSelections: [
-                        {
-                            authExecId: "25697c4e-0c80-4f2c-8eb7-2c16347e8e8d",
-                            displayName: "auth-username-password-form-display-name",
-                            helpText: "auth-username-password-form-help-text",
-                            iconCssClass: "kcAuthenticatorPasswordClass"
-                        },
-                        {
-                            authExecId: "4cb60872-ce0d-4c8f-a806-e651ed77994b",
-                            displayName: "webauthn-passwordless-display-name",
-                            helpText: "webauthn-passwordless-help-text",
-                            iconCssClass: "kcAuthenticatorWebAuthnPasswordlessClass"
-                        }
-                    ]
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            auth: {
+                authenticationSelections: [
+                    {
+                        authExecId: "25697c4e-0c80-4f2c-8eb7-2c16347e8e8d",
+                        displayName: "auth-username-password-form-display-name",
+                        helpText: "auth-username-password-form-help-text",
+                        iconCssClass: "kcAuthenticatorPasswordClass"
+                    },
+                    {
+                        authExecId: "4cb60872-ce0d-4c8f-a806-e651ed77994b",
+                        displayName: "webauthn-passwordless-display-name",
+                        helpText: "webauthn-passwordless-help-text",
+                        iconCssClass: "kcAuthenticatorWebAuthnPasswordlessClass"
+                    }
+                ]
+            }
+        }
+    }
 };
 
 export const WithRealmTranslations: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                auth: {
-                    authenticationSelections: [
-                        {
-                            authExecId: "f0c22855-eda7-4092-8565-0c22f77d2ffb",
-                            displayName: "home-idp-discovery-display-name",
-                            helpText: "home-idp-discovery-help-text",
-                            iconCssClass: "kcAuthenticatorDefaultClass"
-                        },
-                        {
-                            authExecId: "20456f5a-8b2b-45f3-98e0-551dcb27e3e1",
-                            displayName: "identity-provider-redirctor-display-name",
-                            helpText: "identity-provider-redirctor-help-text",
-                            iconCssClass: "kcAuthenticatorDefaultClass"
-                        },
-                        {
-                            authExecId: "eb435db9-474e-473a-8da7-c184fa510b96",
-                            displayName: "auth-username-password-form-display-name",
-                            helpText: "auth-username-password-help-text",
-                            iconCssClass: "kcAuthenticatorDefaultClass"
-                        }
-                    ]
-                },
-                "x-keycloakify": {
-                    messages: {
-                        "home-idp-discovery-display-name": "Home identity provider",
-                        "home-idp-discovery-help-text":
-                            "Sign in via your home identity provider which will be automatically determined based on your provided email address.",
-                        "identity-provider-redirctor-display-name":
-                            "Identity Provider Redirector",
-                        "identity-provider-redirctor-help-text":
-                            "Sign in via your identity provider.",
-                        "auth-username-password-help-text":
-                            "Sign in via your username and password."
+    args: {
+        kcContext: {
+            auth: {
+                authenticationSelections: [
+                    {
+                        authExecId: "f0c22855-eda7-4092-8565-0c22f77d2ffb",
+                        displayName: "home-idp-discovery-display-name",
+                        helpText: "home-idp-discovery-help-text",
+                        iconCssClass: "kcAuthenticatorDefaultClass"
+                    },
+                    {
+                        authExecId: "20456f5a-8b2b-45f3-98e0-551dcb27e3e1",
+                        displayName: "identity-provider-redirctor-display-name",
+                        helpText: "identity-provider-redirctor-help-text",
+                        iconCssClass: "kcAuthenticatorDefaultClass"
+                    },
+                    {
+                        authExecId: "eb435db9-474e-473a-8da7-c184fa510b96",
+                        displayName: "auth-username-password-form-display-name",
+                        helpText: "auth-username-password-help-text",
+                        iconCssClass: "kcAuthenticatorDefaultClass"
                     }
+                ]
+            },
+            "x-keycloakify": {
+                messages: {
+                    "home-idp-discovery-display-name": "Home identity provider",
+                    "home-idp-discovery-help-text":
+                        "Sign in via your home identity provider which will be automatically determined based on your provided email address.",
+                    "identity-provider-redirctor-display-name":
+                        "Identity Provider Redirector",
+                    "identity-provider-redirctor-help-text":
+                        "Sign in via your identity provider.",
+                    "auth-username-password-help-text":
+                        "Sign in via your username and password."
                 }
-            }}
-        />
-    )
+            }
+        }
+    }
 };
 
 /**
@@ -116,16 +106,14 @@ export const WithRealmTranslations: Story = {
  * - Key Aspect: Ensures that the component gracefully handles the absence of available authentication methods.
  */
 export const WithoutAuthenticationSelections: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                auth: {
-                    authenticationSelections: [] // No authentication methods available
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            auth: {
+                authenticationSelections: [] // No authentication methods available
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/select-authenticator/Page.tsx

@@ -1,100 +1,100 @@
-import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { ChevronRight, Fingerprint, Globe, KeyRound, Shield } from "lucide-react";
-import { FaKey } from "react-icons/fa";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-const getAuthenticatorIcon = (authSelection: {
-    displayName: string;
-    iconCssClass?: string;
-}) => {
-    const displayName = authSelection.displayName.toLowerCase();
-    const iconClass = authSelection.iconCssClass?.toLowerCase() || "";
-
-    if (
-        displayName.includes("webauthn") ||
-        displayName.includes("passwordless") ||
-        iconClass.includes("webauthn") ||
-        displayName.includes("passkey")
-    ) {
-        return <Fingerprint className="w-5 h-5" />;
-    }
-
-    if (
-        displayName.includes("otp") ||
-        displayName.includes("totp") ||
-        displayName.includes("authenticator")
-    ) {
-        return <Shield className="w-5 h-5" />;
-    }
-
-    if (
-        displayName.includes("identity-provider") ||
-        displayName.includes("idp") ||
-        displayName.includes("sso") ||
-        iconClass.includes("identityprovider")
-    ) {
-        return <Globe className="w-5 h-5" />;
-    }
-
-    if (
-        displayName.includes("password") ||
-        displayName.includes("username") ||
-        iconClass.includes("password")
-    ) {
-        return <KeyRound className="w-5 h-5" />;
-    }
-
-    return <FaKey className="w-5 h-5" />;
-};
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "select-authenticator.ftl");
-
-    const { url, auth } = kcContext;
-
-    const { msg, advancedMsg } = useI18n();
-    return (
-        <Template
-            displayInfo={false}
-            headerNode={msg("loginChooseAuthenticator")}
-        >
-            <form
-                id="kc-select-credential-form"
-                className="space-y-3"
-                action={url.loginAction}
-                method="post"
-            >
-                <div className="space-y-2">
-                    {auth.authenticationSelections.map((authenticationSelection, i) => (
-                        <Button
-                            key={i}
-                            variant="outline"
-                            className="w-full h-auto p-4 flex items-center justify-between text-left hover:bg-accent"
-                            type="submit"
-                            name="authenticationExecution"
-                            value={authenticationSelection.authExecId}
-                        >
-                            <div className="flex items-center gap-3 flex-1">
-                                {getAuthenticatorIcon(authenticationSelection)}
-
-                                <div className="flex-1 min-w-0">
-                                    <div className="font-medium text-sm">
-                                        {advancedMsg(authenticationSelection.displayName)}
-                                    </div>
-                                    <div className="text-xs text-muted-foreground mt-1 whitespace-normal">
-                                        {advancedMsg(authenticationSelection.helpText)}
-                                    </div>
-                                </div>
-                            </div>
-                            <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
-                        </Button>
-                    ))}
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { ChevronRight, Fingerprint, Globe, KeyRound, Shield } from "lucide-react";
+import { FaKey } from "react-icons/fa";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+const getAuthenticatorIcon = (authSelection: {
+    displayName: string;
+    iconCssClass?: string;
+}) => {
+    const displayName = authSelection.displayName.toLowerCase();
+    const iconClass = authSelection.iconCssClass?.toLowerCase() || "";
+
+    if (
+        displayName.includes("webauthn") ||
+        displayName.includes("passwordless") ||
+        iconClass.includes("webauthn") ||
+        displayName.includes("passkey")
+    ) {
+        return <Fingerprint className="w-5 h-5" />;
+    }
+
+    if (
+        displayName.includes("otp") ||
+        displayName.includes("totp") ||
+        displayName.includes("authenticator")
+    ) {
+        return <Shield className="w-5 h-5" />;
+    }
+
+    if (
+        displayName.includes("identity-provider") ||
+        displayName.includes("idp") ||
+        displayName.includes("sso") ||
+        iconClass.includes("identityprovider")
+    ) {
+        return <Globe className="w-5 h-5" />;
+    }
+
+    if (
+        displayName.includes("password") ||
+        displayName.includes("username") ||
+        iconClass.includes("password")
+    ) {
+        return <KeyRound className="w-5 h-5" />;
+    }
+
+    return <FaKey className="w-5 h-5" />;
+};
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "select-authenticator.ftl");
+
+    const { url, auth } = kcContext;
+
+    const { msg, advancedMsg } = useI18n();
+    return (
+        <Template
+            displayInfo={false}
+            headerNode={msg("loginChooseAuthenticator")}
+        >
+            <form
+                id="kc-select-credential-form"
+                className="space-y-3"
+                action={url.loginAction}
+                method="post"
+            >
+                <div className="space-y-2">
+                    {auth.authenticationSelections.map((authenticationSelection, i) => (
+                        <Button
+                            key={i}
+                            variant="outline"
+                            className="w-full h-auto p-4 flex items-center justify-between text-left hover:bg-accent"
+                            type="submit"
+                            name="authenticationExecution"
+                            value={authenticationSelection.authExecId}
+                        >
+                            <div className="flex items-center gap-3 flex-1">
+                                {getAuthenticatorIcon(authenticationSelection)}
+
+                                <div className="flex-1 min-w-0">
+                                    <div className="font-medium text-sm">
+                                        {advancedMsg(authenticationSelection.displayName)}
+                                    </div>
+                                    <div className="text-xs text-muted-foreground mt-1 whitespace-normal">
+                                        {advancedMsg(authenticationSelection.helpText)}
+                                    </div>
+                                </div>
+                            </div>
+                            <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+                        </Button>
+                    ))}
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/select-authenticator/index.ts

@@ -1,3 +1,3 @@
-import { Page } from "./Page";
-
-export default Page;
+import { Page } from "./Page";
+
+export default Page;