@oussemasahbeni/keycloakify-login-shadcn 250004.0.7 → 250004.0.8

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

@@ -1,6 +1,5 @@
-
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
+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";
@@ -8,7 +7,6 @@ import { useI18n } from "../../i18n";
 import { useKcContext } from "../../KcContext";
 
 export function Page() {
-    
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "info.ftl");
 
@@ -67,7 +65,9 @@ export function Page() {
                 if (kcContext.pageRedirectUri) {
                     return (
                         <Button type="button" className="mt-2 flex ms-auto">
-                            <a href={kcContext.pageRedirectUri}>{msg("backToApplication")}</a>
+                            <a href={kcContext.pageRedirectUri}>
+                                {msg("backToApplication")}
+                            </a>
                         </Button>
                     );
                 }
@@ -82,7 +82,9 @@ export function Page() {
                 if (kcContext.client.baseUrl) {
                     return (
                         <Button type="button" className="mt-2 flex  ms-auto-end">
-                            <a href={kcContext.client.baseUrl}>{msg("backToApplication")}</a>
+                            <a href={kcContext.client.baseUrl}>
+                                {msg("backToApplication")}
+                            </a>
                         </Button>
                     );
                 }

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

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
@@ -15,7 +15,9 @@ export function Page() {
             headerNode={msg("linkIdpActionTitle", kcContext.idpDisplayName)}
             displayMessage={false}
         >
-            <div id="kc-link-text">{msg("linkIdpActionMessage", kcContext.idpDisplayName)}</div>
+            <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

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

@@ -1,12 +1,12 @@
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Field, FieldError, FieldLabel } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useKcContext } from '@/login/KcContext';
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useKcContext } from "@/login/KcContext";
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
-import { Fingerprint } from 'lucide-react';
+import { Fingerprint } from "lucide-react";
 import { useState } from "react";
 import { assert } from "tsafe/assert";
 import { PasswordWrapper } from "../../components/PasswordWrapper";
@@ -49,8 +49,8 @@ export function Form() {
                                         {!kcContext.realm.loginWithEmailAllowed
                                             ? msg("email")
                                             : !kcContext.realm.registrationEmailAsUsername
-                                                ? msg("usernameOrEmail")
-                                                : msg("username")}
+                                              ? msg("usernameOrEmail")
+                                              : msg("username")}
                                     </FieldLabel>
                                     <Input
                                         tabIndex={2}
@@ -69,21 +69,21 @@ export function Form() {
                                         "username",
                                         "password"
                                     ) && (
-                                            <FieldError>
-                                                <span
-                                                    id="input-error"
-                                                    aria-live="polite"
-                                                    dangerouslySetInnerHTML={{
-                                                        __html: kcSanitize(
-                                                            kcContext.messagesPerField.getFirstError(
-                                                                "username",
-                                                                "password"
-                                                            )
+                                        <FieldError>
+                                            <span
+                                                id="input-error"
+                                                aria-live="polite"
+                                                dangerouslySetInnerHTML={{
+                                                    __html: kcSanitize(
+                                                        kcContext.messagesPerField.getFirstError(
+                                                            "username",
+                                                            "password"
                                                         )
-                                                    }}
-                                                />
-                                            </FieldError>
-                                        )}
+                                                    )
+                                                }}
+                                            />
+                                        </FieldError>
+                                    )}
                                 </Field>
                             )}
 
@@ -91,7 +91,7 @@ export function Form() {
                                 <FieldLabel htmlFor="password">
                                     {msg("password")}
                                 </FieldLabel>
-                                <PasswordWrapper passwordInputId="password" >
+                                <PasswordWrapper passwordInputId="password">
                                     <Input
                                         tabIndex={3}
                                         type="password"
@@ -104,7 +104,10 @@ export function Form() {
                                         )}
                                     />
                                 </PasswordWrapper>
-                                {kcContext.messagesPerField.existsError("username", "password") && (
+                                {kcContext.messagesPerField.existsError(
+                                    "username",
+                                    "password"
+                                ) && (
                                     <FieldError>
                                         <span
                                             id="input-error"
@@ -124,30 +127,35 @@ export function Form() {
 
                             <div className=" space-y-1 my-3 flex justify-between text-xs  ">
                                 <div>
-                                    {kcContext.realm.rememberMe && !kcContext.usernameHidden && (
-                                        <div className="flex items-center space-x-2 ">
-                                            <Checkbox
-                                                tabIndex={5}
-                                                id="rememberMe"
-                                                name="rememberMe"
-                                                defaultChecked={!!kcContext.login.rememberMe}
-                                            />
+                                    {kcContext.realm.rememberMe &&
+                                        !kcContext.usernameHidden && (
+                                            <div className="flex items-center space-x-2 ">
+                                                <Checkbox
+                                                    tabIndex={5}
+                                                    id="rememberMe"
+                                                    name="rememberMe"
+                                                    defaultChecked={
+                                                        !!kcContext.login.rememberMe
+                                                    }
+                                                />
 
-                                            <Label
-                                                htmlFor="rememberMe"
-                                                className="text-sm font-medium cursor-pointer"
-                                            >
-                                                {msg("rememberMe")}
-                                            </Label>
-                                        </div>
-                                    )}
+                                                <Label
+                                                    htmlFor="rememberMe"
+                                                    className="text-sm font-medium cursor-pointer"
+                                                >
+                                                    {msg("rememberMe")}
+                                                </Label>
+                                            </div>
+                                        )}
                                 </div>
                                 <div className="link-style ">
                                     {kcContext.realm.resetPasswordAllowed && (
                                         <span className=" underline-offset-4 hover:underline">
                                             <a
                                                 tabIndex={6}
-                                                href={kcContext.url.loginResetCredentialsUrl}
+                                                href={
+                                                    kcContext.url.loginResetCredentialsUrl
+                                                }
                                             >
                                                 <Label className="text-sm font-medium cursor-pointer">
                                                     {msg("doForgotPassword")}
@@ -181,17 +189,12 @@ export function Form() {
                         </form>
                     )}
                 </div>
-
             </div>
 
             {kcContext.enableWebAuthnConditionalUI && (
                 <>
                     <form id="webauth" action={kcContext.url.loginAction} method="post">
-                        <input
-                            type="hidden"
-                            id="clientDataJSON"
-                            name="clientDataJSON"
-                        />
+                        <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
                         <input
                             type="hidden"
                             id="authenticatorData"
@@ -206,10 +209,7 @@ export function Form() {
                     {kcContext.authenticators !== undefined &&
                         kcContext.authenticators.authenticators.length !== 0 && (
                             <>
-                                <form
-                                    id="authn_select"
-                                    className={kcClsx("kcFormClass")}
-                                >
+                                <form id="authn_select" className={kcClsx("kcFormClass")}>
                                     {kcContext.authenticators.authenticators.map(
                                         (authenticator, i) => (
                                             <input

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

@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-
 export const Arabic: Story = {
     args: {
         kcContext: {
@@ -46,7 +45,9 @@ export const WithInvalidCredential: Story = {
                 // existsError() so they are the only ones that need to mock.
                 existsError: (fieldName: string, ...otherFieldNames: string[]) => {
                     const fieldNames = [fieldName, ...otherFieldNames];
-                    return fieldNames.includes("username") || fieldNames.includes("password");
+                    return (
+                        fieldNames.includes("username") || fieldNames.includes("password")
+                    );
                 },
                 get: (fieldName: string) => {
                     if (fieldName === "username" || fieldName === "password") {
@@ -342,4 +343,4 @@ export const WithSocialProvidersAndWithoutRememberMe: Story = {
             realm: { rememberMe: false }
         }
     }
-};
+};

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

@@ -1,4 +1,3 @@
-
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 import { useI18n } from "../../i18n";

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

@@ -1,11 +1,11 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 import { clsx } from "@keycloakify/login-ui/tools/clsx";
 import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { assert } from "tsafe/assert";
 import { useI18n } from "../../i18n";
 import { useKcContext } from "../../KcContext";
-import useProviderLogos from './useProviderLogos';
+import useProviderLogos from "./useProviderLogos";
 
 /** To use this component make sure that kcContext.social exists */
 export function SocialProviders() {
@@ -15,7 +15,6 @@ export function SocialProviders() {
 
     const providerLogos = useProviderLogos();
 
-
     const { msg } = useI18n();
 
     const { kcClsx } = useKcClsx();
@@ -41,20 +40,16 @@ export function SocialProviders() {
             </div>
             <ul
                 className={`mt-4! grid gap-2 sm:grid-cols-1 ${(kcContext.social?.providers?.length ?? 0) > 3 ? "sm:grid-cols-2" : ""}`}
-
             >
                 {kcContext.social.providers.map((...[p, , providers]) => (
                     <li key={p.alias}>
-                        <Button
-                            variant="outline"
-                            className="w-full hover:text-current"
-                        >
+                        <Button variant="outline" className="w-full hover:text-current">
                             <a
                                 id={`social-${p.alias}`}
                                 className={clsx(
                                     kcClsx(
                                         providers.length > 3 &&
-                                        "kcFormSocialAccountGridItem"
+                                            "kcFormSocialAccountGridItem"
                                     ),
                                     "flex items-center justify-center gap-2 "
                                 )}
@@ -64,22 +59,16 @@ export function SocialProviders() {
                                 <div className={"h-5 w-5"}>
                                     {providerLogos[p.alias] ? (
                                         <img
-                                            src={
-                                                providerLogos[p.alias]
-                                            }
+                                            src={providerLogos[p.alias]}
                                             alt={`${p.displayName} logo`}
-                                            className={
-                                                "h-full w-auto"
-                                            }
+                                            className={"h-full w-auto"}
                                         />
                                     ) : (
                                         // Fallback to the original iconClasses if the logo is not defined
                                         p.iconClasses && (
                                             <i
                                                 className={clsx(
-                                                    kcClsx(
-                                                        "kcCommonLogoIdP"
-                                                    ),
+                                                    kcClsx("kcCommonLogoIdP"),
                                                     p.iconClasses,
                                                     `text-provider-${p.alias}`
                                                 )}
@@ -91,15 +80,12 @@ export function SocialProviders() {
 
                                 <span
                                     dangerouslySetInnerHTML={{
-                                        __html: kcSanitize(
-                                            p.displayName
-                                        )
+                                        __html: kcSanitize(p.displayName)
                                     }}
                                 ></span>
                             </a>
                         </Button>
                     </li>
-
                 ))}
             </ul>
         </div>

package/keycloak-theme/login/pages/login-config-totp/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-config-totp.ftl" });
 
 const meta = {

package/keycloak-theme/login/pages/login-config-totp/Page.tsx

@@ -1,16 +1,15 @@
 import { Button } from "@/components/ui/button";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-config-totp.ftl");
 
@@ -60,7 +59,10 @@ export function Page() {
                                     </div>
                                     <div className="mt-4">
                                         <Button variant="outline" asChild>
-                                            <a href={kcContext.totp.qrUrl} className="text-sm">
+                                            <a
+                                                href={kcContext.totp.qrUrl}
+                                                className="text-sm"
+                                            >
                                                 {msg("loginTotpScanBarcode")}
                                             </a>
                                         </Button>
@@ -76,7 +78,9 @@ export function Page() {
                                                 {msg("loginTotpType")}:
                                             </span>
                                             <span className="font-mono bg-secondary px-2 py-1 rounded text-xs">
-                                                {msg(`loginTotp.${kcContext.totp.policy.type}`)}
+                                                {msg(
+                                                    `loginTotp.${kcContext.totp.policy.type}`
+                                                )}
                                             </span>
                                         </div>
                                         <div className="flex justify-between">
@@ -105,7 +109,8 @@ export function Page() {
                                             <span className="font-mono bg-secondary px-2 py-1 rounded text-xs">
                                                 {kcContext.totp.policy.type === "totp"
                                                     ? kcContext.totp.policy.period
-                                                    : kcContext.totp.policy.initialCounter}
+                                                    : kcContext.totp.policy
+                                                          .initialCounter}
                                             </span>
                                         </div>
                                     </div>
@@ -152,7 +157,9 @@ export function Page() {
                                 id="totp"
                                 name="totp"
                                 autoComplete="off"
-                                aria-invalid={kcContext.messagesPerField.existsError("totp")}
+                                aria-invalid={kcContext.messagesPerField.existsError(
+                                    "totp"
+                                )}
                             />
                             {kcContext.messagesPerField.existsError("totp") && (
                                 <FieldError>
@@ -173,7 +180,9 @@ export function Page() {
                             name="totpSecret"
                             value={kcContext.totp.totpSecret}
                         />
-                        {kcContext.mode && <input type="hidden" id="mode" value={kcContext.mode} />}
+                        {kcContext.mode && (
+                            <input type="hidden" id="mode" value={kcContext.mode} />
+                        )}
                     </div>
 
                     <div className={kcClsx("kcFormGroupClass")}>
@@ -189,7 +198,9 @@ export function Page() {
                                 id="userLabel"
                                 name="userLabel"
                                 autoComplete="off"
-                                aria-invalid={kcContext.messagesPerField.existsError("userLabel")}
+                                aria-invalid={kcContext.messagesPerField.existsError(
+                                    "userLabel"
+                                )}
                             />
                             {kcContext.messagesPerField.existsError("userLabel") && (
                                 <FieldError>
@@ -197,7 +208,9 @@ export function Page() {
                                     <span
                                         dangerouslySetInnerHTML={{
                                             __html: kcSanitize(
-                                                kcContext.messagesPerField.get("userLabel")
+                                                kcContext.messagesPerField.get(
+                                                    "userLabel"
+                                                )
                                             )
                                         }}
                                     />

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

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 // Mock kcContext to avoid the TS2304 error
 const mockKcContext = {
     url: {

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

@@ -1,10 +1,9 @@
 import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from 'tsafe/assert';
+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-idp-link-confirm.ftl");
@@ -12,9 +11,7 @@ export function Page() {
     const { msg } = useI18n();
 
     return (
-        <Template
-            headerNode={msg("confirmLinkIdpTitle")}
-        >
+        <Template headerNode={msg("confirmLinkIdpTitle")}>
             <form id="kc-register-form" action={kcContext.url.loginAction} method="post">
                 <div className="flex flex-col gap-4">
                     <Button

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

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({
     pageId: "login-idp-link-confirm-override.ftl"
 });

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

@@ -1,20 +1,17 @@
 import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from 'tsafe/assert';
+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-idp-link-confirm-override.ftl");
 
-
     const { msg } = useI18n();
 
     return (
-        <Template
-            headerNode={msg("confirmOverrideIdpTitle")}
-        >
+        <Template headerNode={msg("confirmOverrideIdpTitle")}>
             <form
                 id="kc-register-form"
                 action={kcContext.url.loginAction}

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

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 // Mock kcContext to avoid TS2304 error and to simulate the real environment
 const mockKcContext = {
     url: {

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

@@ -1,20 +1,17 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from 'tsafe/assert';
+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-idp-link-email.ftl");
 
     const { msg } = useI18n();
 
     return (
-        <Template
-            headerNode={msg("emailLinkIdpTitle", kcContext.idpAlias)}
-        >
+        <Template headerNode={msg("emailLinkIdpTitle", kcContext.idpAlias)}>
             <Alert id="instruction1" variant="info" className="my-3">
                 <AlertDescription>
                     {msg(

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

@@ -1,8 +1,8 @@
 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 { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
@@ -11,7 +11,6 @@ export function Page() {
 
     const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n();
 
-
     return (
         <Template
             bodyClassName="oauth"
@@ -26,7 +25,10 @@ export function Page() {
                     )}
                     <p className="text-lg font-medium text-center">
                         {kcContext.client.name
-                            ? msg("oauthGrantTitle", advancedMsgStr(kcContext.client.name))
+                            ? msg(
+                                  "oauthGrantTitle",
+                                  advancedMsgStr(kcContext.client.name)
+                              )
                             : msg("oauthGrantTitle", kcContext.client.clientId)}
                     </p>
                 </div>
@@ -58,16 +60,20 @@ export function Page() {
                         ))}
                     </div>
 
-                    {(kcContext.client.attributes.policyUri || kcContext.client.attributes.tosUri) && (
+                    {(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)}
+                                              "oauthGrantInformation",
+                                              advancedMsgStr(kcContext.client.name)
+                                          )
+                                        : msg(
+                                              "oauthGrantInformation",
+                                              kcContext.client.clientId
+                                          )}
                                 </CardDescription>
                                 <div className="flex flex-wrap gap-2 text-xs">
                                     {kcContext.client.attributes.tosUri && (
@@ -97,7 +103,11 @@ export function Page() {
                 </div>
 
                 <div>
-                    <form className="w-full" action={kcContext.url.oauthAction} method="POST">
+                    <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