@oussemasahbeni/keycloakify-login-shadcn 250004.0.7 → 250004.0.8

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

@@ -1,10 +1,10 @@
 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 { 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() {
@@ -16,9 +16,7 @@ export function Page() {
     const { kcClsx } = useKcClsx();
 
     return (
-        <Template
-            headerNode={msg("oauth2DeviceVerificationTitle")}
-        >
+        <Template headerNode={msg("oauth2DeviceVerificationTitle")}>
             <form
                 id="kc-user-verify-device-user-code-form"
                 className="space-y-5"

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

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

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

@@ -1,19 +1,18 @@
 import { Button } from "@/components/ui/button";
-import { FieldError } from '@/components/ui/field';
+import { FieldError } from "@/components/ui/field";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
-import { useState } from 'react';
+import { useState } from "react";
 import { MdOutlineDevices } from "react-icons/md";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
-
     const { kcContext } = useKcContext();
 
     assert(kcContext.pageId === "login-otp.ftl");
@@ -43,26 +42,28 @@ export function Page() {
                             defaultValue={kcContext.otpLogin.selectedCredentialId}
                             className="space-y-2"
                         >
-                            {kcContext.otpLogin.userOtpCredentials.map((otpCredential, index) => (
-                                <div
-                                    key={otpCredential.id}
-                                    className="flex items-center space-x-3 p-3 border rounded-lg"
-                                >
-                                    <RadioGroupItem
-                                        value={otpCredential.id}
-                                        id={`kc-otp-credential-${index}`}
-                                    />
-                                    <Label
-                                        htmlFor={`kc-otp-credential-${index}`}
-                                        className="flex items-center space-x-2 cursor-pointer flex-1"
+                            {kcContext.otpLogin.userOtpCredentials.map(
+                                (otpCredential, index) => (
+                                    <div
+                                        key={otpCredential.id}
+                                        className="flex items-center space-x-3 p-3 border rounded-lg"
                                     >
-                                        <MdOutlineDevices />
-                                        <span className="text-sm font-medium">
-                                            {otpCredential.userLabel}
-                                        </span>
-                                    </Label>
-                                </div>
-                            ))}
+                                        <RadioGroupItem
+                                            value={otpCredential.id}
+                                            id={`kc-otp-credential-${index}`}
+                                        />
+                                        <Label
+                                            htmlFor={`kc-otp-credential-${index}`}
+                                            className="flex items-center space-x-2 cursor-pointer flex-1"
+                                        >
+                                            <MdOutlineDevices />
+                                            <span className="text-sm font-medium">
+                                                {otpCredential.userLabel}
+                                            </span>
+                                        </Label>
+                                    </div>
+                                )
+                            )}
                         </RadioGroup>
                     </div>
                 )}
@@ -92,14 +93,22 @@ export function Page() {
                         <FieldError id="input-error-otp-code">
                             <span
                                 dangerouslySetInnerHTML={{
-                                    __html: kcSanitize(kcContext.messagesPerField.get("totp"))
+                                    __html: kcSanitize(
+                                        kcContext.messagesPerField.get("totp")
+                                    )
                                 }}
                             />
                         </FieldError>
                     )}
                 </div>
 
-                <Button className="w-full" name="login" id="kc-login" type="submit" disabled={isSubmitting}>
+                <Button
+                    className="w-full"
+                    name="login"
+                    id="kc-login"
+                    type="submit"
+                    disabled={isSubmitting}
+                >
                     {msgStr("doLogIn")}
                 </Button>
             </form>

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

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

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

@@ -1,7 +1,7 @@
 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() {
@@ -11,9 +11,7 @@ export function Page() {
     const { msg } = useI18n();
 
     return (
-        <Template
-            headerNode={msg("pageExpiredTitle")}
-        >
+        <Template headerNode={msg("pageExpiredTitle")}>
             <Alert variant="warning" className="my-6">
                 <AlertDescription>
                     <div className="space-y-3 text-sm leading-relaxed">

package/keycloak-theme/login/pages/login-passkeys-conditional-authenticate/Page.tsx

@@ -57,110 +57,158 @@ export function Page() {
             </form>
 
             <div className={kcClsx("kcFormGroupClass")} style={{ marginBottom: 0 }}>
-                {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
-                    <>
-                        <form id="authn_select" className={kcClsx("kcFormClass")}>
-                            {authenticators.authenticators.map((authenticator, i) => (
-                                <input
-                                    key={i}
-                                    type="hidden"
-                                    name="authn_use_chk"
-                                    readOnly
-                                    value={authenticator.credentialId}
-                                />
-                            ))}
-                        </form>
-                        {shouldDisplayAuthenticators && (
-                            <>
-                                {authenticators.authenticators.length > 1 && (
-                                    <p className={kcClsx("kcSelectAuthListItemTitle")}>
-                                        {msg("passkey-available-authenticators")}
-                                    </p>
-                                )}
-                                <div className={kcClsx("kcFormClass")}>
-                                    {authenticators.authenticators.map((authenticator, i) => (
-                                        <div
-                                            key={i}
-                                            id={`kc-webauthn-authenticator-item-${i}`}
-                                            className={kcClsx("kcSelectAuthListItemClass")}
+                {authenticators !== undefined &&
+                    Object.keys(authenticators).length !== 0 && (
+                        <>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
+                                {authenticators.authenticators.map((authenticator, i) => (
+                                    <input
+                                        key={i}
+                                        type="hidden"
+                                        name="authn_use_chk"
+                                        readOnly
+                                        value={authenticator.credentialId}
+                                    />
+                                ))}
+                            </form>
+                            {shouldDisplayAuthenticators && (
+                                <>
+                                    {authenticators.authenticators.length > 1 && (
+                                        <p
+                                            className={kcClsx(
+                                                "kcSelectAuthListItemTitle"
+                                            )}
                                         >
-                                            <i
-                                                className={clsx(
-                                                    (() => {
-                                                        const className = kcClsx(
-                                                            authenticator.transports.iconClass as any
-                                                        );
-                                                        if (
-                                                            className ===
-                                                            authenticator.transports.iconClass
-                                                        ) {
-                                                            return kcClsx("kcWebAuthnDefaultIcon");
-                                                        }
-                                                        return className;
-                                                    })(),
-                                                    kcClsx("kcSelectAuthListItemIconPropertyClass")
-                                                )}
-                                            />
-                                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
+                                            {msg("passkey-available-authenticators")}
+                                        </p>
+                                    )}
+                                    <div className={kcClsx("kcFormClass")}>
+                                        {authenticators.authenticators.map(
+                                            (authenticator, i) => (
                                                 <div
-                                                    id={`kc-webauthn-authenticator-label-${i}`}
+                                                    key={i}
+                                                    id={`kc-webauthn-authenticator-item-${i}`}
                                                     className={kcClsx(
-                                                        "kcSelectAuthListItemHeadingClass"
+                                                        "kcSelectAuthListItemClass"
                                                     )}
                                                 >
-                                                    {advancedMsg(authenticator.label)}
-                                                </div>
-                                                {authenticator.transports !== undefined &&
-                                                    authenticator.transports.displayNameProperties !==
-                                                    undefined &&
-                                                    authenticator.transports.displayNameProperties
-                                                        .length !== 0 && (
+                                                    <i
+                                                        className={clsx(
+                                                            (() => {
+                                                                const className = kcClsx(
+                                                                    authenticator
+                                                                        .transports
+                                                                        .iconClass as any
+                                                                );
+                                                                if (
+                                                                    className ===
+                                                                    authenticator
+                                                                        .transports
+                                                                        .iconClass
+                                                                ) {
+                                                                    return kcClsx(
+                                                                        "kcWebAuthnDefaultIcon"
+                                                                    );
+                                                                }
+                                                                return className;
+                                                            })(),
+                                                            kcClsx(
+                                                                "kcSelectAuthListItemIconPropertyClass"
+                                                            )
+                                                        )}
+                                                    />
+                                                    <div
+                                                        className={kcClsx(
+                                                            "kcSelectAuthListItemBodyClass"
+                                                        )}
+                                                    >
                                                         <div
-                                                            id={`kc-webauthn-authenticator-transport-${i}`}
+                                                            id={`kc-webauthn-authenticator-label-${i}`}
                                                             className={kcClsx(
-                                                                "kcSelectAuthListItemDescriptionClass"
+                                                                "kcSelectAuthListItemHeadingClass"
                                                             )}
                                                         >
-                                                            {authenticator.transports.displayNameProperties.map(
-                                                                (nameProperty, i, arr) => (
-                                                                    <Fragment key={i}>
-                                                                        <span key={i}>
-                                                                            {" "}
-                                                                            {advancedMsg(
-                                                                                nameProperty
-                                                                            )}{" "}
-                                                                        </span>
-                                                                        {i !== arr.length - 1 && (
-                                                                            <span>, </span>
-                                                                        )}
-                                                                    </Fragment>
-                                                                )
+                                                            {advancedMsg(
+                                                                authenticator.label
                                                             )}
                                                         </div>
-                                                    )}
-                                                <div
-                                                    className={kcClsx(
-                                                        "kcSelectAuthListItemDescriptionClass"
-                                                    )}
-                                                >
-                                                    <span
-                                                        id={`kc-webauthn-authenticator-createdlabel-${i}`}
-                                                    >
-                                                        {msg("passkey-createdAt-label")}
-                                                    </span>
-                                                    <span id={`kc-webauthn-authenticator-created-${i}`}>
-                                                        {authenticator.createdAt}
-                                                    </span>
+                                                        {authenticator.transports !==
+                                                            undefined &&
+                                                            authenticator.transports
+                                                                .displayNameProperties !==
+                                                                undefined &&
+                                                            authenticator.transports
+                                                                .displayNameProperties
+                                                                .length !== 0 && (
+                                                                <div
+                                                                    id={`kc-webauthn-authenticator-transport-${i}`}
+                                                                    className={kcClsx(
+                                                                        "kcSelectAuthListItemDescriptionClass"
+                                                                    )}
+                                                                >
+                                                                    {authenticator.transports.displayNameProperties.map(
+                                                                        (
+                                                                            nameProperty,
+                                                                            i,
+                                                                            arr
+                                                                        ) => (
+                                                                            <Fragment
+                                                                                key={i}
+                                                                            >
+                                                                                <span
+                                                                                    key={
+                                                                                        i
+                                                                                    }
+                                                                                >
+                                                                                    {" "}
+                                                                                    {advancedMsg(
+                                                                                        nameProperty
+                                                                                    )}{" "}
+                                                                                </span>
+                                                                                {i !==
+                                                                                    arr.length -
+                                                                                        1 && (
+                                                                                    <span>
+                                                                                        ,{" "}
+                                                                                    </span>
+                                                                                )}
+                                                                            </Fragment>
+                                                                        )
+                                                                    )}
+                                                                </div>
+                                                            )}
+                                                        <div
+                                                            className={kcClsx(
+                                                                "kcSelectAuthListItemDescriptionClass"
+                                                            )}
+                                                        >
+                                                            <span
+                                                                id={`kc-webauthn-authenticator-createdlabel-${i}`}
+                                                            >
+                                                                {msg(
+                                                                    "passkey-createdAt-label"
+                                                                )}
+                                                            </span>
+                                                            <span
+                                                                id={`kc-webauthn-authenticator-created-${i}`}
+                                                            >
+                                                                {authenticator.createdAt}
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                    <div
+                                                        className={kcClsx(
+                                                            "kcSelectAuthListItemFillClass"
+                                                        )}
+                                                    />
                                                 </div>
-                                            </div>
-                                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </>
-                        )}
-                    </>
-                )}
+                                            )
+                                        )}
+                                    </div>
+                                </>
+                            )}
+                        </>
+                    )}
                 <div id="kc-form">
                     <div id="kc-form-wrapper">
                         {realm.password && (
@@ -173,20 +221,27 @@ export function Page() {
                                     try {
                                         // @ts-expect-error: Ok
                                         event.target.login.disabled = true;
-                                    } catch { /* empty */ }
+                                    } catch {
+                                        /* empty */
+                                    }
 
                                     return true;
                                 }}
                             >
                                 {!usernameHidden && (
                                     <div className={kcClsx("kcFormGroupClass")}>
-                                        <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                                        <label
+                                            htmlFor="username"
+                                            className={kcClsx("kcLabelClass")}
+                                        >
                                             {msg("passkey-autofill-select")}
                                         </label>
                                         <input
                                             tabIndex={1}
                                             id="username"
-                                            aria-invalid={messagesPerField.existsError("username")}
+                                            aria-invalid={messagesPerField.existsError(
+                                                "username"
+                                            )}
                                             className={kcClsx("kcInputClass")}
                                             name="username"
                                             defaultValue={login.username ?? ""}
@@ -197,7 +252,9 @@ export function Page() {
                                         {messagesPerField.existsError("username") && (
                                             <span
                                                 id="input-error-username"
-                                                className={kcClsx("kcInputErrorMessageClass")}
+                                                className={kcClsx(
+                                                    "kcInputErrorMessageClass"
+                                                )}
                                                 aria-live="polite"
                                             >
                                                 {messagesPerField.get("username")}

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

@@ -1,17 +1,17 @@
 import { Button } from "@/components/ui/button";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from '@/components/ui/label';
-import { PasswordWrapper } from '@/login/components/PasswordWrapper';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { Label } from "@/components/ui/label";
+import { PasswordWrapper } from "@/login/components/PasswordWrapper";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import { Fingerprint } from "lucide-react";
 import { useState } from "react";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
-import { useScript } from './useScript';
+import { useScript } from "./useScript";
 
 export function Page() {
     const { kcContext } = useKcContext();
@@ -44,16 +44,16 @@ export function Page() {
             >
                 <Field>
                     <FieldLabel htmlFor="password">{msg("password")}</FieldLabel>
-                    <PasswordWrapper
-                        passwordInputId="password"
-                    >
+                    <PasswordWrapper passwordInputId="password">
                         <Input
                             tabIndex={2}
                             type="password"
                             id="password"
                             name="password"
                             autoComplete="current-password"
-                            aria-invalid={kcContext.messagesPerField.existsError("password")}
+                            aria-invalid={kcContext.messagesPerField.existsError(
+                                "password"
+                            )}
                         />
                     </PasswordWrapper>
                     {kcContext.messagesPerField.existsError("password") && (
@@ -63,7 +63,9 @@ export function Page() {
                                 aria-live="polite"
                                 dangerouslySetInnerHTML={{
                                     __html: kcSanitize(
-                                        kcContext.messagesPerField.getFirstError("password")
+                                        kcContext.messagesPerField.getFirstError(
+                                            "password"
+                                        )
                                     )
                                 }}
                             />
@@ -74,10 +76,7 @@ export function Page() {
                 <div className="flex justify-end">
                     {kcContext.realm.resetPasswordAllowed && (
                         <span className=" underline-offset-4 hover:underline">
-                            <a
-                                tabIndex={5}
-                                href={kcContext.url.loginResetCredentialsUrl}
-                            >
+                            <a tabIndex={5} href={kcContext.url.loginResetCredentialsUrl}>
                                 <Label className="text-sm font-medium cursor-pointer">
                                     {msg("doForgotPassword")}
                                 </Label>

package/keycloak-theme/login/pages/login-password/useScript.tsx

@@ -1,4 +1,3 @@
-
 import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
 import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
 import { useEffect } from "react";

package/keycloak-theme/login/pages/login-recovery-authn-code-config/Page.tsx

@@ -2,19 +2,18 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { Copy, Download, Printer } from "lucide-react";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
-import { useScript } from './useScript';
+import { useScript } from "./useScript";
 
 export function Page() {
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-recovery-authn-code-config.ftl");
 
-
     const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
 
     const { msg, msgStr } = useI18n();
@@ -24,9 +23,7 @@ export function Page() {
     useScript({ olRecoveryCodesListId });
 
     return (
-        <Template
-            headerNode={msg("recovery-code-config-header")}
-        >
+        <Template headerNode={msg("recovery-code-config-header")}>
             <div className="space-y-6">
                 <Alert variant="warning">
                     <AlertDescription>

package/keycloak-theme/login/pages/login-recovery-authn-code-input/Page.tsx

@@ -1,14 +1,13 @@
 import { Button } from "@/components/ui/button";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 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-recovery-authn-code-input.ftl");
 

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

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

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

@@ -1,16 +1,15 @@
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { RadioGroupItem } from "@/components/ui/radio-group";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { RadioGroup } from "@radix-ui/react-radio-group";
 import { Smartphone } from "lucide-react";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-reset-otp.ftl");