@oussemasahbeni/keycloakify-login-shadcn 250004.0.7 → 250004.0.8

package/keycloak-theme/components/langauges.tsx

@@ -4,7 +4,7 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
-import { useI18n } from '@/login/i18n';
+import { useI18n } from "@/login/i18n";
 import { IoCheckmark, IoLanguage } from "react-icons/io5";
 import { Button } from "./ui/button";
 

package/keycloak-theme/components/theme-toggle.tsx

@@ -17,7 +17,6 @@ export function ModeToggle() {
         <Button variant="outline" size="icon" onClick={toggleTheme}>
             <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-            <span className="sr-only">Toggle theme</span>
         </Button>
     );
 }

package/keycloak-theme/components/ui/alert.tsx

@@ -27,7 +27,7 @@ const alertVariants = cva(
 const Alert = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof alertVariants> & { showIcon?: boolean }
+        VariantProps<typeof alertVariants> & { showIcon?: boolean }
 >(({ className, showIcon = true, variant, ...props }, ref) => (
     <div
         ref={ref}
@@ -79,4 +79,3 @@ const AlertDescription = React.forwardRef<
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertDescription, AlertTitle };
-

package/keycloak-theme/components/ui/button.tsx

@@ -35,7 +35,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+        VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
 
@@ -54,4 +54,3 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button";
 
 export { Button, buttonVariants };
-

package/keycloak-theme/components/ui/card.tsx

@@ -70,4 +70,3 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 CardFooter.displayName = "CardFooter";
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
-

package/keycloak-theme/components/ui/checkbox.tsx

@@ -26,4 +26,3 @@ const Checkbox = React.forwardRef<
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
-

package/keycloak-theme/components/ui/dropdown-menu.tsx

@@ -174,9 +174,19 @@ const DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
-    DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
-    DropdownMenuShortcut, DropdownMenuSub,
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
     DropdownMenuSubContent,
-    DropdownMenuSubTrigger, DropdownMenuTrigger
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger
 };
-

package/keycloak-theme/components/ui/field.tsx

@@ -237,4 +237,3 @@ export {
     FieldSet,
     FieldTitle
 };
-

package/keycloak-theme/components/ui/input-otp.tsx

@@ -67,4 +67,3 @@ const InputOTPSeparator = React.forwardRef<
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
-

package/keycloak-theme/components/ui/input.tsx

@@ -22,4 +22,3 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 Input.displayName = "Input";
 
 export { Input };
-

package/keycloak-theme/components/ui/label.tsx

@@ -11,7 +11,7 @@ const labelVariants = cva(
 const Label = React.forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+        VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
     <LabelPrimitive.Root
         ref={ref}
@@ -22,4 +22,3 @@ const Label = React.forwardRef<
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };
-

package/keycloak-theme/components/ui/radio-group.tsx

@@ -40,4 +40,3 @@ const RadioGroupItem = React.forwardRef<
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 export { RadioGroup, RadioGroupItem };
-

package/keycloak-theme/components/ui/select.tsx

@@ -68,7 +68,7 @@ const SelectContent = React.forwardRef<
             className={cn(
                 "relative z-50 max-h-[--radix-select-content-available-height] min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
                 position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+                    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
             )}
             position={position}
@@ -79,7 +79,7 @@ const SelectContent = React.forwardRef<
                 className={cn(
                     "p-1",
                     position === "popper" &&
-                    "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+                        "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
                 )}
             >
                 {children}
@@ -137,6 +137,14 @@ const SelectSeparator = React.forwardRef<
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
-    Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue
 };
-

package/keycloak-theme/components/ui/separator.tsx

@@ -24,4 +24,3 @@ const Separator = React.forwardRef<
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };
-

package/keycloak-theme/components/ui/tooltip.tsx

@@ -28,4 +28,3 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
-

package/keycloak-theme/login/KcPage.tsx

@@ -8,9 +8,6 @@ import "./index.css";
 import { PageIndex } from "./pages/PageIndex";
 import { useStyleLevelCustomization } from "./styleLevelCustomization";
 
-
-
-
 export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
@@ -28,7 +25,8 @@ export default function KcPage(props: { kcContext: KcContext }) {
 function StyleLevelCustomization(props: { children: ReactNode }) {
     const { children } = props;
 
-    const { doUseDefaultCss, classes, loadCustomStylesheet, Provider } = useStyleLevelCustomization();
+    const { doUseDefaultCss, classes, loadCustomStylesheet, Provider } =
+        useStyleLevelCustomization();
 
     useExclusiveAppInstanceEffect({
         effectId: "loadCustomStylesheet",

package/keycloak-theme/login/components/LogoutOtherSessions.tsx

@@ -1,10 +1,8 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { useI18n } from '@/login/i18n';
-import { Label } from '@radix-ui/react-label';
-
+import { Checkbox } from "@/components/ui/checkbox";
+import { useI18n } from "@/login/i18n";
+import { Label } from "@radix-ui/react-label";
 
 export function LogoutOtherSessions() {
-
     const { msg } = useI18n();
 
     return (

package/keycloak-theme/login/components/PasswordWrapper.tsx

@@ -1,8 +1,10 @@
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { useIsPasswordRevealed } from "keycloakify/tools/useIsPasswordRevealed";
+import type { JSX } from 'react';
 import { FiEye, FiEyeOff } from "react-icons/fi";
 
+
 export function PasswordWrapper(props: {
     passwordInputId: string;
     children: JSX.Element;
@@ -12,12 +14,10 @@ export function PasswordWrapper(props: {
 
     const { msgStr } = useI18n();
 
-
     const { isPasswordRevealed, toggleIsPasswordRevealed } = useIsPasswordRevealed({
         passwordInputId
     });
 
-
     return (
         <div className="relative">
             {children}

package/keycloak-theme/login/components/Template/Template.tsx

@@ -1,17 +1,22 @@
-import { Languages } from '@/components/langauges';
-import { ModeToggle } from '@/components/theme-toggle';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { redirectUrlOrigin } from '@/login/shared/redirectUrlOrigin';
+import { Languages } from "@/components/langauges";
+import { ModeToggle } from "@/components/theme-toggle";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { redirectUrlOrigin } from "@/login/shared/redirectUrlOrigin";
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@radix-ui/react-tooltip";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
-import { RotateCcw } from 'lucide-react';
+import { RotateCcw } from "lucide-react";
 import type { ReactNode } from "react";
 import { useEffect } from "react";
-import { FiHome } from 'react-icons/fi';
+import { FiHome } from "react-icons/fi";
 import { useI18n } from "../../i18n";
 import { useKcContext } from "../../KcContext";
 import companylogo from "./../../assets/img/auth-logo.svg";
@@ -47,7 +52,6 @@ export function Template(props: {
 
     const { auth, url, message, isAppInitiatedAction } = kcContext;
 
-
     const { msg, msgStr, enabledLanguages } = useI18n();
 
     const { kcClsx } = useKcClsx();
@@ -79,20 +83,15 @@ export function Template(props: {
             <div className="flex flex-col gap-4 px-0 py-0 pb-6 lg:p-6 lg:md:p-10 lg:pt-10 min-h-screen lg:min-h-0">
                 {/*  navigation */}
                 <div className="absolute top-4 right-4 lg:left-4  z-20 flex gap-2">
-                    <Button variant="outline" size="icon" >
+                    <Button variant="outline" size="icon">
                         <a href={kcContext.client.baseUrl ?? redirectUrlOrigin}>
                             <FiHome />
                         </a>
                     </Button>
 
-                    {enabledLanguages.length > 1 && (
-                        <Languages />
-                    )}
-
+                    {enabledLanguages.length > 1 && <Languages />}
 
-                    {kcContext.darkMode !== false && (
-                        <ModeToggle />
-                    )}
+                    {kcContext.darkMode !== false && <ModeToggle />}
                 </div>
 
                 {/* Mobile header with logo */}
@@ -112,29 +111,51 @@ export function Template(props: {
                             <CardHeader className="text-center mb-3 px-6 pt-8 pb-4 lg:pt-6">
                                 <CardTitle>
                                     {(() => {
-                                        const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
+                                        const node = !(
+                                            auth !== undefined &&
+                                            auth.showUsername &&
+                                            !auth.showResetCredentials
+                                        ) ? (
                                             <h1 className="text-xl">{headerNode}</h1>
                                         ) : (
-                                            <div id="kc-username" className="flex items-center justify-center gap-2">
-                                                <label className="font-semibold text-lg" id="kc-attempted-username">
+                                            <div
+                                                id="kc-username"
+                                                className="flex items-center justify-center gap-2"
+                                            >
+                                                <label
+                                                    className="font-semibold text-lg"
+                                                    id="kc-attempted-username"
+                                                >
                                                     {auth.attemptedUsername}
                                                 </label>
 
                                                 <TooltipProvider>
                                                     <Tooltip>
                                                         <TooltipTrigger asChild>
-                                                            <Button variant="outline" size="icon" asChild>
+                                                            <Button
+                                                                variant="outline"
+                                                                size="icon"
+                                                                asChild
+                                                            >
                                                                 <a
                                                                     id="reset-login"
-                                                                    href={url.loginRestartFlowUrl}
-                                                                    aria-label={msgStr("restartLoginTooltip")}
+                                                                    href={
+                                                                        url.loginRestartFlowUrl
+                                                                    }
+                                                                    aria-label={msgStr(
+                                                                        "restartLoginTooltip"
+                                                                    )}
                                                                 >
                                                                     <RotateCcw className="h-4 w-4" />
                                                                 </a>
                                                             </Button>
                                                         </TooltipTrigger>
                                                         <TooltipContent>
-                                                            <p>{msg("restartLoginTooltip")}</p>
+                                                            <p>
+                                                                {msg(
+                                                                    "restartLoginTooltip"
+                                                                )}
+                                                            </p>
                                                         </TooltipContent>
                                                     </Tooltip>
                                                 </TooltipProvider>
@@ -147,7 +168,9 @@ export function Template(props: {
                                                     <div>{node}</div>
                                                     <div>
                                                         <span className="subtitle">
-                                                            <span className="text-red-500">*</span>
+                                                            <span className="text-red-500">
+                                                                *
+                                                            </span>
                                                             {msg("requiredFields")}
                                                         </span>
                                                     </div>
@@ -162,39 +185,66 @@ export function Template(props: {
                             <CardContent className="px-6 pb-8">
                                 <div id="kc-content">
                                     <div id="kc-content-wrapper">
-                                        {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
-                                            <Alert variant={message.type} className="my-3">
-                                                <AlertDescription>
-                                                    <div>
-                                                        <span
-                                                            dangerouslySetInnerHTML={{
-                                                                __html: kcSanitize(message.summary)
-                                                            }}
-                                                        />
-                                                    </div>
-                                                </AlertDescription>
-                                            </Alert>
-                                        )}
+                                        {displayMessage &&
+                                            message !== undefined &&
+                                            (message.type !== "warning" ||
+                                                !isAppInitiatedAction) && (
+                                                <Alert
+                                                    variant={message.type}
+                                                    className="my-3"
+                                                >
+                                                    <AlertDescription>
+                                                        <div>
+                                                            <span
+                                                                dangerouslySetInnerHTML={{
+                                                                    __html: kcSanitize(
+                                                                        message.summary
+                                                                    )
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    </AlertDescription>
+                                                </Alert>
+                                            )}
                                         <div className="children">{children}</div>
                                         {socialProvidersNode}
-                                        {auth !== undefined && auth.showTryAnotherWayLink && (
-                                            <form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
-                                                <div className={kcClsx("kcFormGroupClass")}>
-                                                    <input type="hidden" name="tryAnotherWay" value="on" />
-                                                    <a
-                                                        href="#"
-                                                        id="try-another-way"
-                                                        onClick={() => {
-                                                            document.forms["kc-select-try-another-way-form" as never].submit();
-                                                            return false;
-                                                        }}
+                                        {auth !== undefined &&
+                                            auth.showTryAnotherWayLink && (
+                                                <form
+                                                    id="kc-select-try-another-way-form"
+                                                    action={url.loginAction}
+                                                    method="post"
+                                                >
+                                                    <div
+                                                        className={kcClsx(
+                                                            "kcFormGroupClass"
+                                                        )}
                                                     >
-                                                        {msg("doTryAnotherWay")}
-                                                    </a>
-                                                </div>
-                                            </form>
+                                                        <input
+                                                            type="hidden"
+                                                            name="tryAnotherWay"
+                                                            value="on"
+                                                        />
+                                                        <a
+                                                            href="#"
+                                                            id="try-another-way"
+                                                            onClick={() => {
+                                                                document.forms[
+                                                                    "kc-select-try-another-way-form" as never
+                                                                ].submit();
+                                                                return false;
+                                                            }}
+                                                        >
+                                                            {msg("doTryAnotherWay")}
+                                                        </a>
+                                                    </div>
+                                                </form>
+                                            )}
+                                        {displayInfo && (
+                                            <div className="text-center text-sm mt-4">
+                                                {infoNode}
+                                            </div>
                                         )}
-                                        {displayInfo && <div className="text-center text-sm mt-4">{infoNode}</div>}
                                     </div>
                                 </div>
                             </CardContent>
@@ -218,7 +268,9 @@ export function Template(props: {
                             <span className="text-white text-xl"> {APP_NAME}</span>
                         </div>
 
-                        <p className="text-center  text-gray-400 dark:text-white/60">{msg("welcomeMessage")}</p>
+                        <p className="text-center  text-gray-400 dark:text-white/60">
+                            {msg("welcomeMessage")}
+                        </p>
                     </div>
                 </div>
             </div>

package/keycloak-theme/login/components/UserProfileFormFields/AddRemoveButtonsMultiValuedAttribute.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button';
-import { useI18n } from '@/login/i18n';
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/login/i18n";
 import type { Attribute } from "@keycloakify/login-ui/KcContext";
 import {
     getButtonToDisplayForMultivaluedAttributeField,
@@ -16,7 +16,11 @@ export function AddRemoveButtonsMultiValuedAttribute(props: {
 
     const { msg } = useI18n();
 
-    const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex });
+    const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({
+        attribute,
+        values,
+        fieldIndex
+    });
 
     const idPostfix = `-${attribute.name}-${fieldIndex + 1}`;
 

package/keycloak-theme/login/components/UserProfileFormFields/FieldErrors.tsx

@@ -1,4 +1,4 @@
-import { FieldError } from '@/components/ui/field';
+import { FieldError } from "@/components/ui/field";
 import type { Attribute } from "@keycloakify/login-ui/KcContext";
 import type { FormFieldError } from "@keycloakify/login-ui/useUserProfileForm";
 import { Fragment } from "react";
@@ -10,14 +10,18 @@ export function FieldErrors(props: {
 }) {
     const { attribute, fieldIndex } = props;
 
-    const displayableErrors = props.displayableErrors.filter(error => error.fieldIndex === fieldIndex);
+    const displayableErrors = props.displayableErrors.filter(
+        error => error.fieldIndex === fieldIndex
+    );
 
     if (displayableErrors.length === 0) {
         return null;
     }
 
     return (
-        <FieldError id={`input-error-${attribute.name}${fieldIndex === undefined ? "" : `-${fieldIndex}`}`}>
+        <FieldError
+            id={`input-error-${attribute.name}${fieldIndex === undefined ? "" : `-${fieldIndex}`}`}
+        >
             {displayableErrors.map(({ errorMessage }, i, arr) => (
                 <Fragment key={i}>
                     {errorMessage}
@@ -26,4 +30,4 @@ export function FieldErrors(props: {
             ))}
         </FieldError>
     );
-}
+}

package/keycloak-theme/login/components/UserProfileFormFields/GroupLabel.tsx

@@ -1,9 +1,7 @@
-
-
-import { cn } from '@/components/lib/utils';
-import { useI18n } from '@/login/i18n';
+import { cn } from "@/components/lib/utils";
+import { useI18n } from "@/login/i18n";
 import type { Attribute } from "@keycloakify/login-ui/KcContext";
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { assert } from "tsafe/assert";
 
 export function GroupLabel(props: {
@@ -18,7 +16,6 @@ export function GroupLabel(props: {
 
     const { kcClsx } = useKcClsx();
 
-
     if (attribute.group?.name !== groupNameRef.current) {
         groupNameRef.current = attribute.group?.name ?? "";
 
@@ -27,32 +24,54 @@ export function GroupLabel(props: {
 
             return (
                 <div
-                    className={cn("space-y-4 p-4 border rounded-lg bg-card", kcClsx("kcFormGroupClass"))}
-                    {...Object.fromEntries(Object.entries(attribute.group.html5DataAnnotations).map(([key, value]) => [`data-${key}`, value]))}
+                    className={cn(
+                        "space-y-4 p-4 border rounded-lg bg-card",
+                        kcClsx("kcFormGroupClass")
+                    )}
+                    {...Object.fromEntries(
+                        Object.entries(attribute.group.html5DataAnnotations).map(
+                            ([key, value]) => [`data-${key}`, value]
+                        )
+                    )}
                 >
                     {(() => {
                         const groupDisplayHeader = attribute.group.displayHeader ?? "";
-                        const groupHeaderText = groupDisplayHeader !== "" ? advancedMsg(groupDisplayHeader) : attribute.group.name;
+                        const groupHeaderText =
+                            groupDisplayHeader !== ""
+                                ? advancedMsg(groupDisplayHeader)
+                                : attribute.group.name;
 
                         return (
                             <div className={cn("", kcClsx("kcContentWrapperClass"))}>
-                                <h3 id={`header-${attribute.group.name}`} className={cn("text-lg font-semibold", kcClsx("kcFormGroupHeader"))}>
+                                <h3
+                                    id={`header-${attribute.group.name}`}
+                                    className={cn(
+                                        "text-lg font-semibold",
+                                        kcClsx("kcFormGroupHeader")
+                                    )}
+                                >
                                     {groupHeaderText}
                                 </h3>
                             </div>
                         );
                     })()}
                     {(() => {
-                        const groupDisplayDescription = attribute.group.displayDescription ?? "";
+                        const groupDisplayDescription =
+                            attribute.group.displayDescription ?? "";
 
                         if (groupDisplayDescription !== "") {
-                            const groupDescriptionText = advancedMsg(groupDisplayDescription);
+                            const groupDescriptionText = advancedMsg(
+                                groupDisplayDescription
+                            );
 
                             return (
                                 <div className={cn("", kcClsx("kcLabelWrapperClass"))}>
                                     <p
                                         id={`description-${attribute.group.name}`}
-                                        className={cn("text-sm text-muted-foreground", kcClsx("kcLabelClass"))}
+                                        className={cn(
+                                            "text-sm text-muted-foreground",
+                                            kcClsx("kcLabelClass")
+                                        )}
                                     >
                                         {groupDescriptionText}
                                     </p>
@@ -68,4 +87,4 @@ export function GroupLabel(props: {
     }
 
     return null;
-}
+}

package/keycloak-theme/login/components/UserProfileFormFields/InputFieldByType.tsx

@@ -23,7 +23,14 @@ export function InputFieldByType(props: InputFieldByTypeProps) {
         // NOTE: Unfortunately, keycloak won't let you define input type="hidden" in the Admin Console.
         // sometimes in the future it might.
         case "hidden":
-            return <input type="hidden" id={attribute.name} name={attribute.name} value={valueOrValues as string} />;
+            return (
+                <input
+                    type="hidden"
+                    id={attribute.name}
+                    name={attribute.name}
+                    value={valueOrValues as string}
+                />
+            );
         case "textarea":
             return <TextareaTag {...props} />;
         case "select":
@@ -56,4 +63,4 @@ export function InputFieldByType(props: InputFieldByTypeProps) {
             return inputNode;
         }
     }
-}
+}