supertokens-auth-react
Version:
ReactJS SDK that provides login functionality with SuperTokens.
740 lines (701 loc) • 182 kB
JavaScript
"use strict";
var genericComponentOverrideContext = require("./genericComponentOverrideContext.js");
var jsxRuntime = require("react/jsx-runtime");
var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath");
var uiEntry = require("./index2.js");
var session = require("./session.js");
var componentOverrideContext = require("./totp-shared.js");
var React = require("react");
var windowHandler = require("supertokens-web-js/utils/windowHandler");
var recipe = require("./multifactorauth-shared2.js");
var types = require("./multifactorauth-shared.js");
var translationContext = require("./translationContext.js");
var sessionprebuiltui = require("./sessionprebuiltui.js");
var arrowLeftIcon = require("./arrowLeftIcon.js");
var formBase = require("./emailpassword-shared6.js");
var STGeneralError = require("supertokens-web-js/utils/error");
require("supertokens-web-js");
require("supertokens-web-js/utils/cookieHandler");
require("supertokens-web-js/utils/postSuperTokensInitCallbacks");
require("supertokens-web-js/recipe/multitenancy");
require("supertokens-web-js/utils");
require("supertokens-web-js/lib/build/error");
require("supertokens-web-js/utils/normalisedURLDomain");
require("react-dom");
require("./multitenancy-shared.js");
require("./oauth2provider-shared.js");
require("supertokens-web-js/recipe/oauth2provider");
require("./recipeModule-shared.js");
require("./authRecipe-shared.js");
require("supertokens-web-js/lib/build/normalisedURLPath");
require("supertokens-web-js/recipe/session");
require("./session-shared.js");
require("supertokens-web-js/recipe/totp");
require("supertokens-web-js/recipe/multifactorauth");
require("supertokens-web-js/utils/sessionClaimValidatorStore");
require("./emailpassword-shared4.js");
require("./emailpassword-shared.js");
function _interopDefault(e) {
return e && e.__esModule ? e : { default: e };
}
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== "default") {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(
n,
k,
d.get
? d
: {
enumerable: true,
get: function () {
return e[k];
},
}
);
}
});
}
n.default = e;
return Object.freeze(n);
}
var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath);
var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError);
var styles =
'[data-supertokens~="container"] {\n --palette-background: 255, 255, 255;\n --palette-inputBackground: 250, 250, 250;\n --palette-inputBorder: 224, 224, 224;\n --palette-primary: 28, 34, 42;\n --palette-primaryBorder: 45, 54, 68;\n --palette-success: 65, 167, 0;\n --palette-successBackground: 217, 255, 191;\n --palette-error: 255, 23, 23;\n --palette-errorBackground: 255, 241, 235;\n --palette-textTitle: 0, 0, 0;\n --palette-textLabel: 0, 0, 0;\n --palette-textInput: 0, 0, 0;\n --palette-textPrimary: 128, 128, 128;\n --palette-textLink: 0, 122, 255;\n --palette-buttonText: 255, 255, 255;\n --palette-textGray: 54, 54, 54;\n --palette-superTokensBrandingBackground: 242, 245, 246;\n --palette-superTokensBrandingText: 173, 189, 196;\n --palette-buttonGreyedOut: 221, 221, 221;\n --palette-caution: 124, 96, 62;\n --palette-errorDark: 207, 54, 68;\n\n --font-size-0: 12px;\n --font-size-1: 14px;\n --font-size-2: 16px;\n --font-size-3: 19px;\n --font-size-4: 24px;\n --font-size-5: 28px;\n}\n/*\n * Default styles.\n */\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes swing-in-top-fwd {\n 0% {\n transform: rotateX(-100deg);\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n transform: rotateX(0deg);\n transform-origin: top;\n opacity: 1;\n }\n}\n[data-supertokens~="container"] {\n font-family: "Arial", sans-serif;\n margin: 12px auto;\n margin-top: 26px;\n margin-bottom: 26px;\n width: 420px;\n text-align: center;\n border-radius: 8px;\n box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.16);\n background-color: rgb(var(--palette-background));\n}\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\n[data-supertokens~="superTokensBranding"] {\n display: block;\n margin: 10px auto 0;\n background: rgb(var(--palette-superTokensBrandingBackground));\n color: rgb(var(--palette-superTokensBrandingText));\n text-decoration: none;\n width: -webkit-fit-content;\n width: fit-content;\n border-radius: 6px 6px 0 0;\n padding: 4px 9px;\n font-weight: 400;\n font-size: var(--font-size-0);\n letter-spacing: 0.4px;\n}\n[data-supertokens~="generalError"] {\n background: rgb(var(--palette-errorBackground));\n padding-top: 10px;\n padding-bottom: 10px;\n margin-bottom: 10px;\n margin-top: 24px;\n padding-left: 18px;\n padding-right: 18px;\n letter-spacing: 0.2px;\n font-size: var(--font-size-1);\n border-radius: 8px;\n color: rgb(var(--palette-error));\n animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n word-wrap: break-word;\n}\n[data-supertokens~="headerTitle"] {\n font-size: var(--font-size-4);\n line-height: 27.6px;\n letter-spacing: 0.58px;\n font-weight: 700;\n margin-bottom: 20px;\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n/* TODO: split the link style into separate things*/\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n[data-supertokens~="link"] {\n padding-left: 3px;\n padding-right: 3px;\n color: rgb(var(--palette-textLink));\n font-size: var(--font-size-1);\n cursor: pointer;\n letter-spacing: 0.16px;\n line-height: 26px;\n}\n[data-supertokens~="primaryText"] {\n font-size: var(--font-size-2);\n font-weight: 400;\n letter-spacing: 0.4px;\n line-height: 21px;\n color: rgb(var(--palette-textLabel));\n}\n[data-supertokens~="secondaryText"] {\n font-size: var(--font-size-1);\n font-weight: 400;\n letter-spacing: 0.4px;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\n[data-supertokens~="divider"] {\n margin-top: 1.5em;\n margin-bottom: 1.5em;\n border-bottom: 0.3px solid #dddddd;\n align-items: center;\n padding-bottom: 5px;\n flex: 3 3;\n}\n[data-supertokens~="headerTinyTitle"] {\n margin-top: 24px;\n font-size: var(--font-size-5);\n letter-spacing: 1.1px;\n font-weight: 700;\n line-height: 28px;\n}\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\n[data-supertokens~="generalSuccess"] {\n color: rgb(var(--palette-success));\n font-size: var(--font-size-1);\n background: rgb(var(--palette-successBackground));\n animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n padding: 9px 15px 9px 15px;\n border-radius: 6px;\n display: inline-block;\n}\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n margin-top: 10px;\n margin-bottom: 40px;\n cursor: pointer;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\n[data-supertokens~="button"] {\n font-family: "Arial", sans-serif;\n background-color: rgb(var(--palette-primary));\n color: rgb(var(--palette-buttonText));\n width: 100%;\n height: 34px;\n font-weight: 600;\n border-width: 1px;\n border-style: solid;\n border-radius: 6px;\n border-color: rgb(var(--palette-primaryBorder));\n background-position: center;\n transition: all 0.4s;\n background-size: 12000%;\n cursor: pointer;\n}\n[data-supertokens~="buttonGreyedOut"] {\n background-color: rgb(var(--palette-buttonGreyedOut));\n border-color: rgb(var(--palette-buttonGreyedOut));\n}\n[data-supertokens~="buttonWithIcon"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\n[data-supertokens~="delayedRender"] {\n animation-duration: 0.1s;\n animation-name: animate-fade;\n animation-delay: 0.2s;\n animation-fill-mode: backwards;\n}\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n font-weight: 400;\n position: relative;\n left: -6px; /* half the width of the left arrow */\n}\n@media (max-width: 360px) {\n [data-supertokens~="footerLinkGroupVert"] {\n flex-direction: column;\n }\n [data-supertokens~="footerLinkGroupVert"] > div {\n margin: 0 auto;\n }\n}\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n[data-supertokens~="dividerWithOr"] {\n padding-top: 5px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n[data-supertokens~="formLabelLinkBtn"] {\n width: auto;\n margin-top: 0;\n line-height: 24px;\n font-size: var(--font-size-0);\n}\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\n[data-supertokens~="authPageTitleOAuthClient"] {\n color: rgb(var(--palette-textGray));\n font-size: var(--font-size-1);\n font-weight: 400;\n margin: 10px 0 25px;\n}\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="buttonWithArrow"] {\n border-radius: 6px;\n border: 1px solid #d0d5dd;\n width: 100%;\n color: rgb(var(--palette-textGray));\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n margin: 24px 0;\n min-height: 48px;\n cursor: pointer;\n}\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryText"] {\n font-weight: 700;\n font-size: var(--font-size-2);\n color: rgb(var(--palette-textGray));\n margin: 0;\n}\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n/* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved.\n *\n * This software is licensed under the Apache License, Version 2.0 (the\n * "License") as published by the Apache Software Foundation.\n *\n * You may not use this file except in compliance with the License. You may\n * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations\n * under the License.\n */\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\n[data-supertokens~="inputWrapper"] {\n box-sizing: border-box;\n width: 100%;\n display: flex;\n align-items: center;\n background-color: rgb(var(--palette-inputBackground));\n height: 34px;\n border-radius: 6px;\n border: 1px solid rgb(var(--palette-inputBorder));\n}\n[data-supertokens~="inputWrapper"][focus-within] {\n background-color: rgba(var(--palette-inputBackground), 0.25);\n border: 1px solid rgb(var(--palette-primary));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-primary), 0.25);\n outline: none;\n}\n[data-supertokens~="inputWrapper"]:focus-within {\n background-color: rgba(var(--palette-inputBackground), 0.25);\n border: 1px solid rgb(var(--palette-primary));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-primary), 0.25);\n outline: none;\n}\n[data-supertokens~="inputError"] {\n border: 1px solid rgb(var(--palette-error));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-error), 0.25);\n outline: none;\n}\n[data-supertokens~="inputError"][focus-within] {\n border: 1px solid rgb(var(--palette-error));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-error), 0.25);\n outline: none;\n}\n[data-supertokens~="inputError"]:focus-within {\n border: 1px solid rgb(var(--palette-error));\n box-shadow: 0 0 0 0.2rem rgba(var(--palette-error), 0.25);\n outline: none;\n}\n[data-supertokens~="input"] {\n box-sizing: border-box;\n padding-left: 15px;\n filter: none;\n color: rgb(var(--palette-textInput));\n background-color: transparent;\n border-radius: 6px;\n font-size: var(--font-size-1);\n border: none;\n padding-right: 25px;\n letter-spacing: 1.2px;\n flex: 9 1 75%;\n width: 75%;\n height: 32px;\n}\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\n[data-supertokens~="input"]:-webkit-autofill,\n[data-supertokens~="input"]:-webkit-autofill:hover,\n[data-supertokens~="input"]:-webkit-autofill:focus,\n[data-supertokens~="input"]:-webkit-autofill:active {\n -webkit-text-fill-color: rgb(var(--palette-textInput));\n box-shadow: 0 0 0 30px rgb(var(--palette-inputBackground)) inset;\n}\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\n[data-supertokens~="inputErrorMessage"] {\n padding-top: 5px;\n padding-bottom: 5px;\n color: rgb(var(--palette-error));\n line-height: 24px;\n font-weight: 400;\n font-size: var(--font-size-1);\n text-align: left;\n animation: slideTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n max-width: 330px;\n}\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\n[data-supertokens~="label"] {\n text-align: left;\n font-weight: 700;\n font-size: var(--font-size-0);\n line-height: 24px;\n color: rgb(var(--palette-textLabel));\n}\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\n[data-supertokens~="primaryText"][data-supertokens~="sendVerifyEmailText"] {\n text-align: center;\n letter-spacing: 0.8px;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\n}\n[data-supertokens~="totp"] [data-supertokens~="container"] {\n padding-top: 24px;\n}\n[data-supertokens~="totp"] [data-supertokens~="divider"] {\n margin-top: 20px;\n margin-bottom: 20px;\n}\n[data-supertokens~="totp"] [data-supertokens~="row"] {\n padding-top: 16px;\n padding-bottom: 8px;\n width: auto;\n margin: 0 50px;\n}\n[data-supertokens~="totpDeviceQR"] {\n border-radius: 12px;\n border: 1px solid rgb(var(--palette-inputBorder));\n padding: 16px;\n max-width: 172px;\n max-height: 172px;\n}\n[data-supertokens~="showTOTPSecret"] {\n display: block;\n color: rgb(var(--palette-textGray));\n font-size: var(--font-size-0);\n margin: 16px 0 12px;\n}\n[data-supertokens~="totpSecret"] {\n display: block;\n border-radius: 6px;\n padding: 7px 15px;\n color: rgb(var(--palette-textLink));\n font-size: var(--font-size-1);\n font-weight: 600;\n letter-spacing: 3.36px;\n background: rgba(var(--palette-textLink), 0.08);\n word-wrap: break-word;\n overflow-y: hidden;\n}\nbutton[data-supertokens~="showTOTPSecretBtn"] {\n font-size: 12px;\n}\n[data-supertokens~="showTOTPSecretBtn"]:hover {\n text-decoration: underline;\n}\n[data-supertokens~="retryCodeBtn"]:disabled {\n border: 0;\n border-radius: 6px;\n color: rgb(var(--palette-error));\n background: rgb(var(--palette-errorBackground));\n}\n';
var ThemeBase = function (_a) {
var children = _a.children,
userStyles = _a.userStyles;
return jsxRuntime.jsxs(React.Fragment, {
children: [children, jsxRuntime.jsxs("style", { children: [styles, userStyles.join("\n")] })],
});
};
var BlockedIcon = function () {
return jsxRuntime.jsxs(
"svg",
genericComponentOverrideContext.__assign(
{ xmlns: "http://www.w3.org/2000/svg", width: "65", height: "65", viewBox: "0 0 65 65", fill: "none" },
{
children: [
jsxRuntime.jsx("circle", { cx: "32.5", cy: "32.5", r: "32.5", fill: "#FCEAEB" }),
jsxRuntime.jsx("path", {
d: "M32.8804 36.5547C32.1233 36.5547 31.5039 37.1741 31.5039 37.9312C31.5039 38.6882 32.1233 39.3076 32.8804 39.3076C33.6374 39.3076 34.2568 38.6882 34.2568 37.9312C34.2568 37.1741 33.6374 36.5547 32.8804 36.5547Z",
fill: "#CF3644",
}),
jsxRuntime.jsx("path", {
d: "M41.829 29.6724V23.4783C41.829 18.5402 37.82 14.5312 32.8819 14.5312C27.9352 14.5312 23.9348 18.5402 23.9348 23.4783V29.6724H19.1172V50.3195H46.6466V29.6724H41.829ZM33.5701 40.5982V44.1254C33.5701 44.5039 33.2604 44.8136 32.8819 44.8136C32.5034 44.8136 32.1937 44.5039 32.1937 44.1254V40.5982C31.0065 40.2885 30.129 39.2131 30.129 37.9312C30.129 36.4085 31.3592 35.1783 32.8819 35.1783C34.4046 35.1783 35.6348 36.4085 35.6348 37.9312C35.6348 39.2131 34.7573 40.2885 33.5701 40.5982ZM40.4525 29.6724H25.3113V23.4783C25.3113 19.3059 28.7095 15.9077 32.8819 15.9077C37.0543 15.9077 40.4525 19.3059 40.4525 23.4783V29.6724Z",
fill: "#CF3644",
}),
],
}
)
);
};
var RetryButton = function (_a) {
var nextRetryAt = _a.nextRetryAt,
onClick = _a.onClick;
var t = translationContext.useTranslation();
var getTimeLeft = React.useCallback(
function () {
var timeLeft = nextRetryAt - Date.now();
return timeLeft < 0 ? undefined : Math.ceil(timeLeft / 1000);
},
[nextRetryAt]
);
var _b = React.useState(getTimeLeft()),
secsUntilRetry = _b[0],
setSecsUntilRetry = _b[1];
React.useEffect(
function () {
// This runs every time nextRetryAt updates
var interval = setInterval(function () {
var timeLeft = getTimeLeft();
if (timeLeft === undefined) {
clearInterval(interval);
}
setSecsUntilRetry(timeLeft);
}, 500);
return function () {
// This can safely run twice
clearInterval(interval);
};
},
[getTimeLeft, setSecsUntilRetry]
);
return jsxRuntime.jsx(
"button",
genericComponentOverrideContext.__assign(
{
type: "button",
disabled: secsUntilRetry !== undefined,
onClick: onClick,
"data-supertokens": "button retryCodeBtn",
},
{
children:
secsUntilRetry !== undefined
? jsxRuntime.jsxs(React__namespace.default.Fragment, {
children: [
t("TOTP_MFA_BLOCKED_TIMER_START"),
jsxRuntime.jsxs("strong", {
children: [
Math.floor(secsUntilRetry / 60)
.toString()
.padStart(2, "0"),
":",
(secsUntilRetry % 60).toString().padStart(2, "0"),
],
}),
t("TOTP_MFA_BLOCKED_TIMER_END"),
],
})
: t("TOTP_MFA_BLOCKED_RETRY"),
}
)
);
};
var TOTPBlockedScreen = function (props) {
var t = translationContext.useTranslation();
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "container totp-mfa blockedScreen" },
{
children: jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "row noFormRow" },
{
children: [
jsxRuntime.jsx(BlockedIcon, {}),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle" },
{ children: t("TOTP_BLOCKED_TITLE") }
)
),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerSubtitle secondaryText" },
{ children: t("TOTP_BLOCKED_SUBTITLE") }
)
),
jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
jsxRuntime.jsx(
formBase.FormRow,
{
children: jsxRuntime.jsx(RetryButton, {
nextRetryAt: props.nextRetryAt,
onClick: props.onRetry,
}),
},
"form-button"
),
jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{
"data-supertokens": "secondaryText secondaryLinkWithLeftArrow",
onClick: props.onSignOutClicked,
},
{
children: [
jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, {
color: "rgb(var(--palette-textPrimary))",
}),
t("TOTP_MFA_LOGOUT"),
],
}
)
),
],
}
)
),
}
)
);
};
var BlockedScreen = uiEntry.withOverride("TOTPBlockedScreen", TOTPBlockedScreen);
var TOTPLoadingScreen = function () {
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "container delayedRender totp-mfa loadingScreen" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "row" },
{
children: jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "spinner delayedRender" },
{ children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) }
)
),
}
)
),
}
)
);
};
var LoadingScreen = uiEntry.withOverride("TOTPLoadingScreen", TOTPLoadingScreen);
var CodeForm = uiEntry.withOverride("TOTPCodeForm", function TOTPCodeForm(props) {
var _this = this;
var userContext = uiEntry.useUserContext();
return jsxRuntime.jsx(React__namespace.default.Fragment, {
children: jsxRuntime.jsx(formBase.FormBase, {
formDataSupertokens: "totp-mfa codeForm",
clearError: props.clearError,
onError: props.onError,
formFields: [
{
id: "totp",
label: "TOTP_CODE_INPUT_LABEL",
autofocus: true,
optional: false,
clearOnSubmit: true,
autoComplete: "one-time-code",
placeholder: "",
validate: componentOverrideContext.totpCodeValidate,
},
],
onSuccess: props.onSuccess,
buttonLabel: "TOTP_CODE_CONTINUE_BUTTON",
callAPI: function (formFields) {
return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () {
var totp, response;
var _a;
return genericComponentOverrideContext.__generator(this, function (_b) {
switch (_b.label) {
case 0:
totp =
(_a = formFields.find(function (field) {
return field.id === "totp";
})) === null || _a === void 0
? void 0
: _a.value;
if (totp === undefined || totp.length === 0) {
throw new STGeneralError__default.default("GENERAL_ERROR_TOTP_UNDEFINED");
}
if (!props.featureState.deviceInfo) return [3 /*break*/, 2];
return [
4 /*yield*/,
props.recipeImplementation.verifyDevice({
deviceName: props.featureState.deviceInfo.deviceName,
totp: totp,
userContext: userContext,
}),
];
case 1:
response = _b.sent();
return [3 /*break*/, 4];
case 2:
return [
4 /*yield*/,
props.recipeImplementation.verifyCode({
totp: totp,
userContext: userContext,
}),
];
case 3:
response = _b.sent();
_b.label = 4;
case 4:
// We can return these statuses, since they all cause a redirection or are handled elsewhere
// so we don't really want to show anything
if (
response.status === "OK" ||
response.status === "UNKNOWN_DEVICE_ERROR" ||
response.status === "LIMIT_REACHED_ERROR" ||
response.status === "INVALID_TOTP_ERROR"
) {
return [2 /*return*/, response];
}
throw new STGeneralError__default.default("SOMETHING_WENT_WRONG_ERROR");
}
});
});
},
validateOnBlur: false,
showLabels: true,
footer: props.footer,
}),
});
});
var CodeVerificationFooter = uiEntry.withOverride(
"TOTPCodeVerificationFooter",
function TOTPCodeVerificationFooter(_a) {
var onSignOutClicked = _a.onSignOutClicked;
var t = translationContext.useTranslation();
return jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "footerLinkGroupVert totp-mfa codeVerificationFooter" },
{
children: jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{
"data-supertokens": "secondaryText secondaryLinkWithLeftArrow",
onClick: onSignOutClicked,
},
{
children: [
jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, {
color: "rgb(var(--palette-textPrimary))",
}),
t("TOTP_MFA_LOGOUT"),
],
}
)
),
}
)
);
}
);
var CodeVerificationHeader = uiEntry.withOverride(
"TOTPCodeVerificationHeader",
function TOTPCodeVerificationHeader(props) {
var t = translationContext.useTranslation();
return jsxRuntime.jsxs(React.Fragment, {
children: [
jsxRuntime.jsxs(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerTitle withBackButton totp-mfa codeVerificationHeader" },
{
children: [
props.showBackButton
? jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked })
: jsxRuntime.jsx("span", {
"data-supertokens": "backButtonPlaceholder backButtonCommon",
}),
t("TOTP_CODE_VERIFICATION_HEADER_TITLE"),
jsxRuntime.jsx("span", {
"data-supertokens": "backButtonPlaceholder backButtonCommon",
}),
],
}
)
),
jsxRuntime.jsx(
"div",
genericComponentOverrideContext.__assign(
{ "data-supertokens": "headerSubtitle secondaryText" },
{ children: t("TOTP_CODE_VERIFICATION_HEADER_SUBTITLE") }
)
),
jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
],
});
}
);
var lib = {};
var propTypesExports = {};
var propTypes$2 = {
get exports() {
return propTypesExports;
},
set exports(v) {
propTypesExports = v;
},
};
var reactIsExports = {};
var reactIs = {
get exports() {
return reactIsExports;
},
set exports(v) {
reactIsExports = v;
},
};
var reactIs_production_min = {};
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactIs_production_min;
function requireReactIs_production_min() {
if (hasRequiredReactIs_production_min) return reactIs_production_min;
hasRequiredReactIs_production_min = 1;
var b = "function" === typeof Symbol && Symbol.for,
c = b ? Symbol.for("react.element") : 60103,
d = b ? Symbol.for("react.portal") : 60106,
e = b ? Symbol.for("react.fragment") : 60107,
f = b ? Symbol.for("react.strict_mode") : 60108,
g = b ? Symbol.for("react.profiler") : 60114,
h = b ? Symbol.for("react.provider") : 60109,
k = b ? Symbol.for("react.context") : 60110,
l = b ? Symbol.for("react.async_mode") : 60111,
m = b ? Symbol.for("react.concurrent_mode") : 60111,
n = b ? Symbol.for("react.forward_ref") : 60112,
p = b ? Symbol.for("react.suspense") : 60113,
q = b ? Symbol.for("react.suspense_list") : 60120,
r = b ? Symbol.for("react.memo") : 60115,
t = b ? Symbol.for("react.lazy") : 60116,
v = b ? Symbol.for("react.block") : 60121,
w = b ? Symbol.for("react.fundamental") : 60117,
x = b ? Symbol.for("react.responder") : 60118,
y = b ? Symbol.for("react.scope") : 60119;
function z(a) {
if ("object" === typeof a && null !== a) {
var u = a.$$typeof;
switch (u) {
case c:
switch (((a = a.type), a)) {
case l:
case m:
case e:
case g:
case f:
case p:
return a;
default:
switch (((a = a && a.$$typeof), a)) {
case k:
case n:
case t:
case r:
case h:
return a;
default:
return u;
}
}
case d:
return u;
}
}
}
function A(a) {
return z(a) === m;
}
reactIs_production_min.AsyncMode = l;
reactIs_production_min.ConcurrentMode = m;
reactIs_production_min.ContextConsumer = k;
reactIs_production_min.ContextProvider = h;
reactIs_production_min.Element = c;
reactIs_production_min.ForwardRef = n;
reactIs_production_min.Fragment = e;
reactIs_production_min.Lazy = t;
reactIs_production_min.Memo = r;
reactIs_production_min.Portal = d;
reactIs_production_min.Profiler = g;
reactIs_production_min.StrictMode = f;
reactIs_production_min.Suspense = p;
reactIs_production_min.isAsyncMode = function (a) {
return A(a) || z(a) === l;
};
reactIs_production_min.isConcurrentMode = A;
reactIs_production_min.isContextConsumer = function (a) {
return z(a) === k;
};
reactIs_production_min.isContextProvider = function (a) {
return z(a) === h;
};
reactIs_production_min.isElement = function (a) {
return "object" === typeof a && null !== a && a.$$typeof === c;
};
reactIs_production_min.isForwardRef = function (a) {
return z(a) === n;
};
reactIs_production_min.isFragment = function (a) {
return z(a) === e;
};
reactIs_production_min.isLazy = function (a) {
return z(a) === t;
};
reactIs_production_min.isMemo = function (a) {
return z(a) === r;
};
reactIs_production_min.isPortal = function (a) {
return z(a) === d;
};
reactIs_production_min.isProfiler = function (a) {
return z(a) === g;
};
reactIs_production_min.isStrictMode = function (a) {
return z(a) === f;
};
reactIs_production_min.isSuspense = function (a) {
return z(a) === p;
};
reactIs_production_min.isValidElementType = function (a) {
return (
"string" === typeof a ||
"function" === typeof a ||
a === e ||
a === m ||
a === g ||
a === f ||
a === p ||
a === q ||
("object" === typeof a &&
null !== a &&
(a.$$typeof === t ||
a.$$typeof === r ||
a.$$typeof === h ||
a.$$typeof === k ||
a.$$typeof === n ||
a.$$typeof === w ||
a.$$typeof === x ||
a.$$typeof === y ||
a.$$typeof === v))
);
};
reactIs_production_min.typeOf = z;
return reactIs_production_min;
}
var reactIs_development = {};
/** @license React v16.13.1
* react-is.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactIs_development;
function requireReactIs_development() {
if (hasRequiredReactIs_development) return reactIs_development;
hasRequiredReactIs_development = 1;
if (process.env.NODE_ENV !== "production") {
(function () {
// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
// nor polyfill, then a plain number is used for performance.
var hasSymbol = typeof Symbol === "function" && Symbol.for;
var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 0xeac7;
var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 0xeaca;
var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 0xeacb;
var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 0xeacc;
var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 0xead2;
var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 0xeacd;
var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
// (unstable) APIs that have been removed. Can we remove the symbols?
var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 0xeacf;
var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 0xeacf;
var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 0xead0;
var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 0xead1;
var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for("react.suspense_list") : 0xead8;
var REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 0xead3;
var REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 0xead4;
var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for("react.block") : 0xead9;
var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 0xead5;
var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 0xead6;
var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 0xead7;
function isValidElementType(type) {
return (
typeof type === "string" ||
typeof type === "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
type === REACT_FRAGMENT_TYPE ||
type === REACT_CONCURRENT_MODE_TYPE ||
type === REACT_PROFILER_TYPE ||
type === REACT_STRICT_MODE_TYPE ||
type === REACT_SUSPENSE_TYPE ||
type === REACT_SUSPENSE_LIST_TYPE ||
(typeof type === "object" &&
type !== null &&
(type.$$typeof === REACT_LAZY_TYPE ||
type.$$typeof === REACT_MEMO_TYPE ||
type.$$typeof === REACT_PROVIDER_TYPE ||
type.$$typeof === REACT_CONTEXT_TYPE ||
type.$$typeof === REACT_FORWARD_REF_TYPE ||
type.$$typeof === REACT_FUNDAMENTAL_TYPE ||
type.$$typeof === REACT_RESPONDER_TYPE ||
type.$$typeof === REACT_SCOPE_TYPE ||
type.$$typeof === REACT_BLOCK_TYPE))
);
}
function typeOf(object) {
if (typeof object === "object" && object !== null) {
var $$typeof = object.$$typeof;
switch ($$typeof) {
case REACT_ELEMENT_TYPE:
var type = object.type;
switch (type) {
case REACT_ASYNC_MODE_TYPE:
case REACT_CONCURRENT_MODE_TYPE:
case REACT_FRAGMENT_TYPE:
case REACT_PROFILER_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_SUSPENSE_TYPE:
return type;
default:
var $$typeofType = type && type.$$typeof;
switch ($$typeofType) {
case REACT_CONTEXT_TYPE:
case REACT_FORWARD_REF_TYPE:
case REACT_LAZY_TYPE:
case REACT_MEMO_TYPE:
case REACT_PROVIDER_TYPE:
return $$typeofType;
default:
return $$typeof;
}
}
case REACT_PORTAL_TYPE:
return $$typeof;
}
}
return undefined;
} // AsyncMode is deprecated along with isAsyncMode
var AsyncMode = REACT_ASYNC_MODE_TYPE;
var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
var ContextConsumer = REACT_CONTEXT_TYPE;
var ContextProvider = REACT_PROVIDER_TYPE;
var Element = REACT_ELEMENT_TYPE;
var ForwardRef = REACT_FORWARD_REF_TYPE;
var Fragment = REACT_FRAGMENT_TYPE;
var Lazy = REACT_LAZY_TYPE;
var Memo = REACT_MEMO_TYPE;
var Portal = REACT_PORTAL_TYPE;
var Profiler = REACT_PROFILER_TYPE;
var StrictMode = REACT_STRICT_MODE_TYPE;
var Suspense = REACT_SUSPENSE_TYPE;
var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
function isAsyncMode(object) {
{
if (!hasWarnedAboutDeprecatedIsAsyncMode) {
hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
console["warn"](
"The ReactIs.isAsyncMode() alias has been deprecated, " +
"and will be removed in React 17+. Update your code to use " +
"ReactIs.isConcurrentMode() instead. It has the exact same API."
);
}
}
return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
}
function isConcurrentMode(object) {
return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
}
function isContextConsumer(object) {
return typeOf(object) === REACT_CONTEXT_TYPE;
}
function isContextProvider(object) {
return typeOf(object) === REACT_PROVIDER_TYPE;
}
function isElement(object) {
return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
}
function isForwardRef(object) {
return typeOf(object) === REACT_FORWARD_REF_TYPE;
}
function isFragment(object) {
return typeOf