From 6df6b2b959f915b8fa61da33de1b53b7434d17d0 Mon Sep 17 00:00:00 2001 From: Ahielan Date: Thu, 16 Jan 2025 18:19:48 +0530 Subject: [PATCH 1/2] fix: handle failed fetch error in multitenancy login methods --- lib/build/arrowLeftIcon.js | 42 -- lib/build/authCompWrapper.js | 4 +- lib/build/emailpasswordprebuiltui.js | 58 +-- lib/build/emailverification-shared2.js | 6 +- lib/build/emailverificationprebuiltui.js | 38 +- lib/build/index.js | 16 +- lib/build/index2.js | 443 ++++++++++++++++-- lib/build/multifactorauthprebuiltui.js | 100 ++-- lib/build/oauth2providerprebuiltui.js | 99 ++-- lib/build/passwordlessprebuiltui.js | 131 +++--- lib/build/session-shared.js | 10 - lib/build/session.js | 19 +- lib/build/sessionprebuiltui.js | 335 +------------ lib/build/thirdpartyprebuiltui.js | 32 +- lib/build/totpprebuiltui.js | 59 ++- lib/build/translation/translations.d.ts | 2 + lib/build/ui-entry.js | 22 +- lib/ts/components/featureWrapper.tsx | 14 +- lib/ts/components/routingComponent.tsx | 22 +- .../components/feature/authPage/authPage.tsx | 3 +- lib/ts/translation/translations.ts | 3 + package-lock.json | 9 +- 22 files changed, 755 insertions(+), 712 deletions(-) delete mode 100644 lib/build/arrowLeftIcon.js delete mode 100644 lib/build/session-shared.js diff --git a/lib/build/arrowLeftIcon.js b/lib/build/arrowLeftIcon.js deleted file mode 100644 index ae4718ff5..000000000 --- a/lib/build/arrowLeftIcon.js +++ /dev/null @@ -1,42 +0,0 @@ -"use strict"; - -var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); -var jsxRuntime = require("react/jsx-runtime"); - -/* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. - * - * This software is licensed under the Apache License, Version 2.0 (the - * "License") as published by the Apache Software Foundation. - * - * You may not use this file except in compliance with the License. You may - * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - */ -/* - * Imports. - */ -/* - * Component. - */ -function ArrowLeftIcon(_a) { - var color = _a.color; - return jsxRuntime.jsx( - "svg", - genericComponentOverrideContext.__assign( - { width: "6", height: "8", viewBox: "0 0 6 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, - { - children: jsxRuntime.jsx("path", { - d: "M0.372871 3.24407C-0.0875903 3.64284 -0.0875899 4.35716 0.372872 4.75593L3.84535 7.76318C4.49299 8.32406 5.5 7.864 5.5 7.00725L5.5 0.992749C5.5 0.135997 4.49299 -0.324056 3.84535 0.23682L0.372871 3.24407Z", - fill: "".concat(color), - }), - } - ) - ); -} - -exports.ArrowLeftIcon = ArrowLeftIcon; diff --git a/lib/build/authCompWrapper.js b/lib/build/authCompWrapper.js index ae3e8d5ec..460b8e3cf 100644 --- a/lib/build/authCompWrapper.js +++ b/lib/build/authCompWrapper.js @@ -2,13 +2,13 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); var jsxRuntime = require("react/jsx-runtime"); -var uiEntry = require("./index2.js"); +var sessionprebuiltui = require("./index2.js"); function AuthComponentWrapper(_a) { var children = _a.children, recipeComponentOverrides = _a.recipeComponentOverrides; return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign({ value: recipeComponentOverrides }, { children: children }) ); } diff --git a/lib/build/emailpasswordprebuiltui.js b/lib/build/emailpasswordprebuiltui.js index 7614a23e1..1f6c17020 100644 --- a/lib/build/emailpasswordprebuiltui.js +++ b/lib/build/emailpasswordprebuiltui.js @@ -3,13 +3,12 @@ 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 sessionprebuiltui = require("./index2.js"); require("./multifactorauth.js"); var componentOverrideContext = require("./emailpassword-shared2.js"); var React = require("react"); var translations = require("./emailverification-shared2.js"); var translationContext = require("./translationContext.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); var formBase = require("./emailpassword-shared5.js"); var STGeneralError = require("supertokens-web-js/utils/error"); var button = require("./emailpassword-shared.js"); @@ -41,7 +40,6 @@ require("supertokens-web-js/lib/build/normalisedURLPath"); require("./multifactorauth-shared3.js"); require("supertokens-web-js/recipe/emailverification"); require("supertokens-web-js/recipe/session"); -require("./session-shared.js"); require("supertokens-web-js/recipe/emailpassword"); require("./authRecipe-shared2.js"); @@ -92,7 +90,7 @@ function BackToSignInButton(_a) { { "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", onClick: onClick }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { color: "rgb(var(--palette-secondaryText))" }), + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-secondaryText))" }), t("EMAIL_PASSWORD_RESET_SIGN_IN_LINK"), ], } @@ -102,7 +100,7 @@ function BackToSignInButton(_a) { var EmailPasswordResetPasswordEmail = function (props) { var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var _a = React.useState("READY"), status = _a[0], setStatus = _a[1]; @@ -182,7 +180,7 @@ var EmailPasswordResetPasswordEmail = function (props) { { "data-supertokens": "headerTitle withBackButton" }, { children: [ - jsxRuntime.jsx(uiEntry.BackButton, { + jsxRuntime.jsx(sessionprebuiltui.BackButton, { onClick: props.onBackButtonClicked, }), t("EMAIL_PASSWORD_RESET_HEADER_TITLE"), @@ -201,7 +199,7 @@ var EmailPasswordResetPasswordEmail = function (props) { ) ), props.error !== undefined && - jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }), + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { error: props.error }), jsxRuntime.jsx(formBase.FormBase, { clearError: props.clearError, onError: props.onError, @@ -280,11 +278,14 @@ var EmailPasswordResetPasswordEmail = function (props) { ) ); }; -var ResetPasswordEmail = uiEntry.withOverride("EmailPasswordResetPasswordEmail", EmailPasswordResetPasswordEmail); +var ResetPasswordEmail = sessionprebuiltui.withOverride( + "EmailPasswordResetPasswordEmail", + EmailPasswordResetPasswordEmail +); var EmailPasswordSubmitNewPassword = function (props) { var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var _a = React.useState("READY"), status = _a[0], setStatus = _a[1]; @@ -377,7 +378,7 @@ var EmailPasswordSubmitNewPassword = function (props) { ) ), props.error !== undefined && - jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }), + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { error: props.error }), jsxRuntime.jsx(formBase.FormBase, { formFields: formFields, clearError: props.clearError, @@ -468,7 +469,10 @@ var EmailPasswordSubmitNewPassword = function (props) { ) ); }; -var SubmitNewPassword = uiEntry.withOverride("EmailPasswordSubmitNewPassword", EmailPasswordSubmitNewPassword); +var SubmitNewPassword = sessionprebuiltui.withOverride( + "EmailPasswordSubmitNewPassword", + EmailPasswordSubmitNewPassword +); /* * Component. @@ -493,7 +497,7 @@ function ResetPasswordUsingTokenThemeWrapper(props) { ? props.config.resetPasswordUsingTokenFeature.submitNewPasswordForm.style : props.config.resetPasswordUsingTokenFeature.enterEmailForm.style; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -517,7 +521,7 @@ function ResetPasswordUsingTokenThemeWrapper(props) { var defaultTranslationsEmailPassword = { en: genericComponentOverrideContext.__assign( genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), translations.defaultTranslationsEmailVerification.en ), { @@ -590,7 +594,7 @@ var defaultTranslationsEmailPassword = { var ResetPasswordUsingToken$1 = function (props) { var token = genericComponentOverrideContext.getQueryParams("token"); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -652,12 +656,12 @@ var ResetPasswordUsingToken$1 = function (props) { }; var recipeComponentOverrides = props.useComponentOverrides(); return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -688,9 +692,9 @@ var ResetPasswordUsingToken$1 = function (props) { ); }; -var SignInForm = uiEntry.withOverride("EmailPasswordSignInForm", function EmailPasswordSignInForm(props) { +var SignInForm = sessionprebuiltui.withOverride("EmailPasswordSignInForm", function EmailPasswordSignInForm(props) { var _this = this; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); return jsxRuntime.jsx(formBase.FormBase, { formFields: props.formFields, clearError: props.clearError, @@ -754,7 +758,7 @@ function SignInTheme(props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; var activeStyle = props.config.signInAndUpFeature.signInForm.style; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -772,7 +776,7 @@ function SignInTheme(props) { function useChildProps$1(recipe$2, onAuthSuccess, error, onError, clearError, userContext, navigate) { var _this = this; - var session$1 = uiEntry.useSessionContext(); + var session$1 = sessionprebuiltui.useSessionContext(); var recipeImplementation = React.useMemo( function () { return getModifiedRecipeImplementation$1(recipe$2.webJSRecipe); @@ -1028,9 +1032,9 @@ var getModifiedRecipeImplementation$1 = function (origImpl) { }); }; -var SignUpForm = uiEntry.withOverride("EmailPasswordSignUpForm", function EmailPasswordSignUpForm(props) { +var SignUpForm = sessionprebuiltui.withOverride("EmailPasswordSignUpForm", function EmailPasswordSignUpForm(props) { var _this = this; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); return jsxRuntime.jsx(formBase.FormBase, { formFields: props.formFields, clearError: props.clearError, @@ -1089,7 +1093,7 @@ function SignUpTheme(props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; var activeStyle = props.config.signInAndUpFeature.signUpForm.style; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -1107,7 +1111,7 @@ function SignUpTheme(props) { function useChildProps(recipe, onAuthSuccess, error, onError, clearError, userContext, navigate) { var _this = this; - var session$1 = uiEntry.useSessionContext(); + var session$1 = sessionprebuiltui.useSessionContext(); var recipeImplementation = React.useMemo( function () { return recipe && getModifiedRecipeImplementation(recipe.webJSRecipe); @@ -1235,7 +1239,7 @@ function useChildProps(recipe, onAuthSuccess, error, onError, clearError, userCo ); } var SignUpFeature = function (props) { - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -1423,7 +1427,7 @@ var EmailPasswordPreBuiltUI = /** @class */ (function (_super) { } if (componentName === "resetpassword") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -1521,7 +1525,7 @@ var EmailPasswordPreBuiltUI = /** @class */ (function (_super) { }; EmailPasswordPreBuiltUI.ResetPasswordUsingTokenTheme = ResetPasswordUsingTokenThemeWrapper; return EmailPasswordPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var ResetPasswordUsingToken = EmailPasswordPreBuiltUI.ResetPasswordUsingToken; exports.EmailPasswordPreBuiltUI = EmailPasswordPreBuiltUI; diff --git a/lib/build/emailverification-shared2.js b/lib/build/emailverification-shared2.js index bfc3d9cef..fdd701e42 100644 --- a/lib/build/emailverification-shared2.js +++ b/lib/build/emailverification-shared2.js @@ -3,10 +3,10 @@ var jsxRuntime = require("react/jsx-runtime"); var React = require("react"); var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); -var uiEntry = require("./index2.js"); +var sessionprebuiltui = require("./index2.js"); var styles = - '/* 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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\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\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\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\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\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\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\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\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\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\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\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\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\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\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\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\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\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\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\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\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\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\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\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\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\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\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\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\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\n}\n'; var ThemeBase = function (_a) { var children = _a.children, @@ -18,7 +18,7 @@ var ThemeBase = function (_a) { var defaultTranslationsEmailVerification = { en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), { EMAIL_VERIFICATION_RESEND_SUCCESS: "Email resent", EMAIL_VERIFICATION_SEND_TITLE: "Verify your email!", diff --git a/lib/build/emailverificationprebuiltui.js b/lib/build/emailverificationprebuiltui.js index abfc568bc..6173d812d 100644 --- a/lib/build/emailverificationprebuiltui.js +++ b/lib/build/emailverificationprebuiltui.js @@ -3,7 +3,7 @@ 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 sessionprebuiltui = require("./index2.js"); var session = require("./session.js"); var recipe = require("./emailverification-shared.js"); var React = require("react"); @@ -31,7 +31,6 @@ require("supertokens-web-js/recipe/oauth2provider"); 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/emailverification"); function _interopDefault(e) { @@ -106,7 +105,7 @@ function ArrowRightIcon(_a) { var EmailVerificationSendVerifyEmail = function (props) { var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var _a = React.useState("READY"), status = _a[0], setStatus = _a[1]; @@ -238,7 +237,7 @@ var EmailVerificationSendVerifyEmail = function (props) { { children: [ status === "ERROR" && - jsxRuntime.jsx(uiEntry.GeneralError, { + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { error: errorMessage === undefined ? "SOMETHING_WENT_WRONG_ERROR" : errorMessage, }), status === "EMAIL_RESENT" && @@ -318,7 +317,10 @@ var EmailVerificationSendVerifyEmail = function (props) { ) ); }; -var SendVerifyEmail = uiEntry.withOverride("EmailVerificationSendVerifyEmail", EmailVerificationSendVerifyEmail); +var SendVerifyEmail = sessionprebuiltui.withOverride( + "EmailVerificationSendVerifyEmail", + EmailVerificationSendVerifyEmail +); /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * @@ -449,8 +451,8 @@ function ErrorLargeIcon() { var EmailVerificationVerifyEmailLinkClicked = function (props) { var t = translationContext.useTranslation(); - var sessionContext = uiEntry.useSessionContext(); - var userContext = uiEntry.useUserContext(); + var sessionContext = sessionprebuiltui.useSessionContext(); + var userContext = sessionprebuiltui.useUserContext(); var _a = React.useState("LOADING"), status = _a[0], setStatus = _a[1]; @@ -534,7 +536,7 @@ var EmailVerificationVerifyEmailLinkClicked = function (props) { "div", genericComponentOverrideContext.__assign( { "data-supertokens": "spinner" }, - { children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) } + { children: jsxRuntime.jsx(sessionprebuiltui.SpinnerIcon, {}) } ) ), } @@ -754,7 +756,7 @@ var EmailVerificationVerifyEmailLinkClicked = function (props) { ) ); }; -var VerifyEmailLinkClicked = uiEntry.withOverride( +var VerifyEmailLinkClicked = sessionprebuiltui.withOverride( "EmailVerificationVerifyEmailLinkClicked", EmailVerificationVerifyEmailLinkClicked ); @@ -781,7 +783,7 @@ function EmailVerificationTheme(props) { function EmailVerificationThemeWrapper(props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -812,13 +814,13 @@ function EmailVerificationThemeWrapper(props) { var EmailVerification$1 = function (props) { var _a; - var sessionContext = React.useContext(uiEntry.SessionContext); + var sessionContext = React.useContext(sessionprebuiltui.SessionContext); var _b = React.useState("LOADING"), status = _b[0], setStatus = _b[1]; var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); var recipeComponentOverrides = props.useComponentOverrides(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -830,7 +832,7 @@ var EmailVerification$1 = function (props) { case 0: return [ 4 /*yield*/, - uiEntry.redirectToAuth({ redirectBack: false, navigate: props.navigate }), + sessionprebuiltui.redirectToAuth({ redirectBack: false, navigate: props.navigate }), ]; case 1: _a.sent(); @@ -1022,12 +1024,12 @@ var EmailVerification$1 = function (props) { hasToken: token !== undefined, }; return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -1096,7 +1098,7 @@ var EmailVerificationPreBuiltUI = /** @class */ (function (_super) { useComponentOverrides = recipe.useContext; } return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -1110,7 +1112,7 @@ var EmailVerificationPreBuiltUI = /** @class */ (function (_super) { }, }, { - children: jsxRuntime.jsx(uiEntry.UserContextContext.Consumer, { + children: jsxRuntime.jsx(sessionprebuiltui.UserContextContext.Consumer, { children: function (value) { return jsxRuntime.jsx( EmailVerification$1, @@ -1182,7 +1184,7 @@ var EmailVerificationPreBuiltUI = /** @class */ (function (_super) { }; EmailVerificationPreBuiltUI.EmailVerificationTheme = EmailVerificationTheme; return EmailVerificationPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var EmailVerification = EmailVerificationPreBuiltUI.EmailVerification; exports.EmailVerification = EmailVerification; diff --git a/lib/build/index.js b/lib/build/index.js index b2a26c6c8..9f86014e6 100644 --- a/lib/build/index.js +++ b/lib/build/index.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); require("./genericComponentOverrideContext.js"); -var uiEntry = require("./index2.js"); +var sessionprebuiltui = require("./index2.js"); var translationContext = require("./translationContext.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); @@ -28,11 +28,11 @@ require("supertokens-web-js/recipe/oauth2provider"); require("./authRecipe-shared.js"); require("supertokens-web-js/lib/build/normalisedURLPath"); -exports.SuperTokensWrapper = uiEntry.SuperTokensWrapper; -exports.changeLanguage = uiEntry.changeLanguage; -exports.default = uiEntry.SuperTokensAPIWrapper; -exports.init = uiEntry.init; -exports.loadTranslation = uiEntry.loadTranslation; -exports.redirectToAuth = uiEntry.redirectToAuth; -exports.useUserContext = uiEntry.useUserContext; +exports.SuperTokensWrapper = sessionprebuiltui.SuperTokensWrapper; +exports.changeLanguage = sessionprebuiltui.changeLanguage; +exports.default = sessionprebuiltui.SuperTokensAPIWrapper; +exports.init = sessionprebuiltui.init; +exports.loadTranslation = sessionprebuiltui.loadTranslation; +exports.redirectToAuth = sessionprebuiltui.redirectToAuth; +exports.useUserContext = sessionprebuiltui.useUserContext; exports.useTranslation = translationContext.useTranslation; diff --git a/lib/build/index2.js b/lib/build/index2.js index 81099efc5..9ebefcc92 100644 --- a/lib/build/index2.js +++ b/lib/build/index2.js @@ -120,14 +120,14 @@ var withOverride = function (overrideKey, DefaultComponent) { }; }; -var styles$1 = - '[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\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: -moz-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~="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'; +var styles$2 = + '[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\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: -moz-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~="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'; -var ThemeBase$1 = function (_a) { +var ThemeBase$2 = function (_a) { var children = _a.children, userStyles = _a.userStyles; return jsxRuntime.jsxs(React.Fragment, { - children: [children, jsxRuntime.jsxs("style", { children: [styles$1, userStyles.join("\n")] })], + children: [children, jsxRuntime.jsxs("style", { children: [styles$2, userStyles.join("\n")] })], }); }; @@ -163,7 +163,7 @@ var DynamicLoginMethodsSpinnerThemeWithOverride = withOverride( var DynamicLoginMethodsSpinnerTheme = function (props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; return jsxRuntime.jsx( - ThemeBase$1, + ThemeBase$2, genericComponentOverrideContext.__assign( { userStyles: [rootStyle, props.config.recipeRootStyle] }, { children: jsxRuntime.jsx(DynamicLoginMethodsSpinnerThemeWithOverride, {}) } @@ -232,14 +232,16 @@ function FeatureWrapper(_a) { useShadowDom = _a.useShadowDom, defaultStore = _a.defaultStore; var userContext = useUserContext(); - var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); - var _b = React.useState(undefined), - loadedDynamicLoginMethods = _b[0], - setLoadedDynamicLoginMethods = _b[1]; + var _b = React.useState(false), + hasError = _b[0], + setHasError = _b[1]; + var _c = React.useState(undefined), + loadedDynamicLoginMethods = _c[0], + setLoadedDynamicLoginMethods = _c[1]; var st = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow(); React.useEffect( function () { - if (loadedDynamicLoginMethods) { + if (hasError || loadedDynamicLoginMethods) { return; } genericComponentOverrideContext.Multitenancy.getInstanceOrThrow() @@ -249,13 +251,17 @@ function FeatureWrapper(_a) { return setLoadedDynamicLoginMethods(loginMethods); }, function (err) { - return rethrowInRender(err); + setHasError(err); } ); }, - [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] + [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, hasError] ); - if (genericComponentOverrideContext.SuperTokens.usesDynamicLoginMethods && !loadedDynamicLoginMethods) { + if ( + genericComponentOverrideContext.SuperTokens.usesDynamicLoginMethods && + !loadedDynamicLoginMethods && + !hasError + ) { return jsxRuntime.jsx(DynamicLoginMethodsSpinner, {}); } return jsxRuntime.jsx( @@ -367,6 +373,8 @@ var defaultTranslationsCommon = { AUTH_PAGE_FOOTER_AND: " and ", AUTH_PAGE_FOOTER_PP: "Privacy Policy", AUTH_PAGE_FOOTER_END: "", + AUTH_PAGE_TENTANT_ERROR: "Tenant not found", + TENANT_LOGIN_METHODS_ERROR: "Unable to load tenant configuration", DIVIDER_OR: "or", BRANDING_POWERED_BY_START: "Powered by ", BRANDING_POWERED_BY_END: "", @@ -388,9 +396,9 @@ var useSessionContext = function () { return ctx; }; -var _a = genericComponentOverrideContext.createGenericComponentsOverrideContext(), - useContext = _a[0], - Provider = _a[1]; +var _a$1 = genericComponentOverrideContext.createGenericComponentsOverrideContext(), + useContext$1 = _a$1[0], + Provider$1 = _a$1[1]; function SuperTokensBranding() { var t = translationContext.useTranslation(); @@ -460,14 +468,14 @@ function GeneralError(_a) { ); } -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\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: -moz-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~="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'; +var styles$1 = + '[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\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: -moz-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~="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'; -var ThemeBase = function (_a) { +var ThemeBase$1 = function (_a) { var children = _a.children, userStyles = _a.userStyles; return jsxRuntime.jsxs(React.Fragment, { - children: [children, jsxRuntime.jsxs("style", { children: [styles, userStyles.join("\n")] })], + children: [children, jsxRuntime.jsxs("style", { children: [styles$1, userStyles.join("\n")] })], }); }; @@ -614,7 +622,7 @@ function HeavyArrowLeftIcon(_a) { /* * Component. */ -function BackButton(_a) { +function BackButton$1(_a) { var onClick = _a.onClick; return jsxRuntime.jsx( "button", @@ -648,7 +656,7 @@ var AuthPageHeader = withOverride("AuthPageHeader", function AuthPageHeader(_a) { children: [ showBackButton - ? jsxRuntime.jsx(BackButton, { onClick: resetFactorList }) + ? jsxRuntime.jsx(BackButton$1, { onClick: resetFactorList }) : jsxRuntime.jsx("span", { "data-supertokens": "backButtonPlaceholder backButtonCommon", }), @@ -804,7 +812,7 @@ function AuthPageThemeWrapper(props) { { userContext: props.userContext }, { children: jsxRuntime.jsx( - ThemeBase, + ThemeBase$1, genericComponentOverrideContext.__assign( { userStyles: [rootStyle] }, { children: jsxRuntime.jsx(AuthPageTheme, genericComponentOverrideContext.__assign({}, props)) } @@ -821,7 +829,7 @@ var errorQSMap = { restart_link: "ERROR_SIGN_IN_UP_LINK", }; var AuthPageWrapper = function (props) { - var authRecipeComponentOverrides = useContext(); + var authRecipeComponentOverrides = useContext$1(); return jsxRuntime.jsx( UserContextProvider, genericComponentOverrideContext.__assign( @@ -958,9 +966,8 @@ var AuthPageInner = function (props) { function (loginMethods) { return setLoadedDynamicLoginMethods(loginMethods); }, - function (err) { - return rethrowInRender(err); - } + // eslint-disable-next-line @typescript-eslint/no-empty-function + function () {} ); }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] @@ -1873,13 +1880,368 @@ var RecipeRouter = /** @class */ (function () { return RecipeRouter; })(); +var _a = genericComponentOverrideContext.createGenericComponentsOverrideContext(), + useContext = _a[0], + Provider = _a[1]; + +function ErrorRoundIcon() { + return jsxRuntime.jsxs( + "svg", + genericComponentOverrideContext.__assign( + { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, + { + children: [ + jsxRuntime.jsx("path", { + d: "M16.0012 1.91396e-06C12.3031 0.00305404 8.72039 1.28809 5.8634 3.63622C3.00641 5.98436 1.05183 9.25034 0.33262 12.8779C-0.386594 16.5054 0.174037 20.27 1.91901 23.5306C3.66399 26.7911 6.48538 29.3459 9.90259 30.7597C13.3198 32.1734 17.1215 32.3588 20.66 31.2842C24.1986 30.2096 27.2551 27.9414 29.309 24.8661C31.3629 21.7908 32.2872 18.0985 31.9243 14.4182C31.5614 10.738 29.9338 7.29732 27.3188 4.68238C25.8323 3.19688 24.0677 2.01879 22.1258 1.21537C20.1839 0.411961 18.1027 -0.00102596 16.0012 1.91396e-06ZM16.0012 28.2352C13.1772 28.2295 10.4424 27.2451 8.26261 25.4497C6.0828 23.6542 4.59268 21.1588 4.04598 18.3881C3.49929 15.6175 3.9298 12.7431 5.26424 10.2542C6.59867 7.76533 8.75452 5.81593 11.3647 4.73791C13.9749 3.65989 16.878 3.51991 19.5798 4.3418C22.2816 5.16369 24.615 6.89663 26.1827 9.24557C27.7504 11.5945 28.4555 14.4142 28.1779 17.2246C27.9003 20.0349 26.6572 22.6622 24.6602 24.659C23.5226 25.7947 22.1723 26.6951 20.6866 27.3087C19.2008 27.9224 17.6087 28.2372 16.0012 28.2352Z", + fill: "#ED344E", + }), + jsxRuntime.jsx("path", { + d: "M21.3645 11.1053C21.1948 10.9264 20.9904 10.784 20.7639 10.6866C20.5374 10.5893 20.2934 10.5391 20.0468 10.5391C19.8003 10.5391 19.5563 10.5893 19.3298 10.6866C19.1032 10.784 18.8989 10.9264 18.7292 11.1053L15.9997 13.8348L13.3645 11.1995C13.1927 11.0207 12.9871 10.8779 12.7595 10.7795C12.5319 10.6812 12.2869 10.6292 12.039 10.6267C11.791 10.6242 11.5451 10.6711 11.3156 10.7648C11.086 10.8586 10.8775 10.9971 10.7021 11.1725C10.5268 11.3478 10.3882 11.5563 10.2945 11.7859C10.2008 12.0154 10.1538 12.2614 10.1563 12.5093C10.1589 12.7572 10.2108 13.0022 10.3092 13.2298C10.4076 13.4574 10.5504 13.6631 10.7292 13.8348L13.3645 16.47L10.7292 19.1018C10.5504 19.2735 10.4076 19.4792 10.3092 19.7068C10.2108 19.9344 10.1589 20.1793 10.1563 20.4273C10.1538 20.6752 10.2008 20.9212 10.2945 21.1507C10.3882 21.3803 10.5268 21.5888 10.7021 21.7641C10.8775 21.9395 11.086 22.078 11.3156 22.1718C11.5451 22.2655 11.791 22.3124 12.039 22.3099C12.2869 22.3074 12.5319 22.2554 12.7595 22.1571C12.9871 22.0587 13.1927 21.9159 13.3645 21.7371L15.9997 19.1018L18.6349 21.7371C18.8074 21.9128 19.0129 22.0526 19.2397 22.1484C19.4665 22.2443 19.7101 22.2942 19.9563 22.2954C20.2025 22.2966 20.4465 22.2489 20.6741 22.1553C20.9018 22.0616 21.1087 21.9238 21.2829 21.7497C21.457 21.5757 21.5949 21.3688 21.6886 21.1412C21.7823 20.9135 21.83 20.6695 21.8289 20.4233C21.8278 20.1771 21.778 19.9336 21.6822 19.7067C21.5865 19.4799 21.4467 19.2743 21.271 19.1018L18.6358 16.4666L21.271 13.8313C21.6229 13.47 21.8275 12.9904 21.8448 12.4864C21.8621 11.9823 21.6908 11.4898 21.3645 11.1053Z", + fill: "#ED344E", + }), + ], + } + ) + ); +} + +/* + * Component. + */ +function BackButton(_a) { + var onClick = _a.onClick; + var t = translationContext.useTranslation(); + return jsxRuntime.jsx( + "button", + genericComponentOverrideContext.__assign( + { onClick: onClick, "data-supertokens": "buttonBase backButton" }, + { children: t("GO_BACK") } + ) + ); +} + +/* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. + * + * This software is licensed under the Apache License, Version 2.0 (the + * "License") as published by the Apache Software Foundation. + * + * You may not use this file except in compliance with the License. You may + * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + */ +/* + * Imports. + */ +/* + * Component. + */ +function ArrowLeftIcon(_a) { + var color = _a.color; + return jsxRuntime.jsx( + "svg", + genericComponentOverrideContext.__assign( + { width: "6", height: "8", viewBox: "0 0 6 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, + { + children: jsxRuntime.jsx("path", { + d: "M0.372871 3.24407C-0.0875903 3.64284 -0.0875899 4.35716 0.372872 4.75593L3.84535 7.76318C4.49299 8.32406 5.5 7.864 5.5 7.00725L5.5 0.992749C5.5 0.135997 4.49299 -0.324056 3.84535 0.23682L0.372871 3.24407Z", + fill: "".concat(color), + }), + } + ) + ); +} + +/* + * Component. + */ +function LogoutButton(_a) { + var onClick = _a.onClick; + var t = translationContext.useTranslation(); + return jsxRuntime.jsxs( + "button", + genericComponentOverrideContext.__assign( + { onClick: onClick, "data-supertokens": "buttonBase logoutButton" }, + { + children: [ + jsxRuntime.jsx(ArrowLeftIcon, { color: "rgb(var(--palette-textGray))" }), + jsxRuntime.jsx("span", { children: t("LOGOUT") }), + ], + } + ) + ); +} + +var styles = + '/* 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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n\n/* Override */\n\n[data-supertokens~="accessDenied"] [data-supertokens~="row"] {\n padding-bottom: 24px;\n}\n\n[data-supertokens~="accessDenied"] [data-supertokens~="divider"] {\n padding: 0;\n margin: 34px 0 18px 0;\n}\n\n[data-supertokens~="accessDenied"] [data-supertokens~="headerTitle"] {\n margin: 10px 0 0 0;\n font-style: normal;\n font-weight: 600;\n font-size: 20px;\n line-height: 30px;\n}\n\n/* Override end */\n\n[data-supertokens~="center"] {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1 1 auto;\n}\n\n[data-supertokens~="buttonsGroup"] {\n margin-top: 34px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n[data-supertokens~="buttonBase"] {\n font-family: "Arial", sans-serif;\n font-size: var(--font-size-1);\n line-height: 21px;\n font-weight: 400;\n background: transparent;\n outline: none;\n border: none;\n cursor: pointer;\n}\n\n[data-supertokens~="backButton"] {\n color: rgb(var(--palette-textLink));\n}\n\n[data-supertokens~="logoutButton"] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: rgb(var(--palette-textGray));\n}\n\n[data-supertokens~="primaryText"][data-supertokens~="accessDeniedError"] {\n font-weight: 400;\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 AccessDeniedScreen$2 = function (props) { + var userContext = useUserContext(); + var t = translationContext.useTranslation(); + var onLogout = function () { + return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [4 /*yield*/, props.recipe.signOut({ userContext: userContext })]; + case 1: + _a.sent(); + return [ + 4 /*yield*/, + genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ + show: "signin", + redirectBack: false, + userContext: userContext, + }), + ]; + case 2: + _a.sent(); + return [2 /*return*/]; + } + }); + }); + }; + var onBackButtonClicked = function () { + // If we don't have navigate available this would mean we are not using react-router-dom, so we use window's history + if (props.navigate === undefined) { + return windowHandler.WindowHandlerReference.getReferenceOrThrow() + .windowHandler.getWindowUnsafe() + .history.back(); + } + // If we do have navigate and goBack function on it this means we are using react-router-dom v5 or lower + if ("goBack" in props.navigate) { + return props.navigate.goBack(); + } + // If we reach this code this means we are using react-router-dom v6 + return props.navigate(-1); + }; + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "center accessDenied" }, + { + children: jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsx(ErrorRoundIcon, {}), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle" }, + { children: t("ACCESS_DENIED") } + ) + ), + jsxRuntime.jsx("div", { "data-supertokens": "divider" }), + props.error && + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "primaryText accessDeniedError" }, + { children: [" ", props.error] } + ) + ), + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "buttonsGroup" }, + { + children: [ + jsxRuntime.jsx(BackButton, { + onClick: onBackButtonClicked, + }), + jsxRuntime.jsx(LogoutButton, { onClick: onLogout }), + ], + } + ) + ), + ], + } + ) + ), + } + ) + ), + } + ) + ); +}; +var AccessDeniedThemeWithOverride = withOverride("SessionAccessDenied", AccessDeniedScreen$2); +var AccessDeniedScreenTheme = function (props) { + var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; + return jsxRuntime.jsx( + ThemeBase, + genericComponentOverrideContext.__assign( + { userStyles: [rootStyle, props.config.recipeRootStyle, props.config.accessDeniedScreen.style] }, + { + children: jsxRuntime.jsx( + AccessDeniedThemeWithOverride, + genericComponentOverrideContext.__assign({}, props) + ), + } + ) + ); +}; + +var defaultTranslationsSession = { + en: genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, defaultTranslationsCommon.en), + { ACCESS_DENIED: "Access denied", GO_BACK: "Go back", LOGOUT: "Log out" } + ), +}; + +var AccessDeniedScreen$1 = function (props) { + var _a, _b, _c; + var recipeComponentOverrides = props.useComponentOverrides(); + var navigate = + (_a = props.navigate) !== null && _a !== void 0 + ? _a + : (_b = UI.getReactRouterDomWithCustomHistory()) === null || _b === void 0 + ? void 0 + : _b.useHistoryCustom(); + return jsxRuntime.jsx( + ComponentOverrideContext.Provider, + genericComponentOverrideContext.__assign( + { value: recipeComponentOverrides }, + { + children: jsxRuntime.jsx( + FeatureWrapper, + genericComponentOverrideContext.__assign( + { + defaultStore: defaultTranslationsSession, + useShadowDom: + (_c = props.useShadowDom) !== null && _c !== void 0 + ? _c + : genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, + }, + { + children: jsxRuntime.jsx(AccessDeniedScreenTheme, { + config: props.recipe.config, + navigate: navigate, + recipe: props.recipe, + error: props.error, + }), + } + ) + ), + } + ) + ); +}; + +var SessionPreBuiltUI = /** @class */ (function (_super) { + genericComponentOverrideContext.__extends(SessionPreBuiltUI, _super); + function SessionPreBuiltUI(recipeInstance) { + var _this = _super.call(this) || this; + _this.recipeInstance = recipeInstance; + _this.languageTranslations = defaultTranslationsSession; + // Instance methods + _this.getFeatures = function ( + // eslint-disable-next-line @typescript-eslint/no-unused-vars + _useComponentOverrides + ) { + return {}; + }; + _this.getFeatureComponent = function (componentName, props, useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = useContext; + } + if (componentName === "accessDenied") { + return jsxRuntime.jsx( + UserContextWrapper, + genericComponentOverrideContext.__assign( + { userContext: props.userContext }, + { + children: jsxRuntime.jsx(AccessDeniedScreen$1, { + recipe: _this.recipeInstance, + useComponentOverrides: useComponentOverrides, + error: props.error, + useShadowDom: props.useShadowDom, + }), + } + ) + ); + } + throw new Error("Should never come here."); + }; + return _this; + } + // Static methods + SessionPreBuiltUI.getInstanceOrInitAndGetInstance = function () { + if (SessionPreBuiltUI.instance === undefined) { + var recipeInstance = types.Session.getInstanceOrThrow(); + SessionPreBuiltUI.instance = new SessionPreBuiltUI(recipeInstance); + } + return SessionPreBuiltUI.instance; + }; + SessionPreBuiltUI.getFeatures = function (useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = useContext; + } + return SessionPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides); + }; + SessionPreBuiltUI.getFeatureComponent = function (componentName, props, useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = useContext; + } + return SessionPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent( + componentName, + props, + useComponentOverrides + ); + }; + SessionPreBuiltUI.prototype.getAuthComponents = function () { + return []; + }; + // For tests + SessionPreBuiltUI.reset = function () { + if (!genericComponentOverrideContext.isTest()) { + return; + } + SessionPreBuiltUI.instance = undefined; + return; + }; + var _a; + _a = SessionPreBuiltUI; + SessionPreBuiltUI.AccessDeniedScreen = function (prop) { + if (prop === void 0) { + prop = {}; + } + return _a.getFeatureComponent("accessDenied", prop); + }; + SessionPreBuiltUI.AccessDeniedScreenTheme = AccessDeniedScreenTheme; + return SessionPreBuiltUI; +})(RecipeRouter); +var AccessDeniedScreen = SessionPreBuiltUI.AccessDeniedScreen; + function RoutingComponent(props) { var _a, _b; var userContext = useUserContext(); - var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); var _c = React.useState(undefined), loadedDynamicLoginMethods = _c[0], setLoadedDynamicLoginMethods = _c[1]; + var _d = React.useState(""), + errMsg = _d[0], + setErrMsg = _d[1]; var navigate = (_a = props.getReactRouterDomWithCustomHistory()) === null || _a === void 0 ? void 0 : _a.useHistoryCustom(); var path = props.path; @@ -1923,7 +2285,8 @@ function RoutingComponent(props) { ); React.useEffect( function () { - if (loadedDynamicLoginMethods) { + // Don't make the API call if we already have an error or the methods + if (errMsg || loadedDynamicLoginMethods) { return; } genericComponentOverrideContext.Multitenancy.getInstanceOrThrow() @@ -1933,12 +2296,21 @@ function RoutingComponent(props) { return setLoadedDynamicLoginMethods(loginMethods); }, function (err) { - return rethrowInRender(err); + var message = "" + .concat(defaultTranslationsCommon.en.TENANT_LOGIN_METHODS_ERROR, ": ") + .concat(err.message); + if (err.status === 500) { + message = defaultTranslationsCommon.en.AUTH_PAGE_TENTANT_ERROR; + } + setErrMsg(message); } ); }, - [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] + [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, errMsg] ); + if (errMsg) { + return jsxRuntime.jsx(AccessDeniedScreen, { error: errMsg }); + } if (isAuthPage) { return jsxRuntime.jsx(AuthPageWrapper, { preBuiltUIList: props.preBuiltUIList, @@ -2231,7 +2603,7 @@ var UI = /** @class */ (function () { UI.AuthPageFooter = AuthPageFooter; UI.AuthPageHeader = AuthPageHeader; UI.AuthPageComponentList = AuthPageComponentList; - UI.AuthRecipeComponentsOverrideContextProvider = Provider; + UI.AuthRecipeComponentsOverrideContextProvider = Provider$1; return UI; })(); var getSuperTokensRoutesForReactRouterDom = UI.getSuperTokensRoutesForReactRouterDom; @@ -2759,20 +3131,25 @@ var changeLanguage = SuperTokensAPIWrapper.changeLanguage; var loadTranslation = SuperTokensAPIWrapper.loadTranslation; var redirectToAuth = SuperTokensAPIWrapper.redirectToAuth; +exports.AccessDeniedScreen = AccessDeniedScreen; +exports.AccessDeniedScreenTheme = AccessDeniedScreenTheme; +exports.ArrowLeftIcon = ArrowLeftIcon; exports.AuthPage = AuthPage; exports.AuthPageComponentList = AuthPageComponentList; exports.AuthPageFooter = AuthPageFooter; exports.AuthPageHeader = AuthPageHeader; exports.AuthPageTheme = AuthPageTheme; -exports.BackButton = BackButton; +exports.BackButton = BackButton$1; exports.ComponentOverrideContext = ComponentOverrideContext; exports.DynamicLoginMethodsSpinner = DynamicLoginMethodsSpinner; exports.FeatureWrapper = FeatureWrapper; exports.GeneralError = GeneralError; exports.Provider = Provider; +exports.Provider$1 = Provider$1; exports.RecipeRouter = RecipeRouter; exports.SessionAuthWrapper = SessionAuthWrapper; exports.SessionContext = SessionContext; +exports.SessionPreBuiltUI = SessionPreBuiltUI; exports.SpinnerIcon = SpinnerIcon; exports.SuperTokensAPIWrapper = SuperTokensAPIWrapper; exports.SuperTokensBranding = SuperTokensBranding; diff --git a/lib/build/multifactorauthprebuiltui.js b/lib/build/multifactorauthprebuiltui.js index 7685444ea..80f4177d2 100644 --- a/lib/build/multifactorauthprebuiltui.js +++ b/lib/build/multifactorauthprebuiltui.js @@ -3,7 +3,7 @@ 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 sessionprebuiltui = require("./index2.js"); var session = require("./session.js"); var componentOverrideContext = require("./multifactorauth-shared3.js"); var React = require("react"); @@ -11,8 +11,6 @@ var windowHandler = require("supertokens-web-js/utils/windowHandler"); var types = require("./multifactorauth-shared.js"); var recipe = require("./multifactorauth-shared2.js"); var translationContext = require("./translationContext.js"); -var sessionprebuiltui = require("./sessionprebuiltui.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); @@ -27,7 +25,6 @@ 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/multifactorauth"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); @@ -65,7 +62,7 @@ var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath var React__namespace = /*#__PURE__*/ _interopNamespace(React); 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\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: -moz-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~="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[data-supertokens~="mfa"][data-supertokens~="container"] {\n padding-top: 34px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="row"] {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="headerTitle"] {\n font-size: var(--font-size-3);\n font-weight: 600;\n line-height: 30px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="factorChooserList"] {\n margin-bottom: 12px;\n}\n[data-supertokens~="factorChooserOption"] {\n display: flex;\n flex-direction: row;\n border-radius: 6px;\n border: 1px solid rgb(var(--palette-inputBorder));\n padding: 20px 16px;\n cursor: pointer;\n margin-top: 12px;\n}\n[data-supertokens~="factorChooserOption"]:hover {\n border: 1px solid rgba(var(--palette-primary), 0.6);\n}\n[data-supertokens~="factorOptionText"] {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: start;\n text-align: left;\n}\n[data-supertokens~="factorLogo"] {\n flex-grow: 0;\n min-width: 30px;\n text-align: left;\n margin-top: 6px;\n}\n[data-supertokens~="totp"] [data-supertokens~="factorLogo"] {\n margin-top: 3px;\n margin-left: -1px;\n}\n[data-supertokens~="factorName"] {\n color: rgb(var(--palette-primary));\n font-size: var(--font-size-1);\n font-weight: 400;\n margin: 4px;\n}\n[data-supertokens~="factorDescription"] {\n color: rgb(var(--palette-textPrimary));\n font-size: var(--font-size-0);\n margin: 4px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n margin-bottom: 26px;\n text-align: right;\n}\n'; + '[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\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: -moz-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~="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[data-supertokens~="mfa"][data-supertokens~="container"] {\n padding-top: 34px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="row"] {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="headerTitle"] {\n font-size: var(--font-size-3);\n font-weight: 600;\n line-height: 30px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="factorChooserList"] {\n margin-bottom: 12px;\n}\n[data-supertokens~="factorChooserOption"] {\n display: flex;\n flex-direction: row;\n border-radius: 6px;\n border: 1px solid rgb(var(--palette-inputBorder));\n padding: 20px 16px;\n cursor: pointer;\n margin-top: 12px;\n}\n[data-supertokens~="factorChooserOption"]:hover {\n border: 1px solid rgba(var(--palette-primary), 0.6);\n}\n[data-supertokens~="factorOptionText"] {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: start;\n text-align: left;\n}\n[data-supertokens~="factorLogo"] {\n flex-grow: 0;\n min-width: 30px;\n text-align: left;\n margin-top: 6px;\n}\n[data-supertokens~="totp"] [data-supertokens~="factorLogo"] {\n margin-top: 3px;\n margin-left: -1px;\n}\n[data-supertokens~="factorName"] {\n color: rgb(var(--palette-primary));\n font-size: var(--font-size-1);\n font-weight: 400;\n margin: 4px;\n}\n[data-supertokens~="factorDescription"] {\n color: rgb(var(--palette-textPrimary));\n font-size: var(--font-size-0);\n margin: 4px;\n}\n[data-supertokens~="mfa"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n margin-bottom: 26px;\n text-align: right;\n}\n'; var ThemeBase = function (_a) { var children = _a.children, @@ -75,7 +72,7 @@ var ThemeBase = function (_a) { }); }; -var FactorChooserFooter = uiEntry.withOverride("MFAFactorChooserFooter", function MFAChooserFooter(_a) { +var FactorChooserFooter = sessionprebuiltui.withOverride("MFAFactorChooserFooter", function MFAChooserFooter(_a) { var logout = _a.logout; var t = translationContext.useTranslation(); return jsxRuntime.jsx( @@ -89,7 +86,7 @@ var FactorChooserFooter = uiEntry.withOverride("MFAFactorChooserFooter", functio { "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", onClick: logout }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))", }), t("MULTI_FACTOR_AUTH_LOGOUT"), @@ -102,38 +99,43 @@ var FactorChooserFooter = uiEntry.withOverride("MFAFactorChooserFooter", functio ); }); -var FactorChooserHeader = uiEntry.withOverride("MFAFactorChooserHeader", function MFAFactorChooserHeader(props) { - var t = translationContext.useTranslation(); - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row factorChooserHeader" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle withBackButton" }, - { - children: [ - props.showBackButton - ? jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked }) - : jsxRuntime.jsx("span", { - "data-supertokens": "backButtonPlaceholder backButtonCommon", - }), - t("MULTI_FACTOR_CHOOSER_HEADER_TITLE"), - jsxRuntime.jsx("span", { - "data-supertokens": "backButtonPlaceholder backButtonCommon", - }), - ], - } - ) - ), - } - ) - ); -}); +var FactorChooserHeader = sessionprebuiltui.withOverride( + "MFAFactorChooserHeader", + function MFAFactorChooserHeader(props) { + var t = translationContext.useTranslation(); + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row factorChooserHeader" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle withBackButton" }, + { + children: [ + props.showBackButton + ? jsxRuntime.jsx(sessionprebuiltui.BackButton, { + onClick: props.onBackButtonClicked, + }) + : jsxRuntime.jsx("span", { + "data-supertokens": "backButtonPlaceholder backButtonCommon", + }), + t("MULTI_FACTOR_CHOOSER_HEADER_TITLE"), + jsxRuntime.jsx("span", { + "data-supertokens": "backButtonPlaceholder backButtonCommon", + }), + ], + } + ) + ), + } + ) + ); + } +); -var FactorOption = uiEntry.withOverride("MFAFactorOption", function MFAFactorOption(_a) { +var FactorOption = sessionprebuiltui.withOverride("MFAFactorOption", function MFAFactorOption(_a) { var onClick = _a.onClick, id = _a.id, name = _a.name, @@ -183,7 +185,7 @@ var FactorOption = uiEntry.withOverride("MFAFactorOption", function MFAFactorOpt ); }); -var FactorList = uiEntry.withOverride("MFAFactorList", function MFAFactorList(_a) { +var FactorList = sessionprebuiltui.withOverride("MFAFactorList", function MFAFactorList(_a) { var availableFactors = _a.availableFactors, navigateToFactor = _a.navigateToFactor; return jsxRuntime.jsx( @@ -234,7 +236,7 @@ function FactorChooserTheme(props) { navigateToFactor: props.navigateToFactor, }), jsxRuntime.jsx(FactorChooserFooter, { logout: props.onLogoutClicked }), - jsxRuntime.jsx(uiEntry.SuperTokensBranding, {}), + jsxRuntime.jsx(sessionprebuiltui.SuperTokensBranding, {}), ], } ) @@ -243,7 +245,7 @@ function FactorChooserTheme(props) { function FactorChooserThemeWrapper(props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -272,7 +274,7 @@ function FactorChooserThemeWrapper(props) { var defaultTranslationsMultiFactorAuth = { en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), { MULTI_FACTOR_CHOOSER_HEADER_TITLE: "Please select a factor", MULTI_FACTOR_AUTH_LOGOUT: "Log out", @@ -292,12 +294,12 @@ var defaultTranslationsMultiFactorAuth = { var FactorChooser$1 = function (props) { var _a; - var sessionContext = React.useContext(uiEntry.SessionContext); + var sessionContext = React.useContext(sessionprebuiltui.SessionContext); var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); var _b = React.useState(undefined), mfaInfo = _b[0], setMFAInfo = _b[1]; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -313,7 +315,7 @@ var FactorChooser$1 = function (props) { case 0: return [ 4 /*yield*/, - uiEntry.redirectToAuth({ redirectBack: false, navigate: props.navigate }), + sessionprebuiltui.redirectToAuth({ redirectBack: false, navigate: props.navigate }), ]; case 1: _a.sent(); @@ -465,12 +467,12 @@ var FactorChooser$1 = function (props) { navigateToFactor: navigateToFactor, }; return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -539,7 +541,7 @@ var MultiFactorAuthPreBuiltUI = /** @class */ (function (_super) { useComponentOverrides = componentOverrideContext.useContext; } return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -611,7 +613,7 @@ var MultiFactorAuthPreBuiltUI = /** @class */ (function (_super) { }; MultiFactorAuthPreBuiltUI.FactorChooserTheme = FactorChooserThemeWrapper; return MultiFactorAuthPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var FactorChooser = MultiFactorAuthPreBuiltUI.FactorChooser; exports.FactorChooser = FactorChooser; diff --git a/lib/build/oauth2providerprebuiltui.js b/lib/build/oauth2providerprebuiltui.js index 7f7a99de6..18c6fa696 100644 --- a/lib/build/oauth2providerprebuiltui.js +++ b/lib/build/oauth2providerprebuiltui.js @@ -3,7 +3,7 @@ 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 sessionprebuiltui = require("./index2.js"); var session = require("./session.js"); var componentOverrideContext = require("./oauth2provider-shared2.js"); var React = require("react"); @@ -27,7 +27,6 @@ require("./multifactorauth-shared.js"); require("supertokens-web-js/recipe/session"); require("./authRecipe-shared.js"); require("supertokens-web-js/lib/build/normalisedURLPath"); -require("./session-shared.js"); require("supertokens-web-js/recipe/oauth2provider"); function _interopDefault(e) { @@ -64,7 +63,7 @@ var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath var React__namespace = /*#__PURE__*/ _interopNamespace(React); var styles = - '/* Copyright (c) 2024, 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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="logoutIcon"] {\n padding: 18px 20px 18px 24px;\n background-color: rgba(var(--palette-textGray), 0.1);\n border-radius: 12px;\n}\n\n[data-supertokens~="oauth2Logout"] [data-supertokens~="headerTitle"] {\n margin-top: 24px;\n margin-bottom: 24px;\n}\n\n[data-supertokens~="oauth2Logout"] [data-supertokens~="button"] {\n margin-bottom: 24px;\n}\n'; + '/* Copyright (c) 2024, 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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="logoutIcon"] {\n padding: 18px 20px 18px 24px;\n background-color: rgba(var(--palette-textGray), 0.1);\n border-radius: 12px;\n}\n\n[data-supertokens~="oauth2Logout"] [data-supertokens~="headerTitle"] {\n margin-top: 24px;\n margin-bottom: 24px;\n}\n\n[data-supertokens~="oauth2Logout"] [data-supertokens~="button"] {\n margin-bottom: 24px;\n}\n'; var ThemeBase = function (_a) { var children = _a.children, @@ -111,40 +110,43 @@ function LogoutIcon() { ); } -var OAuth2LogoutScreenInner = uiEntry.withOverride("OAuth2LogoutScreenInner", function OAuth2LogoutScreenInner(props) { - var t = translationContext.useTranslation(); - return jsxRuntime.jsxs(jsxRuntime.Fragment, { - children: [ - jsxRuntime.jsx(LogoutIcon, {}), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("LOGGING_OUT") } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle" }, - { children: t("LOGOUT_CONFIRMATION") } - ) - ), - jsxRuntime.jsx("div", { "data-supertokens": "divider" }), - jsxRuntime.jsx(button.Button, { - disabled: props.isLoggingOut, - isLoading: props.isLoggingOut, - type: "button", - label: t("LOGOUT"), - onClick: props.onLogoutClicked, - }), - ], - }); -}); +var OAuth2LogoutScreenInner = sessionprebuiltui.withOverride( + "OAuth2LogoutScreenInner", + function OAuth2LogoutScreenInner(props) { + var t = translationContext.useTranslation(); + return jsxRuntime.jsxs(jsxRuntime.Fragment, { + children: [ + jsxRuntime.jsx(LogoutIcon, {}), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle" }, + { children: t("LOGGING_OUT") } + ) + ), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerSubtitle" }, + { children: t("LOGOUT_CONFIRMATION") } + ) + ), + jsxRuntime.jsx("div", { "data-supertokens": "divider" }), + jsxRuntime.jsx(button.Button, { + disabled: props.isLoggingOut, + isLoading: props.isLoggingOut, + type: "button", + label: t("LOGOUT"), + onClick: props.onLogoutClicked, + }), + ], + }); + } +); var OAuth2LogoutScreen$1 = function (props) { if (props.showSpinner) { - return jsxRuntime.jsx(uiEntry.DynamicLoginMethodsSpinner, {}); + return jsxRuntime.jsx(sessionprebuiltui.DynamicLoginMethodsSpinner, {}); } return jsxRuntime.jsxs( "div", @@ -164,7 +166,7 @@ var OAuth2LogoutScreen$1 = function (props) { } ) ), - jsxRuntime.jsx(uiEntry.SuperTokensBranding, {}), + jsxRuntime.jsx(sessionprebuiltui.SuperTokensBranding, {}), ], } ) @@ -183,7 +185,7 @@ var OAuth2LogoutScreenTheme = function (props) { var defaultTranslationsOAuth2Provider = { en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), { LOGGING_OUT: "Logging Out", LOGOUT_CONFIRMATION: "Are you sure you want to log out?", LOGOUT: "LOG OUT" } ), }; @@ -191,12 +193,12 @@ var defaultTranslationsOAuth2Provider = { var OAuth2LogoutScreen = function (props) { var _a, _b, _c; var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); - var sessionContext = React__namespace.useContext(uiEntry.SessionContext); + var sessionContext = React__namespace.useContext(sessionprebuiltui.SessionContext); var _d = React__namespace.useState(false), isLoggingOut = _d[0], setIsLoggingOut = _d[1]; var recipeComponentOverrides = props.useComponentOverrides(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -207,7 +209,7 @@ var OAuth2LogoutScreen = function (props) { var navigate = (_b = props.navigate) !== null && _b !== void 0 ? _b - : (_c = uiEntry.UI.getReactRouterDomWithCustomHistory()) === null || _c === void 0 + : (_c = sessionprebuiltui.UI.getReactRouterDomWithCustomHistory()) === null || _c === void 0 ? void 0 : _c.useHistoryCustom(); var onLogout = React__namespace.useCallback( @@ -306,12 +308,12 @@ var OAuth2LogoutScreen = function (props) { return null; } return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -345,12 +347,12 @@ var OAuth2LogoutScreen = function (props) { var TryRefreshPage$1 = function (props) { var _a; var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); - var sessionContext = React.useContext(uiEntry.SessionContext); + var sessionContext = React.useContext(sessionprebuiltui.SessionContext); var loginChallenge = (_a = genericComponentOverrideContext.getQueryParams("loginChallenge")) !== null && _a !== void 0 ? _a : undefined; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -408,7 +410,7 @@ var TryRefreshPage$1 = function (props) { config: props.recipe.config, }; return jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -417,7 +419,8 @@ var TryRefreshPage$1 = function (props) { { children: jsxRuntime.jsxs(React.Fragment, { children: [ - props.children === undefined && jsxRuntime.jsx(uiEntry.DynamicLoginMethodsSpinner, {}), + props.children === undefined && + jsxRuntime.jsx(sessionprebuiltui.DynamicLoginMethodsSpinner, {}), props.children && React__namespace.Children.map(props.children, function (child) { if (React__namespace.isValidElement(child)) { @@ -505,7 +508,7 @@ var OAuth2ProviderPreBuiltUI = /** @class */ (function (_super) { } if (componentName === "try-refresh-page") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -537,7 +540,7 @@ var OAuth2ProviderPreBuiltUI = /** @class */ (function (_super) { ); } else if (componentName === "oauth2-logout-screen") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -620,7 +623,7 @@ var OAuth2ProviderPreBuiltUI = /** @class */ (function (_super) { ); }; return OAuth2ProviderPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var TryRefreshPage = OAuth2ProviderPreBuiltUI.TryRefreshPage; exports.OAuth2ProviderPreBuiltUI = OAuth2ProviderPreBuiltUI; diff --git a/lib/build/passwordlessprebuiltui.js b/lib/build/passwordlessprebuiltui.js index cc39350dc..68f1c89d7 100644 --- a/lib/build/passwordlessprebuiltui.js +++ b/lib/build/passwordlessprebuiltui.js @@ -4,7 +4,7 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext var React = require("react"); var jsxRuntime = require("react/jsx-runtime"); var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath"); -var uiEntry = require("./index2.js"); +var sessionprebuiltui = require("./index2.js"); var recipe$1 = require("./emailpassword-shared3.js"); require("./multifactorauth.js"); var session = require("./session.js"); @@ -16,11 +16,9 @@ var STGeneralError = require("supertokens-web-js/utils/error"); var types = require("./multifactorauth-shared.js"); var emailverification = require("./emailverification.js"); var recipe = require("./emailverification-shared.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); var emailLargeIcon = require("./emailLargeIcon.js"); var windowHandler = require("supertokens-web-js/utils/windowHandler"); var recipe$3 = require("./multifactorauth-shared2.js"); -var sessionprebuiltui = require("./sessionprebuiltui.js"); var formBase = require("./emailpassword-shared5.js"); var STGeneralError$1 = require("supertokens-web-js/lib/build/error"); require("supertokens-web-js"); @@ -41,7 +39,6 @@ require("./authRecipe-shared2.js"); require("./emailpassword-shared4.js"); require("./multifactorauth-shared3.js"); require("supertokens-web-js/recipe/session"); -require("./session-shared.js"); require("supertokens-web-js/recipe/passwordless"); require("supertokens-web-js/recipe/emailverification"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); @@ -83,7 +80,7 @@ var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError); var STGeneralError__default$1 = /*#__PURE__*/ _interopDefault(STGeneralError$1); var styles = - '/* 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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\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\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\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\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\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\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\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\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\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\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\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\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\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\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\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\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="generalSuccess"] {\n margin-bottom: 20px;\n animation: swingIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) alternate 2 both;\n}\n\n[data-supertokens~="headerSubtitle"] strong {\n max-width: 100%;\n display: inline-block;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-supertokens~="primaryText"][data-supertokens~="sendCodeText"] {\n margin-top: 15px;\n margin-bottom: 20px;\n color: rgb(var(--palette-textPrimary));\n}\n\n[data-supertokens~="sendCodeText"] strong {\n max-width: 100%;\n display: inline-block;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-supertokens~="phoneInputLibRoot"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="phoneInputWrapper"] {\n display: flex;\n align-items: center;\n}\n\ninput[type="tel"][data-supertokens~="input-phoneNumber"] {\n padding-left: 15px;\n}\n\n[data-supertokens~="phoneInputWrapper"] .iti {\n flex: 1 1;\n min-width: 0;\n width: 100%;\n background: transparent;\n border: none;\n color: inherit;\n outline: none;\n}\n\n[data-supertokens~="continueButtonWrapper"] {\n margin-top: 10px;\n margin-bottom: 30px;\n}\n\n.iti__country-list {\n border: 0;\n top: 40px;\n width: min(72.2vw, 320px);\n border-radius: 6;\n box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);\n}\n\n.iti__country {\n display: flex;\n align-items: center;\n height: 34px;\n cursor: pointer;\n\n padding: 0 8px;\n}\n\n.iti__country-name {\n color: var(--palette-textLabel);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin: "0 16px";\n}\n\n[data-supertokens~="continueWithPasswordlessButtonWrapper"] {\n margin: 9px 0;\n}\n\n[data-supertokens~="continueWithPasswordlessLink"] {\n margin-top: 9px;\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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\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\n[data-supertokens~="inputContainer"] {\n margin-top: 6px;\n}\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\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\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\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\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\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\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\n[data-supertokens~="input"]:focus {\n border: none;\n outline: none;\n}\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\n[data-supertokens~="inputAdornment"] {\n justify-content: center;\n margin-right: 5px;\n}\n\n[data-supertokens~="showPassword"] {\n cursor: pointer;\n}\n\n[data-supertokens~="enterEmailSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n word-break: break-word;\n}\n\n[data-supertokens~="submitNewPasswordSuccessMessage"] {\n margin-top: 15px;\n margin-bottom: 15px;\n}\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\n@media (max-width: 440px) {\n [data-supertokens~="inputErrorMessage"] {\n max-width: 250px;\n }\n}\n\n[data-supertokens~="inputErrorSymbol"] {\n margin-right: 5px;\n top: 1px;\n position: relative;\n left: 2px;\n}\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\n[data-supertokens~="formRow"] {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-bottom: 20px;\n}\n\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n\n[data-supertokens~="formRow"]:last-child {\n padding-bottom: 0;\n}\n\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n font-weight: 700;\n}\n\n[data-supertokens~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 400;\n}\n\n[data-supertokens~="sendVerifyEmailResend"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="noFormRow"] {\n padding-bottom: 25px;\n}\n\n[data-supertokens~="emailVerificationButtonWrapper"] {\n padding-top: 25px;\n max-width: 96px;\n margin: 0 auto;\n}\n\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n\n[data-supertokens~="resetPasswordEmailForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="resetPasswordPasswordForm"] {\n padding-bottom: 20px;\n}\n\n[data-supertokens~="generalSuccess"] {\n margin-bottom: 20px;\n animation: swingIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) alternate 2 both;\n}\n\n[data-supertokens~="headerSubtitle"] strong {\n max-width: 100%;\n display: inline-block;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-supertokens~="primaryText"][data-supertokens~="sendCodeText"] {\n margin-top: 15px;\n margin-bottom: 20px;\n color: rgb(var(--palette-textPrimary));\n}\n\n[data-supertokens~="sendCodeText"] strong {\n max-width: 100%;\n display: inline-block;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-supertokens~="phoneInputLibRoot"] {\n display: flex;\n align-items: center;\n}\n\n[data-supertokens~="phoneInputWrapper"] {\n display: flex;\n align-items: center;\n}\n\ninput[type="tel"][data-supertokens~="input-phoneNumber"] {\n padding-left: 15px;\n}\n\n[data-supertokens~="phoneInputWrapper"] .iti {\n flex: 1 1;\n min-width: 0;\n width: 100%;\n background: transparent;\n border: none;\n color: inherit;\n outline: none;\n}\n\n[data-supertokens~="continueButtonWrapper"] {\n margin-top: 10px;\n margin-bottom: 30px;\n}\n\n.iti__country-list {\n border: 0;\n top: 40px;\n width: min(72.2vw, 320px);\n border-radius: 6;\n box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);\n}\n\n.iti__country {\n display: flex;\n align-items: center;\n height: 34px;\n cursor: pointer;\n\n padding: 0 8px;\n}\n\n.iti__country-name {\n color: var(--palette-textLabel);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin: "0 16px";\n}\n\n[data-supertokens~="continueWithPasswordlessButtonWrapper"] {\n margin: 9px 0;\n}\n\n[data-supertokens~="continueWithPasswordlessLink"] {\n margin-top: 9px;\n}\n'; var ThemeBase = function (_a) { var children = _a.children, @@ -111,7 +108,7 @@ var ContinueWithPasswordless = function (props) { ) ); }; -var ContinueWithPasswordlessWithOverride = uiEntry.withOverride( +var ContinueWithPasswordlessWithOverride = sessionprebuiltui.withOverride( "PasswordlessContinueWithPasswordless", ContinueWithPasswordless ); @@ -208,7 +205,7 @@ var PasswordlessLinkClickedScreen = function (props) { "div", genericComponentOverrideContext.__assign( { "data-supertokens": "spinner" }, - { children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) } + { children: jsxRuntime.jsx(sessionprebuiltui.SpinnerIcon, {}) } ) ), } @@ -218,7 +215,7 @@ var PasswordlessLinkClickedScreen = function (props) { ) ); }; -var LinkClickedScreenWithOverride = uiEntry.withOverride( +var LinkClickedScreenWithOverride = sessionprebuiltui.withOverride( "PasswordlessLinkClickedScreen", PasswordlessLinkClickedScreen ); @@ -240,7 +237,7 @@ var LinkClickedScreen$1 = function (props) { var defaultTranslationsPasswordless = { en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), { GENERAL_ERROR_EMAIL_UNDEFINED: "Please set your email", GENERAL_ERROR_EMAIL_NON_STRING: "Email must be of type string", @@ -310,7 +307,7 @@ var defaultTranslationsPasswordless = { var LinkClickedScreen = function (props) { var rethrowInRender = genericComponentOverrideContext.useRethrowInRender(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -588,12 +585,12 @@ var LinkClickedScreen = function (props) { }, }; return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -670,7 +667,7 @@ function SMSLargeIcon() { ); } -var ResendButton = uiEntry.withOverride("PasswordlessResendButton", function PasswordlessResendButton(_a) { +var ResendButton = sessionprebuiltui.withOverride("PasswordlessResendButton", function PasswordlessResendButton(_a) { var loginAttemptInfo = _a.loginAttemptInfo, resendEmailOrSMSGapInSeconds = _a.resendEmailOrSMSGapInSeconds, onClick = _a.onClick; @@ -739,7 +736,7 @@ var ResendButton = uiEntry.withOverride("PasswordlessResendButton", function Pas var PasswordlessLinkSent = function (props) { var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var _a = React.useState(props.error !== undefined ? "ERROR" : "READY"), status = _a[0], setStatus = _a[1]; @@ -825,7 +822,7 @@ var PasswordlessLinkSent = function (props) { { children: [ status === "ERROR" && - jsxRuntime.jsx(uiEntry.GeneralError, { + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { error: props.error === undefined ? "SOMETHING_WENT_WRONG_ERROR" : props.error, }), resendActive && @@ -893,7 +890,7 @@ var PasswordlessLinkSent = function (props) { { "data-supertokens": "secondaryText secondaryLinkWithLeftArrow" }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textGray))", }), jsxRuntime.jsx("span", { @@ -927,12 +924,12 @@ var PasswordlessLinkSent = function (props) { ) ); }; -var LinkSent = uiEntry.withOverride("PasswordlessLinkSent", PasswordlessLinkSent); +var LinkSent = sessionprebuiltui.withOverride("PasswordlessLinkSent", PasswordlessLinkSent); function LinkSentWrapper(props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; var activeStyle = props.config.signInUpFeature.linkSentScreenStyle; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -959,7 +956,7 @@ function useChildProps$4( navigate ) { var _this = this; - var session$1 = uiEntry.useSessionContext(); + var session$1 = sessionprebuiltui.useSessionContext(); var recipeImplementation = React__namespace.useMemo( function () { return getModifiedRecipeImplementation$4(recipe$1.webJSRecipe, onError, rebuildAuthPage); @@ -1324,9 +1321,9 @@ function defaultPhoneNumberValidator(value) { }); } -var EmailForm = uiEntry.withOverride("PasswordlessEmailForm", function PasswordlessEmailForm(props) { +var EmailForm = sessionprebuiltui.withOverride("PasswordlessEmailForm", function PasswordlessEmailForm(props) { var _this = this; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); return jsxRuntime.jsx(formBase.FormBase, { clearError: props.clearError, onFetchError: props.onFetchError, @@ -3473,9 +3470,9 @@ var phoneNumberInputWithInjectedProps = function (injectedProps) { }; }; -var PhoneForm = uiEntry.withOverride("PasswordlessPhoneForm", function PasswordlessPhoneForm(props) { +var PhoneForm = sessionprebuiltui.withOverride("PasswordlessPhoneForm", function PasswordlessPhoneForm(props) { var _this = this; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); React.useEffect(function () { // We preload this here, since it will be used almost for sure, but loading it void preloadPhoneNumberUtils(); @@ -3552,13 +3549,13 @@ var PhoneForm = uiEntry.withOverride("PasswordlessPhoneForm", function Passwordl }); }); -var UserInputCodeFormFooter = uiEntry.withOverride( +var UserInputCodeFormFooter = sessionprebuiltui.withOverride( "PasswordlessUserInputCodeFormFooter", function PasswordlessUserInputCodeFormFooter(_a) { var loginAttemptInfo = _a.loginAttemptInfo, recipeImplementation = _a.recipeImplementation; var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); return jsxRuntime.jsx(React.Fragment, { children: jsxRuntime.jsxs( "div", @@ -3573,7 +3570,9 @@ var UserInputCodeFormFooter = uiEntry.withOverride( }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))" }), + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { + color: "rgb(var(--palette-textPrimary))", + }), loginAttemptInfo.contactMethod === "EMAIL" ? t("PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_EMAIL") : t("PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_PHONE"), @@ -3585,7 +3584,7 @@ var UserInputCodeFormFooter = uiEntry.withOverride( } ); -var UserInputCodeFormHeader = uiEntry.withOverride( +var UserInputCodeFormHeader = sessionprebuiltui.withOverride( "PasswordlessUserInputCodeFormHeader", function PasswordlessUserInputCodeFormHeader(_a) { var loginAttemptInfo = _a.loginAttemptInfo; @@ -3638,7 +3637,7 @@ var UserInputCodeFormScreen = function (props) { genericComponentOverrideContext.__assign({}, props) ), props.error !== undefined && - jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }), + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { error: props.error }), jsxRuntime.jsx( UserInputCodeForm, genericComponentOverrideContext.__assign({}, props) @@ -3647,16 +3646,16 @@ var UserInputCodeFormScreen = function (props) { } ) ), - jsxRuntime.jsx(uiEntry.SuperTokensBranding, {}), + jsxRuntime.jsx(sessionprebuiltui.SuperTokensBranding, {}), ], } ) ); }; -var UserInputCodeForm = uiEntry.withOverride("PasswordlessUserInputCodeForm", function (props) { +var UserInputCodeForm = sessionprebuiltui.withOverride("PasswordlessUserInputCodeForm", function (props) { var _a; var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); // We need this any because the node types are also loaded var _b = React.useState(), clearResendNotifTimeout = _b[0], @@ -3845,7 +3844,7 @@ function UserInputCodeFormScreenWrapper(props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; var activeStyle = props.config.signInUpFeature.userInputCodeFormStyle; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -3881,7 +3880,7 @@ var OTPLoadingScreen = function () { "div", genericComponentOverrideContext.__assign( { "data-supertokens": "spinner delayedRender" }, - { children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) } + { children: jsxRuntime.jsx(sessionprebuiltui.SpinnerIcon, {}) } ) ), } @@ -3891,9 +3890,9 @@ var OTPLoadingScreen = function () { ) ); }; -var LoadingScreen = uiEntry.withOverride("PasswordlessMFAOTPLoadingScreen", OTPLoadingScreen); +var LoadingScreen = sessionprebuiltui.withOverride("PasswordlessMFAOTPLoadingScreen", OTPLoadingScreen); -var MFAFooter = uiEntry.withOverride("PasswordlessMFAFooter", function PasswordlessMFAFooter(props) { +var MFAFooter = sessionprebuiltui.withOverride("PasswordlessMFAFooter", function PasswordlessMFAFooter(props) { var t = translationContext.useTranslation(); return jsxRuntime.jsx( "div", @@ -3909,7 +3908,7 @@ var MFAFooter = uiEntry.withOverride("PasswordlessMFAFooter", function Passwordl }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))", }), t("PWLESS_MFA_FOOTER_LOGOUT"), @@ -3922,7 +3921,7 @@ var MFAFooter = uiEntry.withOverride("PasswordlessMFAFooter", function Passwordl ); }); -var MFAHeader = uiEntry.withOverride("PasswordlessMFAHeader", function PasswordlessMFAHeader(props) { +var MFAHeader = sessionprebuiltui.withOverride("PasswordlessMFAHeader", function PasswordlessMFAHeader(props) { var t = translationContext.useTranslation(); return jsxRuntime.jsxs(React.Fragment, { children: [ @@ -3933,7 +3932,7 @@ var MFAHeader = uiEntry.withOverride("PasswordlessMFAHeader", function Passwordl { children: [ props.showBackButton - ? jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked }) + ? jsxRuntime.jsx(sessionprebuiltui.BackButton, { onClick: props.onBackButtonClicked }) : jsxRuntime.jsx("span", { "data-supertokens": "backButtonPlaceholder backButtonCommon", }), @@ -3950,13 +3949,13 @@ var MFAHeader = uiEntry.withOverride("PasswordlessMFAHeader", function Passwordl }); }); -var MFAOTPFooter = uiEntry.withOverride("PasswordlessMFAOTPFooter", function PasswordlessMFAOTPFooter(_a) { +var MFAOTPFooter = sessionprebuiltui.withOverride("PasswordlessMFAOTPFooter", function PasswordlessMFAOTPFooter(_a) { var loginAttemptInfo = _a.loginAttemptInfo, recipeImplementation = _a.recipeImplementation, onSignOutClicked = _a.onSignOutClicked, canChangeEmail = _a.canChangeEmail; var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); return jsxRuntime.jsxs( "div", genericComponentOverrideContext.__assign( @@ -3992,7 +3991,7 @@ var MFAOTPFooter = uiEntry.withOverride("PasswordlessMFAOTPFooter", function Pas }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))", }), t("PWLESS_MFA_FOOTER_LOGOUT"), @@ -4006,7 +4005,7 @@ var MFAOTPFooter = uiEntry.withOverride("PasswordlessMFAOTPFooter", function Pas ); }); -var MFAOTPHeader = uiEntry.withOverride("PasswordlessMFAOTPHeader", function PasswordlessMFAOTPHeader(_a) { +var MFAOTPHeader = sessionprebuiltui.withOverride("PasswordlessMFAOTPHeader", function PasswordlessMFAOTPHeader(_a) { var showBackButton = _a.showBackButton, loginAttemptInfo = _a.loginAttemptInfo, onBackButtonClicked = _a.onBackButtonClicked, @@ -4021,7 +4020,7 @@ var MFAOTPHeader = uiEntry.withOverride("PasswordlessMFAOTPHeader", function Pas { children: [ showBackButton && canChangeEmail === false - ? jsxRuntime.jsx(uiEntry.BackButton, { onClick: onBackButtonClicked }) + ? jsxRuntime.jsx(sessionprebuiltui.BackButton, { onClick: onBackButtonClicked }) : jsxRuntime.jsx("span", { "data-supertokens": "backButtonPlaceholder backButtonCommon", }), @@ -4121,7 +4120,9 @@ var MFATheme = function (_a) { }) ), featureState.error !== undefined && - jsxRuntime.jsx(uiEntry.GeneralError, { error: featureState.error }), + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { + error: featureState.error, + }), activeScreen === MFAScreens.EmailForm ? jsxRuntime.jsx( EmailForm, @@ -4182,7 +4183,7 @@ var MFATheme = function (_a) { } ) ), - jsxRuntime.jsx(uiEntry.SuperTokensBranding, {}), + jsxRuntime.jsx(sessionprebuiltui.SuperTokensBranding, {}), ], } ) @@ -4202,7 +4203,7 @@ function MFAThemeWrapper(props) { activeStyle = ""; // styling the access denied screen is handled through the session recipe } return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -4347,7 +4348,7 @@ function useChildProps$3(recipe$1, recipeImplementation, state, contactMethod, d _a.sent(); return [ 4 /*yield*/, - uiEntry.redirectToAuth({ redirectBack: false, navigate: navigate }), + sessionprebuiltui.redirectToAuth({ redirectBack: false, navigate: navigate }), ]; case 3: _a.sent(); @@ -4464,7 +4465,7 @@ function useChildProps$3(recipe$1, recipeImplementation, state, contactMethod, d ); } var MFAFeatureInner = function (props) { - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var _a = useFeatureReducer(), state = _a[0], dispatch = _a[1]; @@ -4516,12 +4517,12 @@ var MFAFeatureInner = function (props) { var MFAFeature = function (props) { var recipeComponentOverrides = props.useComponentOverrides(); return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -5000,7 +5001,7 @@ function getModifiedRecipeImplementation$3(originalImpl, config, dispatch) { }); } -var EmailOrPhoneForm = uiEntry.withOverride( +var EmailOrPhoneForm = sessionprebuiltui.withOverride( "PasswordlessEmailOrPhoneForm", function PasswordlessEmailOrPhoneForm(props) { var _this = this; @@ -5008,7 +5009,7 @@ var EmailOrPhoneForm = uiEntry.withOverride( var _a = React.useState(!props.config.signInUpFeature.defaultToEmail), isPhoneNumber = _a[0], setIsPhoneNumber = _a[1]; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); React.useEffect(function () { // We preload this here, since it will be used almost for sure, but loading it void preloadPhoneNumberUtils(); @@ -5219,7 +5220,7 @@ function SignInUpThemeWrapper$1(props) { activeStyle = props.config.signInUpFeature.emailOrPhoneFormStyle; } return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -5263,7 +5264,7 @@ function useChildProps$2( navigate ) { var _this = this; - var session$1 = uiEntry.useSessionContext(); + var session$1 = sessionprebuiltui.useSessionContext(); var recipeImplementation = React__namespace.useMemo( function () { return ( @@ -5392,7 +5393,7 @@ function useChildProps$2( ); } var SignInUpFeatureInner = function (props) { - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -5563,7 +5564,7 @@ var ContinueWithPasswordlessFooter = function (_a) { ); }; -var EPComboEmailForm = uiEntry.withOverride( +var EPComboEmailForm = sessionprebuiltui.withOverride( "PasswordlessEPComboEmailForm", function PasswordlessEPComboEmailForm(props) { var _this = this; @@ -5676,7 +5677,7 @@ var EPComboEmailForm = uiEntry.withOverride( } ); -var EPComboEmailOrPhoneForm = uiEntry.withOverride( +var EPComboEmailOrPhoneForm = sessionprebuiltui.withOverride( "PasswordlessEPComboEmailOrPhoneForm", function PasswordlessEPComboEmailOrPhoneForm(props) { var _this = this; @@ -5905,7 +5906,7 @@ function SignInUpThemeWrapper(props) { var activeScreen = getActiveScreen(props.factorIds); var activeStyle = props.config.signInUpFeature.emailOrPhoneFormStyle; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -5945,7 +5946,7 @@ function useChildProps$1( navigate ) { var _this = this; - var session$1 = uiEntry.useSessionContext(); + var session$1 = sessionprebuiltui.useSessionContext(); var recipeImplementation = React__namespace.useMemo( function () { return ( @@ -6279,7 +6280,7 @@ function useChildProps$1( ); } var SignInUpEPComboFeatureInner = function (props) { - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -6394,7 +6395,7 @@ function useChildProps( navigate ) { var _this = this; - var session$1 = uiEntry.useSessionContext(); + var session$1 = sessionprebuiltui.useSessionContext(); var recipeImplementation = React__namespace.useMemo( function () { return getModifiedRecipeImplementation(recipe$1.webJSRecipe, onError, rebuildAuthPage); @@ -6756,7 +6757,7 @@ var PasswordlessPreBuiltUI = /** @class */ (function (_super) { } if (componentName === "linkClickedScreen") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -6782,7 +6783,7 @@ var PasswordlessPreBuiltUI = /** @class */ (function (_super) { } if (componentName === "otp-email") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -6816,7 +6817,7 @@ var PasswordlessPreBuiltUI = /** @class */ (function (_super) { } if (componentName === "otp-phone") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -7223,7 +7224,7 @@ var PasswordlessPreBuiltUI = /** @class */ (function (_super) { }; PasswordlessPreBuiltUI.MFAOTPTheme = MFAThemeWrapper; return PasswordlessPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var LinkClicked = PasswordlessPreBuiltUI.LinkClicked; var MfaOtpPhone = PasswordlessPreBuiltUI.MfaOtpPhone; var MfaOtpEmail = PasswordlessPreBuiltUI.MfaOtpEmail; diff --git a/lib/build/session-shared.js b/lib/build/session-shared.js deleted file mode 100644 index bd3b554b5..000000000 --- a/lib/build/session-shared.js +++ /dev/null @@ -1,10 +0,0 @@ -"use strict"; - -var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); - -var _a = genericComponentOverrideContext.createGenericComponentsOverrideContext(), - useContext = _a[0], - Provider = _a[1]; - -exports.Provider = Provider; -exports.useContext = useContext; diff --git a/lib/build/session.js b/lib/build/session.js index 9fb87e239..783f2adaa 100644 --- a/lib/build/session.js +++ b/lib/build/session.js @@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); var WebJSSessionRecipe = require("supertokens-web-js/recipe/session"); -var componentOverrideContext = require("./session-shared.js"); +var sessionprebuiltui = require("./index2.js"); var types = require("./multifactorauth-shared.js"); -var uiEntry = require("./index2.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); @@ -17,15 +16,15 @@ require("react"); require("supertokens-web-js/utils/normalisedURLDomain"); require("supertokens-web-js/utils/normalisedURLPath"); require("react/jsx-runtime"); -require("./oauth2provider-shared.js"); -require("supertokens-web-js/recipe/oauth2provider"); -require("./recipeModule-shared.js"); require("./translationContext.js"); require("react-dom"); require("./multitenancy-shared.js"); require("./multifactorauth-shared2.js"); require("supertokens-web-js/recipe/multifactorauth"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); +require("./recipeModule-shared.js"); +require("./oauth2provider-shared.js"); +require("supertokens-web-js/recipe/oauth2provider"); require("./authRecipe-shared.js"); require("supertokens-web-js/lib/build/normalisedURLPath"); @@ -120,7 +119,7 @@ var PrimitiveClaim = /** @class */ (function (_super) { })(WebJSSessionRecipe.PrimitiveClaim); var useClaimValue$1 = function (claim) { - var ctx = uiEntry.useSessionContext(); + var ctx = sessionprebuiltui.useSessionContext(); if (ctx.loading) { return { loading: true, @@ -265,10 +264,10 @@ var SessionAPIWrapper = /** @class */ (function () { ), }); }; - SessionAPIWrapper.useSessionContext = uiEntry.useSessionContext; + SessionAPIWrapper.useSessionContext = sessionprebuiltui.useSessionContext; SessionAPIWrapper.useClaimValue = useClaimValue$1; - SessionAPIWrapper.SessionAuth = uiEntry.SessionAuthWrapper; - SessionAPIWrapper.ComponentsOverrideProvider = componentOverrideContext.Provider; + SessionAPIWrapper.SessionAuth = sessionprebuiltui.SessionAuthWrapper; + SessionAPIWrapper.ComponentsOverrideProvider = sessionprebuiltui.Provider; return SessionAPIWrapper; })(); var useSessionContext = SessionAPIWrapper.useSessionContext; @@ -290,7 +289,7 @@ var getInvalidClaimsFromResponse = SessionAPIWrapper.getInvalidClaimsFromRespons var getClaimValue = SessionAPIWrapper.getClaimValue; var SessionComponentsOverrideProvider = SessionAPIWrapper.ComponentsOverrideProvider; -exports.SessionContext = uiEntry.SessionContext; +exports.SessionContext = sessionprebuiltui.SessionContext; exports.BooleanClaim = BooleanClaim; exports.PrimitiveArrayClaim = PrimitiveArrayClaim; exports.PrimitiveClaim = PrimitiveClaim; diff --git a/lib/build/sessionprebuiltui.js b/lib/build/sessionprebuiltui.js index 8592885bb..3010ae461 100644 --- a/lib/build/sessionprebuiltui.js +++ b/lib/build/sessionprebuiltui.js @@ -1,21 +1,19 @@ "use strict"; -var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); -var jsxRuntime = require("react/jsx-runtime"); -var uiEntry = require("./index2.js"); -var componentOverrideContext = require("./session-shared.js"); -var windowHandler = require("supertokens-web-js/utils/windowHandler"); -var translationContext = require("./translationContext.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); -var React = require("react"); -var types = require("./multifactorauth-shared.js"); +require("./genericComponentOverrideContext.js"); +require("react/jsx-runtime"); +var sessionprebuiltui = require("./index2.js"); +require("./multifactorauth-shared.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); +require("supertokens-web-js/utils/windowHandler"); require("supertokens-web-js/recipe/multitenancy"); require("supertokens-web-js/utils"); +require("react"); require("supertokens-web-js/utils/normalisedURLDomain"); require("supertokens-web-js/utils/normalisedURLPath"); +require("./translationContext.js"); require("react-dom"); require("./multitenancy-shared.js"); require("./multifactorauth-shared2.js"); @@ -28,319 +26,6 @@ require("./authRecipe-shared.js"); require("supertokens-web-js/lib/build/normalisedURLPath"); require("supertokens-web-js/recipe/session"); -function ErrorRoundIcon() { - return jsxRuntime.jsxs( - "svg", - genericComponentOverrideContext.__assign( - { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, - { - children: [ - jsxRuntime.jsx("path", { - d: "M16.0012 1.91396e-06C12.3031 0.00305404 8.72039 1.28809 5.8634 3.63622C3.00641 5.98436 1.05183 9.25034 0.33262 12.8779C-0.386594 16.5054 0.174037 20.27 1.91901 23.5306C3.66399 26.7911 6.48538 29.3459 9.90259 30.7597C13.3198 32.1734 17.1215 32.3588 20.66 31.2842C24.1986 30.2096 27.2551 27.9414 29.309 24.8661C31.3629 21.7908 32.2872 18.0985 31.9243 14.4182C31.5614 10.738 29.9338 7.29732 27.3188 4.68238C25.8323 3.19688 24.0677 2.01879 22.1258 1.21537C20.1839 0.411961 18.1027 -0.00102596 16.0012 1.91396e-06ZM16.0012 28.2352C13.1772 28.2295 10.4424 27.2451 8.26261 25.4497C6.0828 23.6542 4.59268 21.1588 4.04598 18.3881C3.49929 15.6175 3.9298 12.7431 5.26424 10.2542C6.59867 7.76533 8.75452 5.81593 11.3647 4.73791C13.9749 3.65989 16.878 3.51991 19.5798 4.3418C22.2816 5.16369 24.615 6.89663 26.1827 9.24557C27.7504 11.5945 28.4555 14.4142 28.1779 17.2246C27.9003 20.0349 26.6572 22.6622 24.6602 24.659C23.5226 25.7947 22.1723 26.6951 20.6866 27.3087C19.2008 27.9224 17.6087 28.2372 16.0012 28.2352Z", - fill: "#ED344E", - }), - jsxRuntime.jsx("path", { - d: "M21.3645 11.1053C21.1948 10.9264 20.9904 10.784 20.7639 10.6866C20.5374 10.5893 20.2934 10.5391 20.0468 10.5391C19.8003 10.5391 19.5563 10.5893 19.3298 10.6866C19.1032 10.784 18.8989 10.9264 18.7292 11.1053L15.9997 13.8348L13.3645 11.1995C13.1927 11.0207 12.9871 10.8779 12.7595 10.7795C12.5319 10.6812 12.2869 10.6292 12.039 10.6267C11.791 10.6242 11.5451 10.6711 11.3156 10.7648C11.086 10.8586 10.8775 10.9971 10.7021 11.1725C10.5268 11.3478 10.3882 11.5563 10.2945 11.7859C10.2008 12.0154 10.1538 12.2614 10.1563 12.5093C10.1589 12.7572 10.2108 13.0022 10.3092 13.2298C10.4076 13.4574 10.5504 13.6631 10.7292 13.8348L13.3645 16.47L10.7292 19.1018C10.5504 19.2735 10.4076 19.4792 10.3092 19.7068C10.2108 19.9344 10.1589 20.1793 10.1563 20.4273C10.1538 20.6752 10.2008 20.9212 10.2945 21.1507C10.3882 21.3803 10.5268 21.5888 10.7021 21.7641C10.8775 21.9395 11.086 22.078 11.3156 22.1718C11.5451 22.2655 11.791 22.3124 12.039 22.3099C12.2869 22.3074 12.5319 22.2554 12.7595 22.1571C12.9871 22.0587 13.1927 21.9159 13.3645 21.7371L15.9997 19.1018L18.6349 21.7371C18.8074 21.9128 19.0129 22.0526 19.2397 22.1484C19.4665 22.2443 19.7101 22.2942 19.9563 22.2954C20.2025 22.2966 20.4465 22.2489 20.6741 22.1553C20.9018 22.0616 21.1087 21.9238 21.2829 21.7497C21.457 21.5757 21.5949 21.3688 21.6886 21.1412C21.7823 20.9135 21.83 20.6695 21.8289 20.4233C21.8278 20.1771 21.778 19.9336 21.6822 19.7067C21.5865 19.4799 21.4467 19.2743 21.271 19.1018L18.6358 16.4666L21.271 13.8313C21.6229 13.47 21.8275 12.9904 21.8448 12.4864C21.8621 11.9823 21.6908 11.4898 21.3645 11.1053Z", - fill: "#ED344E", - }), - ], - } - ) - ); -} - -/* - * Component. - */ -function BackButton(_a) { - var onClick = _a.onClick; - var t = translationContext.useTranslation(); - return jsxRuntime.jsx( - "button", - genericComponentOverrideContext.__assign( - { onClick: onClick, "data-supertokens": "buttonBase backButton" }, - { children: t("GO_BACK") } - ) - ); -} - -/* - * Component. - */ -function LogoutButton(_a) { - var onClick = _a.onClick; - var t = translationContext.useTranslation(); - return jsxRuntime.jsxs( - "button", - genericComponentOverrideContext.__assign( - { onClick: onClick, "data-supertokens": "buttonBase logoutButton" }, - { - children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { color: "rgb(var(--palette-textGray))" }), - jsxRuntime.jsx("span", { children: t("LOGOUT") }), - ], - } - ) - ); -} - -var styles = - '/* 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\n[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\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/*\n * Default styles.\n */\n\n@keyframes slideTop {\n 0% {\n transform: translateY(-5px);\n }\n 100% {\n transform: translateY(0px);\n }\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\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\n@media (max-width: 440px) {\n [data-supertokens~="container"] {\n width: 95vw;\n }\n}\n\n[data-supertokens~="row"] {\n margin: 0 auto;\n width: 76%;\n padding-top: 30px;\n padding-bottom: 10px;\n}\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: -moz-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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n color: rgb(var(--palette-textGray));\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n color: rgb(var(--palette-textGray));\n font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n max-width: 300px;\n margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\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\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\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\n[data-supertokens~="secondaryText"] strong {\n font-weight: 600;\n}\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\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\n[data-supertokens~="secondaryLinkWithArrow"] {\n margin-top: 10px;\n margin-bottom: 30px;\n cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n position: relative;\n left: 2px;\n word-spacing: 4px;\n}\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\n[data-supertokens~="spinner"] {\n width: 80px;\n height: auto;\n padding-top: 20px;\n padding-bottom: 40px;\n margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n font-family: "Arial", sans-serif;\n background-color: transparent;\n border: 0;\n}\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\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n position: relative;\n left: -4px;\n}\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\n[data-supertokens~="button"]:disabled {\n border: none;\n cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n outline: none;\n transition: all 0s;\n background-size: 100%;\n filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n width: 16px;\n height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n cursor: pointer;\n border: none;\n background-color: transparent;\n padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n display: block;\n}\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\n@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n cursor: pointer;\n margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n font-weight: 400;\n}\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\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\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n margin-left: auto;\n margin-right: auto;\n margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="dividerText"] {\n flex: 1 1;\n font-weight: 400;\n font-size: var(--font-size-1);\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\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\n[data-supertokens~="formLabelLinkBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n padding-bottom: 20px;\n}\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\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n color: rgb(var(--palette-textTitle));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover {\n background-color: rgb(var(--palette-inputBackground));\n}\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\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithRightArrow"] ~ svg {\n position: relative;\n left: 2px;\n}\n\n[data-supertokens~="buttonWithArrow"]:hover [data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n position: relative;\n left: -2px;\n}\n\n[data-supertokens~="buttonWithArrow"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n display: flex;\n align-items: center;\n}\n\n/* Override */\n\n[data-supertokens~="accessDenied"] [data-supertokens~="row"] {\n padding-bottom: 24px;\n}\n\n[data-supertokens~="accessDenied"] [data-supertokens~="divider"] {\n padding: 0;\n margin: 34px 0 18px 0;\n}\n\n[data-supertokens~="accessDenied"] [data-supertokens~="headerTitle"] {\n margin: 10px 0 0 0;\n font-style: normal;\n font-weight: 600;\n font-size: 20px;\n line-height: 30px;\n}\n\n/* Override end */\n\n[data-supertokens~="center"] {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1 1 auto;\n}\n\n[data-supertokens~="buttonsGroup"] {\n margin-top: 34px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n[data-supertokens~="buttonBase"] {\n font-family: "Arial", sans-serif;\n font-size: var(--font-size-1);\n line-height: 21px;\n font-weight: 400;\n background: transparent;\n outline: none;\n border: none;\n cursor: pointer;\n}\n\n[data-supertokens~="backButton"] {\n color: rgb(var(--palette-textLink));\n}\n\n[data-supertokens~="logoutButton"] {\n display: flex;\n align-items: center;\n gap: 6px;\n color: rgb(var(--palette-textGray));\n}\n\n[data-supertokens~="primaryText"][data-supertokens~="accessDeniedError"] {\n font-weight: 400;\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 AccessDeniedScreen$2 = function (props) { - var userContext = uiEntry.useUserContext(); - var t = translationContext.useTranslation(); - var onLogout = function () { - return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [4 /*yield*/, props.recipe.signOut({ userContext: userContext })]; - case 1: - _a.sent(); - return [ - 4 /*yield*/, - genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - show: "signin", - redirectBack: false, - userContext: userContext, - }), - ]; - case 2: - _a.sent(); - return [2 /*return*/]; - } - }); - }); - }; - var onBackButtonClicked = function () { - // If we don't have navigate available this would mean we are not using react-router-dom, so we use window's history - if (props.navigate === undefined) { - return windowHandler.WindowHandlerReference.getReferenceOrThrow() - .windowHandler.getWindowUnsafe() - .history.back(); - } - // If we do have navigate and goBack function on it this means we are using react-router-dom v5 or lower - if ("goBack" in props.navigate) { - return props.navigate.goBack(); - } - // If we reach this code this means we are using react-router-dom v6 - return props.navigate(-1); - }; - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "center accessDenied" }, - { - children: jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsx(ErrorRoundIcon, {}), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("ACCESS_DENIED") } - ) - ), - jsxRuntime.jsx("div", { "data-supertokens": "divider" }), - props.error && - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "primaryText accessDeniedError" }, - { children: [" ", props.error] } - ) - ), - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "buttonsGroup" }, - { - children: [ - jsxRuntime.jsx(BackButton, { - onClick: onBackButtonClicked, - }), - jsxRuntime.jsx(LogoutButton, { onClick: onLogout }), - ], - } - ) - ), - ], - } - ) - ), - } - ) - ), - } - ) - ); -}; -var AccessDeniedThemeWithOverride = uiEntry.withOverride("SessionAccessDenied", AccessDeniedScreen$2); -var AccessDeniedScreenTheme = function (props) { - var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; - return jsxRuntime.jsx( - ThemeBase, - genericComponentOverrideContext.__assign( - { userStyles: [rootStyle, props.config.recipeRootStyle, props.config.accessDeniedScreen.style] }, - { - children: jsxRuntime.jsx( - AccessDeniedThemeWithOverride, - genericComponentOverrideContext.__assign({}, props) - ), - } - ) - ); -}; - -var defaultTranslationsSession = { - en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), - { ACCESS_DENIED: "Access denied", GO_BACK: "Go back", LOGOUT: "Log out" } - ), -}; - -var AccessDeniedScreen$1 = function (props) { - var _a, _b, _c; - var recipeComponentOverrides = props.useComponentOverrides(); - var navigate = - (_a = props.navigate) !== null && _a !== void 0 - ? _a - : (_b = uiEntry.UI.getReactRouterDomWithCustomHistory()) === null || _b === void 0 - ? void 0 - : _b.useHistoryCustom(); - return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, - genericComponentOverrideContext.__assign( - { value: recipeComponentOverrides }, - { - children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, - genericComponentOverrideContext.__assign( - { - defaultStore: defaultTranslationsSession, - useShadowDom: - (_c = props.useShadowDom) !== null && _c !== void 0 - ? _c - : genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, - }, - { - children: jsxRuntime.jsx(AccessDeniedScreenTheme, { - config: props.recipe.config, - navigate: navigate, - recipe: props.recipe, - error: props.error, - }), - } - ) - ), - } - ) - ); -}; - -var SessionPreBuiltUI = /** @class */ (function (_super) { - genericComponentOverrideContext.__extends(SessionPreBuiltUI, _super); - function SessionPreBuiltUI(recipeInstance) { - var _this = _super.call(this) || this; - _this.recipeInstance = recipeInstance; - _this.languageTranslations = defaultTranslationsSession; - // Instance methods - _this.getFeatures = function ( - // eslint-disable-next-line @typescript-eslint/no-unused-vars - _useComponentOverrides - ) { - return {}; - }; - _this.getFeatureComponent = function (componentName, props, useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - if (componentName === "accessDenied") { - return jsxRuntime.jsx( - uiEntry.UserContextWrapper, - genericComponentOverrideContext.__assign( - { userContext: props.userContext }, - { - children: jsxRuntime.jsx(AccessDeniedScreen$1, { - recipe: _this.recipeInstance, - useComponentOverrides: useComponentOverrides, - error: props.error, - useShadowDom: props.useShadowDom, - }), - } - ) - ); - } - throw new Error("Should never come here."); - }; - return _this; - } - // Static methods - SessionPreBuiltUI.getInstanceOrInitAndGetInstance = function () { - if (SessionPreBuiltUI.instance === undefined) { - var recipeInstance = types.Session.getInstanceOrThrow(); - SessionPreBuiltUI.instance = new SessionPreBuiltUI(recipeInstance); - } - return SessionPreBuiltUI.instance; - }; - SessionPreBuiltUI.getFeatures = function (useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - return SessionPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides); - }; - SessionPreBuiltUI.getFeatureComponent = function (componentName, props, useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - return SessionPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent( - componentName, - props, - useComponentOverrides - ); - }; - SessionPreBuiltUI.prototype.getAuthComponents = function () { - return []; - }; - // For tests - SessionPreBuiltUI.reset = function () { - if (!genericComponentOverrideContext.isTest()) { - return; - } - SessionPreBuiltUI.instance = undefined; - return; - }; - var _a; - _a = SessionPreBuiltUI; - SessionPreBuiltUI.AccessDeniedScreen = function (prop) { - if (prop === void 0) { - prop = {}; - } - return _a.getFeatureComponent("accessDenied", prop); - }; - SessionPreBuiltUI.AccessDeniedScreenTheme = AccessDeniedScreenTheme; - return SessionPreBuiltUI; -})(uiEntry.RecipeRouter); -var AccessDeniedScreen = SessionPreBuiltUI.AccessDeniedScreen; - -exports.AccessDeniedScreen = AccessDeniedScreen; -exports.AccessDeniedScreenTheme = AccessDeniedScreenTheme; -exports.SessionPreBuiltUI = SessionPreBuiltUI; +exports.AccessDeniedScreen = sessionprebuiltui.AccessDeniedScreen; +exports.AccessDeniedScreenTheme = sessionprebuiltui.AccessDeniedScreenTheme; +exports.SessionPreBuiltUI = sessionprebuiltui.SessionPreBuiltUI; diff --git a/lib/build/thirdpartyprebuiltui.js b/lib/build/thirdpartyprebuiltui.js index c6f19d687..384bd6a22 100644 --- a/lib/build/thirdpartyprebuiltui.js +++ b/lib/build/thirdpartyprebuiltui.js @@ -3,7 +3,7 @@ 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 sessionprebuiltui = require("./index2.js"); require("./multifactorauth.js"); var session = require("./session.js"); var recipe = require("./thirdparty-shared.js"); @@ -32,7 +32,6 @@ require("./authRecipe-shared.js"); require("supertokens-web-js/lib/build/normalisedURLPath"); require("./multifactorauth-shared3.js"); require("supertokens-web-js/recipe/session"); -require("./session-shared.js"); require("supertokens-web-js/recipe/thirdparty"); require("./authRecipe-shared2.js"); require("supertokens-web-js/recipe/emailverification"); @@ -73,7 +72,7 @@ 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\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: -moz-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~="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[data-supertokens~="providerContainer"] {\n padding-top: 9px;\n padding-bottom: 9px;\n\n --logo-size: 34px;\n --logo-horizontal-spacing: 8px;\n}\n[data-supertokens~="button"][data-supertokens~="providerButton"] {\n min-height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 2px calc(var(--logo-size) + 2 * var(--logo-horizontal-spacing));\n background-color: white;\n border-color: rgb(221, 221, 221);\n color: black;\n position: relative;\n}\n[data-supertokens~="button"][data-supertokens~="providerButton"]:hover {\n filter: none;\n background-color: #fafafa;\n}\n[data-supertokens~="providerButtonLeft"] {\n width: calc(var(--logo-size));\n position: absolute;\n left: calc(var(--logo-horizontal-spacing));\n}\n[data-supertokens~="providerButtonLogo"] {\n height: 30px;\n display: flex;\n align-items: center;\n}\n[data-supertokens~="providerButtonLogoCenter"] {\n display: flex;\n margin: auto;\n}\n[data-supertokens~="providerButtonText"] {\n font-weight: 400;\n text-align: center;\n justify-content: center;\n overflow: hidden;\n white-space: nowrap;\n display: inline-block;\n flex-grow: 1;\n max-width: 100%;\n font-size: var(--font-size-1);\n text-overflow: ellipsis;\n}\n.scroll-text-animation:hover span,\n.scroll-text-animation:focus span {\n display: inline-block;\n animation: scroll-left 2s linear forwards;\n position: relative;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n text-overflow: clip;\n}\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n left: 0%;\n }\n 50% {\n transform: translateX(calc(-100% - 10px));\n left: 100%;\n }\n 100% {\n transform: translateX(calc(-100% - 10px));\n left: 100%;\n }\n}\n@media (max-width: 640px) {\n [data-supertokens~="providerButtonText"] {\n font-size: var(--font-size-0);\n }\n}\n'; + '[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\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: -moz-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~="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[data-supertokens~="providerContainer"] {\n padding-top: 9px;\n padding-bottom: 9px;\n\n --logo-size: 34px;\n --logo-horizontal-spacing: 8px;\n}\n[data-supertokens~="button"][data-supertokens~="providerButton"] {\n min-height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 2px calc(var(--logo-size) + 2 * var(--logo-horizontal-spacing));\n background-color: white;\n border-color: rgb(221, 221, 221);\n color: black;\n position: relative;\n}\n[data-supertokens~="button"][data-supertokens~="providerButton"]:hover {\n filter: none;\n background-color: #fafafa;\n}\n[data-supertokens~="providerButtonLeft"] {\n width: calc(var(--logo-size));\n position: absolute;\n left: calc(var(--logo-horizontal-spacing));\n}\n[data-supertokens~="providerButtonLogo"] {\n height: 30px;\n display: flex;\n align-items: center;\n}\n[data-supertokens~="providerButtonLogoCenter"] {\n display: flex;\n margin: auto;\n}\n[data-supertokens~="providerButtonText"] {\n font-weight: 400;\n text-align: center;\n justify-content: center;\n overflow: hidden;\n white-space: nowrap;\n display: inline-block;\n flex-grow: 1;\n max-width: 100%;\n font-size: var(--font-size-1);\n text-overflow: ellipsis;\n}\n.scroll-text-animation:hover span,\n.scroll-text-animation:focus span {\n display: inline-block;\n animation: scroll-left 2s linear forwards;\n position: relative;\n width: -moz-fit-content;\n width: fit-content;\n text-overflow: clip;\n}\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n left: 0%;\n }\n 50% {\n transform: translateX(calc(-100% - 10px));\n left: 100%;\n }\n 100% {\n transform: translateX(calc(-100% - 10px));\n left: 100%;\n }\n}\n@media (max-width: 640px) {\n [data-supertokens~="providerButtonText"] {\n font-size: var(--font-size-0);\n }\n}\n'; var ThemeBase = function (_a) { var children = _a.children, @@ -84,7 +83,7 @@ var ThemeBase = function (_a) { }; var ThirdPartySignInAndUpProvidersForm = function (props) { - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var signInClick = function (providerId) { return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { var response, generalError, e_1; @@ -165,12 +164,15 @@ var ThirdPartySignInAndUpProvidersForm = function (props) { }), }); }; -var ProvidersForm = uiEntry.withOverride("ThirdPartySignInAndUpProvidersForm", ThirdPartySignInAndUpProvidersForm); +var ProvidersForm = sessionprebuiltui.withOverride( + "ThirdPartySignInAndUpProvidersForm", + ThirdPartySignInAndUpProvidersForm +); var SignInAndUpThemeWrapper = function (props) { var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle; return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -209,7 +211,7 @@ function useChildProps( }, [recipe$1] ); - var dynamicLoginMethods = uiEntry.useDynamicLoginMethods(); + var dynamicLoginMethods = sessionprebuiltui.useDynamicLoginMethods(); return React.useMemo( function () { var tenantProviders; @@ -315,7 +317,7 @@ var ThirdPartySignInAndUpCallbackTheme = /** @class */ (function (_super) { "div", genericComponentOverrideContext.__assign( { "data-supertokens": "spinner" }, - { children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) } + { children: jsxRuntime.jsx(sessionprebuiltui.SpinnerIcon, {}) } ) ), } @@ -329,7 +331,7 @@ var ThirdPartySignInAndUpCallbackTheme = /** @class */ (function (_super) { } return ThirdPartySignInAndUpCallbackTheme; })(React.PureComponent); -var SignInAndUpCallbackThemeWithOverride = uiEntry.withOverride( +var SignInAndUpCallbackThemeWithOverride = sessionprebuiltui.withOverride( "ThirdPartySignInAndUpCallbackTheme", ThirdPartySignInAndUpCallbackTheme ); @@ -346,7 +348,7 @@ var SignInAndUpCallbackTheme = function (props) { var defaultTranslationsThirdParty = { en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), { THIRD_PARTY_PROVIDER_DEFAULT_BTN_START: "Continue with ", THIRD_PARTY_PROVIDER_DEFAULT_BTN_END: "", @@ -371,7 +373,7 @@ var defaultTranslationsThirdParty = { }; var SignInAndUpCallback$1 = function (props) { - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); if (props.userContext !== undefined) { userContext = props.userContext; } @@ -639,12 +641,12 @@ var SignInAndUpCallback$1 = function (props) { genericComponentOverrideContext.useOnMountAPICall(verifyCode, handleVerifyResponse, handleError); var recipeComponentOverrides = props.useComponentOverrides(); return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -699,7 +701,7 @@ var ThirdPartyPreBuiltUI = /** @class */ (function (_super) { } if (componentName === "signinupcallback") { return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -785,7 +787,7 @@ var ThirdPartyPreBuiltUI = /** @class */ (function (_super) { }; ThirdPartyPreBuiltUI.SignInAndUpCallbackTheme = SignInAndUpCallbackTheme; return ThirdPartyPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var SignInAndUpCallback = ThirdPartyPreBuiltUI.SignInAndUpCallback; exports.SignInAndUpCallback = SignInAndUpCallback; diff --git a/lib/build/totpprebuiltui.js b/lib/build/totpprebuiltui.js index 52dda6640..2ff07ea24 100644 --- a/lib/build/totpprebuiltui.js +++ b/lib/build/totpprebuiltui.js @@ -3,7 +3,7 @@ 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 sessionprebuiltui = require("./index2.js"); var session = require("./session.js"); var recipe = require("./totp-shared.js"); var React = require("react"); @@ -11,8 +11,6 @@ var windowHandler = require("supertokens-web-js/utils/windowHandler"); var recipe$1 = 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-shared5.js"); var STGeneralError = require("supertokens-web-js/utils/error"); require("supertokens-web-js"); @@ -29,7 +27,6 @@ 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"); @@ -71,7 +68,7 @@ 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\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: -moz-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~="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'; + '[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\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: -moz-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~="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, @@ -215,7 +212,7 @@ var TOTPBlockedScreen = function (props) { }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))", }), t("TOTP_MFA_LOGOUT"), @@ -231,7 +228,7 @@ var TOTPBlockedScreen = function (props) { ) ); }; -var BlockedScreen = uiEntry.withOverride("TOTPBlockedScreen", TOTPBlockedScreen); +var BlockedScreen = sessionprebuiltui.withOverride("TOTPBlockedScreen", TOTPBlockedScreen); var TOTPLoadingScreen = function () { return jsxRuntime.jsx( @@ -248,7 +245,7 @@ var TOTPLoadingScreen = function () { "div", genericComponentOverrideContext.__assign( { "data-supertokens": "spinner delayedRender" }, - { children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) } + { children: jsxRuntime.jsx(sessionprebuiltui.SpinnerIcon, {}) } ) ), } @@ -258,11 +255,11 @@ var TOTPLoadingScreen = function () { ) ); }; -var LoadingScreen = uiEntry.withOverride("TOTPLoadingScreen", TOTPLoadingScreen); +var LoadingScreen = sessionprebuiltui.withOverride("TOTPLoadingScreen", TOTPLoadingScreen); -var CodeForm = uiEntry.withOverride("TOTPCodeForm", function TOTPCodeForm(props) { +var CodeForm = sessionprebuiltui.withOverride("TOTPCodeForm", function TOTPCodeForm(props) { var _this = this; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); return jsxRuntime.jsx(React__namespace.default.Fragment, { children: jsxRuntime.jsx(formBase.FormBase, { formDataSupertokens: "totp-mfa codeForm", @@ -344,7 +341,7 @@ var CodeForm = uiEntry.withOverride("TOTPCodeForm", function TOTPCodeForm(props) }); }); -var CodeVerificationFooter = uiEntry.withOverride( +var CodeVerificationFooter = sessionprebuiltui.withOverride( "TOTPCodeVerificationFooter", function TOTPCodeVerificationFooter(_a) { var onSignOutClicked = _a.onSignOutClicked; @@ -363,7 +360,7 @@ var CodeVerificationFooter = uiEntry.withOverride( }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))", }), t("TOTP_MFA_LOGOUT"), @@ -377,7 +374,7 @@ var CodeVerificationFooter = uiEntry.withOverride( } ); -var CodeVerificationHeader = uiEntry.withOverride( +var CodeVerificationHeader = sessionprebuiltui.withOverride( "TOTPCodeVerificationHeader", function TOTPCodeVerificationHeader(props) { var t = translationContext.useTranslation(); @@ -390,7 +387,9 @@ var CodeVerificationHeader = uiEntry.withOverride( { children: [ props.showBackButton - ? jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked }) + ? jsxRuntime.jsx(sessionprebuiltui.BackButton, { + onClick: props.onBackButtonClicked, + }) : jsxRuntime.jsx("span", { "data-supertokens": "backButtonPlaceholder backButtonCommon", }), @@ -3339,7 +3338,7 @@ QRCode.defaultProps = defaultProps; var _default = (lib.default = QRCode); -var DeviceInfoSection = uiEntry.withOverride("TOTPDeviceInfoSection", function TOTPDeviceInfoSection(props) { +var DeviceInfoSection = sessionprebuiltui.withOverride("TOTPDeviceInfoSection", function TOTPDeviceInfoSection(props) { var t = translationContext.useTranslation(); return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ @@ -3394,7 +3393,7 @@ var DeviceInfoSection = uiEntry.withOverride("TOTPDeviceInfoSection", function T }); }); -var DeviceSetupFooter = uiEntry.withOverride("TOTPDeviceSetupFooter", function TOTPDeviceSetupFooter(_a) { +var DeviceSetupFooter = sessionprebuiltui.withOverride("TOTPDeviceSetupFooter", function TOTPDeviceSetupFooter(_a) { var onSignOutClicked = _a.onSignOutClicked; var t = translationContext.useTranslation(); return jsxRuntime.jsx( @@ -3408,7 +3407,7 @@ var DeviceSetupFooter = uiEntry.withOverride("TOTPDeviceSetupFooter", function T { "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", onClick: onSignOutClicked }, { children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + jsxRuntime.jsx(sessionprebuiltui.ArrowLeftIcon, { color: "rgb(var(--palette-textPrimary))", }), t("TOTP_MFA_LOGOUT"), @@ -3421,7 +3420,7 @@ var DeviceSetupFooter = uiEntry.withOverride("TOTPDeviceSetupFooter", function T ); }); -var DeviceSetupHeader = uiEntry.withOverride("TOTPDeviceSetupHeader", function TOTPDeviceSetupHeader(props) { +var DeviceSetupHeader = sessionprebuiltui.withOverride("TOTPDeviceSetupHeader", function TOTPDeviceSetupHeader(props) { var t = translationContext.useTranslation(); return jsxRuntime.jsxs(React.Fragment, { children: [ @@ -3432,7 +3431,7 @@ var DeviceSetupHeader = uiEntry.withOverride("TOTPDeviceSetupHeader", function T { children: [ props.showBackButton - ? jsxRuntime.jsx(uiEntry.BackButton, { onClick: props.onBackButtonClicked }) + ? jsxRuntime.jsx(sessionprebuiltui.BackButton, { onClick: props.onBackButtonClicked }) : jsxRuntime.jsx("span", { "data-supertokens": "backButtonPlaceholder backButtonCommon", }), @@ -3531,7 +3530,7 @@ var TOTPMFATheme = function (_a) { }) ), featureState.error !== undefined && - jsxRuntime.jsx(uiEntry.GeneralError, { + jsxRuntime.jsx(sessionprebuiltui.GeneralError, { error: getErrorString(featureState.error, featureState, t), }), jsxRuntime.jsx( @@ -3563,7 +3562,7 @@ var TOTPMFATheme = function (_a) { } ) ), - jsxRuntime.jsx(uiEntry.SuperTokensBranding, {}), + jsxRuntime.jsx(sessionprebuiltui.SuperTokensBranding, {}), ], } ) @@ -3583,7 +3582,7 @@ function TOTPMFAThemeWrapper(props) { activeStyle = props.config.totpMFAScreen.verificationScreenStyle; } return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -3631,7 +3630,7 @@ function getErrorString(error, state, t) { var defaultTranslationsTOTP = { en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en), + genericComponentOverrideContext.__assign({}, sessionprebuiltui.defaultTranslationsCommon.en), { TOTP_SHOW_SECRET_START: "Unable to scan? Use a", TOTP_SHOW_SECRET_LINK: "secret key", @@ -3959,7 +3958,7 @@ function useChildProps(recipe, recipeImplementation, state, dispatch, userContex _a.sent(); return [ 4 /*yield*/, - uiEntry.redirectToAuth({ redirectBack: false, navigate: navigate }), + sessionprebuiltui.redirectToAuth({ redirectBack: false, navigate: navigate }), ]; case 4: _a.sent(); @@ -3992,7 +3991,7 @@ var SignInUpFeature = function (props) { var _a = useFeatureReducer(), state = _a[0], dispatch = _a[1]; - var userContext = uiEntry.useUserContext(); + var userContext = sessionprebuiltui.useUserContext(); var recipeImplementation = React__namespace.useMemo( function () { return getModifiedRecipeImplementation(props.recipe.webJSRecipe, dispatch); @@ -4002,12 +4001,12 @@ var SignInUpFeature = function (props) { var childProps = useChildProps(props.recipe, recipeImplementation, state, dispatch, userContext, props.navigate); useOnLoad(recipeImplementation, dispatch, props.navigate, userContext); return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, + sessionprebuiltui.ComponentOverrideContext.Provider, genericComponentOverrideContext.__assign( { value: recipeComponentOverrides }, { children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, + sessionprebuiltui.FeatureWrapper, genericComponentOverrideContext.__assign( { useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom, @@ -4204,7 +4203,7 @@ var TOTPPreBuiltUI = /** @class */ (function (_super) { useComponentOverrides = recipe.useContext; } return jsxRuntime.jsx( - uiEntry.UserContextWrapper, + sessionprebuiltui.UserContextWrapper, genericComponentOverrideContext.__assign( { userContext: props.userContext }, { @@ -4276,7 +4275,7 @@ var TOTPPreBuiltUI = /** @class */ (function (_super) { }; TOTPPreBuiltUI.MFATOTPTheme = TOTPMFAThemeWrapper; return TOTPPreBuiltUI; -})(uiEntry.RecipeRouter); +})(sessionprebuiltui.RecipeRouter); var MFATOTP = TOTPPreBuiltUI.MFATOTP; exports.MFATOTP = MFATOTP; diff --git a/lib/build/translation/translations.d.ts b/lib/build/translation/translations.d.ts index 24274f854..8921cc85a 100644 --- a/lib/build/translation/translations.d.ts +++ b/lib/build/translation/translations.d.ts @@ -15,6 +15,8 @@ export declare const defaultTranslationsCommon: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/ui-entry.js b/lib/build/ui-entry.js index c91525c6e..c9361a560 100644 --- a/lib/build/ui-entry.js +++ b/lib/build/ui-entry.js @@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); require("./genericComponentOverrideContext.js"); require("react/jsx-runtime"); require("react"); -var uiEntry = require("./index2.js"); +var sessionprebuiltui = require("./index2.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); @@ -28,13 +28,13 @@ require("supertokens-web-js/recipe/oauth2provider"); require("./authRecipe-shared.js"); require("supertokens-web-js/lib/build/normalisedURLPath"); -exports.AuthPage = uiEntry.AuthPage; -exports.AuthPageComponentList = uiEntry.AuthPageComponentList; -exports.AuthPageFooter = uiEntry.AuthPageFooter; -exports.AuthPageHeader = uiEntry.AuthPageHeader; -exports.AuthPageTheme = uiEntry.AuthPageTheme; -exports.AuthRecipeComponentsOverrideContextProvider = uiEntry.Provider; -exports.canHandleRoute = uiEntry.canHandleRoute; -exports.default = uiEntry.UI; -exports.getRoutingComponent = uiEntry.getRoutingComponent; -exports.getSuperTokensRoutesForReactRouterDom = uiEntry.getSuperTokensRoutesForReactRouterDom; +exports.AuthPage = sessionprebuiltui.AuthPage; +exports.AuthPageComponentList = sessionprebuiltui.AuthPageComponentList; +exports.AuthPageFooter = sessionprebuiltui.AuthPageFooter; +exports.AuthPageHeader = sessionprebuiltui.AuthPageHeader; +exports.AuthPageTheme = sessionprebuiltui.AuthPageTheme; +exports.AuthRecipeComponentsOverrideContextProvider = sessionprebuiltui.Provider$1; +exports.canHandleRoute = sessionprebuiltui.canHandleRoute; +exports.default = sessionprebuiltui.UI; +exports.getRoutingComponent = sessionprebuiltui.getRoutingComponent; +exports.getSuperTokensRoutesForReactRouterDom = sessionprebuiltui.getSuperTokensRoutesForReactRouterDom; diff --git a/lib/ts/components/featureWrapper.tsx b/lib/ts/components/featureWrapper.tsx index 7561424a8..49df88747 100644 --- a/lib/ts/components/featureWrapper.tsx +++ b/lib/ts/components/featureWrapper.tsx @@ -27,7 +27,7 @@ import Multitenancy from "../recipe/multitenancy/recipe"; import SuperTokens from "../superTokens"; import { TranslationContextProvider } from "../translation/translationContext"; import { useUserContext } from "../usercontext"; -import { mergeObjects, useRethrowInRender } from "../utils"; +import { mergeObjects } from "../utils"; import type { GetLoginMethodsResponseNormalized } from "../recipe/multitenancy/types"; import type { TranslationStore } from "../translation/translationHelpers"; @@ -44,25 +44,27 @@ export default function FeatureWrapper({ defaultStore, }: PropsWithChildren): JSX.Element | null { const userContext = useUserContext(); - const rethrowInRender = useRethrowInRender(); + const [hasError, setHasError] = useState(false); const [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] = useState< GetLoginMethodsResponseNormalized | undefined >(undefined); const st = SuperTokens.getInstanceOrThrow(); useEffect(() => { - if (loadedDynamicLoginMethods) { + if (hasError || loadedDynamicLoginMethods) { return; } Multitenancy.getInstanceOrThrow() .getCurrentDynamicLoginMethods({ userContext }) .then( (loginMethods) => setLoadedDynamicLoginMethods(loginMethods), - (err) => rethrowInRender(err) + (err) => { + setHasError(err); + } ); - }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods]); + }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, hasError]); - if (SuperTokens.usesDynamicLoginMethods && !loadedDynamicLoginMethods) { + if (SuperTokens.usesDynamicLoginMethods && !loadedDynamicLoginMethods && !hasError) { return ; } diff --git a/lib/ts/components/routingComponent.tsx b/lib/ts/components/routingComponent.tsx index f3c49e897..fa466db73 100644 --- a/lib/ts/components/routingComponent.tsx +++ b/lib/ts/components/routingComponent.tsx @@ -6,8 +6,9 @@ import AuthPageWrapper from "../recipe/authRecipe/components/feature/authPage/au import DynamicLoginMethodsSpinner from "../recipe/multitenancy/components/features/dynamicLoginMethodsSpinner"; import Multitenancy from "../recipe/multitenancy/recipe"; import { RecipeRouter } from "../recipe/recipeRouter"; +import { AccessDeniedScreen } from "../recipe/session/prebuiltui"; import SuperTokens from "../superTokens"; -import { useRethrowInRender } from "../utils"; +import { defaultTranslationsCommon } from "../translation/translations"; import type { GetLoginMethodsResponseNormalized } from "../recipe/multitenancy/types"; import type { ReactRouterDomWithCustomHistory } from "../ui/types"; @@ -18,10 +19,10 @@ export function RoutingComponent(props: { path: string; }): JSX.Element | null { const userContext = useUserContext(); - const rethrowInRender = useRethrowInRender(); const [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] = useState< GetLoginMethodsResponseNormalized | undefined >(undefined); + const [errMsg, setErrMsg] = useState(""); const navigate = props.getReactRouterDomWithCustomHistory()?.useHistoryCustom(); const path = props.path; const isAuthPage = path === SuperTokens.getInstanceOrThrow().appInfo.websiteBasePath.getAsStringDangerous(); @@ -53,16 +54,27 @@ export function RoutingComponent(props: { }, [path, location, loadedDynamicLoginMethods, props.preBuiltUIList]); useEffect(() => { - if (loadedDynamicLoginMethods) { + // Don't make the API call if we already have an error or the methods + if (errMsg || loadedDynamicLoginMethods) { return; } Multitenancy.getInstanceOrThrow() .getCurrentDynamicLoginMethods({ userContext }) .then( (loginMethods) => setLoadedDynamicLoginMethods(loginMethods), - (err) => rethrowInRender(err) + (err) => { + let message = `${defaultTranslationsCommon.en.TENANT_LOGIN_METHODS_ERROR}: ${err.message}`; + if (err.status === 500) { + message = defaultTranslationsCommon.en.AUTH_PAGE_TENTANT_ERROR; + } + setErrMsg(message); + } ); - }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods]); + }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, errMsg]); + + if (errMsg) { + return ; + } if (isAuthPage) { return ( diff --git a/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx b/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx index 6ce5705c2..aa31993aa 100644 --- a/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx +++ b/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx @@ -172,7 +172,8 @@ const AuthPageInner: React.FC = (props) => { .getCurrentDynamicLoginMethods({ userContext }) .then( (loginMethods) => setLoadedDynamicLoginMethods(loginMethods), - (err) => rethrowInRender(err) + // eslint-disable-next-line @typescript-eslint/no-empty-function + () => {} ); }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods]); diff --git a/lib/ts/translation/translations.ts b/lib/ts/translation/translations.ts index 424897019..9502b034a 100644 --- a/lib/ts/translation/translations.ts +++ b/lib/ts/translation/translations.ts @@ -19,6 +19,9 @@ export const defaultTranslationsCommon = { AUTH_PAGE_FOOTER_PP: "Privacy Policy", AUTH_PAGE_FOOTER_END: "", + AUTH_PAGE_TENTANT_ERROR: "Tenant not found", + TENANT_LOGIN_METHODS_ERROR: "Unable to load tenant configuration", + DIVIDER_OR: "or", BRANDING_POWERED_BY_START: "Powered by ", diff --git a/package-lock.json b/package-lock.json index 994915e4b..155f94c1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23900,8 +23900,8 @@ }, "node_modules/supertokens-website": { "version": "20.1.5", - "resolved": "git+ssh://git@github.com/supertokens/supertokens-website.git#20c203d8341c5511a1e807991cd00c272e1797bf", - "license": "Apache-2.0", + "resolved": "https://registry.npmjs.org/supertokens-website/-/supertokens-website-20.1.5.tgz", + "integrity": "sha512-2yN42BvHY41/pNIFdJTKSRW3sWZzfOY607i6cY+WWjHSAx7ppMgujyk8tKj+fiQ4MLWCk3HL6QsXZl0zLV4yEw==", "peer": true, "dependencies": { "browser-tabs-lock": "^1.3.0", @@ -43380,8 +43380,9 @@ } }, "supertokens-website": { - "version": "git+ssh://git@github.com/supertokens/supertokens-website.git#20c203d8341c5511a1e807991cd00c272e1797bf", - "from": "supertokens-website@^20.1.5", + "version": "20.1.5", + "resolved": "https://registry.npmjs.org/supertokens-website/-/supertokens-website-20.1.5.tgz", + "integrity": "sha512-2yN42BvHY41/pNIFdJTKSRW3sWZzfOY607i6cY+WWjHSAx7ppMgujyk8tKj+fiQ4MLWCk3HL6QsXZl0zLV4yEw==", "peer": true, "requires": { "browser-tabs-lock": "^1.3.0", From d1c7f297f2acbdc9d3e88e8a3052f4f6fc83bf7b Mon Sep 17 00:00:00 2001 From: Ahielan Date: Mon, 20 Jan 2025 13:42:08 +0530 Subject: [PATCH 2/2] Addressed the review comments 1. Added a comment explaining why we are ignoring the exception in authpage. 2. Added proper translation function to construct these messages 3. Explicitly made this a boolean in featureWrapper 4. Default value set to undefined over empty string. --- lib/build/index2.js | 31 +++++++++---------- .../components/themes/translations.d.ts | 2 ++ .../components/themes/translations.d.ts | 2 ++ .../components/themes/translations.d.ts | 2 ++ .../components/themes/translations.d.ts | 2 ++ .../components/themes/translations.d.ts | 2 ++ .../components/themes/translations.d.ts | 2 ++ .../components/themes/translations.d.ts | 2 ++ .../totp/components/themes/translations.d.ts | 2 ++ lib/ts/components/featureWrapper.tsx | 4 +-- lib/ts/components/routingComponent.tsx | 15 ++++----- .../components/feature/authPage/authPage.tsx | 9 +++--- 12 files changed, 45 insertions(+), 30 deletions(-) diff --git a/lib/build/index2.js b/lib/build/index2.js index 9ebefcc92..1b94c3c03 100644 --- a/lib/build/index2.js +++ b/lib/build/index2.js @@ -250,8 +250,8 @@ function FeatureWrapper(_a) { function (loginMethods) { return setLoadedDynamicLoginMethods(loginMethods); }, - function (err) { - setHasError(err); + function () { + setHasError(true); } ); }, @@ -962,13 +962,12 @@ var AuthPageInner = function (props) { } genericComponentOverrideContext.Multitenancy.getInstanceOrThrow() .getCurrentDynamicLoginMethods({ userContext: userContext }) - .then( - function (loginMethods) { - return setLoadedDynamicLoginMethods(loginMethods); - }, - // eslint-disable-next-line @typescript-eslint/no-empty-function - function () {} - ); + .then(function (loginMethods) { + return setLoadedDynamicLoginMethods(loginMethods); + }) + // Error is handled by routingComponet which shows the AccessDeniedScreen + // eslint-disable-next-line @typescript-eslint/no-empty-function + .catch(function () {}); }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] ); @@ -2236,10 +2235,11 @@ var AccessDeniedScreen = SessionPreBuiltUI.AccessDeniedScreen; function RoutingComponent(props) { var _a, _b; var userContext = useUserContext(); + var t = translationContext.useTranslation(); var _c = React.useState(undefined), loadedDynamicLoginMethods = _c[0], setLoadedDynamicLoginMethods = _c[1]; - var _d = React.useState(""), + var _d = React.useState(undefined), errMsg = _d[0], setErrMsg = _d[1]; var navigate = @@ -2286,7 +2286,7 @@ function RoutingComponent(props) { React.useEffect( function () { // Don't make the API call if we already have an error or the methods - if (errMsg || loadedDynamicLoginMethods) { + if (errMsg !== undefined || loadedDynamicLoginMethods) { return; } genericComponentOverrideContext.Multitenancy.getInstanceOrThrow() @@ -2296,11 +2296,10 @@ function RoutingComponent(props) { return setLoadedDynamicLoginMethods(loginMethods); }, function (err) { - var message = "" - .concat(defaultTranslationsCommon.en.TENANT_LOGIN_METHODS_ERROR, ": ") - .concat(err.message); + var translatedMessage = t("TENANT_LOGIN_METHODS_ERROR"); + var message = "".concat(translatedMessage, ": ").concat(err.message); if (err.status === 500) { - message = defaultTranslationsCommon.en.AUTH_PAGE_TENTANT_ERROR; + message = t("AUTH_PAGE_TENTANT_ERROR"); } setErrMsg(message); } @@ -2308,7 +2307,7 @@ function RoutingComponent(props) { }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, errMsg] ); - if (errMsg) { + if (errMsg !== undefined) { return jsxRuntime.jsx(AccessDeniedScreen, { error: errMsg }); } if (isAuthPage) { diff --git a/lib/build/recipe/emailpassword/components/themes/translations.d.ts b/lib/build/recipe/emailpassword/components/themes/translations.d.ts index ec431cb0f..07992dfd1 100644 --- a/lib/build/recipe/emailpassword/components/themes/translations.d.ts +++ b/lib/build/recipe/emailpassword/components/themes/translations.d.ts @@ -86,6 +86,8 @@ export declare const defaultTranslationsEmailPassword: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/emailverification/components/themes/translations.d.ts b/lib/build/recipe/emailverification/components/themes/translations.d.ts index 357f1f004..8ed180844 100644 --- a/lib/build/recipe/emailverification/components/themes/translations.d.ts +++ b/lib/build/recipe/emailverification/components/themes/translations.d.ts @@ -31,6 +31,8 @@ export declare const defaultTranslationsEmailVerification: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/multifactorauth/components/themes/translations.d.ts b/lib/build/recipe/multifactorauth/components/themes/translations.d.ts index b26ba3b86..f5a9bbe92 100644 --- a/lib/build/recipe/multifactorauth/components/themes/translations.d.ts +++ b/lib/build/recipe/multifactorauth/components/themes/translations.d.ts @@ -25,6 +25,8 @@ export declare const defaultTranslationsMultiFactorAuth: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/oauth2provider/components/themes/translations.d.ts b/lib/build/recipe/oauth2provider/components/themes/translations.d.ts index f5122e036..914ed9d46 100644 --- a/lib/build/recipe/oauth2provider/components/themes/translations.d.ts +++ b/lib/build/recipe/oauth2provider/components/themes/translations.d.ts @@ -18,6 +18,8 @@ export declare const defaultTranslationsOAuth2Provider: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/passwordless/components/themes/translations.d.ts b/lib/build/recipe/passwordless/components/themes/translations.d.ts index d1ddad9ec..a89c773d0 100644 --- a/lib/build/recipe/passwordless/components/themes/translations.d.ts +++ b/lib/build/recipe/passwordless/components/themes/translations.d.ts @@ -70,6 +70,8 @@ export declare const defaultTranslationsPasswordless: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/session/components/themes/translations.d.ts b/lib/build/recipe/session/components/themes/translations.d.ts index ba13878f9..efc3878d3 100644 --- a/lib/build/recipe/session/components/themes/translations.d.ts +++ b/lib/build/recipe/session/components/themes/translations.d.ts @@ -18,6 +18,8 @@ export declare const defaultTranslationsSession: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/thirdparty/components/themes/translations.d.ts b/lib/build/recipe/thirdparty/components/themes/translations.d.ts index 426312d4d..6f09705e5 100644 --- a/lib/build/recipe/thirdparty/components/themes/translations.d.ts +++ b/lib/build/recipe/thirdparty/components/themes/translations.d.ts @@ -25,6 +25,8 @@ export declare const defaultTranslationsThirdParty: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/build/recipe/totp/components/themes/translations.d.ts b/lib/build/recipe/totp/components/themes/translations.d.ts index 34fbb59e6..f5d85f12f 100644 --- a/lib/build/recipe/totp/components/themes/translations.d.ts +++ b/lib/build/recipe/totp/components/themes/translations.d.ts @@ -37,6 +37,8 @@ export declare const defaultTranslationsTOTP: { AUTH_PAGE_FOOTER_AND: string; AUTH_PAGE_FOOTER_PP: string; AUTH_PAGE_FOOTER_END: string; + AUTH_PAGE_TENTANT_ERROR: string; + TENANT_LOGIN_METHODS_ERROR: string; DIVIDER_OR: string; BRANDING_POWERED_BY_START: string; BRANDING_POWERED_BY_END: string; diff --git a/lib/ts/components/featureWrapper.tsx b/lib/ts/components/featureWrapper.tsx index 49df88747..71e3aa467 100644 --- a/lib/ts/components/featureWrapper.tsx +++ b/lib/ts/components/featureWrapper.tsx @@ -58,8 +58,8 @@ export default function FeatureWrapper({ .getCurrentDynamicLoginMethods({ userContext }) .then( (loginMethods) => setLoadedDynamicLoginMethods(loginMethods), - (err) => { - setHasError(err); + () => { + setHasError(true); } ); }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, hasError]); diff --git a/lib/ts/components/routingComponent.tsx b/lib/ts/components/routingComponent.tsx index fa466db73..683ab35b5 100644 --- a/lib/ts/components/routingComponent.tsx +++ b/lib/ts/components/routingComponent.tsx @@ -1,14 +1,13 @@ import React, { useEffect, useState } from "react"; import NormalisedURLPath from "supertokens-web-js/utils/normalisedURLPath"; -import { redirectToAuth, useUserContext } from ".."; +import { redirectToAuth, useTranslation, useUserContext } from ".."; import AuthPageWrapper from "../recipe/authRecipe/components/feature/authPage/authPage"; import DynamicLoginMethodsSpinner from "../recipe/multitenancy/components/features/dynamicLoginMethodsSpinner"; import Multitenancy from "../recipe/multitenancy/recipe"; import { RecipeRouter } from "../recipe/recipeRouter"; import { AccessDeniedScreen } from "../recipe/session/prebuiltui"; import SuperTokens from "../superTokens"; -import { defaultTranslationsCommon } from "../translation/translations"; import type { GetLoginMethodsResponseNormalized } from "../recipe/multitenancy/types"; import type { ReactRouterDomWithCustomHistory } from "../ui/types"; @@ -19,10 +18,11 @@ export function RoutingComponent(props: { path: string; }): JSX.Element | null { const userContext = useUserContext(); + const t = useTranslation(); const [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods] = useState< GetLoginMethodsResponseNormalized | undefined >(undefined); - const [errMsg, setErrMsg] = useState(""); + const [errMsg, setErrMsg] = useState(undefined); const navigate = props.getReactRouterDomWithCustomHistory()?.useHistoryCustom(); const path = props.path; const isAuthPage = path === SuperTokens.getInstanceOrThrow().appInfo.websiteBasePath.getAsStringDangerous(); @@ -55,7 +55,7 @@ export function RoutingComponent(props: { useEffect(() => { // Don't make the API call if we already have an error or the methods - if (errMsg || loadedDynamicLoginMethods) { + if (errMsg !== undefined || loadedDynamicLoginMethods) { return; } Multitenancy.getInstanceOrThrow() @@ -63,16 +63,17 @@ export function RoutingComponent(props: { .then( (loginMethods) => setLoadedDynamicLoginMethods(loginMethods), (err) => { - let message = `${defaultTranslationsCommon.en.TENANT_LOGIN_METHODS_ERROR}: ${err.message}`; + const translatedMessage = t("TENANT_LOGIN_METHODS_ERROR"); + let message = `${translatedMessage}: ${err.message}`; if (err.status === 500) { - message = defaultTranslationsCommon.en.AUTH_PAGE_TENTANT_ERROR; + message = t("AUTH_PAGE_TENTANT_ERROR"); } setErrMsg(message); } ); }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods, errMsg]); - if (errMsg) { + if (errMsg !== undefined) { return ; } diff --git a/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx b/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx index aa31993aa..94322a75e 100644 --- a/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx +++ b/lib/ts/recipe/authRecipe/components/feature/authPage/authPage.tsx @@ -170,11 +170,10 @@ const AuthPageInner: React.FC = (props) => { } Multitenancy.getInstanceOrThrow() .getCurrentDynamicLoginMethods({ userContext }) - .then( - (loginMethods) => setLoadedDynamicLoginMethods(loginMethods), - // eslint-disable-next-line @typescript-eslint/no-empty-function - () => {} - ); + .then((loginMethods) => setLoadedDynamicLoginMethods(loginMethods)) + // Error is handled by routingComponet which shows the AccessDeniedScreen + // eslint-disable-next-line @typescript-eslint/no-empty-function + .catch(() => {}); }, [loadedDynamicLoginMethods, setLoadedDynamicLoginMethods]); useOnMountAPICall(