@oussemasahbeni/keycloakify-login-shadcn 250004.0.7 → 250004.0.9

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

@@ -1,27 +1,26 @@
-"use client";
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
 
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
+import { cn } from '../lib/utils'
 
-import { cn } from "@/components/lib/utils";
-
-const Separator = React.forwardRef<
-    React.ElementRef<typeof SeparatorPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-    <SeparatorPrimitive.Root
-        ref={ref}
-        decorative={decorative}
-        orientation={orientation}
-        className={cn(
-            "shrink-0 bg-border",
-            orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-            className
-        )}
-        {...props}
-    />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
+function Separator({
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+    return (
+        <SeparatorPrimitive.Root
+            data-slot="separator"
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+                className
+            )}
+            {...props}
+        />
+    )
+}
 
+export { Separator }

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

@@ -1,31 +1,60 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+    delayDuration = 0,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+    return (
+        <TooltipPrimitive.Provider
+            data-slot="tooltip-provider"
+            delayDuration={delayDuration}
+            {...props}
+        />
+    )
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+    return (
+        <TooltipProvider>
+            <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+        </TooltipProvider>
+    )
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
 
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof TooltipPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-    <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-                "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-tooltip-content-transform-origin]",
-                className
-            )}
-            {...props}
-        />
-    </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+    className,
+    sideOffset = 0,
+    children,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    )
+}
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
 

package/keycloak-theme/login/KcPage.tsx

@@ -4,13 +4,9 @@ import type { ReactNode } from "react";
 import { assert } from "tsafe/assert";
 import { type KcContext, KcContextProvider } from "./KcContext";
 import { I18nProvider } from "./i18n";
-import "./index.css";
 import { PageIndex } from "./pages/PageIndex";
 import { useStyleLevelCustomization } from "./styleLevelCustomization";
 
-
-
-
 export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
@@ -28,7 +24,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 */}
@@ -109,32 +108,54 @@ export function Template(props: {
                 <div className="flex flex-1 items-start lg:items-center justify-center lg:mt-0 ">
                     <div className="w-full max-w-xl ">
                         <Card className=" shadow-none bg-transparent lg:bg-card border-0 lg:rounded-lg lg:border lg:shadow-sm rounded-t-2xl">
-                            <CardHeader className="text-center mb-3 px-6 pt-8 pb-4 lg:pt-6">
+                            <CardHeader className="text-center">
                                 <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>
@@ -159,42 +182,69 @@ export function Template(props: {
                                     })()}
                                 </CardTitle>
                             </CardHeader>
-                            <CardContent className="px-6 pb-8">
+                            <CardContent >
                                 <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;
         }
     }
-}
+}

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

@@ -1,4 +1,3 @@
-
 import type { Attribute } from "@keycloakify/login-ui/KcContext";
 import { useI18n } from "../../i18n";