@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
196 lines (193 loc) • 8.1 kB
JavaScript
import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Input } from '@headlessui/react';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { ActionButton } from '../design/Buttons.mjs';
import { useState } from 'react';
import clsx from 'clsx';
import { OtpVerification } from '../auth/OTP.mjs';
import { SuccessPage } from '../design/Success.mjs';
import { OtpType } from '@turnkey/core';
function UpdateEmail(params) {
var onSuccess = params.onSuccess,
onError = params.onError,
successPageDuration = params.successPageDuration,
organizationId = params.organizationId,
stampWith = params.stampWith,
userId = params.userId;
var _useTurnkey = useTurnkey(),
config = _useTurnkey.config,
user = _useTurnkey.user,
updateUserEmail = _useTurnkey.updateUserEmail,
initOtp = _useTurnkey.initOtp,
verifyOtp = _useTurnkey.verifyOtp;
var _useModal = useModal(),
isMobile = _useModal.isMobile,
pushPage = _useModal.pushPage,
closeModal = _useModal.closeModal;
var email = (user === null || user === void 0 ? void 0 : user.userEmail) || "";
var _useState = useState(email),
_useState2 = _slicedToArray(_useState, 2),
emailInput = _useState2[0],
setEmailInput = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isLoading = _useState4[0],
setIsLoading = _useState4[1];
var isValidEmail = function isValidEmail(e) {
return e.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) && e !== email;
};
var handleContinue = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var _config$auth, _config$auth2, _yield$initOtp, otpId, otpEncryptionTargetBundle, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
if (!isValidEmail(emailInput)) {
_context2.n = 5;
break;
}
_context2.p = 1;
setIsLoading(true);
_context2.n = 2;
return initOtp({
otpType: OtpType.Email,
contact: emailInput
});
case 2:
_yield$initOtp = _context2.v;
otpId = _yield$initOtp.otpId;
otpEncryptionTargetBundle = _yield$initOtp.otpEncryptionTargetBundle;
pushPage({
key: "Verify OTP",
content: jsx(OtpVerification, {
contact: emailInput,
otpId: otpId,
otpEncryptionTargetBundle: otpEncryptionTargetBundle,
otpType: OtpType.Email,
otpLength: (config === null || config === void 0 ? void 0 : (_config$auth = config.auth) === null || _config$auth === void 0 ? void 0 : _config$auth.otpLength) !== undefined ? Number(config.auth.otpLength) : undefined,
alphanumeric: config === null || config === void 0 ? void 0 : (_config$auth2 = config.auth) === null || _config$auth2 === void 0 ? void 0 : _config$auth2.otpAlphanumeric,
onContinue: function () {
var _onContinue = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(otpCode) {
var _yield$verifyOtp, verificationToken, res;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_context.n = 1;
return verifyOtp({
otpId: otpId,
otpCode: otpCode,
otpEncryptionTargetBundle: otpEncryptionTargetBundle
});
case 1:
_yield$verifyOtp = _context.v;
verificationToken = _yield$verifyOtp.verificationToken;
_context.n = 2;
return updateUserEmail(_objectSpread2({
email: emailInput,
verificationToken: verificationToken,
userId: userId,
organizationId: organizationId
}, stampWith && {
stampWith: stampWith
}));
case 2:
res = _context.v;
handleSuccess(res);
case 3:
return _context.a(2);
}
}, _callee);
}));
function onContinue(_x) {
return _onContinue.apply(this, arguments);
}
return onContinue;
}()
}),
showTitle: false
});
_context2.n = 4;
break;
case 3:
_context2.p = 3;
_t = _context2.v;
onError(_t);
case 4:
_context2.p = 4;
setIsLoading(false);
return _context2.f(4);
case 5:
return _context2.a(2);
}
}, _callee2, null, [[1, 3, 4, 5]]);
}));
return function handleContinue() {
return _ref.apply(this, arguments);
};
}();
var handleSuccess = function handleSuccess(userId) {
onSuccess(userId);
if (!successPageDuration) {
closeModal();
return;
}
pushPage({
key: "success",
content: jsx(SuccessPage, {
text: "Email updated successfully!",
duration: successPageDuration,
onComplete: function onComplete() {
closeModal();
}
}),
preventBack: true,
showTitle: false
});
};
var handleKeyDown = function handleKeyDown(e) {
if (e.key === "Enter") {
handleContinue();
}
};
return jsxs("div", {
className: clsx("mt-8", isMobile ? "w-full" : "w-72"),
children: [jsxs("div", {
className: "my-6 flex flex-col items-center",
children: [jsx(FontAwesomeIcon, {
icon: faEnvelope,
size: "2xl"
}), jsx("div", {
className: "text-2xl font-bold py-2 text-center",
children: params !== null && params !== void 0 && params.title ? params.title : "Update your email"
}), (params === null || params === void 0 ? void 0 : params.subTitle) && jsx("div", {
className: "text-sm text-icon-text-light dark:text-icon-text-dark text-center !p-0",
children: params.subTitle
})]
}), jsxs("div", {
className: "flex flex-col gap-4 my-3",
children: [jsx(Input, {
type: "email",
placeholder: email ? email : "your@email.com",
className: "w-full py-3 px-4 rounded-md text-inherit bg-button-light dark:bg-button-dark border border-modal-background-dark/20 dark:border-modal-background-light/20 focus:outline-primary-light focus:dark:outline-primary-dark focus:outline-[1px] focus:outline-offset-0 box-border",
value: emailInput,
onChange: function onChange(e) {
return setEmailInput(e.target.value);
},
onKeyDown: handleKeyDown
}), jsx(ActionButton, {
onClick: handleContinue,
disabled: !isValidEmail(emailInput),
loading: isLoading,
className: "w-full md:max-w-md bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark",
spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
children: "Continue"
})]
})]
});
}
export { UpdateEmail };
//# sourceMappingURL=UpdateEmail.mjs.map