@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/register/TermsAcceptance.tsx

@@ -1,56 +1,55 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { FieldError } from '@/components/ui/field';
-import { Label } from '@/components/ui/label';
-import { KcContext } from '@/kc.gen';
-import { useI18n } from '@/login/i18n';
-import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
-
-export function TermsAcceptance(props: {
-    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
-    areTermsAccepted: boolean;
-    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
-}) {
-    const { messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } =
-        props;
-
-    const { msg } = useI18n();
-
-    return (
-        <div className="space-y-4">
-            <div className="p-4 bg-muted/50 rounded-lg space-y-2">
-                <h3 className="font-medium text-sm">{msg("termsTitle")}</h3>
-                <div className="text-sm text-muted-foreground">{msg("termsText")}</div>
-            </div>
-
-            <div className="space-y-2">
-                <div className="flex items-center space-x-2">
-                    <Checkbox
-                        id="termsAccepted"
-                        name="termsAccepted"
-                        checked={areTermsAccepted}
-                        onCheckedChange={checked =>
-                            onAreTermsAcceptedValueChange(!!checked)
-                        }
-                        aria-invalid={messagesPerField.existsError("termsAccepted")}
-                    />
-                    <Label
-                        htmlFor="termsAccepted"
-                        className="text-sm font-medium cursor-pointer"
-                    >
-                        {msg("acceptTerms")}
-                    </Label>
-                </div>
-
-                {messagesPerField.existsError("termsAccepted") && (
-                    <FieldError id="input-error-terms-accepted">
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: kcSanitize(messagesPerField.get("termsAccepted"))
-                            }}
-                        />
-                    </FieldError>
-                )}
-            </div>
-        </div>
-    );
-}
+import { Checkbox } from "@/components/ui/checkbox";
+import { FieldError } from "@/components/ui/field";
+import { Label } from "@/components/ui/label";
+import { useI18n } from "@/login/i18n";
+import type { KcContext } from "@/login/KcContext";
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+
+export function TermsAcceptance(props: {
+    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}) {
+    const { messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
+
+    const { msg } = useI18n();
+
+    return (
+        <div className="space-y-4">
+            <div className="p-4 bg-muted/50 rounded-lg space-y-2">
+                <h3 className="font-medium text-sm">{msg("termsTitle")}</h3>
+                <div className="text-sm text-muted-foreground">{msg("termsText")}</div>
+            </div>
+
+            <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                    <Checkbox
+                        id="termsAccepted"
+                        name="termsAccepted"
+                        checked={areTermsAccepted}
+                        onCheckedChange={checked =>
+                            onAreTermsAcceptedValueChange(!!checked)
+                        }
+                        aria-invalid={messagesPerField.existsError("termsAccepted")}
+                    />
+                    <Label
+                        htmlFor="termsAccepted"
+                        className="text-sm font-medium cursor-pointer"
+                    >
+                        {msg("acceptTerms")}
+                    </Label>
+                </div>
+
+                {messagesPerField.existsError("termsAccepted") && (
+                    <FieldError id="input-error-terms-accepted">
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(messagesPerField.get("termsAccepted"))
+                            }}
+                        />
+                    </FieldError>
+                )}
+            </div>
+        </div>
+    );
+}

package/keycloak-theme/login/pages/register/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/saml-post-form/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "saml-post-form.ftl" });
 
 const meta = {
@@ -12,30 +11,24 @@ 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"
+            }
+        }
+    }
 };

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

@@ -1,66 +1,64 @@
-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

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "select-authenticator.ftl" });
 
 const meta = {
@@ -12,101 +11,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 +105,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
+            }
+        }
+    }
 };