@oussemasahbeni/keycloakify-login-shadcn 250004.0.7 → 250004.0.9

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

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

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

@@ -1,14 +1,13 @@
 import { Button } from "@/components/ui/button";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-recovery-authn-code-input.ftl");
 

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

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

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

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

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

@@ -1,7 +1,6 @@
-
-import { Button } from '@/components/ui/button';
-import { Field, FieldError, FieldLabel } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 import { assert } from "tsafe/assert";
 import { useKcContext } from "../../KcContext";
@@ -26,8 +25,8 @@ export function Form() {
                     {!kcContext.realm.loginWithEmailAllowed
                         ? msg("username")
                         : !kcContext.realm.registrationEmailAsUsername
-                            ? msg("usernameOrEmail")
-                            : msg("email")}
+                          ? msg("usernameOrEmail")
+                          : msg("email")}
                 </FieldLabel>
                 <Input
                     type="text"

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

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

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

@@ -1,8 +1,8 @@
-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";
-import { Form } from './Form';
+import { Form } from "./Form";
 
 export function Page() {
     const { kcContext } = useKcContext();

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

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

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

@@ -1,17 +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 { PasswordWrapper } from '@/login/components/PasswordWrapper';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { PasswordWrapper } from "@/login/components/PasswordWrapper";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-update-password.ftl");
 
@@ -32,7 +30,7 @@ export function Page() {
             >
                 <Field>
                     <FieldLabel htmlFor="password-new">{msg("passwordNew")}</FieldLabel>
-                    <PasswordWrapper passwordInputId="password-new" >
+                    <PasswordWrapper passwordInputId="password-new">
                         <Input
                             type="password"
                             id="password-new"

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

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

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

@@ -1,16 +1,13 @@
 import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { useState } from "react";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 import { UserProfileFormFields } from "../../components/UserProfileFormFields";
 
-
-
 export function Page() {
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-update-profile.ftl");
 
@@ -34,7 +31,9 @@ export function Page() {
                 action={url.loginAction}
                 method="post"
             >
-                <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
+                <UserProfileFormFields
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                />
 
                 <div className={kcClsx("kcFormGroupClass")}>
                     <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>

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

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

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

@@ -6,14 +6,14 @@ import { clsx } from "keycloakify/tools/clsx";
 import { useState } from "react";
 
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import { Fingerprint } from "lucide-react";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
-import { useScript } from './useScript';
+import { useScript } from "./useScript";
 
 export function Page() {
     const { kcContext } = useKcContext();
@@ -123,8 +123,8 @@ export function Page() {
                                     {!realm.loginWithEmailAllowed
                                         ? msg("email")
                                         : !realm.registrationEmailAsUsername
-                                            ? msg("usernameOrEmail")
-                                            : msg("username")}
+                                          ? msg("usernameOrEmail")
+                                          : msg("username")}
                                 </FieldLabel>
                                 <Input
                                     tabIndex={2}

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

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

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

@@ -1,9 +1,8 @@
-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-verify-email.ftl");

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

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

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

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-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";
 
@@ -9,15 +9,12 @@ export function Page() {
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "login-x509-info.ftl");
 
-
     const { url, x509 } = kcContext;
 
     const { msg, msgStr } = useI18n();
 
     return (
-        <Template
-            headerNode={msg("doLogIn")}
-        >
+        <Template headerNode={msg("doLogIn")}>
             <form
                 id="kc-x509-login-info"
                 className="space-y-6"

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

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

package/keycloak-theme/login/pages/logout-confirm/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";
 
@@ -8,14 +8,11 @@ export function Page() {
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "logout-confirm.ftl");
 
-
     const { url, client, logoutConfirm } = kcContext;
 
     const { msg, msgStr } = useI18n();
     return (
-        <Template
-            headerNode={msg("logoutConfirmTitle")}
-        >
+        <Template headerNode={msg("logoutConfirmTitle")}>
             <div className="space-y-4">
                 <p className="text-foreground ">{msg("logoutConfirmHeader")}</p>
 

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

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
 import { clsx } from "@keycloakify/login-ui/tools/clsx";
 import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { useLayoutEffect, useState } from "react";
@@ -35,7 +35,9 @@ export function Form() {
             className="space-y-3"
             method="post"
         >
-            <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
+            <UserProfileFormFields
+                onIsFormSubmittableValueChange={setIsFormSubmittable}
+            />
             {kcContext.termsAcceptanceRequired && (
                 <TermsAcceptance
                     messagesPerField={kcContext.messagesPerField}
@@ -44,7 +46,8 @@ export function Form() {
                 />
             )}
             {kcContext.recaptchaRequired &&
-                (kcContext.recaptchaVisible || kcContext.recaptchaAction === undefined) && (
+                (kcContext.recaptchaVisible ||
+                    kcContext.recaptchaAction === undefined) && (
                     <div className="form-group">
                         <div className={kcClsx("kcInputWrapperClass")}>
                             <div
@@ -57,10 +60,9 @@ export function Form() {
                     </div>
                 )}
             <div className={kcClsx("kcFormGroupClass")}>
-
                 {kcContext.recaptchaRequired &&
-                    !kcContext.recaptchaVisible &&
-                    kcContext.recaptchaAction !== undefined ? (
+                !kcContext.recaptchaVisible &&
+                kcContext.recaptchaAction !== undefined ? (
                     <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <button
                             className={clsx(
@@ -100,7 +102,6 @@ export function Form() {
                     <a href={kcContext.url.loginUrl}>{msg("backToLogin")}</a>
                 </Button>
             </div>
-
         </form>
     );
 }

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

@@ -59,7 +59,8 @@ export const WithEmailAlreadyExists: Story = {
                 // existsError() so they are the only ones that need to mock.
                 existsError: (fieldName: string, ...otherFieldNames: string[]) =>
                     [fieldName, ...otherFieldNames].includes("email"),
-                get: (fieldName: string) => (fieldName === "email" ? "Email already exists." : undefined)
+                get: (fieldName: string) =>
+                    fieldName === "email" ? "Email already exists." : undefined
             }
         }
     }
@@ -73,12 +74,15 @@ export const WithRestrictedToMITStudents: Story = {
                     email: {
                         validators: {
                             pattern: {
-                                pattern: "^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$",
-                                "error-message": "${profile.attributes.email.pattern.error}"
+                                pattern:
+                                    "^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$",
+                                "error-message":
+                                    "${profile.attributes.email.pattern.error}"
                             }
                         },
                         annotations: {
-                            inputHelperTextBefore: "${profile.attributes.email.inputHelperTextBefore}"
+                            inputHelperTextBefore:
+                                "${profile.attributes.email.inputHelperTextBefore}"
                         }
                     }
                 }
@@ -109,7 +113,8 @@ export const WithFavoritePet: Story = {
                             }
                         },
                         annotations: {
-                            inputOptionLabelsI18nPrefix: "profile.attributes.favoritePet.options"
+                            inputOptionLabelsI18nPrefix:
+                                "profile.attributes.favoritePet.options"
                         },
                         required: false,
                         readOnly: false
@@ -210,7 +215,8 @@ export const WithTermsAcceptance: Story = {
             termsAcceptanceRequired: true,
             "x-keycloakify": {
                 messages: {
-                    termsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                    termsText:
+                        "<a href='https://example.com/terms'>Service Terms of Use</a>"
                 }
             }
         }
@@ -225,7 +231,9 @@ export const WithTermsNotAccepted: Story = {
                 messagesPerField: {
                     existsError: (fieldName: string) => fieldName === "termsAccepted",
                     get: (fieldName: string) =>
-                        fieldName === "termsAccepted" ? "You must accept the terms." : undefined
+                        fieldName === "termsAccepted"
+                            ? "You must accept the terms."
+                            : undefined
                 }
             }}
         />
@@ -241,7 +249,8 @@ export const WithFieldErrors: Story = {
                 }
             },
             messagesPerField: {
-                existsError: (fieldName: string) => ["username", "email"].includes(fieldName),
+                existsError: (fieldName: string) =>
+                    ["username", "email"].includes(fieldName),
                 get: (fieldName: string) => {
                     if (fieldName === "username") return "Username is required.";
                     if (fieldName === "email") return "Invalid email format.";

package/keycloak-theme/login/pages/register/TermsAcceptance.tsx

@@ -1,8 +1,8 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { FieldError } from '@/components/ui/field';
-import { Label } from '@/components/ui/label';
-import { useI18n } from '@/login/i18n';
-import type { KcContext } from '@/login/KcContext';
+import { Checkbox } from "@/components/ui/checkbox";
+import { FieldError } from "@/components/ui/field";
+import { Label } from "@/components/ui/label";
+import { useI18n } from "@/login/i18n";
+import type { KcContext } from "@/login/KcContext";
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 
 export function TermsAcceptance(props: {
@@ -10,8 +10,7 @@ export function TermsAcceptance(props: {
     areTermsAccepted: boolean;
     onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
 }) {
-    const { messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } =
-        props;
+    const { messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
 
     const { msg } = useI18n();
 

package/keycloak-theme/login/pages/saml-post-form/Page.stories.tsx

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

package/keycloak-theme/login/pages/saml-post-form/Page.tsx

@@ -1,7 +1,7 @@
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { useEffect, useState } from "react";
-import { assert } from 'tsafe/assert';
+import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
 export function Page() {
@@ -29,9 +29,7 @@ export function Page() {
     }, [htmlFormElement]);
 
     return (
-        <Template
-            headerNode={msg("saml.post-form.title")}
-        >
+        <Template headerNode={msg("saml.post-form.title")}>
             <p>{msg("saml.post-form.message")}</p>
             <form
                 name="saml-post-binding"

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

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

package/keycloak-theme/login/pages/select-authenticator/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 { ChevronRight, Fingerprint, Globe, KeyRound, Shield } from "lucide-react";
 import { FaKey } from "react-icons/fa";
 import { assert } from "tsafe/assert";
@@ -58,10 +58,7 @@ export function Page() {
 
     const { msg, advancedMsg } = useI18n();
     return (
-        <Template
-            displayInfo={false}
-            headerNode={msg("loginChooseAuthenticator")}
-        >
+        <Template displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
             <form
                 id="kc-select-credential-form"
                 className="space-y-3"

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

@@ -6,14 +6,13 @@ import {
     SelectTrigger,
     SelectValue
 } from "@/components/ui/select";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { Building2 } from "lucide-react";
-import { MouseEvent, useRef, useState } from "react";
-import { assert } from 'tsafe/assert';
+import { type MouseEvent, useRef, useState } from "react";
+import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 
-
 export function Page() {
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "select-organization.ftl");
@@ -65,9 +64,7 @@ export function Page() {
     const useSelect = organizations.length > 3;
 
     return (
-        <Template
-            headerNode={msg("organization.selectTitle")}
-        >
+        <Template headerNode={msg("organization.selectTitle")}>
             <form ref={formRef} action={kcContext.url.loginAction} method="post">
                 <div id="kc-user-organizations" className="space-y-2">
                     <h2 className="text-md font-semibold">

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

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
 import { assert } from "tsafe/assert";
 import { useKcContext } from "../../KcContext";
 import { Template } from "../../components/Template";
@@ -8,7 +8,6 @@ export function Page() {
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "terms.ftl");
 
-
     const { msg, msgStr } = useI18n();
 
     const { url } = kcContext;
@@ -42,7 +41,6 @@ export function Page() {
                         >
                             {msgStr("doAccept")}
                         </Button>
-
                     </div>
                 </form>
             </div>

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

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

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

@@ -1,19 +1,16 @@
 import { Button } from "@/components/ui/button";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
 import { useState } from "react";
 import { assert } from "tsafe/assert";
 import { Template } from "../../components/Template";
 import { UserProfileFormFields } from "../../components/UserProfileFormFields";
 
-
 export function Page() {
-
     const { kcContext } = useKcContext();
     assert(kcContext.pageId === "update-email.ftl");
 
-
     const { msg, msgStr } = useI18n();
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
@@ -32,7 +29,9 @@ export function Page() {
                 action={url.loginAction}
                 method="post"
             >
-                <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
+                <UserProfileFormFields
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                />
 
                 <LogoutOtherSessions />