@alore/auth-react-ui 1.0.0-alpha

package/dist/cjs/auth/Register.js

@@ -0,0 +1,633 @@
+"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.Register = 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 crypto_1 = require("crypto");
+const flowbite_react_1 = require("flowbite-react");
+const jwt_decode_1 = __importDefault(require("jwt-decode"));
+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("../components/FormRules/helpers");
+const helpers_2 = 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 CheckboxForm = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require('../components/CheckboxForm'))));
+const TermsModal = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require('../components/TermsModal'))));
+const FormRules = react_2.default.lazy(() => Promise.resolve().then(() => __importStar(require('../components/FormRules'))));
+const envelopIcon = () => react_2.default.createElement(solid_1.EnvelopeIcon, { className: "size-4 text-gray-500" });
+const Register = ({ locale = 'pt', authServiceInstance, forgeId, logoImage, inviteToken, keyshareWorker, cryptoUtils, }) => {
+    const { hashUserInfo, generateSecureHash } = cryptoUtils;
+    const dictionary = (0, useDictionary_1.default)(locale);
+    const registerDictionary = dictionary === null || dictionary === void 0 ? void 0 : dictionary.auth.register;
+    const [secureCode, setSecureCode] = (0, react_2.useState)('');
+    const [sendEmailCooldown, setSendEmailCooldown] = (0, react_2.useState)(0);
+    const [cooldownMultiplier, setCooldownMultiplier] = (0, react_2.useState)(1);
+    const [authState, sendAuth] = (0, react_1.useActor)(authServiceInstance);
+    const intervalRef = (0, react_2.useRef)();
+    const { salt, error: authError, registerUser, googleUser, sessionUser, CCRPublicKey, RCRPublicKey, } = authState.context;
+    const [userSalt, setUserSalt] = (0, react_2.useState)('');
+    const [registrationMethod, setRegistrationMethod] = (0, react_2.useState)('password');
+    const login = (0, google_1.useGoogleLogin)({
+        onSuccess: (tokenResponse) => {
+            resetUserInfo();
+            sendAuth({
+                type: 'GOOGLE_LOGIN',
+                googleToken: tokenResponse.access_token,
+            });
+        },
+    });
+    const handleLogin = () => login();
+    const selectRegisterMethod = () => {
+        if (registrationMethod === 'password') {
+            sendAuth('SELECT_PASSWORD');
+        }
+        else {
+            const nickname = registerUser ? registerUser.nickname : userInfoGetValues('nickname');
+            const email = registerUser ? registerUser.email : userInfoGetValues('email');
+            const device = hashUserInfo(window.navigator.userAgent);
+            sendAuth({
+                type: 'START_PASSKEY_REGISTER',
+                payload: {
+                    email,
+                    nickname,
+                    device,
+                },
+            });
+        }
+    };
+    const finishPasskeyRegistration = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const publicKey = CCRPublicKey === null || CCRPublicKey === void 0 ? void 0 : CCRPublicKey.publicKey;
+        if (!publicKey || !navigator.credentials) {
+            sendAuth({
+                type: 'PASSKEY_NOT_SUPPORTED',
+                payload: { error: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkeyNotSupported },
+            });
+            return;
+        }
+        // TODO: Validate prf on ios/macos when 18.0 drops
+        const email = registerUser ? registerUser.email : userInfoGetValues('email');
+        const nickname = registerUser ? registerUser.nickname : userInfoGetValues('nickname');
+        const device = hashUserInfo(window.navigator.userAgent);
+        const extensions = {
+            prf: {
+                eval: {
+                    first: new TextEncoder().encode('Alore'),
+                },
+            },
+            largeBlob: {
+                support: 'preferred',
+            },
+        };
+        // eslint-disable-next-line no-undef
+        const credentialCreationOptions = {
+            publicKey: Object.assign(Object.assign({}, publicKey), { 
+                // @ts-ignore
+                challenge: Buffer.from(publicKey.challenge, 'base64'), user: {
+                    // @ts-ignore
+                    id: Buffer.from(publicKey.user.id, 'base64'),
+                    name: email,
+                    displayName: nickname,
+                }, authenticatorSelection: {
+                    requireResidentKey: true,
+                    residentKey: 'required',
+                    userVerification: 'required',
+                }, timeout: 10000, 
+                // @ts-ignore
+                extensions }),
+        };
+        try {
+            const _registerCredential = yield navigator.credentials
+                .create(credentialCreationOptions)
+                .catch((err) => {
+                console.error('err', err);
+            });
+            if (!_registerCredential) {
+                sendAuth({
+                    type: 'PASSKEY_NOT_SUPPORTED',
+                    payload: { error: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkeyNotSupported },
+                });
+                return;
+            }
+            // eslint-disable-next-line no-undef
+            const registerCredential = _registerCredential;
+            const extensionResults = registerCredential.getClientExtensionResults();
+            // @ts-ignore
+            const prfSupported = !!((_a = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.prf) === null || _a === void 0 ? void 0 : _a.enabled);
+            // @ts-ignore
+            const largeBlobSupported = !!((_b = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.largeBlob) === null || _b === void 0 ? void 0 : _b.supported);
+            if (!prfSupported && !largeBlobSupported) {
+                sendAuth({
+                    type: 'PASSKEY_NOT_SUPPORTED',
+                    payload: { error: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkeyNotSupported },
+                });
+            }
+            else {
+                sendAuth([
+                    {
+                        type: 'FINISH_PASSKEY_REGISTER',
+                        payload: {
+                            passkeyRegistration: {
+                                id: registerCredential.id,
+                                rawId: Buffer.from(registerCredential.rawId).toString('base64'),
+                                response: {
+                                    attestationObject: Buffer.from(
+                                    // eslint-disable-next-line no-undef
+                                    registerCredential.response
+                                        .attestationObject).toString('base64'),
+                                    clientDataJSON: Buffer.from(
+                                    // eslint-disable-next-line no-undef
+                                    registerCredential.response
+                                        .clientDataJSON).toString('base64'),
+                                },
+                                type: 'public-key',
+                            },
+                            email,
+                            device,
+                            nickname,
+                        },
+                    },
+                ]);
+            }
+        }
+        catch (_err) {
+            sendAuth({
+                type: 'PASSKEY_NOT_SUPPORTED',
+                payload: { error: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkeyNotSupported },
+            });
+        }
+    });
+    const finishPasskeyFirstAuth = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e, _f, _g, _h;
+        const publicKey = RCRPublicKey === null || RCRPublicKey === void 0 ? void 0 : RCRPublicKey.publicKey;
+        if (!publicKey || !navigator.credentials) {
+            sendAuth('BACK_TO_IDLE');
+            return;
+        }
+        const largeBlob = new Uint8Array((0, crypto_1.randomBytes)(32));
+        const extensions = {
+            prf: { eval: { first: new TextEncoder().encode('Alore') } },
+            largeBlob: {
+                write: largeBlob,
+            },
+        };
+        try {
+            const firstLoginCredential = (yield navigator.credentials.get({
+                publicKey: Object.assign(Object.assign({}, publicKey), { 
+                    // @ts-ignore
+                    challenge: Buffer.from(publicKey.challenge, 'base64'), 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    allowCredentials: (_c = publicKey.allowCredentials) === null || _c === void 0 ? void 0 : _c.map((cred) => (Object.assign(Object.assign({}, cred), { id: Buffer.from(cred.id, 'base64') }))), extensions: Object.assign(Object.assign({}, publicKey.extensions), extensions) }),
+                // eslint-disable-next-line no-undef
+            }));
+            if (!firstLoginCredential) {
+                sendAuth('BACK_TO_IDLE');
+                return;
+            }
+            const extensionResults = firstLoginCredential.getClientExtensionResults();
+            // @ts-ignore
+            const prfWritten = !!((_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);
+            // @ts-ignore
+            const blobWritten = !!((_f = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.largeBlob) === null || _f === void 0 ? void 0 : _f.written);
+            let secretFromCredential;
+            if (prfWritten) {
+                // @ts-ignore
+                secretFromCredential = (_h = (_g = extensionResults === null || extensionResults === void 0 ? void 0 : extensionResults.prf) === null || _g === void 0 ? void 0 : _g.results) === null || _h === void 0 ? void 0 : _h.first;
+            }
+            else if (blobWritten) {
+                secretFromCredential = largeBlob;
+            }
+            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            if (blobWritten && isSafari) {
+                secretFromCredential = largeBlob;
+            }
+            if (!secretFromCredential) {
+                sendAuth({
+                    type: 'PASSKEY_NOT_SUPPORTED',
+                    payload: { error: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkeyNotSupported },
+                });
+                return;
+            }
+            sendAuth({
+                type: 'FINISH_PASSKEY_AUTH',
+                payload: {
+                    passkeyAuth: {
+                        id: firstLoginCredential.id,
+                        rawId: Buffer.from(firstLoginCredential.rawId).toString('base64'),
+                        response: {
+                            authenticatorData: Buffer.from(
+                            // eslint-disable-next-line no-undef
+                            firstLoginCredential.response.authenticatorData).toString('base64'),
+                            clientDataJSON: Buffer.from(
+                            // eslint-disable-next-line no-undef
+                            firstLoginCredential.response.clientDataJSON).toString('base64'),
+                            signature: Buffer.from(
+                            // eslint-disable-next-line no-undef
+                            firstLoginCredential.response.signature).toString('base64'),
+                            userHandle: Buffer.from(
+                            // @ts-ignore
+                            firstLoginCredential.response.userHandle || [0]).toString('base64'),
+                        },
+                        type: 'public-key',
+                    },
+                },
+            });
+            if (keyshareWorker) {
+                keyshareWorker.postMessage({
+                    method: 'derive-password',
+                    payload: {
+                        password: new TextDecoder().decode(secretFromCredential),
+                        email: firstLoginCredential.id,
+                    },
+                });
+            }
+        }
+        catch (_err) {
+            sendAuth('BACK_TO_IDLE');
+        }
+    });
+    (0, react_2.useEffect)(() => {
+        if (authState.matches('active.register.localCCRSign')) {
+            finishPasskeyRegistration();
+        }
+    }, [authState.matches('active.register.localCCRSign')]);
+    (0, react_2.useEffect)(() => {
+        if (authState.matches('active.register.localRCRSign')) {
+            finishPasskeyFirstAuth();
+        }
+    }, [authState.matches('active.register.localRCRSign')]);
+    (0, react_2.useEffect)(() => {
+        if (authState.matches('active.register.waitingForRCR')) {
+            sendAuth({
+                type: 'START_PASSKEY_LOGIN',
+                payload: {
+                    email: registerUser ? registerUser.email : userInfoGetValues('email'),
+                },
+            });
+        }
+    }, [authState.matches('active.register.waitingForRCR')]);
+    const userInfoFormSchema = yup
+        .object({
+        email: yup
+            .string()
+            .required(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.required)
+            .email(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.invalidEmail),
+        nickname: yup
+            .string()
+            .matches(/^[a-zA-Z].*$/, dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.validName)
+            .max(40)
+            .required(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.required),
+        agreedWithTerms: yup.boolean().isTrue(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.agreeTerms),
+    })
+        .required();
+    const passwordFormSchema = yup
+        .object({
+        password: yup.string().required(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.required),
+        confirmPassword: yup.string().required(dictionary === null || dictionary === void 0 ? void 0 : dictionary.formValidation.required),
+    })
+        .required();
+    const userInfoDefaultValues = {
+        email: '',
+        nickname: '',
+        agreedWithTerms: false,
+    };
+    const { control: userInfoControl, formState: { errors: userInfoErrors, dirtyFields: userInfoDirtyFields }, handleSubmit: userInfoHandleSubmit, setValue: userInfoSetValue, getValues: userInfoGetValues, reset: resetUserInfo, } = (0, react_hook_form_1.useForm)({
+        resolver: (0, yup_1.yupResolver)(userInfoFormSchema),
+        defaultValues: userInfoDefaultValues,
+    });
+    const passwordDefaultValues = {
+        password: '',
+        confirmPassword: '',
+    };
+    const { control: passwordControl, formState: { errors: passwordErrors, dirtyFields: passwordDirtyFields }, handleSubmit: passwordHandleSubmit, getValues: passwordGetValues, } = (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_hook_form_1.useWatch)({ control: passwordControl, name: 'confirmPassword' });
+    const isLoading = (0, react_2.useMemo)(() => authState.matches('active.register.completingRegistration') ||
+        authState.matches('active.register.sendingEmail') ||
+        authState.matches('active.register.verifyingEmail') ||
+        authState.matches('active.register.resendingRegistrationEmail') ||
+        authState.matches('active.register.googleLogin') ||
+        authState.matches('active.register.retrievingCCR') ||
+        authState.matches('active.register.retrievingRCR') ||
+        authState.matches('active.register.localCCRSign') ||
+        authState.matches('active.register.localRCRSign') ||
+        authState.matches('active.register.waitingForRCR') ||
+        authState.matches('active.register.sendingPublicCredential') ||
+        authState.matches('active.register.sendingAuthPublicCredential') ||
+        authState.matches('active.web3Connector.verifyingClaimNftEmail2fa') ||
+        authState.matches('active.web3Connector.verifyingEmailEligibility'), [authState.value]);
+    (0, react_2.useEffect)(() => {
+        if (registerUser) {
+            sendAuth([{ type: 'INITIALIZE', forgeId }, 'SIGN_UP', 'ADVANCE_TO_PASSWORD']);
+        }
+        else
+            sendAuth([{ type: 'INITIALIZE', forgeId }, 'SIGN_UP']);
+    }, []);
+    (0, react_2.useEffect)(() => {
+        if (inviteToken) {
+            try {
+                const decoded = (0, jwt_decode_1.default)(inviteToken);
+                const { email, nickname } = decoded;
+                userInfoSetValue('email', email);
+                userInfoSetValue('nickname', nickname);
+                setUserSalt(decoded.salt);
+            }
+            catch (err) {
+                console.error('Invalid inviteToken');
+            }
+        }
+    }, [inviteToken]);
+    // TODO new social login logic
+    // useEffect(() => {
+    //   if (
+    //     status === 'authenticated' &&
+    //     // @ts-ignore
+    //     session.user?.provider === 'google' &&
+    //     authState.matches('active.register.idle')
+    //   ) {
+    //     const sessionUser: any = session?.user;
+    //     signOut({ redirect: false });
+    //     sendAuth({
+    //       type: 'GOOGLE_LOGIN',
+    //       // @ts-ignore
+    //       googleToken: session?.accessToken,
+    //       googleUser: {
+    //         email: sessionUser?.email || '',
+    //         nickname: sessionUser?.name || '',
+    //       },
+    //     });
+    //   }
+    // }, [session]);
+    (0, react_2.useEffect)(() => {
+        if (googleUser) {
+            sendAuth(['RESET', 'INITIALIZE']);
+        }
+    }, [googleUser]);
+    (0, react_2.useEffect)(() => {
+        if (secureCode.length === 6) {
+            onClickSecureCodeSubmit();
+        }
+    }, [secureCode]);
+    (0, react_2.useEffect)(() => {
+        if (sendEmailCooldown <= 0) {
+            clearInterval(intervalRef.current);
+        }
+    }, [sendEmailCooldown]);
+    function onClickSecureCodeSubmit() {
+        sendAuth({ type: 'VERIFY_EMAIL', payload: { secureCode } });
+        setSecureCode('');
+    }
+    function resendSecureCode() {
+        const { email, nickname } = userInfoGetValues();
+        sendAuth({
+            type: 'RESEND_CODE',
+            payload: { email, nickname, isForgeClaim: !!forgeId, locale },
+        });
+        setSendEmailCooldown(15 * cooldownMultiplier);
+        intervalRef.current = setInterval(() => setSendEmailCooldown((state) => state - 1), 1000);
+        setCooldownMultiplier((state) => state + 1);
+    }
+    function onSubmitUserData(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (inviteToken) {
+                sendAuth('ADVANCE_TO_PASSWORD');
+            }
+            else {
+                const { email, nickname } = data;
+                sendAuth({
+                    type: 'SEND_REGISTRATION_EMAIL',
+                    payload: {
+                        email,
+                        nickname,
+                        isForgeClaim: !!forgeId,
+                        locale,
+                    },
+                });
+            }
+        });
+    }
+    function onSubmitPassword(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { password } = data;
+            const email = registerUser ? registerUser.email : userInfoGetValues('email');
+            const nickname = registerUser ? registerUser.nickname : userInfoGetValues('nickname');
+            const { userAgent } = window.navigator;
+            const device = hashUserInfo(userAgent);
+            const saltWallet = registerUser ? registerUser.salt : salt || userSalt;
+            if (saltWallet) {
+                if (keyshareWorker) {
+                    keyshareWorker.postMessage({
+                        method: 'derive-password',
+                        payload: { password, email },
+                    });
+                    const secureHashArgon2d = yield generateSecureHash(password, saltWallet, 'argon2d');
+                    sendAuth({
+                        type: 'COMPLETE_REGISTRATION',
+                        payload: {
+                            email,
+                            passwordHash: secureHashArgon2d,
+                            device,
+                            nickname,
+                        },
+                    });
+                }
+            }
+        });
+    }
+    const isUserInfoSubmitDisabled = (0, react_2.useMemo)(() => (0, helpers_2.verifyEmptyValues)(userInfoGetValues()), [userInfoGetValues(), userInfoDirtyFields]);
+    const isPasswordSubmitDisabled = (0, react_2.useMemo)(() => {
+        const passwordValues = passwordGetValues();
+        const userInfoValues = registerUser || userInfoGetValues();
+        let isValid = true;
+        helpers_1.passwordRules.forEach((rule) => {
+            if (!(0, helpers_1.ruleValidation)(rule, passwordValues, userInfoValues)) {
+                isValid = false;
+            }
+        });
+        return !isValid;
+    }, [passwordGetValues(), passwordDirtyFields]);
+    const UserInfo = (0, react_2.useMemo)(() => (react_2.default.createElement(react_2.default.Fragment, null,
+        inviteToken ? (react_2.default.createElement("div", { className: "flex flex-col gap-2.5" },
+            react_2.default.createElement("h1", { className: "text-alr-grey mb-1 text-center text-[1.75rem] font-bold" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.welcome),
+            react_2.default.createElement("div", { className: "mb-5 text-gray-600" }, registerDictionary === null || registerDictionary === void 0 ? void 0 :
+                registerDictionary.invitedBy,
+                react_2.default.createElement("span", { className: "font-semibold" }, " 0xCarbon "), registerDictionary === null || registerDictionary === void 0 ? void 0 :
+                registerDictionary.toJoin,
+                react_2.default.createElement("span", { className: "text-alr-red" }, " Alore.")))) : (react_2.default.createElement("h1", { className: "font-inter mb-1 text-center font-semibold text-gray-600 md:text-lg" }, forgeId ? registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.forgeTitle : registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.title)),
+        (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("form", { onSubmit: userInfoHandleSubmit((data) => onSubmitUserData(data)), className: "mb-1 flex flex-col gap-y-5", "data-test": "register-new-account-step" },
+            react_2.default.createElement(InputForm, { control: userInfoControl, errors: userInfoErrors, name: "email", type: "email", placeholder: inviteToken
+                    ? `${registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.emailInvitePlaceholder}`
+                    : `${registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.emailLabel}`, "data-test": "register-email", icon: envelopIcon, autoFocus: true, disabled: isLoading || !!inviteToken }),
+            react_2.default.createElement(InputForm, { control: userInfoControl, errors: userInfoErrors, name: "nickname", type: "text", placeholder: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.nicknameLabel, "data-test": "register-first-name", disabled: isLoading }),
+            react_2.default.createElement(CheckboxForm, { className: "flex items-center justify-center", control: userInfoControl, name: "agreedWithTerms", "data-test": "register-agreed-with-terms", label: react_2.default.createElement("span", { className: "text-xs font-light text-gray-400 md:text-sm md:font-normal" }, registerDictionary === null || registerDictionary === void 0 ? void 0 :
+                    registerDictionary.agreeTermsPart1,
+                    react_2.default.createElement("span", { onClick: () => sendAuth('SHOW_TERMS_MODAL'), className: "text-alr-red cursor-pointer underline", "data-test": "terms-of-service" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.agreeTermsPart2)) }),
+            react_2.default.createElement(flowbite_react_1.Button, { "data-test": "register-button", type: "submit", disabled: isUserInfoSubmitDisabled || isLoading, 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-2 !h-5 w-6 !fill-gray-300" }), registerDictionary === null || registerDictionary === void 0 ? void 0 :
+                registerDictionary.buttonStart)),
+        react_2.default.createElement("div", { className: "flex w-full cursor-pointer flex-row items-center justify-center gap-1.5 text-sm text-gray-500", onClick: () => {
+                sendAuth(['RESET', { type: 'INITIALIZE', forgeId }, 'LOGIN']);
+            } },
+            react_2.default.createElement("span", { className: "font-inter font-semibold" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.alreadyHaveAccount),
+            react_2.default.createElement(solid_1.ArrowRightIcon, { className: "size-4" })),
+        forgeId && (react_2.default.createElement(react_2.default.Fragment, null,
+            react_2.default.createElement("div", { className: "h-[0.5px] w-full bg-gray-300" }),
+            react_2.default.createElement(flowbite_react_1.Button, { color: "light", onClick: handleLogin, 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)),
+            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")))))), [
+        isUserInfoSubmitDisabled,
+        userInfoControl,
+        userInfoErrors,
+        userInfoGetValues(),
+        userInfoDirtyFields,
+        isLoading,
+    ]);
+    const VerifyEmail = (0, react_2.useMemo)(() => (react_2.default.createElement(react_2.default.Fragment, null,
+        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": "register-verify-email-step" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-6 text-2xl font-bold md:text-[1.75rem]" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.verifyEmail),
+            react_2.default.createElement("span", { className: "text-alr-grey mb-6 w-full text-center font-medium" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.informCode),
+            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: secureCode, onChange: (value) => setSecureCode(value), inputLength: 6, "data-test": "secure-code", errorMessage: (authError === null || authError === void 0 ? void 0 : authError.includes('wrong')) ? `${registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.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: secureCode.length !== 6 || isLoading },
+                isLoading && react_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), registerDictionary === null || registerDictionary === void 0 ? void 0 :
+                registerDictionary.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') }, `${registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.resendCode}${sendEmailCooldown ? ` (${sendEmailCooldown}s)` : ''}`)))), [secureCode, sendEmailCooldown, isLoading]);
+    const SelectRegisterMethod = (0, react_2.useMemo)(() => (react_2.default.createElement("div", null,
+        react_2.default.createElement(BackButton, { disabled: isLoading, onClick: () => sendAuth('BACK') }),
+        react_2.default.createElement("div", { className: "mt-2 flex w-full flex-col items-center", "data-test": "register-method-selection-step" },
+            isLoading && react_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }),
+            (authError === null || authError === void 0 ? void 0 : authError.toLocaleLowerCase().includes('passkey')) && (react_2.default.createElement("span", { className: "font-poppins text-alr-red mb-4 text-center text-xl font-bold" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkeyNotSupported)),
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-6 text-2xl font-bold md:text-[1.75rem]" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.selectMethodTitle),
+            react_2.default.createElement("span", { className: "text-alr-grey mb-6 w-full text-center font-medium" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.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": "register-method-selection-password", onClick: () => setRegistrationMethod('password'), color: "light", className: `${registrationMethod === '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: `${registrationMethod === 'password' ? 'text-alr-red' : 'text-gray-500'} size-7` }),
+                            react_2.default.createElement("span", { className: "font-semibold text-gray-900" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.password),
+                            react_2.default.createElement("span", { className: "text-start text-xs font-normal text-gray-600" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.selectMethodPassword))),
+                    react_2.default.createElement(flowbite_react_1.Button, { disabled: typeof window.PublicKeyCredential === 'undefined', "data-test": "register-method-selection-passkey", onClick: () => setRegistrationMethod('passkey'), color: "light", className: `${registrationMethod === '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: `${registrationMethod === 'passkey' ? 'text-alr-red' : 'text-gray-500'} size-7` }),
+                            react_2.default.createElement("span", { className: "font-semibold text-gray-900" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passkey),
+                            react_2.default.createElement("span", { className: "text-start text-xs font-normal text-gray-600" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.selectMethodPasskey)))),
+                react_2.default.createElement(flowbite_react_1.Button, { "data-test": "register-method-selection-submit", onClick: () => selectRegisterMethod(), className: "bg-alr-red text-alr-white mb-6 flex w-full cursor-pointer items-center" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.continue))))), [isLoading, registrationMethod]);
+    const Password = (0, react_2.useMemo)(() => (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(BackButton, { disabled: isLoading, onClick: () => sendAuth(inviteToken || registerUser ? 'BACK_TO_IDLE' : 'BACK') }, userInfoGetValues('email')),
+        react_2.default.createElement("div", { className: "flex w-full flex-col", "data-test": "register-password-step" },
+            react_2.default.createElement("span", { className: "font-poppins text-alr-grey mb-5 text-center font-bold" }, registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.createPassword),
+            react_2.default.createElement("form", { onSubmit: passwordHandleSubmit((data) => onSubmitPassword(data)), className: "flex flex-col gap-y-4" },
+                react_2.default.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "password", autoFocus: true, placeholder: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passwordPlaceholder, label: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passwordLabel, type: "password", "data-test": "register-password", disabled: isLoading }),
+                react_2.default.createElement(InputForm, { control: passwordControl, errors: passwordErrors, name: "confirmPassword", placeholder: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passwordConfirmPlaceholder, label: registerDictionary === null || registerDictionary === void 0 ? void 0 : registerDictionary.passwordConfirmLabel, type: "password", "data-test": "register-confirm-password", disabled: isLoading }),
+                react_2.default.createElement(FormRules, { locale: locale, className: "!gap-y-1 md:!gap-y-2", passwordValues: passwordGetValues(), userValues: registerUser || userInfoGetValues() }),
+                react_2.default.createElement(flowbite_react_1.Button, { "data-test": "password-submit", type: "submit", 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", disabled: isPasswordSubmitDisabled || isLoading },
+                    isLoading && react_2.default.createElement(flowbite_react_1.Spinner, { className: "mr-3 !h-5 w-full !fill-gray-300" }), dictionary === null || dictionary === void 0 ? void 0 :
+                    dictionary.next))))), [
+        isPasswordSubmitDisabled,
+        passwordControl,
+        passwordErrors,
+        passwordGetValues(),
+        passwordDirtyFields,
+        isLoading,
+        registerUser,
+    ]);
+    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": "register-page" },
+        react_2.default.createElement(TermsModal, { locale: locale, show: authState.matches('active.register.termsModal'), onClose: () => sendAuth('CLOSE_TERMS_MODAL'), onSubmit: () => {
+                userInfoSetValue('agreedWithTerms', true);
+                sendAuth('CLOSE_TERMS_MODAL');
+            } }),
+        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.register.idle') ||
+                authState.matches('active.register.termsModal') ||
+                authState.matches('active.register.googleLogin') ||
+                authState.matches('active.register.sendingEmail')) &&
+                UserInfo,
+            (authState.matches('active.register.emailValidation') ||
+                authState.matches('active.register.verifyingEmail') ||
+                authState.matches('active.register.resendingRegistrationEmail')) &&
+                VerifyEmail,
+            (authState.matches('active.register.registerMethodSelection') ||
+                authState.matches('active.register.retrievingCCR') ||
+                authState.matches('active.register.retrievingRCR') ||
+                authState.matches('active.register.localCCRSign') ||
+                authState.matches('active.register.localRCRSign') ||
+                authState.matches('active.register.waitingForRCR') ||
+                authState.matches('active.register.sendingAuthPublicCredential') ||
+                authState.matches('active.register.sendingPublicCredential')) &&
+                SelectRegisterMethod,
+            (authState.matches('active.register.createPassword') ||
+                authState.matches('active.register.completingRegistration')) &&
+                Password,
+            authState.matches('active.register.userCreated') && (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, "Registration 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.Register = Register;
+//# sourceMappingURL=Register.js.map