@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/login-oauth-grant/Page.tsx

@@ -1,126 +1,136 @@
-import { Button } from "@/components/ui/button";
-import { CardDescription } from "@/components/ui/card";
-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 === "login-oauth-grant.ftl");
-
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n();
-
-
-    return (
-        <Template
-            bodyClassName="oauth"
-            headerNode={
-                <div className="flex flex-col items-center space-y-3">
-                    {kcContext.client.attributes.logoUri && (
-                        <img
-                            src={kcContext.client.attributes.logoUri}
-                            alt="Client logo"
-                            className="h-12 w-auto object-contain"
-                        />
-                    )}
-                    <p className="text-lg font-medium text-center">
-                        {kcContext.client.name
-                            ? msg("oauthGrantTitle", advancedMsgStr(kcContext.client.name))
-                            : msg("oauthGrantTitle", kcContext.client.clientId)}
-                    </p>
-                </div>
-            }
-        >
-            <div className="space-y-6">
-                <div className="text-base">{msg("oauthGrantRequest")}</div>
-
-                <div className="space-y-4">
-                    <div className="space-y-2">
-                        {kcContext.oauth.clientScopesRequested.map(clientScope => (
-                            <div
-                                key={clientScope.consentScreenText}
-                                className="flex items-start space-x-2"
-                            >
-                                <div className="w-2 h-2 bg-primary rounded-full mt-2 shrink-0" />
-                                <span className="text-sm text-muted-foreground">
-                                    {advancedMsg(clientScope.consentScreenText)}
-                                    {clientScope.dynamicScopeParameter && (
-                                        <>
-                                            :{" "}
-                                            <span className="font-medium text-foreground">
-                                                {clientScope.dynamicScopeParameter}
-                                            </span>
-                                        </>
-                                    )}
-                                </span>
-                            </div>
-                        ))}
-                    </div>
-
-                    {(kcContext.client.attributes.policyUri || kcContext.client.attributes.tosUri) && (
-                        <>
-                            <div className="space-y-2">
-                                <CardDescription className="text-xs">
-                                    {kcContext.client.name
-                                        ? msg(
-                                            "oauthGrantInformation",
-                                            advancedMsgStr(kcContext.client.name)
-                                        )
-                                        : msg("oauthGrantInformation", kcContext.client.clientId)}
-                                </CardDescription>
-                                <div className="flex flex-wrap gap-2 text-xs">
-                                    {kcContext.client.attributes.tosUri && (
-                                        <a
-                                            href={kcContext.client.attributes.tosUri}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
-                                        >
-                                            {msg("oauthGrantTos")}
-                                        </a>
-                                    )}
-                                    {kcContext.client.attributes.policyUri && (
-                                        <a
-                                            href={kcContext.client.attributes.policyUri}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
-                                        >
-                                            {msg("oauthGrantPolicy")}
-                                        </a>
-                                    )}
-                                </div>
-                            </div>
-                        </>
-                    )}
-                </div>
-
-                <div>
-                    <form className="w-full" action={kcContext.url.oauthAction} method="POST">
-                        <input type="hidden" name="code" value={kcContext.oauth.code} />
-                        <div className="flex flex-col sm:flex-row gap-3 w-full">
-                            <Button
-                                type="submit"
-                                name="cancel"
-                                id="kc-cancel"
-                                variant="outline"
-                                className="flex-1"
-                            >
-                                {msgStr("doNo")}
-                            </Button>
-                            <Button
-                                type="submit"
-                                name="accept"
-                                id="kc-login"
-                                className="flex-1"
-                            >
-                                {msgStr("doYes")}
-                            </Button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { CardDescription } from "@/components/ui/card";
+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 === "login-oauth-grant.ftl");
+
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n();
+
+    return (
+        <Template
+            bodyClassName="oauth"
+            headerNode={
+                <div className="flex flex-col items-center space-y-3">
+                    {kcContext.client.attributes.logoUri && (
+                        <img
+                            src={kcContext.client.attributes.logoUri}
+                            alt="Client logo"
+                            className="h-12 w-auto object-contain"
+                        />
+                    )}
+                    <p className="text-lg font-medium text-center">
+                        {kcContext.client.name
+                            ? msg(
+                                  "oauthGrantTitle",
+                                  advancedMsgStr(kcContext.client.name)
+                              )
+                            : msg("oauthGrantTitle", kcContext.client.clientId)}
+                    </p>
+                </div>
+            }
+        >
+            <div className="space-y-6">
+                <div className="text-base">{msg("oauthGrantRequest")}</div>
+
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        {kcContext.oauth.clientScopesRequested.map(clientScope => (
+                            <div
+                                key={clientScope.consentScreenText}
+                                className="flex items-start space-x-2"
+                            >
+                                <div className="w-2 h-2 bg-primary rounded-full mt-2 shrink-0" />
+                                <span className="text-sm text-muted-foreground">
+                                    {advancedMsg(clientScope.consentScreenText)}
+                                    {clientScope.dynamicScopeParameter && (
+                                        <>
+                                            :{" "}
+                                            <span className="font-medium text-foreground">
+                                                {clientScope.dynamicScopeParameter}
+                                            </span>
+                                        </>
+                                    )}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+
+                    {(kcContext.client.attributes.policyUri ||
+                        kcContext.client.attributes.tosUri) && (
+                        <>
+                            <div className="space-y-2">
+                                <CardDescription className="text-xs">
+                                    {kcContext.client.name
+                                        ? msg(
+                                              "oauthGrantInformation",
+                                              advancedMsgStr(kcContext.client.name)
+                                          )
+                                        : msg(
+                                              "oauthGrantInformation",
+                                              kcContext.client.clientId
+                                          )}
+                                </CardDescription>
+                                <div className="flex flex-wrap gap-2 text-xs">
+                                    {kcContext.client.attributes.tosUri && (
+                                        <a
+                                            href={kcContext.client.attributes.tosUri}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
+                                        >
+                                            {msg("oauthGrantTos")}
+                                        </a>
+                                    )}
+                                    {kcContext.client.attributes.policyUri && (
+                                        <a
+                                            href={kcContext.client.attributes.policyUri}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
+                                        >
+                                            {msg("oauthGrantPolicy")}
+                                        </a>
+                                    )}
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </div>
+
+                <div>
+                    <form
+                        className="w-full"
+                        action={kcContext.url.oauthAction}
+                        method="POST"
+                    >
+                        <input type="hidden" name="code" value={kcContext.oauth.code} />
+                        <div className="flex flex-col sm:flex-row gap-3 w-full">
+                            <Button
+                                type="submit"
+                                name="cancel"
+                                id="kc-cancel"
+                                variant="outline"
+                                className="flex-1"
+                            >
+                                {msgStr("doNo")}
+                            </Button>
+                            <Button
+                                type="submit"
+                                name="accept"
+                                id="kc-login"
+                                className="flex-1"
+                            >
+                                {msgStr("doYes")}
+                            </Button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-oauth-grant/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/login-oauth2-device-verify-user-code/Page.stories.tsx

@@ -13,32 +13,26 @@ 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"
+            }
+        }
+    }
 };
 
 /**
@@ -48,19 +42,17 @@ export const French: Story = {
  * - Key Aspect: Ensures the error message is properly shown when the user enters an invalid code.
  */
 export const WithErrorMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
-                },
-                message: {
-                    summary: "The user code you entered is invalid. Please try again.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
+            },
+            message: {
+                summary: "The user code you entered is invalid. Please try again.",
+                type: "error"
+            }
+        }
+    }
 };
 
 /**
@@ -70,17 +62,15 @@ export const WithErrorMessage: Story = {
  * - Key Aspect: Ensures the form displays validation errors when the field is left empty.
  */
 export const WithEmptyInputField: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
-                },
-                message: {
-                    summary: "User code cannot be empty. Please enter a valid code.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
+            },
+            message: {
+                summary: "User code cannot be empty. Please enter a valid code.",
+                type: "error"
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-oauth2-device-verify-user-code/Page.tsx

@@ -1,58 +1,56 @@
-import { Button } from "@/components/ui/button";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
-import { assert } from 'tsafe/assert';
-import { Template } from "../../components/Template";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-oauth2-device-verify-user-code.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    const { kcClsx } = useKcClsx();
-
-    return (
-        <Template
-            headerNode={msg("oauth2DeviceVerificationTitle")}
-        >
-            <form
-                id="kc-user-verify-device-user-code-form"
-                className="space-y-5"
-                action={kcContext.url.oauth2DeviceVerificationAction}
-                method="post"
-            >
-                <Field>
-                    <FieldLabel htmlFor="device-user-code">
-                        {msg("verifyOAuth2DeviceUserCode")}
-                    </FieldLabel>
-                    <Input
-                        id="device-user-code"
-                        name="device_user_code"
-                        autoComplete="off"
-                        type="text"
-                        className={kcClsx("kcInputClass")}
-                        autoFocus
-                    />
-                </Field>
-
-                <div className={kcClsx("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
-                        <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
-                    </div>
-
-                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
-                        <div className={kcClsx("kcFormButtonsWrapperClass")}>
-                            <Button className="w-full" type="submit">
-                                {msgStr("doSubmit")}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-oauth2-device-verify-user-code.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const { kcClsx } = useKcClsx();
+
+    return (
+        <Template headerNode={msg("oauth2DeviceVerificationTitle")}>
+            <form
+                id="kc-user-verify-device-user-code-form"
+                className="space-y-5"
+                action={kcContext.url.oauth2DeviceVerificationAction}
+                method="post"
+            >
+                <Field>
+                    <FieldLabel htmlFor="device-user-code">
+                        {msg("verifyOAuth2DeviceUserCode")}
+                    </FieldLabel>
+                    <Input
+                        id="device-user-code"
+                        name="device_user_code"
+                        autoComplete="off"
+                        type="text"
+                        className={kcClsx("kcInputClass")}
+                        autoFocus
+                    />
+                </Field>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <div className={kcClsx("kcFormButtonsWrapperClass")}>
+                            <Button className="w-full" type="submit">
+                                {msgStr("doSubmit")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-oauth2-device-verify-user-code/index.ts

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