@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

package/keycloak-theme/login/pages/idp-review-user-profile/Page.tsx

@@ -1,52 +1,52 @@
-import { Button } from "@/components/ui/button";
-import { useKcContext } from "@/login/KcContext";
-import { useState } from "react";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { UserProfileFormFields } from "../../components/UserProfileFormFields";
-import { useI18n } from "../../i18n";
-
-
-export function Page() {
-
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "idp-review-user-profile.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-    return (
-        <Template
-            displayMessage={kcContext.messagesPerField.exists("global")}
-            displayRequiredFields
-            headerNode={msg("loginIdpReviewProfileTitle")}
-        >
-            <form
-                id="kc-idp-review-profile-form"
-                action={kcContext.url.loginAction}
-                method="post"
-                className="flex flex-col gap-4"
-            >
-                <UserProfileFormFields
-                    onIsFormSubmittableValueChange={setIsFomSubmittable}
-                />
-                <div >
-                    <div id="kc-form-options" >
-                        <div />
-                    </div>
-                    <div id="kc-form-buttons">
-                        <Button
-                            className="w-full"
-                            disabled={!isFomSubmittable}
-                            type="submit"
-                        >
-                            {msgStr("doSubmit")}
-                        </Button>
-                    </div>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { useKcContext } from "@/login/KcContext";
+import { useState } from "react";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { UserProfileFormFields } from "../../components/UserProfileFormFields";
+import { useI18n } from "../../i18n";
+
+
+export function Page() {
+
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "idp-review-user-profile.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            displayMessage={kcContext.messagesPerField.exists("global")}
+            displayRequiredFields
+            headerNode={msg("loginIdpReviewProfileTitle")}
+        >
+            <form
+                id="kc-idp-review-profile-form"
+                action={kcContext.url.loginAction}
+                method="post"
+                className="flex flex-col gap-4"
+            >
+                <UserProfileFormFields
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                />
+                <div >
+                    <div id="kc-form-options" >
+                        <div />
+                    </div>
+                    <div id="kc-form-buttons">
+                        <Button
+                            className="w-full"
+                            disabled={!isFomSubmittable}
+                            type="submit"
+                        >
+                            {msgStr("doSubmit")}
+                        </Button>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/idp-review-user-profile/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/info/Page.stories.tsx

@@ -12,75 +12,65 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                messageHeader: "Message header",
-                message: {
-                    summary: "Server info message"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            messageHeader: "Message header",
+            message: {
+                summary: "Server info message"
+            }
+        }
+    }
 };
 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 WithLinkBack: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                messageHeader: "Message header",
-                message: {
-                    summary: "Server message"
-                },
-                actionUri: undefined
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            messageHeader: "Message header",
+            message: {
+                summary: "Server message"
+            },
+            actionUri: undefined
+        }
+    }
 };
 
 export const WithRequiredActions: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                messageHeader: "Message header",
-                message: {
-                    summary: "Required actions: "
-                },
-                requiredActions: [
-                    "CONFIGURE_TOTP",
-                    "UPDATE_PROFILE",
-                    "VERIFY_EMAIL",
-                    "CUSTOM_ACTION"
-                ],
-                "x-keycloakify": {
-                    messages: {
-                        "requiredAction.CUSTOM_ACTION": "Custom action"
-                    }
+    args: {
+        kcContext: {
+            messageHeader: "Message header",
+            message: {
+                summary: "Required actions: "
+            },
+            requiredActions: [
+                "CONFIGURE_TOTP",
+                "UPDATE_PROFILE",
+                "VERIFY_EMAIL",
+                "CUSTOM_ACTION"
+            ],
+            "x-keycloakify": {
+                messages: {
+                    "requiredAction.CUSTOM_ACTION": "Custom action"
                 }
-            }}
-        />
-    )
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/info/Page.tsx

@@ -1,92 +1,92 @@
-
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { useI18n } from "../../i18n";
-import { useKcContext } from "../../KcContext";
-
-export function Page() {
-    
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "info.ftl");
-
-    const { advancedMsgStr, msg } = useI18n();
-
-    return (
-        <Template
-            displayMessage={false}
-            headerNode={
-                <span
-                    dangerouslySetInnerHTML={{
-                        __html: kcSanitize(
-                            kcContext.messageHeader
-                                ? advancedMsgStr(kcContext.messageHeader)
-                                : kcContext.message.summary
-                        )
-                    }}
-                />
-            }
-        >
-            <Alert variant="info" className="my-3">
-                <AlertDescription>
-                    <p
-                        dangerouslySetInnerHTML={{
-                            __html: kcSanitize(
-                                (() => {
-                                    let html = kcContext.message.summary;
-
-                                    if (kcContext.requiredActions) {
-                                        html += "<b>";
-
-                                        html += kcContext.requiredActions
-                                            .map(requiredAction =>
-                                                advancedMsgStr(
-                                                    `requiredAction.${requiredAction}`
-                                                )
-                                            )
-                                            .join(", ");
-
-                                        html += "</b>";
-                                    }
-
-                                    return html;
-                                })()
-                            )
-                        }}
-                    />
-                </AlertDescription>
-            </Alert>
-
-            {(() => {
-                if (kcContext.skipLink) {
-                    return null;
-                }
-
-                if (kcContext.pageRedirectUri) {
-                    return (
-                        <Button type="button" className="mt-2 flex ms-auto">
-                            <a href={kcContext.pageRedirectUri}>{msg("backToApplication")}</a>
-                        </Button>
-                    );
-                }
-                if (kcContext.actionUri) {
-                    return (
-                        <Button type="button" className="mt-2 flex ms-auto ">
-                            <a href={kcContext.actionUri}>{msg("proceedWithAction")}</a>
-                        </Button>
-                    );
-                }
-
-                if (kcContext.client.baseUrl) {
-                    return (
-                        <Button type="button" className="mt-2 flex  ms-auto-end">
-                            <a href={kcContext.client.baseUrl}>{msg("backToApplication")}</a>
-                        </Button>
-                    );
-                }
-            })()}
-        </Template>
-    );
-}
+
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { useI18n } from "../../i18n";
+import { useKcContext } from "../../KcContext";
+
+export function Page() {
+    
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "info.ftl");
+
+    const { advancedMsgStr, msg } = useI18n();
+
+    return (
+        <Template
+            displayMessage={false}
+            headerNode={
+                <span
+                    dangerouslySetInnerHTML={{
+                        __html: kcSanitize(
+                            kcContext.messageHeader
+                                ? advancedMsgStr(kcContext.messageHeader)
+                                : kcContext.message.summary
+                        )
+                    }}
+                />
+            }
+        >
+            <Alert variant="info" className="my-3">
+                <AlertDescription>
+                    <p
+                        dangerouslySetInnerHTML={{
+                            __html: kcSanitize(
+                                (() => {
+                                    let html = kcContext.message.summary;
+
+                                    if (kcContext.requiredActions) {
+                                        html += "<b>";
+
+                                        html += kcContext.requiredActions
+                                            .map(requiredAction =>
+                                                advancedMsgStr(
+                                                    `requiredAction.${requiredAction}`
+                                                )
+                                            )
+                                            .join(", ");
+
+                                        html += "</b>";
+                                    }
+
+                                    return html;
+                                })()
+                            )
+                        }}
+                    />
+                </AlertDescription>
+            </Alert>
+
+            {(() => {
+                if (kcContext.skipLink) {
+                    return null;
+                }
+
+                if (kcContext.pageRedirectUri) {
+                    return (
+                        <Button type="button" className="mt-2 flex ms-auto">
+                            <a href={kcContext.pageRedirectUri}>{msg("backToApplication")}</a>
+                        </Button>
+                    );
+                }
+                if (kcContext.actionUri) {
+                    return (
+                        <Button type="button" className="mt-2 flex ms-auto ">
+                            <a href={kcContext.actionUri}>{msg("proceedWithAction")}</a>
+                        </Button>
+                    );
+                }
+
+                if (kcContext.client.baseUrl) {
+                    return (
+                        <Button type="button" className="mt-2 flex  ms-auto-end">
+                            <a href={kcContext.client.baseUrl}>{msg("backToApplication")}</a>
+                        </Button>
+                    );
+                }
+            })()}
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/link-idp-action/Page.stories.tsx

@@ -12,23 +12,39 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                idpDisplayName: "GitHub",
-                url: { loginAction: "/mock-login-action" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            idpDisplayName: "GitHub",
+            url: { loginAction: "/mock-login-action" }
+        }
+    }
+};
+
+export const Arabic: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
+};
+export const French: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            }
+        }
+    }
 };
 
 export const DifferentProvider: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                idpDisplayName: "Google",
-                url: { loginAction: "/custom-login-action" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            idpDisplayName: "Google",
+            url: { loginAction: "/custom-login-action" }
+        }
+    }
 };

package/keycloak-theme/login/pages/link-idp-action/Page.tsx

@@ -1,43 +1,43 @@
-import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "link-idp-action.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("linkIdpActionTitle", kcContext.idpDisplayName)}
-            displayMessage={false}
-        >
-            <div id="kc-link-text">{msg("linkIdpActionMessage", kcContext.idpDisplayName)}</div>
-            <form action={kcContext.url.loginAction} method="post">
-                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
-                    <Button
-                        name="cancel-aia"
-                        variant="outline"
-                        className="flex-1"
-                        id="kc-cancel"
-                        type="submit"
-                    >
-                        {msgStr("doCancel")}
-                    </Button>
-                    <Button
-                        name="continue"
-                        id="kc-continue"
-                        type="submit"
-                        className="flex-1"
-                    >
-                        {msgStr("doContinue")}
-                    </Button>
-                </div>
-            </form>
-            <div className="clearfix" />
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "link-idp-action.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template
+            headerNode={msg("linkIdpActionTitle", kcContext.idpDisplayName)}
+            displayMessage={false}
+        >
+            <div id="kc-link-text">{msg("linkIdpActionMessage", kcContext.idpDisplayName)}</div>
+            <form action={kcContext.url.loginAction} method="post">
+                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
+                    <Button
+                        name="cancel-aia"
+                        variant="outline"
+                        className="flex-1"
+                        id="kc-cancel"
+                        type="submit"
+                    >
+                        {msgStr("doCancel")}
+                    </Button>
+                    <Button
+                        name="continue"
+                        id="kc-continue"
+                        type="submit"
+                        className="flex-1"
+                    >
+                        {msgStr("doContinue")}
+                    </Button>
+                </div>
+            </form>
+            <div className="clearfix" />
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/link-idp-action/index.ts

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