@oussemasahbeni/keycloakify-login-shadcn 250004.0.7 → 250004.0.9

package/keycloak-theme/login/pages/idp-review-user-profile/Page.tsx

@@ -6,10 +6,7 @@ import { Template } from "../../components/Template";
 import { UserProfileFormFields } from "../../components/UserProfileFormFields";
 import { useI18n } from "../../i18n";
 
-
 export function Page() {
-
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "idp-review-user-profile.ftl");
 
@@ -32,8 +29,8 @@ export function Page() {
                 <UserProfileFormFields
                     onIsFormSubmittableValueChange={setIsFomSubmittable}
                 />
-                <div >
-                    <div id="kc-form-options" >
+                <div>
+                    <div id="kc-form-options">
                         <div />
                     </div>
                     <div id="kc-form-buttons">

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

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

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

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
@@ -15,7 +15,9 @@ export function Page() {
             headerNode={msg("linkIdpActionTitle", kcContext.idpDisplayName)}
             displayMessage={false}
         >
-            <div id="kc-link-text">{msg("linkIdpActionMessage", kcContext.idpDisplayName)}</div>
+            <div id="kc-link-text">
+                {msg("linkIdpActionMessage", kcContext.idpDisplayName)}
+            </div>
             <form action={kcContext.url.loginAction} method="post">
                 <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
                     <Button

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

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

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

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

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

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

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

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

package/keycloak-theme/login/pages/login/providers/github.svg

@@ -1,4 +1,5 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>GitHub</title>
-  <path d="M11.8452 0C5.13387 0 0 5.09516 0 11.8065C0 17.1726 3.37742 21.7645 8.20161 23.3806C8.82097 23.4919 9.03871 23.1097 9.03871 22.7952C9.03871 22.4952 9.02419 20.8403 9.02419 19.8242C9.02419 19.8242 5.6371 20.55 4.92581 18.3823C4.92581 18.3823 4.37419 16.9742 3.58065 16.6113C3.58065 16.6113 2.47258 15.8516 3.65806 15.8661C3.65806 15.8661 4.8629 15.9629 5.52581 17.1145C6.58548 18.9823 8.36129 18.4452 9.05323 18.1258C9.16452 17.3516 9.47903 16.8145 9.82742 16.4952C7.12258 16.1952 4.39355 15.8032 4.39355 11.1484C4.39355 9.81774 4.76129 9.15 5.53548 8.29839C5.40968 7.98387 4.99839 6.6871 5.66129 5.0129C6.67258 4.69839 9 6.31936 9 6.31936C9.96774 6.04839 11.0081 5.90806 12.0387 5.90806C13.0694 5.90806 14.1097 6.04839 15.0774 6.31936C15.0774 6.31936 17.4048 4.69355 18.4161 5.0129C19.079 6.69194 18.6677 7.98387 18.5419 8.29839C19.3161 9.15484 19.7903 9.82258 19.7903 11.1484C19.7903 15.8177 16.9403 16.1903 14.2355 16.4952C14.6806 16.8774 15.0581 17.6032 15.0581 18.7403C15.0581 20.371 15.0435 22.3887 15.0435 22.7855C15.0435 23.1 15.2661 23.4823 15.8806 23.371C20.7194 21.7645 24 17.1726 24 11.8065C24 5.09516 18.5565 0 11.8452 0Z" fill="#181717" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+    fill="currentColor" />
 </svg>

package/keycloak-theme/login/pages/login/providers/x.svg

@@ -1,4 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="300" height="271" xmlns="http://www.w3.org/2000/svg">
-    <path d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" role="img"
+    aria-hidden="true">
+    <path
+        d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
 </svg>

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

@@ -24,11 +24,10 @@ const useProviderLogos: () => Record<string, string> = () => ({
     gitlab: gitlabLogo,
     google: googleLogo,
     instagram: instagramLogo,
-    "linkedin-openid-connect": linkedinLogo,
+    linkedin: linkedinLogo,
     microsoft: microsoftLogo,
     oidc: oidcLogo,
-    "openshift-v3": openshiftLogo,
-    "openshift-v4": openshiftLogo,
+    openshift: openshiftLogo,
     paypal: paypalLogo,
     slack: slackLogo,
     stackoverflow: stackoverflowLogo,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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