@alore/auth-react-ui 1.2.0-alpha.14 → 1.2.0-alpha.16

package/dist/cjs/machine/types.d.ts

@@ -52,6 +52,10 @@ export interface AuthMachineContext {
         mediation?: CredentialMediationRequirement;
     };
     credentialEmail?: string;
+    forgotPasswordSession?: {
+        salt: string;
+        token: string;
+    };
 }
 export type AuthMachineEvents = {
     type: 'INITIALIZE';
@@ -256,15 +260,22 @@ export type AuthMachineEvents = {
     type: 'SEND_CODE';
     payload: {
         email: string;
+        locale?: string;
     };
 } | {
     type: 'CONFIRM_PASSWORD';
     payload: {
-        email: string;
+        salt: string;
+        token: string;
         passwordHash: string;
+        device?: string;
     };
 } | {
     type: 'RESET_PASSWORD';
+    payload: {
+        salt: string;
+        token: string;
+    };
 } | {
     type: 'LOGIN';
 } | {

package/dist/mjs/auth/ForgotPassword.d.ts

@@ -0,0 +1,15 @@
+import { Locale } from 'get-dictionary';
+import React from 'react';
+import { AuthInstance } from '../machine/types';
+export interface ForgotPasswordProps {
+    locale?: Locale;
+    authServiceInstance: AuthInstance;
+    forgeId?: string;
+    logoImage?: React.ReactNode;
+    cryptoUtils: {
+        hashUserInfo: (_userInfo: string) => string;
+        generateSecureHash: (_data: string, _salt: string, _keyDerivationFunction: 'argon2d' | 'pbkdf2') => Promise<string>;
+    };
+}
+declare const ForgotPassword: ({ locale, authServiceInstance, forgeId, logoImage, cryptoUtils, }: ForgotPasswordProps) => React.JSX.Element;
+export default ForgotPassword;

package/dist/mjs/auth/ForgotPassword.js

@@ -0,0 +1,224 @@
+'use client';
+/* eslint-disable @next/next/no-img-element */
+import { EnvelopeIcon, LockClosedIcon } from '@heroicons/react/20/solid';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useActor } from '@xstate/react';
+import { Button, Card, Spinner } from 'flowbite-react';
+import React, { useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import * as yup from 'yup';
+import { passwordRules, ruleValidation } from '../components/FormRules/helpers';
+import { verifyEmptyValues } from '../helpers';
+import useDictionary from '../hooks/useDictionary';
+import { aloreLogoBlack, authErrorImage } from '../utils';
+const InputForm = React.lazy(() => import('../components/InputForm'));
+const BackButton = React.lazy(() => import('../components/BackButton'));
+const FormRules = React.lazy(() => import('../components/FormRules'));
+const envelopIcon = () => React.createElement(EnvelopeIcon, { className: "size-4 text-gray-500" });
+const lockClosedIcon = () => React.createElement(LockClosedIcon, { className: "size-4 text-gray-500" });
+const ForgotPassword = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, cryptoUtils, }) => {
+    const { hashUserInfo, generateSecureHash } = cryptoUtils;
+    const dictionary = useDictionary(locale);
+    const forgotPasswordDictionary = dictionary?.auth.forgotPassword;
+    const [authState, sendAuth] = useActor(authServiceInstance);
+    const { error: errorObj, forgotPasswordSession } = authState.context;
+    const displayError = errorObj?.message || '';
+    const hasDisplayError = !!displayError;
+    const emailFormSchema = yup
+        .object({
+        email: yup
+            .string()
+            .required(dictionary?.formValidation.required)
+            .email(dictionary?.formValidation.invalidEmail),
+    })
+        .required();
+    const passwordFormSchema = yup
+        .object({
+        password: yup.string().required(dictionary?.formValidation.required),
+        confirmPassword: yup.string().required(dictionary?.formValidation.required),
+    })
+        .required();
+    const emailDefaultValues = {
+        email: '',
+    };
+    const { control: emailControl, formState: { errors: emailErrors }, handleSubmit: handleSubmitEmail, getValues: getValuesEmail, } = useForm({
+        resolver: yupResolver(emailFormSchema),
+        mode: 'onSubmit',
+        reValidateMode: 'onSubmit',
+        defaultValues: emailDefaultValues,
+    });
+    useWatch({ control: emailControl, name: ['email'] });
+    const passwordDefaultValues = {
+        password: '',
+        confirmPassword: '',
+    };
+    const { control: passwordControl, formState: { errors: passwordErrors, dirtyFields: passwordDirtyFields }, handleSubmit: handleSubmitPassword, getValues: getValuesPassword, } = useForm({
+        resolver: yupResolver(passwordFormSchema),
+        defaultValues: passwordDefaultValues,
+    });
+    useWatch({ control: passwordControl, name: ['password'] });
+    useWatch({ control: passwordControl, name: ['confirmPassword'] });
+    const isLoading = useMemo(() => authState.matches('active.forgotPassword.sendingCode') ||
+        authState.matches('active.forgotPassword.savingPassword'), [authState.value]);
+    const onSubmitEmail = async (data) => {
+        const { email } = data;
+        sendAuth({
+            type: 'SEND_CODE',
+            payload: {
+                email,
+                locale,
+            },
+        });
+    };
+    const onSubmitPassword = async (data) => {
+        const { password } = data;
+        const salt = forgotPasswordSession?.salt;
+        const token = forgotPasswordSession?.token;
+        const { userAgent } = window.navigator;
+        const device = hashUserInfo(userAgent);
+        if (salt && token) {
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            sendAuth({
+                type: 'CONFIRM_PASSWORD',
+                payload: {
+                    salt,
+                    token,
+                    passwordHash: secureHashArgon2d,
+                    device,
+                },
+            });
+        }
+    };
+    const isPasswordSubmitDisabled = useMemo(() => {
+        const passwordValues = getValuesPassword();
+        const userInfoValues = { email: getValuesEmail('email') };
+        let isValid = true;
+        passwordRules.forEach((rule) => {
+            if (!ruleValidation(rule, passwordValues, userInfoValues)) {
+                isValid = false;
+            }
+        });
+        return !isValid;
+    }, [getValuesPassword(), passwordDirtyFields]);
+    const getAuthError = () => {
+        let authErrorTitle = dictionary?.auth.login?.somethingWrong;
+        let authErrorDescription = dictionary?.auth.login?.defaultError;
+        // Check for error code first
+        if (errorObj?.message) {
+            switch (errorObj.message) {
+                case 'INVALID_SESSION':
+                case 'EXPIRED_SESSION':
+                    authErrorTitle = forgotPasswordDictionary?.expiredSessionTitle;
+                    authErrorDescription = forgotPasswordDictionary?.expiredSessionDescription;
+                    return { authErrorTitle, authErrorDescription };
+                case 'EMAIL_NOT_ALLOWED':
+                    authErrorTitle = dictionary?.auth?.emailDomainNotAllowed;
+                    return { authErrorTitle, authErrorDescription };
+                default:
+                    break;
+            }
+        }
+        // Fallback to checking the message string
+        const lower = displayError.toLowerCase?.();
+        if (displayError === 'EMAIL_NOT_ALLOWED') {
+            authErrorTitle = dictionary?.auth?.emailDomainNotAllowed;
+            return { authErrorTitle, authErrorDescription };
+        }
+        if (lower?.includes('invalid') || lower?.includes('expired')) {
+            authErrorTitle = forgotPasswordDictionary?.invalidLink;
+            authErrorDescription = forgotPasswordDictionary?.invalidLinkDescription;
+        }
+        return { authErrorTitle, authErrorDescription };
+    };
+    const EmailInputStep = useMemo(() => {
+        const { authErrorTitle, authErrorDescription } = getAuthError();
+        return (React.createElement("div", { "data-testid": "forgot-password-email-step" },
+            React.createElement(BackButton, { className: "mb-4", disabled: isLoading, onClick: () => {
+                    sendAuth('BACK');
+                    window.history.replaceState({}, '', window.location.pathname);
+                } }, dictionary?.back),
+            hasDisplayError ? (React.createElement("div", { className: "flex flex-col items-center justify-center gap-5" },
+                React.createElement("img", { src: authErrorImage, alt: "error", width: 70 }),
+                React.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
+                    React.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authErrorTitle),
+                    React.createElement("span", { className: "text-alr-grey text-center font-medium" }, authErrorDescription),
+                    errorObj?.code && (React.createElement("span", { className: "mt-1 text-center text-xs text-gray-500" }, `Error code: ${errorObj.code}`))))) : (React.createElement("div", { className: "flex flex-col items-center" },
+                React.createElement("span", { className: "font-poppins text-alr-grey mb-5 mt-6 font-bold" }, forgotPasswordDictionary?.resetPassword),
+                React.createElement("span", { className: "text-alr-grey mb-3 text-center font-medium" }, forgotPasswordDictionary?.resetPasswordDescription))),
+            React.createElement("div", { className: "mt-4 flex flex-col gap-y-5" },
+                React.createElement("form", { className: "flex flex-col gap-y-5", onSubmit: handleSubmitEmail((data) => onSubmitEmail(data)) },
+                    React.createElement(InputForm, { className: "my-1", control: emailControl, errors: emailErrors, name: "email", type: "text", placeholder: dictionary?.auth.login?.enterEmail, "data-testid": "forgot-password-email-input", icon: envelopIcon, autoFocus: true }),
+                    React.createElement(Button, { type: "submit", "data-testid": "forgot-password-send-button", disabled: verifyEmptyValues(getValuesEmail('email')) },
+                        isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                        forgotPasswordDictionary?.sendCode)),
+                React.createElement("div", { className: "h-[0.5px] w-full bg-gray-300" }),
+                React.createElement("span", { className: "text-center text-sm font-medium" },
+                    dictionary?.auth.login?.dontHaveAccount,
+                    React.createElement("div", { "data-testid": "sign-up-button", className: "cursor-pointer text-[var(--primary-color)] hover:text-[var(--primary-hover)]", onClick: () => {
+                            sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
+                        } }, dictionary?.auth.login?.signUp)))));
+    }, [getValuesEmail(), emailErrors, emailControl, isLoading, displayError]);
+    const EmailSentStep = useMemo(() => (React.createElement("div", { "data-testid": "forgot-password-email-sent-step" },
+        React.createElement(BackButton, { className: "mb-4", disabled: isLoading, onClick: () => {
+                sendAuth('BACK');
+                window.history.replaceState({}, '', window.location.pathname);
+            } }, dictionary?.back),
+        React.createElement("div", { className: "flex flex-col items-center justify-center" },
+            React.createElement("span", { className: "font-poppins text-alr-grey mb-5 mt-14 text-center text-xl font-bold" }, forgotPasswordDictionary?.emailSentTitle),
+            React.createElement("span", { className: "text-alr-grey mb-6 w-full text-center font-medium" }, forgotPasswordDictionary?.emailSentDescription),
+            React.createElement(Button, { className: "flex w-full items-center justify-center", onClick: () => {
+                    sendAuth('BACK');
+                    window.history.replaceState({}, '', window.location.pathname);
+                }, "data-testid": "back-to-login-button" }, forgotPasswordDictionary?.backToLogin)))), [forgotPasswordDictionary]);
+    const NewPasswordStep = useMemo(() => {
+        const { authErrorTitle, authErrorDescription } = getAuthError();
+        return (React.createElement("div", { "data-testid": "forgot-password-new-password-step" },
+            React.createElement(BackButton, { className: "mb-4", disabled: isLoading, onClick: () => sendAuth('BACK') }, dictionary?.back),
+            hasDisplayError && (React.createElement("div", { className: "mb-4 flex flex-col items-center justify-center gap-2" },
+                React.createElement("img", { src: authErrorImage, alt: "error", width: 70 }),
+                React.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authErrorTitle),
+                React.createElement("span", { className: "text-alr-grey text-center font-medium" }, authErrorDescription),
+                errorObj?.code && (React.createElement("span", { className: "text-center text-xs text-gray-500" }, `Error code: ${errorObj.code}`)))),
+            React.createElement("div", { className: "flex w-full flex-col" },
+                React.createElement("span", { className: "font-poppins text-alr-grey mb-5 text-center text-xl font-bold" }, forgotPasswordDictionary?.newPasswordTitle),
+                React.createElement("span", { className: "text-alr-grey mb-5 text-center text-sm font-medium" }, forgotPasswordDictionary?.newPasswordDescription),
+                React.createElement("form", { onSubmit: handleSubmitPassword((data) => onSubmitPassword(data)), className: "flex flex-col gap-y-4" },
+                    React.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "password", autoFocus: true, icon: lockClosedIcon, placeholder: forgotPasswordDictionary?.passwordLabel, label: forgotPasswordDictionary?.passwordLabel, type: "password", "data-testid": "forgot-password-password-input", disabled: isLoading }),
+                    React.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "confirmPassword", placeholder: forgotPasswordDictionary?.confirmPasswordLabel, label: forgotPasswordDictionary?.confirmPasswordLabel, icon: lockClosedIcon, type: "password", "data-testid": "forgot-password-confirm-password-input", disabled: isLoading }),
+                    React.createElement(FormRules, { locale: locale, className: "!gap-y-1 md:!gap-y-2", passwordValues: getValuesPassword(), userValues: { email: getValuesEmail('email') } }),
+                    React.createElement(Button, { "data-testid": "forgot-password-submit-button", type: "submit", disabled: isPasswordSubmitDisabled || isLoading },
+                        isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                        forgotPasswordDictionary?.confirmButton)))));
+    }, [
+        isPasswordSubmitDisabled,
+        passwordControl,
+        passwordErrors,
+        getValuesPassword(),
+        passwordDirtyFields,
+        isLoading,
+        displayError,
+    ]);
+    const SuccessStep = useMemo(() => (React.createElement("div", { "data-testid": "forgot-password-success-step", className: "flex flex-col items-center justify-center" },
+        React.createElement("span", { className: "font-poppins text-alr-grey mb-5 mt-14 text-center text-2xl font-semibold" }, forgotPasswordDictionary?.successTitle),
+        React.createElement("span", { className: "text-alr-grey mb-6 w-full text-center font-medium" }, forgotPasswordDictionary?.successDescription),
+        React.createElement(Button, { className: "flex w-full items-center justify-center", onClick: () => {
+                sendAuth('BACK');
+                window.history.replaceState({}, '', window.location.pathname);
+            }, "data-testid": "back-to-login-success-button" }, forgotPasswordDictionary?.backToLogin))), [forgotPasswordDictionary]);
+    return (React.createElement("div", { className: "flex size-full min-h-screen flex-col items-center justify-center gap-y-2 sm:gap-y-7", "data-testid": "forgot-password-page" },
+        forgeId ? (React.createElement("div", { className: "flex flex-col" },
+            React.createElement("span", { className: "font-poppins text-alr-grey text-center text-2xl font-black" }, "Tardezinha com Thiaguinho"),
+            React.createElement("div", { className: "flex w-full flex-row items-center justify-center gap-2" },
+                React.createElement("span", { className: "font-inter text-sm font-medium text-gray-900" }, dictionary?.auth.poweredBy),
+                React.createElement("img", { src: aloreLogoBlack, alt: "alore logo", width: "60" })))) : (logoImage || (React.createElement("img", { src: aloreLogoBlack, alt: "alore logo", width: 201 }))),
+        React.createElement(Card, { className: twMerge(`md:child:!px-9 mx-5 flex min-w-[20rem] !rounded-2xl border-gray-200 px-2 py-4 md:mx-7 md:w-96`, isLoading ? 'pointer-events-none opacity-50' : '') }, isLoading ? (React.createElement(Spinner, { className: "my-20 !h-14 w-full !fill-[var(--primary-color)]" })) : (React.createElement(React.Fragment, null,
+            authState.matches('active.forgotPassword.idle') && EmailInputStep,
+            authState.matches('active.forgotPassword.codeSent') && EmailSentStep,
+            (authState.matches('active.forgotPassword.newPassword') ||
+                authState.matches('active.forgotPassword.savingPassword')) &&
+                NewPasswordStep,
+            authState.matches('active.forgotPassword.passwordSaved') && SuccessStep)))));
+};
+export default ForgotPassword;
+//# sourceMappingURL=ForgotPassword.js.map

package/dist/mjs/auth/ForgotPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPassword.js","sourceRoot":"","sources":["../../../src/auth/ForgotPassword.tsx"],"names":[],"mappings":"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"}

package/dist/mjs/auth/Login.d.ts

@@ -11,6 +11,24 @@ export interface LoginProps {
         hashUserInfo: (_userInfo: string) => string;
         generateSecureHash: (_data: string, _salt: string, _keyDerivationFunction: 'argon2d' | 'pbkdf2') => Promise<string>;
     };
+    customStyles?: {
+        borderRadius?: string;
+        borderWidth?: string;
+        borderColor?: string;
+        backgroundColor?: string;
+        padding?: string;
+        boxShadow?: string;
+    };
+    title?: string;
+    titleClassName?: string;
+    loginTitle?: string;
+    loginTitleClassName?: string;
+    emailInputLabel?: string;
+    inputClassName?: string;
+    contentAlignment?: 'left' | 'center' | 'right';
+    customClassName?: string;
+    titleSpacing?: string;
+    logoContainerClassName?: string;
 }
-declare const Login: ({ locale, authServiceInstance, forgeId, logoImage, keyshareWorker, cryptoUtils, }: LoginProps) => React.JSX.Element | null;
+declare const Login: ({ locale, authServiceInstance, forgeId, logoImage, keyshareWorker, cryptoUtils, customStyles, title, titleClassName, loginTitle, loginTitleClassName, emailInputLabel, inputClassName, contentAlignment, customClassName, titleSpacing, logoContainerClassName, }: LoginProps) => React.JSX.Element | null;
 export default Login;

package/dist/mjs/auth/Login.js

@@ -22,7 +22,7 @@ const lockClosedIcon = () => React.createElement(LockClosedIcon, { className: "s
 const HARDWARE = 1;
 const SOFTWARE = 2;
 const ABORT_CONDITIONAL_UI = 'abort-conditional-ui';
-const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshareWorker, cryptoUtils, }) => {
+const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshareWorker, cryptoUtils, customStyles, title, titleClassName, loginTitle, loginTitleClassName, emailInputLabel, inputClassName, contentAlignment = 'center', customClassName, titleSpacing = 'gap-y-2 sm:gap-y-7', logoContainerClassName, }) => {
     const { hashUserInfo, generateSecureHash } = cryptoUtils;
     const dictionary = useDictionary(locale);
     const loginDictionary = dictionary?.auth.login;
@@ -565,12 +565,13 @@ const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshar
                 displayError?.includes('beta') ? (React.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, displayError)) : (React.createElement(React.Fragment, null,
                     React.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authErrorTitle),
                     React.createElement("span", { className: "text-alr-grey text-center font-medium" }, authErrorDescription),
-                    errorObj?.code && (React.createElement("span", { className: "mt-1 text-center text-xs text-gray-500" }, `Error code: ${errorObj.code}`)))))) : (React.createElement("h1", { className: "font-inter text-center text-xl font-bold text-gray-700" }, forgeId ? loginDictionary?.forgeLogin : loginDictionary?.loginAccount)),
+                    errorObj?.code && (React.createElement("span", { className: "mt-1 text-center text-xs text-gray-500" }, `Error code: ${errorObj.code}`)))))) : (React.createElement("h1", { className: loginTitleClassName || 'font-inter text-center text-xl font-bold text-gray-700' }, loginTitle || (forgeId ? loginDictionary?.forgeLogin : loginDictionary?.loginAccount))),
             React.createElement("div", { className: "mt-4 flex flex-col gap-y-5" },
                 !onlyPasskeyLogin && requireEmailVerification && (React.createElement("form", { className: "flex flex-col gap-y-5", onSubmit: handleSubmitEmail((data) => onSubmitEmail(data)) },
-                    React.createElement(InputForm, { className: "my-1", control: emailControl, errors: emailErrors, name: "email", type: "text", placeholder: loginDictionary?.enterEmail, "data-testid": "login-email-input", icon: envelopIcon, autoComplete: authAbortController && isConditionalMediationAvailable
+                    React.createElement(InputForm, { className: "my-1", inputClassName: inputClassName, control: emailControl, errors: emailErrors, name: "email", type: "text", placeholder: emailInputLabel || loginDictionary?.enterEmail, "data-testid": "login-email-input", icon: envelopIcon, autoComplete: authAbortController && isConditionalMediationAvailable
                             ? 'username webauthn'
                             : undefined, autoFocus: true }),
+                    React.createElement("span", { onClick: () => sendAuth('FORGOT_PASSWORD'), className: "cursor-pointer text-xs font-medium text-[var(--primary-color)] hover:text-[var(--primary-hover)]" }, "Forgot your password?"),
                     React.createElement(Button, { type: "submit", "data-testid": "login-button", disabled: verifyEmptyValues(getValuesEmail('email')) },
                         isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
                         onlyPasskeyLogin ? loginDictionary?.passkeyLogin : loginDictionary?.login))),
@@ -598,7 +599,33 @@ const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshar
                     React.createElement("div", { "data-testid": "sign-up-button", className: "cursor-pointer text-[var(--primary-color)] hover:text-[var(--primary-hover)]", onClick: () => {
                             sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
                         } }, loginDictionary?.signUp)))));
-    }, [getValuesEmail(), isLoginSubmitDisabled, emailErrors, emailControl, isLoading, displayError]);
+    }, [
+        getValuesEmail,
+        emailErrors,
+        emailControl,
+        isLoading,
+        displayError,
+        loginTitleClassName,
+        loginTitle,
+        inputClassName,
+        emailInputLabel,
+        forgeId,
+        loginDictionary,
+        authAbortController,
+        isConditionalMediationAvailable,
+        sendAuth,
+        socialProviders,
+        dictionary,
+        handleSubmitEmail,
+        onSubmitEmail,
+        handlePasskeyButton,
+        handleGoogleLogin,
+        handleMicrosoftLogin,
+        onlyPasskeyLogin,
+        requireEmailVerification,
+        errorObj,
+        hasDisplayError,
+    ]);
     const SelectLoginMethod = useMemo(() => {
         const { authErrorTitle, authErrorDescription } = getAuthError();
         return (React.createElement("div", null,
@@ -636,8 +663,9 @@ const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshar
                     React.createElement("span", { className: "text-alr-grey text-center font-medium" }, authErrorDescription),
                     errorObj?.code && (React.createElement("span", { className: "text-center text-xs text-gray-500" }, `Error code: ${errorObj.code}`))))),
             React.createElement("form", { onSubmit: handleSubmitPassword((data) => onSubmitLogin(data)), className: "flex flex-col gap-y-5", "data-testid": "login-password-step" },
-                React.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "password", placeholder: loginDictionary?.enterPassword, icon: lockClosedIcon, type: "password", label: dictionary?.password, "data-testid": "login-password" }),
-                React.createElement(Button, { type: "submit", "data-testid": "login-submit", disabled: verifyEmptyValues(getValuesPassword('password')) },
+                React.createElement(InputForm, { inputClassName: inputClassName, control: passwordControl, errors: passwordErrors, name: "password", placeholder: loginDictionary?.enterPassword, icon: lockClosedIcon, type: "password", label: dictionary?.password, "data-testid": "login-password" }),
+                React.createElement("span", { onClick: () => sendAuth('FORGOT_PASSWORD'), className: "cursor-pointer text-xs font-medium text-[var(--primary-color)] hover:text-[var(--primary-hover)]" }, "Forgot your password?"),
+                React.createElement(Button, { type: "submit", "data-testid": "login-submit", disabled: isLoginSubmitDisabled },
                     isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
                     loginDictionary?.login),
                 React.createElement("span", { className: "text-center text-sm font-medium" },
@@ -646,12 +674,24 @@ const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshar
                             sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
                         } }, loginDictionary?.signUp)))));
     }, [
-        getValuesPassword(),
-        isLoginSubmitDisabled,
+        getValuesPassword,
+        getValuesEmail,
+        googleUser?.email,
+        credentialEmail,
         passwordErrors,
         passwordControl,
         isLoading,
         displayError,
+        hasDisplayError,
+        errorObj,
+        inputClassName,
+        loginDictionary,
+        dictionary,
+        sendAuth,
+        handleSubmitPassword,
+        onSubmitLogin,
+        forgeId,
+        isLoginSubmitDisabled,
     ]);
     const VerifyEmail = useMemo(() => (React.createElement("div", { "data-testid": "login-verify-email-step" },
         React.createElement(BackButton, { className: "mb-4", disabled: isLoading, onClick: () => sendAuth('BACK') }, dictionary?.back),
@@ -712,15 +752,45 @@ const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshar
             React.createElement("span", { onClick: () => resendSecureCode(), className: twMerge(`text-base font-medium duration-300`, sendEmailCooldown > 0
                     ? 'pointer-events-none opacity-50'
                     : 'hover:text-alr-red cursor-pointer opacity-100') }, `${loginDictionary?.resendCode}${sendEmailCooldown ? ` (${sendEmailCooldown}s)` : ''}`)))), [secureCodeEmail, sendEmailCooldown, isLoading, newDeviceInfo, displayError]);
+    // Create custom styles object for the Card component
+    const cardCustomStyles = useMemo(() => {
+        if (!customStyles)
+            return {};
+        const styles = {};
+        if (customStyles.borderRadius)
+            styles.borderRadius = customStyles.borderRadius;
+        if (customStyles.borderWidth)
+            styles.borderWidth = customStyles.borderWidth;
+        if (customStyles.borderColor)
+            styles.borderColor = customStyles.borderColor;
+        if (customStyles.backgroundColor)
+            styles.backgroundColor = customStyles.backgroundColor;
+        if (customStyles.padding)
+            styles.padding = customStyles.padding;
+        if (customStyles.boxShadow)
+            styles.boxShadow = customStyles.boxShadow;
+        return styles;
+    }, [customStyles]);
+    // Get alignment classes based on contentAlignment prop
+    const getAlignmentClasses = useMemo(() => {
+        const alignmentMap = {
+            left: 'items-start text-left',
+            center: 'items-center text-center',
+            right: 'items-end text-right',
+        };
+        return alignmentMap[contentAlignment];
+    }, [contentAlignment]);
     if (authState.matches('active.login.successfulLogin'))
         return null;
-    return (React.createElement("div", { className: "flex size-full min-h-screen flex-col items-center justify-center gap-y-2 sm:gap-y-7", "data-testid": "login-page" },
+    return (React.createElement("div", { className: `flex size-full min-h-screen flex-col items-center justify-center ${titleSpacing}`, "data-testid": "login-page" },
         forgeId ? (React.createElement("div", { className: "flex flex-col" },
             React.createElement("span", { className: "font-poppins text-alr-grey text-center text-2xl font-black" }, "Tardezinha com Thiaguinho"),
             React.createElement("div", { className: "flex w-full flex-row items-center justify-center gap-2" },
                 React.createElement("span", { className: "font-inter text-sm font-medium text-gray-900" }, dictionary?.auth.poweredBy),
-                React.createElement("img", { src: aloreLogoBlack, alt: "alore logo", width: "60" })))) : (logoImage || (React.createElement("img", { src: aloreLogoBlack, alt: "alore logo", width: authState.matches('active.login.newDevice') ? 153 : 201 }))),
-        React.createElement(Card, { className: twMerge(`md:child:!px-9 mx-5 flex min-w-[20rem] !rounded-2xl border-gray-200 px-2 py-4 md:mx-7 md:w-96`, isLoading ? 'pointer-events-none opacity-50' : '') }, isLoading ? (React.createElement(Spinner, { className: "my-20 !h-14 w-full !fill-[var(--primary-color)]" })) : (React.createElement(React.Fragment, null,
+                React.createElement("img", { src: aloreLogoBlack, alt: "alore logo", width: "60" })))) : (React.createElement("div", { className: `mx-5 flex min-w-80 flex-col gap-3 px-6 md:mx-7 md:w-96 ${getAlignmentClasses} ${logoContainerClassName || ''}` },
+            logoImage || (React.createElement("img", { src: aloreLogoBlack, alt: "alore logo", width: authState.matches('active.login.newDevice') ? 153 : 201 })),
+            title && React.createElement("h2", { className: titleClassName }, title))),
+        React.createElement(Card, { className: twMerge(`md:child:!px-9 mx-5 flex min-w-[20rem] !rounded-2xl border-gray-200 px-2 py-4 md:mx-7 md:w-96`, isLoading ? 'pointer-events-none opacity-50' : '', customClassName), style: cardCustomStyles }, isLoading ? (React.createElement(Spinner, { className: "my-20 !h-14 w-full !fill-[var(--primary-color)]" })) : (React.createElement(React.Fragment, null,
             forgeId && authState.matches('active.web3Connector') && 'TODO',
             (authState.matches('active.login.idle') ||
                 authState.matches('active.login.googleLogin') ||