@alore/auth-react-ui 1.0.0-alpha

package/dist/mjs/auth/Login.js

@@ -0,0 +1,688 @@
+'use client';
+import { ArrowRightIcon, EnvelopeIcon } from '@heroicons/react/20/solid';
+import { KeyIcon, LockOpenIcon } from '@heroicons/react/24/outline';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useGoogleLogin } from '@react-oauth/google';
+import { useActor } from '@xstate/react';
+import { Button, Card, Spinner } from 'flowbite-react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import * as yup from 'yup';
+import { verifyEmptyValues } from '../helpers';
+import useDictionary from '../hooks/useDictionary';
+import { aloreLogoBlack, authErrorImage, fingerprint, fingerprintError, google, metamaskLogo, walletConnectLogo, } from '../utils';
+const InputForm = React.lazy(() => import('../components/InputForm'));
+const InputOTP = React.lazy(() => import('../components/InputOTP'));
+const BackButton = React.lazy(() => import('../components/BackButton'));
+const envelopIcon = () => React.createElement(EnvelopeIcon, { className: "size-4 text-gray-500" });
+const HARDWARE = 1;
+const SOFTWARE = 2;
+const ABORT_CONDITIONAL_UI = 'abort-conditional-ui';
+export const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshareWorker, cryptoUtils, }) => {
+    const { hashUserInfo, generateSecureHash } = cryptoUtils;
+    const dictionary = useDictionary(locale);
+    const loginDictionary = dictionary?.auth.login;
+    const [secureCode2FA, setSecure2FACode] = useState('');
+    const [secureCodeEmail, setSecureCodeEmail] = useState('');
+    const [authState, sendAuth] = useActor(authServiceInstance);
+    const { salt, error: authError, active2fa, registerUser, googleOtpCode, googleUser, sessionUser, RCRPublicKey, } = authState.context;
+    const [currentDevice, setCurrentDevice] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [sendEmailCooldown, setSendEmailCooldown] = useState(0);
+    const [cooldownMultiplier, setCooldownMultiplier] = useState(1);
+    const [newDeviceInfo] = useState();
+    const [loginMethod, setLoginMethod] = useState('password');
+    const [isConditionalMediationAvailable, setIsConditionalMediationAvailable] = useState(false);
+    const [authAbortController, setAuthAbortController] = useState(undefined);
+    const intervalRef = useRef();
+    const googleLogin = useGoogleLogin({
+        onSuccess: (tokenResponse) => {
+            resetEmail();
+            sendAuth({
+                type: 'GOOGLE_LOGIN',
+                googleToken: tokenResponse.access_token,
+            });
+        },
+    });
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const handleGoogleLogin = () => googleLogin();
+    const hasPasskeySupportWithPRFOrLargeBlob = () => {
+        if (window.PublicKeyCredential &&
+            // eslint-disable-next-line no-undef
+            PublicKeyCredential.isConditionalMediationAvailable) {
+            Promise.all([
+                // eslint-disable-next-line no-undef
+                PublicKeyCredential.isConditionalMediationAvailable(),
+            ]).then(([isConditionalMediationAvailableCheck]) => {
+                setIsConditionalMediationAvailable(isConditionalMediationAvailableCheck);
+            });
+        }
+    };
+    const selectLoginMethod = () => {
+        if (loginMethod === 'password') {
+            sendAuth('SELECT_PASSWORD');
+        }
+        else {
+            const { username: email } = getValuesEmail();
+            sendAuth({
+                type: 'START_PASSKEY_LOGIN',
+                payload: {
+                    email,
+                },
+            });
+        }
+    };
+    const cancelConditionalCredentialRequest = () => {
+        authAbortController?.abort(ABORT_CONDITIONAL_UI);
+        setAuthAbortController(undefined);
+    };
+    // eslint-disable-next-line no-undef
+    const sendSignedCredential = async (credential) => {
+        const extensionResults = credential.getClientExtensionResults();
+        let secretFromCredential;
+        // @ts-ignore
+        const hasPrf = !!extensionResults?.prf?.results?.first;
+        // @ts-ignore
+        const hasLargeBlob = !!extensionResults?.largeBlob?.blob;
+        if (hasPrf) {
+            // @ts-ignore
+            secretFromCredential = extensionResults?.prf?.results?.first;
+        }
+        else if (hasLargeBlob) {
+            // @ts-ignore
+            secretFromCredential = extensionResults?.largeBlob?.blob;
+        }
+        if (hasLargeBlob && isSafari) {
+            // @ts-ignore
+            secretFromCredential = extensionResults?.largeBlob?.blob;
+        }
+        if (!secretFromCredential) {
+            sendAuth({
+                type: 'PASSKEY_NOT_SUPPORTED',
+                payload: { error: loginDictionary?.passkeyNotSupported },
+            });
+            return;
+        }
+        sendAuth({
+            type: 'FINISH_PASSKEY_LOGIN',
+            payload: {
+                passkeyAuth: {
+                    id: credential.id,
+                    rawId: Buffer.from(credential.rawId).toString('base64'),
+                    response: {
+                        authenticatorData: Buffer.from(
+                        // eslint-disable-next-line no-undef
+                        credential.response.authenticatorData).toString('base64'),
+                        clientDataJSON: Buffer.from(credential.response.clientDataJSON).toString('base64'),
+                        signature: Buffer.from(
+                        // eslint-disable-next-line no-undef
+                        credential.response.signature).toString('base64'),
+                        userHandle: Buffer.from(
+                        // @ts-ignore
+                        credential.response.userHandle || [0]).toString('base64'),
+                    },
+                    type: 'public-key',
+                },
+            },
+        });
+        if (keyshareWorker) {
+            keyshareWorker.postMessage({
+                method: 'derive-password',
+                payload: {
+                    password: new TextDecoder().decode(secretFromCredential),
+                    email: credential.id,
+                },
+            });
+        }
+    };
+    const finishPasskeyAuth = async () => {
+        if (!RCRPublicKey || !navigator?.credentials) {
+            sendAuth('BACK');
+            return;
+        }
+        cancelConditionalCredentialRequest();
+        const { publicKey } = RCRPublicKey;
+        const extensions = {
+            prf: { eval: { first: new TextEncoder().encode('Alore') } },
+            largeBlob: {
+                read: true,
+            },
+        };
+        // eslint-disable-next-line no-undef
+        const credentialOptions = {
+            publicKey: {
+                ...publicKey,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                allowCredentials: publicKey.allowCredentials?.map((cred) => ({
+                    ...cred,
+                    id: Buffer.from(cred.id, 'base64'),
+                })),
+                timeout: 10000,
+                // @ts-ignore
+                challenge: Buffer.from(publicKey.challenge, 'base64'),
+                rpId: publicKey.rpId,
+                extensions: {
+                    ...publicKey.extensions,
+                    // @ts-ignore
+                    ...extensions,
+                },
+            },
+        };
+        try {
+            if (authState.matches('active.login.signingCredentialRCR') ||
+                authState.matches('active.login.idle.signWithPasskey') ||
+                authState.matches('active.login.idle.authScreen')) {
+                const cred = await navigator.credentials.get(credentialOptions);
+                // eslint-disable-next-line no-undef
+                const credential = cred;
+                sendSignedCredential(credential);
+            }
+            if (isConditionalMediationAvailable &&
+                authState.matches('active.login.idle.localPasskeySign')) {
+                const abortController = new AbortController();
+                setAuthAbortController(abortController);
+                const cred = await navigator.credentials.get({
+                    ...credentialOptions,
+                    mediation: 'conditional',
+                    signal: abortController.signal,
+                });
+                // eslint-disable-next-line no-undef
+                const credential = cred;
+                sendSignedCredential(credential);
+                abortController?.abort();
+                setAuthAbortController(undefined);
+            }
+        }
+        catch (error) {
+            if (error !== ABORT_CONDITIONAL_UI) {
+                authAbortController?.abort();
+                setAuthAbortController(undefined);
+                sendAuth('BACK');
+            }
+        }
+    };
+    useEffect(() => {
+        cancelConditionalCredentialRequest();
+    }, [authState.matches('active.login.loginMethodSelection')]);
+    useEffect(() => {
+        if (authState.matches('active.login.idle.localPasskeySign') ||
+            authState.matches('active.login.idle.signWithPasskey') ||
+            authState.matches('active.login.signingCredentialRCR')) {
+            finishPasskeyAuth();
+        }
+    }, [
+        authState.matches('active.login.idle.localPasskeySign'),
+        authState.matches('active.login.idle.signWithPasskey'),
+        authState.matches('active.login.signingCredentialRCR'),
+    ]);
+    useEffect(() => {
+        if (authState.matches('active.login.idle.authScreen') && !isSafari) {
+            sendAuth('SET_CONDITIONAL_UI_PASSKEY');
+        }
+    }, [authState.matches('active.login.idle.authScreen')]);
+    const handlePasskeyButton = () => {
+        sendAuth('SIGN_IN_WITH_PASSKEY');
+    };
+    const isLoading = useMemo(() => loading ||
+        authState.matches('active.login.retrievingSalt') ||
+        authState.matches('active.login.verifyingLogin') ||
+        authState.matches('active.login.verifyingHwAuth') ||
+        authState.matches('active.login.verifying2faCode') ||
+        authState.matches('active.login.verifyingCode') ||
+        authState.matches('active.login.verifyingEmail2fa') ||
+        authState.matches('active.login.resendingEmailCode') ||
+        authState.matches('active.login.googleLogin') ||
+        authState.matches('active.login.verifyingGoogleLogin') ||
+        authState.matches('active.login.retrievingRCR') ||
+        authState.matches('active.login.verifyingRegisterPublicKeyCredential') ||
+        authState.matches('active.login.retrievingCredentialRCR') ||
+        authState.matches('active.login.signingCredentialRCR') ||
+        authState.matches('active.login.resendingConfirmationEmail') ||
+        authState.matches('active.web3Connector.verifyingClaimNftEmail2fa') ||
+        authState.matches('active.web3Connector.verifyingEmailEligibility'), [authState.value]);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            hasPasskeySupportWithPRFOrLargeBlob();
+        }
+        return () => {
+            cancelConditionalCredentialRequest();
+        };
+    }, []);
+    const emailFormSchema = yup
+        .object({
+        username: yup
+            .string()
+            .required(dictionary?.formValidation.required)
+            .email(dictionary?.formValidation.invalidEmail),
+    })
+        .required();
+    const passwordFormSchema = yup
+        .object({
+        password: yup
+            .string()
+            .required(dictionary?.formValidation.required)
+            .min(8, dictionary?.formValidation.passwordMinimum),
+    })
+        .required();
+    const activeHw2fa = useMemo(() => active2fa?.filter((item) => item.twoFaTypeId === HARDWARE) || [], [active2fa]);
+    const activeSw2fa = useMemo(() => active2fa?.find((item) => item.twoFaTypeId === SOFTWARE), [active2fa]);
+    const emailDefaultValues = {
+        username: '',
+    };
+    const { control: emailControl, formState: { errors: emailErrors, dirtyFields: emailDirtyFields }, handleSubmit: handleSubmitEmail, getValues: getValuesEmail, reset: resetEmail, } = useForm({
+        resolver: yupResolver(emailFormSchema),
+        defaultValues: emailDefaultValues,
+    });
+    useWatch({ control: emailControl, name: ['username'] });
+    const passwordDefaultValues = {
+        password: '',
+    };
+    const { control: passwordControl, formState: { errors: passwordErrors, dirtyFields: passwordDirtyFields }, handleSubmit: handleSubmitPassword, getValues: getValuesPassword, } = useForm({
+        resolver: yupResolver(passwordFormSchema),
+        defaultValues: passwordDefaultValues,
+    });
+    useWatch({ control: passwordControl, name: ['password'] });
+    useEffect(() => {
+        if (registerUser) {
+            if (forgeId) {
+                sendAuth(['RESET', { type: 'INITIALIZE', forgeId }]);
+            }
+            else {
+                sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'LOGIN']);
+            }
+        }
+    }, [registerUser]);
+    useEffect(() => {
+        if (secureCode2FA.length === 6) {
+            if (authState.matches('active.login.email2fa')) {
+                onClickSecureCodeSubmit();
+            }
+            else {
+                onSubmitSecureCode2FA();
+            }
+        }
+    }, [secureCode2FA]);
+    useEffect(() => {
+        if (secureCodeEmail.length === 6) {
+            onSubmitSecureCodeEmail();
+        }
+    }, [secureCodeEmail]);
+    useEffect(() => {
+        if (sendEmailCooldown <= 0) {
+            clearInterval(intervalRef.current);
+        }
+    }, [sendEmailCooldown]);
+    useEffect(() => {
+        if (authState.matches('active.login.newDevice')) {
+            // getNewDeviceInfo(); // TODO
+        }
+        if (authState.matches('active.login.hardware2fa') &&
+            authState.history?.matches('active.login.verifyingLogin')) {
+            startHwAuth(0);
+        }
+    }, [authState.value]);
+    const startHwAuth = async (index) => {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt && active2fa) {
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            const hardwares2fa = active2fa.filter((item) => item.twoFaTypeId === HARDWARE);
+            sendAuth({
+                type: 'VERIFY_HW_AUTH',
+                payload: {
+                    email,
+                    device: currentDevice,
+                    passwordHash: secureHashArgon2d,
+                    authId: hardwares2fa[index].id,
+                },
+            });
+        }
+        setLoading(false);
+    };
+    const onSubmitEmail = async (data) => {
+        setLoading(true);
+        const { username: email } = data;
+        // await signOut({ redirect: false });
+        sendAuth({ type: 'NEXT', payload: { email } });
+        setLoading(false);
+    };
+    const derivePasswordAndGetKeyshares = async (password, email) => {
+        if (keyshareWorker) {
+            keyshareWorker.postMessage({
+                method: 'derive-password',
+                payload: { password, email },
+            });
+        }
+    };
+    const onSubmitLogin = async (data) => {
+        setLoading(true);
+        const { password } = data;
+        const email = getValuesEmail('username') || googleUser?.email;
+        if (salt && email) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            if (typeof window !== 'undefined') {
+                let device = window.localStorage.getItem('currentDeviceSecret');
+                if (!device) {
+                    const { userAgent } = window.navigator;
+                    device = hashUserInfo(userAgent);
+                }
+                setCurrentDevice(device);
+                if (googleOtpCode) {
+                    sendAuth({
+                        type: 'COMPLETE_GOOGLE_SIGN_IN',
+                        payload: {
+                            email,
+                            passwordHash: secureHashArgon2d,
+                            otp: googleOtpCode,
+                        },
+                    });
+                }
+                else {
+                    sendAuth({
+                        type: 'VERIFY_LOGIN',
+                        payload: {
+                            email,
+                            device,
+                            passwordHash: secureHashArgon2d,
+                            isForgeClaim: !!forgeId,
+                            locale,
+                        },
+                    });
+                }
+            }
+        }
+        setLoading(false);
+    };
+    const onSubmitSecureCode2FA = async () => {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            sendAuth({
+                type: 'CONFIRM_SW_CODE',
+                payload: {
+                    email,
+                    device: currentDevice,
+                    passwordHash: secureHashArgon2d,
+                    otp: secureCode2FA,
+                },
+            });
+            setSecure2FACode('');
+        }
+        setLoading(false);
+    };
+    const onClickSecureCodeSubmit = async () => {
+        setLoading(true);
+        const { password } = getValuesPassword();
+        const { username: email } = getValuesEmail();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            if (typeof window !== 'undefined') {
+                let device = window.localStorage.getItem('currentDeviceSecret');
+                if (!device) {
+                    const { userAgent } = window.navigator;
+                    device = hashUserInfo(userAgent);
+                }
+                setCurrentDevice(device);
+                sendAuth({
+                    type: 'VERIFY_EMAIL_2FA',
+                    payload: {
+                        email: getValuesEmail('username'),
+                        secureCode: secureCode2FA,
+                        passwordHash: secureHashArgon2d,
+                    },
+                });
+            }
+        }
+        setLoading(false);
+        setSecure2FACode('');
+    };
+    const resendSecureCode = async () => {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            sendAuth({
+                type: 'RESEND_CODE',
+                payload: {
+                    email,
+                    passwordHash: secureHashArgon2d,
+                    device: currentDevice,
+                    nickname: email,
+                    isForgeClaim: !!forgeId,
+                    locale,
+                },
+            });
+            setSecureCodeEmail('');
+        }
+        setLoading(false);
+        setSendEmailCooldown(15 * cooldownMultiplier);
+        intervalRef.current = setInterval(() => setSendEmailCooldown((state) => state - 1), 1000);
+        setCooldownMultiplier((state) => state + 1);
+    };
+    const onSubmitSecureCodeEmail = async () => {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = await generateSecureHash(password, salt, 'argon2d');
+            sendAuth({
+                type: 'CONFIRM_DEVICE_CODE',
+                payload: {
+                    email,
+                    passwordHash: secureHashArgon2d,
+                    device: currentDevice,
+                    secureCode: secureCodeEmail,
+                },
+            });
+            setSecureCodeEmail('');
+        }
+        setLoading(false);
+    };
+    const isLoginSubmitDisabled = useMemo(() => verifyEmptyValues({ ...getValuesEmail(), ...getValuesPassword() }), [
+        { ...getValuesEmail(), ...getValuesPassword() },
+        { ...emailDirtyFields, ...passwordDirtyFields },
+    ]);
+    const getAuthError = () => {
+        let authErrorTitle = loginDictionary?.somethingWrong;
+        let authErrorDescription = loginDictionary?.defaultError;
+        if (authError?.includes('Invalid credentials')) {
+            authErrorTitle = loginDictionary?.invalidEmailPassword;
+            authErrorDescription = loginDictionary?.invalidEmailPasswordDescription;
+        }
+        else if (authError?.includes('Passkey')) {
+            authErrorTitle = loginDictionary?.passkeyNotSupported;
+            authErrorDescription = loginDictionary?.passkeyNotSupportedDescription;
+        }
+        return { authErrorTitle, authErrorDescription };
+    };
+    const EmailInputStep = useMemo(() => {
+        const { authErrorTitle, authErrorDescription } = getAuthError();
+        return (React.createElement(React.Fragment, null,
+            authError ? (React.createElement("div", { className: "flex flex-col items-center justify-center gap-5" },
+                React.createElement("img", { src: authErrorImage, alt: "alore logo", width: 70 }),
+                authError?.includes('beta') ? (React.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authError)) : (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))))) : (React.createElement("h1", { className: "font-inter text-center text-lg font-bold text-gray-700" }, forgeId ? loginDictionary?.forgeLogin : loginDictionary?.loginAccount)),
+            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: "username", type: "text", placeholder: loginDictionary?.enterEmail, "data-test": "login-email", icon: envelopIcon, autoComplete: authAbortController && isConditionalMediationAvailable
+                        ? 'username webauthn'
+                        : undefined, autoFocus: true }),
+                React.createElement(Button, { type: "submit", "data-test": "login-button", disabled: verifyEmptyValues(getValuesEmail('username')), className: "bg-alr-red hover:bg-alr-dark-red group relative flex items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600" },
+                    isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                    loginDictionary?.login),
+                React.createElement("div", { className: "h-[0.5px] w-full bg-gray-300" }),
+                typeof window.PublicKeyCredential !== 'undefined' && (React.createElement(Button, { color: "light", onClick: handlePasskeyButton, outline: true }, dictionary?.auth.signWithPasskey)),
+                React.createElement(Button, { color: "light", onClick: handleGoogleLogin, outline: true },
+                    React.createElement("div", { className: "flex flex-row items-center justify-center gap-2" },
+                        React.createElement("img", { src: google, alt: "google logo", width: 16 }),
+                        dictionary?.auth.continueGoogle)),
+                forgeId && (React.createElement(Button, { color: "light", onClick: () => sendAuth('LOGIN_WITH_WEB3CONNECTOR'), outline: true },
+                    React.createElement("div", { className: "flex flex-row items-center justify-center gap-2" },
+                        React.createElement("div", { className: "relative flex flex-row" },
+                            React.createElement("img", { src: metamaskLogo, alt: "metamask logo", width: 20, className: "absolute right-3" }),
+                            React.createElement("img", { src: walletConnectLogo, alt: "walletconnect logo", width: 20 })),
+                        "Metamask/WalletConnect"))),
+                React.createElement("span", { className: "text-center text-sm font-medium" },
+                    loginDictionary?.dontHaveAccount,
+                    React.createElement("div", { className: "text-alr-red cursor-pointer", onClick: () => {
+                            sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
+                        } }, loginDictionary?.signUp)))));
+    }, [getValuesEmail(), isLoginSubmitDisabled, emailErrors, emailControl, isLoading]);
+    const SelectLoginMethod = useMemo(() => {
+        const { authErrorTitle, authErrorDescription } = getAuthError();
+        return (React.createElement("div", null,
+            React.createElement(BackButton, { disabled: isLoading, onClick: () => sendAuth('BACK') }),
+            authError ? (React.createElement("div", { className: "my-4 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))) : undefined,
+            React.createElement("div", { className: "mt-2 flex w-full flex-col items-center", "data-test": "login-method-selection-step" },
+                isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                React.createElement("span", { className: "font-poppins text-alr-grey mb-6 text-center text-2xl font-bold md:text-[1.75rem]" }, loginDictionary?.selectMethodTitle),
+                React.createElement("span", { className: "text-alr-grey mb-6 w-full text-center font-medium" }, loginDictionary?.selectMethodDescription),
+                React.createElement("div", { className: "flex flex-col gap-5" },
+                    React.createElement("div", { className: "flex w-full gap-2" },
+                        React.createElement(Button, { "data-test": "login-method-selection-password", onClick: () => setLoginMethod('password'), color: "light", className: `${loginMethod === 'password' ? '!border-alr-red' : '!border-gray-500'} child:h-full w-full cursor-pointer items-start border focus:ring-0` },
+                            React.createElement("div", { className: "flex flex-col items-start justify-center gap-2" },
+                                React.createElement(LockOpenIcon, { className: `${loginMethod === 'password' ? 'text-alr-red' : 'text-gray-500'} size-7` }),
+                                React.createElement("span", { className: "font-semibold text-gray-900" }, loginDictionary?.password),
+                                React.createElement("span", { className: "text-start text-xs font-normal text-gray-600" }, loginDictionary?.selectMethodPassword))),
+                        React.createElement(Button, { "data-test": "login-method-selection-passkey", onClick: () => setLoginMethod('passkey'), color: "light", className: `${loginMethod === 'passkey' ? '!border-alr-red' : '!border-gray-500'} child:h-full w-full cursor-pointer items-start border focus:ring-0` },
+                            React.createElement("div", { className: "flex flex-col items-start justify-center gap-2" },
+                                React.createElement(KeyIcon, { className: `${loginMethod === 'passkey' ? 'text-alr-red' : 'text-gray-500'} size-7` }),
+                                React.createElement("span", { className: "font-semibold text-gray-900" }, loginDictionary?.passkey),
+                                React.createElement("span", { className: "text-start text-xs font-normal text-gray-600" }, loginDictionary?.selectMethodPasskey)))),
+                    React.createElement(Button, { "data-test": "login-method-selection-submit", onClick: () => selectLoginMethod(), className: "bg-alr-red text-alr-white mb-6 flex w-full cursor-pointer items-center" }, loginDictionary?.continue)))));
+    }, [isLoading, loginMethod]);
+    const PasswordInputStep = useMemo(() => (React.createElement(React.Fragment, null,
+        React.createElement(BackButton, { className: "mb-2.5", onClick: () => sendAuth('BACK') }, getValuesEmail('username') || googleUser?.email),
+        authError && (React.createElement("div", { className: "flex flex-col items-center justify-center gap-5" },
+            React.createElement("img", { src: authErrorImage, alt: "alore logo", width: 70 }),
+            React.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authError?.includes('Invalid credentials')
+                ? loginDictionary?.invalidEmailPassword
+                : loginDictionary?.somethingWrong),
+            React.createElement("span", { className: "text-alr-grey text-center font-medium" }, authError?.includes('Invalid credentials')
+                ? loginDictionary?.invalidEmailPasswordDescription
+                : loginDictionary?.defaultError))),
+        React.createElement("form", { onSubmit: handleSubmitPassword((data) => onSubmitLogin(data)), className: "flex flex-col gap-y-5", "data-test": "login-password-step" },
+            React.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "password", placeholder: loginDictionary?.enterPassword, type: "password", label: dictionary?.password, "data-test": "login-password" }),
+            React.createElement(Button, { type: "submit", "data-test": "login-submit", disabled: verifyEmptyValues(getValuesPassword('password')), className: "bg-alr-red hover:bg-alr-dark-red group relative flex items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600" },
+                isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                loginDictionary?.login),
+            React.createElement("span", { className: "text-sm font-medium" },
+                loginDictionary?.dontHaveAccount,
+                React.createElement("div", { className: "text-alr-red cursor-pointer", onClick: () => {
+                        sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
+                    } }, loginDictionary?.signUp))))), [getValuesPassword(), isLoginSubmitDisabled, passwordErrors, passwordControl, isLoading]);
+    const VerifyEmail = useMemo(() => (React.createElement("div", { className: "pb-10 pt-4" },
+        React.createElement(BackButton, { disabled: isLoading, onClick: () => sendAuth('BACK') }),
+        React.createElement("div", { className: "flex w-full flex-col items-center", "data-test": "login-verify-email-step" },
+            React.createElement("span", { className: "font-poppins text-alr-grey mb-10 mt-[4.5rem] text-[1.75rem] font-bold" }, loginDictionary?.verifyEmail),
+            React.createElement("span", { className: "text-alr-grey mb-12 w-[23.75rem] text-center font-medium" }, loginDictionary?.verifyEmailDescription),
+            React.createElement("div", { className: "mb-6 flex" },
+                React.createElement(InputOTP, { className: "child:gap-x-3 md:child:gap-x-5 [&>div>input]:!h-9 [&>div>input]:!w-9", value: secureCode2FA, onChange: (value) => setSecure2FACode(value), inputLength: 6, "data-test": "secure-code", errorMessage: authError?.includes('wrong') ? loginDictionary?.wrongCode : undefined, disabled: isLoading })),
+            React.createElement(Button, { "data-test": "secure-code-submit", onClick: () => onClickSecureCodeSubmit(), className: "bg-alr-red hover:bg-alr-dark-red group relative mb-6 flex w-full items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600", disabled: secureCode2FA.length !== 6 || isLoading },
+                isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                loginDictionary?.confirmCode),
+            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)` : ''}`)))), [secureCode2FA, sendEmailCooldown, isLoading, authState]);
+    const VerifyHw2FAStep = useMemo(() => (React.createElement("div", null,
+        React.createElement(BackButton, { onClick: () => sendAuth('BACK') }),
+        authError?.includes('Failed authenticating with hardware key') ? (React.createElement("div", { className: "mt-6 flex w-full flex-col items-center gap-6" },
+            React.createElement("img", { alt: "fingerprint error", src: fingerprintError }),
+            React.createElement("span", { className: "font-poppins text-alr-red text-center text-[1.3rem] font-bold" }, loginDictionary?.cantVerify2fa),
+            React.createElement(Button, { className: "bg-alr-red hover:bg-alr-dark-red group relative flex w-full items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600", onClick: () => startHwAuth(0) }, loginDictionary?.tryAgain),
+            activeHw2fa?.length > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("span", null, loginDictionary?.tryHardware),
+                React.createElement("div", { className: "text-alr-red flex cursor-pointer items-center gap-x-1 text-base font-semibold", onClick: () => startHwAuth(1) },
+                    loginDictionary?.useAnotherHardware,
+                    React.createElement(ArrowRightIcon, { className: "size-5" })))),
+            activeSw2fa && (React.createElement("div", { className: "text-alr-red flex cursor-pointer items-center gap-x-1 text-base font-semibold", onClick: () => sendAuth('USE_SOFTWARE_2FA') },
+                loginDictionary?.useSw2fa,
+                React.createElement(ArrowRightIcon, { className: "size-5" }))))) : (React.createElement("div", { className: "flex w-full flex-col items-center" },
+            React.createElement("span", { className: "font-poppins text-alr-grey mb-10 mt-12 text-center text-[1.3rem] font-bold" }, loginDictionary?.touchHardware),
+            React.createElement("span", { className: "text-alr-grey mb-10 w-60 text-sm font-normal" }, loginDictionary?.touchHardwareDescription),
+            React.createElement("img", { alt: "usb indicator", src: fingerprint }),
+            activeSw2fa && (React.createElement("div", { className: "text-alr-red mt-9 flex cursor-pointer items-center gap-x-1 text-base font-semibold", onClick: () => sendAuth('USE_SOFTWARE_2FA') },
+                loginDictionary?.useSw2fa,
+                React.createElement(ArrowRightIcon, { className: "size-5" }))))))), [isLoading, active2fa]);
+    const VerifySw2FAStep = useMemo(() => (React.createElement("div", null,
+        React.createElement(BackButton, { onClick: () => sendAuth('BACK') }),
+        React.createElement("div", { className: "flex w-full flex-col items-center" },
+            React.createElement("span", { className: "font-poppins text-alr-grey mb-10 mt-12 text-center text-[1.3rem] font-bold" }, loginDictionary?.inform2FACode),
+            React.createElement("div", { className: "mb-6 flex" },
+                React.createElement(InputOTP, { className: "child:gap-x-3 md:child:gap-x-5 [&>div>input]:!h-9 [&>div>input]:!w-9", value: secureCode2FA, onChange: (value) => setSecure2FACode(value), "data-test": "secure-code-2FA", inputLength: 6, errorMessage: authError?.includes('Invalid 2FA code') ? loginDictionary?.wrongCode : undefined })),
+            React.createElement(Button, { "data-test": "secure-code-2FA-submit", onClick: () => onSubmitSecureCode2FA(), className: "bg-alr-red hover:bg-alr-dark-red group relative mb-6 flex w-full items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600", disabled: secureCode2FA.length !== 6 },
+                isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                loginDictionary?.confirmCode),
+            active2fa?.find((item) => item.twoFaTypeId === HARDWARE) && (React.createElement("div", { className: "text-alr-red mt-9 flex cursor-pointer items-center gap-x-1 text-base font-semibold", onClick: () => sendAuth('USE_HARDWARE_2FA') },
+                loginDictionary?.useHw2fa,
+                React.createElement(ArrowRightIcon, { className: "size-5" })))))), [secureCode2FA, isLoading, active2fa]);
+    const NewDeviceStep = useMemo(() => (React.createElement("div", null,
+        React.createElement("div", { className: "flex w-full flex-col items-center" },
+            React.createElement("span", { className: "font-poppins text-alr-grey mb-5 mt-14 text-[1.75rem] font-bold" }, loginDictionary?.newDevice),
+            React.createElement("span", { className: "text-alr-grey mb-3 w-[23.75rem] text-center font-medium" }, loginDictionary?.verifyEmailDescription),
+            React.createElement("span", { className: "mb-5 font-bold" }, getValuesEmail('username')),
+            React.createElement("div", { className: "mb-5 h-44 w-full" }),
+            React.createElement("div", { className: "mb-6 flex" },
+                React.createElement(InputOTP, { className: "child:gap-x-3 md:child:gap-x-5 [&>div>input]:!h-9 [&>div>input]:!w-9", value: secureCodeEmail, onChange: (value) => setSecureCodeEmail(value), "data-test": "secure-code-email", inputLength: 6, errorMessage: authError?.includes('Wrong code') ? loginDictionary?.wrongCode : undefined })),
+            React.createElement(Button, { "data-test": "secure-code-email-submit", onClick: () => onSubmitSecureCodeEmail(), className: "bg-alr-red hover:bg-alr-dark-red group relative mb-6 flex w-full items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600", disabled: secureCodeEmail.length !== 6 },
+                isLoading && React.createElement(Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                loginDictionary?.confirmCode),
+            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]);
+    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-test": "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] py-2 md:mx-7 md:w-96`, isLoading ? 'pointer-events-none opacity-50' : '') },
+            forgeId && authState.matches('active.web3Connector') && 'TODO',
+            (authState.matches('active.login.passkeyGuard') ||
+                authState.matches('active.login.idle') ||
+                authState.matches('active.login.googleLogin') ||
+                authState.matches('active.login.retrievingSalt') ||
+                authState.matches('active.login.verifyingRegisterPublicKeyCredential') ||
+                authState.matches('active.login.retrievingRCR')) &&
+                EmailInputStep,
+            (authState.matches('active.login.loginMethodSelection') ||
+                authState.matches('active.login.signingCredentialRCR') ||
+                authState.matches('active.login.retrievingCredentialRCR')) &&
+                SelectLoginMethod,
+            (authState.matches('active.login.inputPassword') ||
+                authState.matches('active.login.verifyingGoogleLogin') ||
+                authState.matches('active.login.verifyingLogin')) &&
+                PasswordInputStep,
+            (authState.matches('active.login.email2fa') ||
+                authState.matches('active.login.resendingEmailCode') ||
+                authState.matches('active.login.verifyingEmail2fa')) &&
+                VerifyEmail,
+            (authState.matches('active.login.hardware2fa') ||
+                authState.matches('active.login.verifyingHwAuth')) &&
+                VerifyHw2FAStep,
+            (authState.matches('active.login.software2fa') ||
+                authState.matches('active.login.verifying2faCode')) &&
+                VerifySw2FAStep,
+            (authState.matches('active.login.newDevice') ||
+                authState.matches('active.login.verifyingCode') ||
+                authState.matches('active.login.resendingConfirmationEmail')) &&
+                NewDeviceStep,
+            authState.matches('active.login.successfulLogin') && (React.createElement("div", { className: "flex flex-col items-center justify-center gap-4" },
+                React.createElement("div", { className: "flex flex-row items-center justify-center gap-2" },
+                    React.createElement("span", null, "Login complete for"),
+                    React.createElement("span", { className: "font-semibold" }, sessionUser?.nickname)),
+                React.createElement(Button, { className: "bg-alr-red hover:bg-alr-dark-red group relative flex items-center justify-center rounded-lg border border-transparent p-0.5 text-center font-medium text-white duration-300 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-300 enabled:hover:bg-red-700 disabled:hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:enabled:hover:bg-red-700 dark:disabled:hover:bg-red-600", onClick: () => sendAuth(['RESET_CONTEXT', 'INITIALIZE']) }, "LOGOUT"))))));
+};
+//# sourceMappingURL=Login.js.map