@alore/auth-react-ui 1.0.0-alpha

package/dist/cjs/auth/Login.js

@@ -0,0 +1,714 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Login = void 0;
+const solid_1 = require("@heroicons/react/20/solid");
+const outline_1 = require("@heroicons/react/24/outline");
+const yup_1 = require("@hookform/resolvers/yup");
+const google_1 = require("@react-oauth/google");
+const react_1 = require("@xstate/react");
+const flowbite_react_1 = require("flowbite-react");
+const react_2 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const tailwind_merge_1 = require("tailwind-merge");
+const yup = __importStar(require("yup"));
+const helpers_1 = require("../helpers");
+const useDictionary_1 = __importDefault(require("../hooks/useDictionary"));
+const utils_1 = require("../utils");
+const InputForm = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require('../components/InputForm'))));
+const InputOTP = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require('../components/InputOTP'))));
+const BackButton = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require('../components/BackButton'))));
+const envelopIcon = () => react_2.default.createElement(solid_1.EnvelopeIcon, { className: "size-4 text-gray-500" });
+const HARDWARE = 1;
+const SOFTWARE = 2;
+const ABORT_CONDITIONAL_UI = 'abort-conditional-ui';
+const Login = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, keyshareWorker, cryptoUtils, }) => {
+    const { hashUserInfo, generateSecureHash } = cryptoUtils;
+    const dictionary = (0, useDictionary_1.default)(locale);
+    const loginDictionary = dictionary === null || dictionary === void 0 ? void 0 : dictionary.auth.login;
+    const [secureCode2FA, setSecure2FACode] = (0, react_2.useState)('');
+    const [secureCodeEmail, setSecureCodeEmail] = (0, react_2.useState)('');
+    const [authState, sendAuth] = (0, react_1.useActor)(authServiceInstance);
+    const { salt, error: authError, active2fa, registerUser, googleOtpCode, googleUser, sessionUser, RCRPublicKey, } = authState.context;
+    const [currentDevice, setCurrentDevice] = (0, react_2.useState)('');
+    const [loading, setLoading] = (0, react_2.useState)(false);
+    const [sendEmailCooldown, setSendEmailCooldown] = (0, react_2.useState)(0);
+    const [cooldownMultiplier, setCooldownMultiplier] = (0, react_2.useState)(1);
+    const [newDeviceInfo] = (0, react_2.useState)();
+    const [loginMethod, setLoginMethod] = (0, react_2.useState)('password');
+    const [isConditionalMediationAvailable, setIsConditionalMediationAvailable] = (0, react_2.useState)(false);
+    const [authAbortController, setAuthAbortController] = (0, react_2.useState)(undefined);
+    const intervalRef = (0, react_2.useRef)();
+    const googleLogin = (0, google_1.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 === null || authAbortController === void 0 ? void 0 : authAbortController.abort(ABORT_CONDITIONAL_UI);
+        setAuthAbortController(undefined);
+    };
+    // eslint-disable-next-line no-undef
+    const sendSignedCredential = (credential) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const extensionResults = credential.getClientExtensionResults();
+        let secretFromCredential;
+        // @ts-ignore
+        const hasPrf = !!((_b = (_a = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.prf) === null || _a === void 0 ? void 0 : _a.results) === null || _b === void 0 ? void 0 : _b.first);
+        // @ts-ignore
+        const hasLargeBlob = !!((_c = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.largeBlob) === null || _c === void 0 ? void 0 : _c.blob);
+        if (hasPrf) {
+            // @ts-ignore
+            secretFromCredential = (_e = (_d = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.prf) === null || _d === void 0 ? void 0 : _d.results) === null || _e === void 0 ? void 0 : _e.first;
+        }
+        else if (hasLargeBlob) {
+            // @ts-ignore
+            secretFromCredential = (_f = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.largeBlob) === null || _f === void 0 ? void 0 : _f.blob;
+        }
+        if (hasLargeBlob && isSafari) {
+            // @ts-ignore
+            secretFromCredential = (_g = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.largeBlob) === null || _g === void 0 ? void 0 : _g.blob;
+        }
+        if (!secretFromCredential) {
+            sendAuth({
+                type: 'PASSKEY_NOT_SUPPORTED',
+                payload: { error: loginDictionary === null || loginDictionary === void 0 ? void 0 : 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 = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _h;
+        if (!RCRPublicKey || !(navigator === null || navigator === void 0 ? void 0 : 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: Object.assign(Object.assign({}, publicKey), { 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                allowCredentials: (_h = publicKey.allowCredentials) === null || _h === void 0 ? void 0 : _h.map((cred) => (Object.assign(Object.assign({}, cred), { id: Buffer.from(cred.id, 'base64') }))), timeout: 10000, 
+                // @ts-ignore
+                challenge: Buffer.from(publicKey.challenge, 'base64'), rpId: publicKey.rpId, extensions: Object.assign(Object.assign({}, publicKey.extensions), extensions) }),
+        };
+        try {
+            if (authState.matches('active.login.signingCredentialRCR') ||
+                authState.matches('active.login.idle.signWithPasskey') ||
+                authState.matches('active.login.idle.authScreen')) {
+                const cred = yield 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 = yield navigator.credentials.get(Object.assign(Object.assign({}, credentialOptions), { mediation: 'conditional', signal: abortController.signal }));
+                // eslint-disable-next-line no-undef
+                const credential = cred;
+                sendSignedCredential(credential);
+                abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+                setAuthAbortController(undefined);
+            }
+        }
+        catch (error) {
+            if (error !== ABORT_CONDITIONAL_UI) {
+                authAbortController === null || authAbortController === void 0 ? void 0 : authAbortController.abort();
+                setAuthAbortController(undefined);
+                sendAuth('BACK');
+            }
+        }
+    });
+    (0, react_2.useEffect)(() => {
+        cancelConditionalCredentialRequest();
+    }, [authState.matches('active.login.loginMethodSelection')]);
+    (0, react_2.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'),
+    ]);
+    (0, react_2.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 = (0, react_2.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]);
+    (0, react_2.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            hasPasskeySupportWithPRFOrLargeBlob();
+        }
+        return () => {
+            cancelConditionalCredentialRequest();
+        };
+    }, []);
+    const emailFormSchema = yup
+        .object({
+        username: yup
+            .string()
+            .required(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.required)
+            .email(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.invalidEmail),
+    })
+        .required();
+    const passwordFormSchema = yup
+        .object({
+        password: yup
+            .string()
+            .required(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.required)
+            .min(8, dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.passwordMinimum),
+    })
+        .required();
+    const activeHw2fa = (0, react_2.useMemo)(() => (active2fa === null || active2fa === void 0 ? void 0 : active2fa.filter((item) => item.twoFaTypeId === HARDWARE)) || [], [active2fa]);
+    const activeSw2fa = (0, react_2.useMemo)(() => active2fa === null || active2fa === void 0 ? void 0 : active2fa.find((item) => item.twoFaTypeId === SOFTWARE), [active2fa]);
+    const emailDefaultValues = {
+        username: '',
+    };
+    const { control: emailControl, formState: { errors: emailErrors, dirtyFields: emailDirtyFields }, handleSubmit: handleSubmitEmail, getValues: getValuesEmail, reset: resetEmail, } = (0, react_hook_form_1.useForm)({
+        resolver: (0, yup_1.yupResolver)(emailFormSchema),
+        defaultValues: emailDefaultValues,
+    });
+    (0, react_hook_form_1.useWatch)({ control: emailControl, name: ['username'] });
+    const passwordDefaultValues = {
+        password: '',
+    };
+    const { control: passwordControl, formState: { errors: passwordErrors, dirtyFields: passwordDirtyFields }, handleSubmit: handleSubmitPassword, getValues: getValuesPassword, } = (0, react_hook_form_1.useForm)({
+        resolver: (0, yup_1.yupResolver)(passwordFormSchema),
+        defaultValues: passwordDefaultValues,
+    });
+    (0, react_hook_form_1.useWatch)({ control: passwordControl, name: ['password'] });
+    (0, react_2.useEffect)(() => {
+        if (registerUser) {
+            if (forgeId) {
+                sendAuth(['RESET', { type: 'INITIALIZE', forgeId }]);
+            }
+            else {
+                sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'LOGIN']);
+            }
+        }
+    }, [registerUser]);
+    (0, react_2.useEffect)(() => {
+        if (secureCode2FA.length === 6) {
+            if (authState.matches('active.login.email2fa')) {
+                onClickSecureCodeSubmit();
+            }
+            else {
+                onSubmitSecureCode2FA();
+            }
+        }
+    }, [secureCode2FA]);
+    (0, react_2.useEffect)(() => {
+        if (secureCodeEmail.length === 6) {
+            onSubmitSecureCodeEmail();
+        }
+    }, [secureCodeEmail]);
+    (0, react_2.useEffect)(() => {
+        if (sendEmailCooldown <= 0) {
+            clearInterval(intervalRef.current);
+        }
+    }, [sendEmailCooldown]);
+    (0, react_2.useEffect)(() => {
+        var _a;
+        if (authState.matches('active.login.newDevice')) {
+            // getNewDeviceInfo(); // TODO
+        }
+        if (authState.matches('active.login.hardware2fa') &&
+            ((_a = authState.history) === null || _a === void 0 ? void 0 : _a.matches('active.login.verifyingLogin'))) {
+            startHwAuth(0);
+        }
+    }, [authState.value]);
+    const startHwAuth = (index) => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt && active2fa) {
+            const secureHashArgon2d = yield 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 = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { username: email } = data;
+        // await signOut({ redirect: false });
+        sendAuth({ type: 'NEXT', payload: { email } });
+        setLoading(false);
+    });
+    const derivePasswordAndGetKeyshares = (password, email) => __awaiter(void 0, void 0, void 0, function* () {
+        if (keyshareWorker) {
+            keyshareWorker.postMessage({
+                method: 'derive-password',
+                payload: { password, email },
+            });
+        }
+    });
+    const onSubmitLogin = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { password } = data;
+        const email = getValuesEmail('username') || (googleUser === null || googleUser === void 0 ? void 0 : googleUser.email);
+        if (salt && email) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = yield 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 = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = yield generateSecureHash(password, salt, 'argon2d');
+            sendAuth({
+                type: 'CONFIRM_SW_CODE',
+                payload: {
+                    email,
+                    device: currentDevice,
+                    passwordHash: secureHashArgon2d,
+                    otp: secureCode2FA,
+                },
+            });
+            setSecure2FACode('');
+        }
+        setLoading(false);
+    });
+    const onClickSecureCodeSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { password } = getValuesPassword();
+        const { username: email } = getValuesEmail();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = yield 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 = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = yield 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 = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        const { username: email } = getValuesEmail();
+        const { password } = getValuesPassword();
+        if (salt) {
+            derivePasswordAndGetKeyshares(password, email);
+            const secureHashArgon2d = yield generateSecureHash(password, salt, 'argon2d');
+            sendAuth({
+                type: 'CONFIRM_DEVICE_CODE',
+                payload: {
+                    email,
+                    passwordHash: secureHashArgon2d,
+                    device: currentDevice,
+                    secureCode: secureCodeEmail,
+                },
+            });
+            setSecureCodeEmail('');
+        }
+        setLoading(false);
+    });
+    const isLoginSubmitDisabled = (0, react_2.useMemo)(() => (0, helpers_1.verifyEmptyValues)(Object.assign(Object.assign({}, getValuesEmail()), getValuesPassword())), [
+        Object.assign(Object.assign({}, getValuesEmail()), getValuesPassword()),
+        Object.assign(Object.assign({}, emailDirtyFields), passwordDirtyFields),
+    ]);
+    const getAuthError = () => {
+        let authErrorTitle = loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.somethingWrong;
+        let authErrorDescription = loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.defaultError;
+        if (authError === null || authError === void 0 ? void 0 : authError.includes('Invalid credentials')) {
+            authErrorTitle = loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.invalidEmailPassword;
+            authErrorDescription = loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.invalidEmailPasswordDescription;
+        }
+        else if (authError === null || authError === void 0 ? void 0 : authError.includes('Passkey')) {
+            authErrorTitle = loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.passkeyNotSupported;
+            authErrorDescription = loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.passkeyNotSupportedDescription;
+        }
+        return { authErrorTitle, authErrorDescription };
+    };
+    const EmailInputStep = (0, react_2.useMemo)(() => {
+        const { authErrorTitle, authErrorDescription } = getAuthError();
+        return (react_2.default.createElement(react_2.default.Fragment, null,
+            authError ? (react_2.default.createElement("div", { className: "flex flex-col items-center justify-center gap-5" },
+                react_2.default.createElement("img", { src: utils_1.authErrorImage, alt: "alore logo", width: 70 }),
+                (authError === null || authError === void 0 ? void 0 : authError.includes('beta')) ? (react_2.default.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authError)) : (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authErrorTitle),
+                    react_2.default.createElement("span", { className: "text-alr-grey text-center font-medium" }, authErrorDescription))))) : (react_2.default.createElement("h1", { className: "font-inter text-center text-lg font-bold text-gray-700" }, forgeId ? loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.forgeLogin : loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.loginAccount)),
+            react_2.default.createElement("form", { className: "flex flex-col gap-y-5", onSubmit: handleSubmitEmail((data) => onSubmitEmail(data)) },
+                react_2.default.createElement(InputForm, { className: "my-1", control: emailControl, errors: emailErrors, name: "username", type: "text", placeholder: loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.enterEmail, "data-test": "login-email", icon: envelopIcon, autoComplete: authAbortController && isConditionalMediationAvailable
+                        ? 'username webauthn'
+                        : undefined, autoFocus: true }),
+                react_2.default.createElement(flowbite_react_1.Button, { type: "submit", "data-test": "login-button", disabled: (0, helpers_1.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_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                    loginDictionary.login),
+                react_2.default.createElement("div", { className: "h-[0.5px] w-full bg-gray-300" }),
+                typeof window.PublicKeyCredential !== 'undefined' && (react_2.default.createElement(flowbite_react_1.Button, { color: "light", onClick: handlePasskeyButton, outline: true }, dictionary === null || dictionary === void 0 ? void 0 : dictionary.auth.signWithPasskey)),
+                react_2.default.createElement(flowbite_react_1.Button, { color: "light", onClick: handleGoogleLogin, outline: true },
+                    react_2.default.createElement("div", { className: "flex flex-row items-center justify-center gap-2" },
+                        react_2.default.createElement("img", { src: utils_1.google, alt: "google logo", width: 16 }), dictionary === null || dictionary === void 0 ? void 0 :
+                        dictionary.auth.continueGoogle)),
+                forgeId && (react_2.default.createElement(flowbite_react_1.Button, { color: "light", onClick: () => sendAuth('LOGIN_WITH_WEB3CONNECTOR'), outline: true },
+                    react_2.default.createElement("div", { className: "flex flex-row items-center justify-center gap-2" },
+                        react_2.default.createElement("div", { className: "relative flex flex-row" },
+                            react_2.default.createElement("img", { src: utils_1.metamaskLogo, alt: "metamask logo", width: 20, className: "absolute right-3" }),
+                            react_2.default.createElement("img", { src: utils_1.walletConnectLogo, alt: "walletconnect logo", width: 20 })),
+                        "Metamask/WalletConnect"))),
+                react_2.default.createElement("span", { className: "text-center text-sm font-medium" }, loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                    loginDictionary.dontHaveAccount,
+                    react_2.default.createElement("div", { className: "text-alr-red cursor-pointer", onClick: () => {
+                            sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
+                        } }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.signUp)))));
+    }, [getValuesEmail(), isLoginSubmitDisabled, emailErrors, emailControl, isLoading]);
+    const SelectLoginMethod = (0, react_2.useMemo)(() => {
+        const { authErrorTitle, authErrorDescription } = getAuthError();
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement(BackButton, { disabled: isLoading, onClick: () => sendAuth('BACK') }),
+            authError ? (react_2.default.createElement("div", { className: "my-4 flex flex-col items-center justify-center gap-2" },
+                react_2.default.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, authErrorTitle),
+                react_2.default.createElement("span", { className: "text-alr-grey text-center font-medium" }, authErrorDescription))) : undefined,
+            react_2.default.createElement("div", { className: "mt-2 flex w-full flex-col items-center", "data-test": "login-method-selection-step" },
+                isLoading && react_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+                react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-6 text-center text-2xl font-bold md:text-[1.75rem]" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.selectMethodTitle),
+                react_2.default.createElement("span", { className: "text-alr-grey mb-6 w-full text-center font-medium" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.selectMethodDescription),
+                react_2.default.createElement("div", { className: "flex flex-col gap-5" },
+                    react_2.default.createElement("div", { className: "flex w-full gap-2" },
+                        react_2.default.createElement(flowbite_react_1.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_2.default.createElement("div", { className: "flex flex-col items-start justify-center gap-2" },
+                                react_2.default.createElement(outline_1.LockOpenIcon, { className: `${loginMethod === 'password' ? 'text-alr-red' : 'text-gray-500'} size-7` }),
+                                react_2.default.createElement("span", { className: "font-semibold text-gray-900" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.password),
+                                react_2.default.createElement("span", { className: "text-start text-xs font-normal text-gray-600" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.selectMethodPassword))),
+                        react_2.default.createElement(flowbite_react_1.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_2.default.createElement("div", { className: "flex flex-col items-start justify-center gap-2" },
+                                react_2.default.createElement(outline_1.KeyIcon, { className: `${loginMethod === 'passkey' ? 'text-alr-red' : 'text-gray-500'} size-7` }),
+                                react_2.default.createElement("span", { className: "font-semibold text-gray-900" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.passkey),
+                                react_2.default.createElement("span", { className: "text-start text-xs font-normal text-gray-600" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.selectMethodPasskey)))),
+                    react_2.default.createElement(flowbite_react_1.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 === null || loginDictionary === void 0 ? void 0 : loginDictionary.continue)))));
+    }, [isLoading, loginMethod]);
+    const PasswordInputStep = (0, react_2.useMemo)(() => (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(BackButton, { className: "mb-2.5", onClick: () => sendAuth('BACK') }, getValuesEmail('username') || (googleUser === null || googleUser === void 0 ? void 0 : googleUser.email)),
+        authError && (react_2.default.createElement("div", { className: "flex flex-col items-center justify-center gap-5" },
+            react_2.default.createElement("img", { src: utils_1.authErrorImage, alt: "alore logo", width: 70 }),
+            react_2.default.createElement("span", { className: "font-poppins text-alr-red text-center text-xl font-bold" }, (authError === null || authError === void 0 ? void 0 : authError.includes('Invalid credentials'))
+                ? loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.invalidEmailPassword
+                : loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.somethingWrong),
+            react_2.default.createElement("span", { className: "text-alr-grey text-center font-medium" }, (authError === null || authError === void 0 ? void 0 : authError.includes('Invalid credentials'))
+                ? loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.invalidEmailPasswordDescription
+                : loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.defaultError))),
+        react_2.default.createElement("form", { onSubmit: handleSubmitPassword((data) => onSubmitLogin(data)), className: "flex flex-col gap-y-5", "data-test": "login-password-step" },
+            react_2.default.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "password", placeholder: loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.enterPassword, type: "password", label: dictionary === null || dictionary === void 0 ? void 0 : dictionary.password, "data-test": "login-password" }),
+            react_2.default.createElement(flowbite_react_1.Button, { type: "submit", "data-test": "login-submit", disabled: (0, helpers_1.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_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.login),
+            react_2.default.createElement("span", { className: "text-sm font-medium" }, loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.dontHaveAccount,
+                react_2.default.createElement("div", { className: "text-alr-red cursor-pointer", onClick: () => {
+                        sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
+                    } }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.signUp))))), [getValuesPassword(), isLoginSubmitDisabled, passwordErrors, passwordControl, isLoading]);
+    const VerifyEmail = (0, react_2.useMemo)(() => (react_2.default.createElement("div", { className: "pb-10 pt-4" },
+        react_2.default.createElement(BackButton, { disabled: isLoading, onClick: () => sendAuth('BACK') }),
+        react_2.default.createElement("div", { className: "flex w-full flex-col items-center", "data-test": "login-verify-email-step" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-10 mt-[4.5rem] text-[1.75rem] font-bold" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.verifyEmail),
+            react_2.default.createElement("span", { className: "text-alr-grey mb-12 w-[23.75rem] text-center font-medium" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.verifyEmailDescription),
+            react_2.default.createElement("div", { className: "mb-6 flex" },
+                react_2.default.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 === null || authError === void 0 ? void 0 : authError.includes('wrong')) ? loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.wrongCode : undefined, disabled: isLoading })),
+            react_2.default.createElement(flowbite_react_1.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_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.confirmCode),
+            react_2.default.createElement("span", { onClick: () => resendSecureCode(), className: (0, tailwind_merge_1.twMerge)(`text-base font-medium duration-300`, sendEmailCooldown > 0
+                    ? 'pointer-events-none opacity-50'
+                    : 'hover:text-alr-red cursor-pointer opacity-100') }, `${loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.resendCode}${sendEmailCooldown ? ` (${sendEmailCooldown}s)` : ''}`)))), [secureCode2FA, sendEmailCooldown, isLoading, authState]);
+    const VerifyHw2FAStep = (0, react_2.useMemo)(() => (react_2.default.createElement("div", null,
+        react_2.default.createElement(BackButton, { onClick: () => sendAuth('BACK') }),
+        (authError === null || authError === void 0 ? void 0 : authError.includes('Failed authenticating with hardware key')) ? (react_2.default.createElement("div", { className: "mt-6 flex w-full flex-col items-center gap-6" },
+            react_2.default.createElement("img", { alt: "fingerprint error", src: utils_1.fingerprintError }),
+            react_2.default.createElement("span", { className: "font-poppins text-alr-red text-center text-[1.3rem] font-bold" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.cantVerify2fa),
+            react_2.default.createElement(flowbite_react_1.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 === null || loginDictionary === void 0 ? void 0 : loginDictionary.tryAgain),
+            (activeHw2fa === null || activeHw2fa === void 0 ? void 0 : activeHw2fa.length) > 1 && (react_2.default.createElement(react_2.default.Fragment, null,
+                react_2.default.createElement("span", null, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.tryHardware),
+                react_2.default.createElement("div", { className: "text-alr-red flex cursor-pointer items-center gap-x-1 text-base font-semibold", onClick: () => startHwAuth(1) }, loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                    loginDictionary.useAnotherHardware,
+                    react_2.default.createElement(solid_1.ArrowRightIcon, { className: "size-5" })))),
+            activeSw2fa && (react_2.default.createElement("div", { className: "text-alr-red flex cursor-pointer items-center gap-x-1 text-base font-semibold", onClick: () => sendAuth('USE_SOFTWARE_2FA') }, loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.useSw2fa,
+                react_2.default.createElement(solid_1.ArrowRightIcon, { className: "size-5" }))))) : (react_2.default.createElement("div", { className: "flex w-full flex-col items-center" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-10 mt-12 text-center text-[1.3rem] font-bold" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.touchHardware),
+            react_2.default.createElement("span", { className: "text-alr-grey mb-10 w-60 text-sm font-normal" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.touchHardwareDescription),
+            react_2.default.createElement("img", { alt: "usb indicator", src: utils_1.fingerprint }),
+            activeSw2fa && (react_2.default.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 === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.useSw2fa,
+                react_2.default.createElement(solid_1.ArrowRightIcon, { className: "size-5" }))))))), [isLoading, active2fa]);
+    const VerifySw2FAStep = (0, react_2.useMemo)(() => (react_2.default.createElement("div", null,
+        react_2.default.createElement(BackButton, { onClick: () => sendAuth('BACK') }),
+        react_2.default.createElement("div", { className: "flex w-full flex-col items-center" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-10 mt-12 text-center text-[1.3rem] font-bold" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.inform2FACode),
+            react_2.default.createElement("div", { className: "mb-6 flex" },
+                react_2.default.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 === null || authError === void 0 ? void 0 : authError.includes('Invalid 2FA code')) ? loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.wrongCode : undefined })),
+            react_2.default.createElement(flowbite_react_1.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_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.confirmCode),
+            (active2fa === null || active2fa === void 0 ? void 0 : active2fa.find((item) => item.twoFaTypeId === HARDWARE)) && (react_2.default.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 === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.useHw2fa,
+                react_2.default.createElement(solid_1.ArrowRightIcon, { className: "size-5" })))))), [secureCode2FA, isLoading, active2fa]);
+    const NewDeviceStep = (0, react_2.useMemo)(() => (react_2.default.createElement("div", null,
+        react_2.default.createElement("div", { className: "flex w-full flex-col items-center" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-5 mt-14 text-[1.75rem] font-bold" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.newDevice),
+            react_2.default.createElement("span", { className: "text-alr-grey mb-3 w-[23.75rem] text-center font-medium" }, loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.verifyEmailDescription),
+            react_2.default.createElement("span", { className: "mb-5 font-bold" }, getValuesEmail('username')),
+            react_2.default.createElement("div", { className: "mb-5 h-44 w-full" }),
+            react_2.default.createElement("div", { className: "mb-6 flex" },
+                react_2.default.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 === null || authError === void 0 ? void 0 : authError.includes('Wrong code')) ? loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.wrongCode : undefined })),
+            react_2.default.createElement(flowbite_react_1.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_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), loginDictionary === null || loginDictionary === void 0 ? void 0 :
+                loginDictionary.confirmCode),
+            react_2.default.createElement("span", { onClick: () => resendSecureCode(), className: (0, tailwind_merge_1.twMerge)(`text-base font-medium duration-300`, sendEmailCooldown > 0
+                    ? 'pointer-events-none opacity-50'
+                    : 'hover:text-alr-red cursor-pointer opacity-100') }, `${loginDictionary === null || loginDictionary === void 0 ? void 0 : loginDictionary.resendCode}${sendEmailCooldown ? ` (${sendEmailCooldown}s)` : ''}`)))), [secureCodeEmail, sendEmailCooldown, isLoading, newDeviceInfo]);
+    return (react_2.default.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_2.default.createElement("div", { className: "flex flex-col" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey text-center text-2xl font-black" }, "Tardezinha com Thiaguinho"),
+            react_2.default.createElement("div", { className: "flex w-full flex-row items-center justify-center gap-2" },
+                react_2.default.createElement("span", { className: "font-inter text-sm font-medium text-gray-900" }, dictionary === null || dictionary === void 0 ? void 0 : dictionary.auth.poweredBy),
+                react_2.default.createElement("img", { src: utils_1.aloreLogoBlack, alt: "alore logo", width: "60" })))) : (logoImage || (react_2.default.createElement("img", { src: utils_1.aloreLogoBlack, alt: "alore logo", width: authState.matches('active.login.newDevice') ? 153 : 201 }))),
+        react_2.default.createElement(flowbite_react_1.Card, { className: (0, tailwind_merge_1.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_2.default.createElement("div", { className: "flex flex-col items-center justify-center gap-4" },
+                react_2.default.createElement("div", { className: "flex flex-row items-center justify-center gap-2" },
+                    react_2.default.createElement("span", null, "Login complete for"),
+                    react_2.default.createElement("span", { className: "font-semibold" }, sessionUser === null || sessionUser === void 0 ? void 0 : sessionUser.nickname)),
+                react_2.default.createElement(flowbite_react_1.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"))))));
+};
+exports.Login = Login;
+//# sourceMappingURL=Login.js.map