From be04faa05cdc71d34c39d95be4bab61421dde041 Mon Sep 17 00:00:00 2001 From: Mihaly Lengyel Date: Thu, 16 Nov 2023 00:45:05 +0100 Subject: [PATCH] feat: update design --- lib/build/components/assets/totpIcon.d.ts | 2 + lib/build/otpEmailIcon.js | 47 ---------------- lib/build/passwordless-shared2.js | 44 ++++++++++++++- lib/build/passwordless.js | 1 - lib/build/passwordlessprebuiltui.js | 1 - .../components/themes/mfa/blockedScreen.d.ts | 1 + lib/build/thirdpartypasswordless.js | 1 - lib/build/thirdpartypasswordlessprebuiltui.js | 1 - lib/build/totp-shared.js | 54 ++++++++++++++++++- lib/build/totp.js | 1 - lib/build/totpprebuiltui.js | 52 +++++++++++------- lib/ts/components/assets/totpIcon.tsx | 32 +++++++++++ .../components/themes/mfa/blockedScreen.tsx | 11 +++- .../totp/components/themes/mfa/index.tsx | 8 ++- .../components/themes/mfa/loadingScreen.tsx | 2 +- .../themes/mfa/totpCodeVerificationFooter.tsx | 6 +-- .../themes/mfa/totpDeviceSetupFooter.tsx | 6 +-- .../recipe/totp/components/themes/styles.css | 18 +++---- .../totp/components/themes/themeBase.tsx | 2 +- .../totp/components/themes/translations.ts | 2 +- lib/ts/recipe/totp/recipe.tsx | 4 +- 21 files changed, 195 insertions(+), 101 deletions(-) create mode 100644 lib/build/components/assets/totpIcon.d.ts delete mode 100644 lib/build/otpEmailIcon.js create mode 100644 lib/ts/components/assets/totpIcon.tsx diff --git a/lib/build/components/assets/totpIcon.d.ts b/lib/build/components/assets/totpIcon.d.ts new file mode 100644 index 000000000..8f2bba229 --- /dev/null +++ b/lib/build/components/assets/totpIcon.d.ts @@ -0,0 +1,2 @@ +/// +export declare const TOTPIcon: () => JSX.Element; diff --git a/lib/build/otpEmailIcon.js b/lib/build/otpEmailIcon.js deleted file mode 100644 index 3fad80c2e..000000000 --- a/lib/build/otpEmailIcon.js +++ /dev/null @@ -1,47 +0,0 @@ -"use strict"; - -var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); -var jsxRuntime = require("react/jsx-runtime"); - -var OTPEmailIcon = function () { - return jsxRuntime.jsxs( - "svg", - genericComponentOverrideContext.__assign( - { width: "17", height: "15", viewBox: "0 0 17 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, - { - children: [ - jsxRuntime.jsx("path", { - id: "image 414 (Traced)", - "fill-rule": "evenodd", - "clip-rule": "evenodd", - d: "M2.01513 0.0546421C1.19571 0.195435 0.393224 0.877322 0.143564 1.64496C0.0564841 1.9127 -0.00197242 1.84636 0.659082 2.22993C0.91105 2.37612 1.64082 2.80042 2.28084 3.17276C2.92086 3.54514 3.96809 4.1544 4.60811 4.52674C5.24813 4.89905 6.37321 5.55428 7.10833 5.98278C7.84346 6.41131 8.46401 6.7689 8.48736 6.77743C8.52111 6.78982 10.4367 5.69077 12.6253 4.40341C12.7865 4.30852 13.8173 3.70613 14.9159 3.06475L16.9133 1.89856L16.903 1.78079C16.8974 1.71603 16.8178 1.51568 16.7262 1.3356C16.3776 0.650318 15.6775 0.156143 14.8905 0.039982C14.4716 -0.0218423 2.38016 -0.00809191 2.01513 0.0546421ZM6.60933e-06 6.62054C0.000739608 10.251 -0.00834948 10.1158 0.27063 10.655C0.659815 11.4073 1.39721 11.8833 2.30408 11.9675C2.77169 12.0109 14.2345 12.0108 14.7024 11.9673C15.3604 11.9062 15.8152 11.7008 16.2911 11.2498C16.5236 11.0295 16.619 10.9066 16.7395 10.6725C17.0173 10.133 17.0065 10.3025 16.996 6.65494L16.9866 3.40211L15.8322 4.07294C15.1972 4.44186 13.9767 5.15156 13.1201 5.65004C11.2459 6.74049 10.2603 7.31342 9.46206 7.77628C8.76656 8.17962 8.59368 8.23389 8.2745 8.14908C8.14446 8.11454 7.64668 7.84559 6.81451 7.36034C4.15032 5.80665 0.097862 3.44588 0.0268711 3.40617C0.0117346 3.39774 -0.00032324 4.84419 6.60933e-06 6.62054Z", - fill: "url(#paint0_linear_4445_310)", - }), - jsxRuntime.jsx("defs", { - children: jsxRuntime.jsxs( - "linearGradient", - genericComponentOverrideContext.__assign( - { - id: "paint0_linear_4445_310", - x1: "8.5", - y1: "0", - x2: "8.5", - y2: "12", - gradientUnits: "userSpaceOnUse", - }, - { - children: [ - jsxRuntime.jsx("stop", { "stop-color": "#5FACFF" }), - jsxRuntime.jsx("stop", { offset: "1", "stop-color": "#1686FF" }), - ], - } - ) - ), - }), - ], - } - ) - ); -}; - -exports.OTPEmailIcon = OTPEmailIcon; diff --git a/lib/build/passwordless-shared2.js b/lib/build/passwordless-shared2.js index f561af1b1..6ffef4082 100644 --- a/lib/build/passwordless-shared2.js +++ b/lib/build/passwordless-shared2.js @@ -3,7 +3,6 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); var PasswordlessWebJS = require("supertokens-web-js/recipe/passwordless"); var postSuperTokensInitCallbacks = require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); -var otpEmailIcon = require("./otpEmailIcon.js"); var jsxRuntime = require("react/jsx-runtime"); var utils = require("./authRecipe-shared.js"); var recipe = require("./multifactorauth-shared.js"); @@ -15,6 +14,47 @@ function _interopDefault(e) { var PasswordlessWebJS__default = /*#__PURE__*/ _interopDefault(PasswordlessWebJS); +var OTPEmailIcon = function () { + return jsxRuntime.jsxs( + "svg", + genericComponentOverrideContext.__assign( + { width: "17", height: "15", viewBox: "0 0 17 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, + { + children: [ + jsxRuntime.jsx("path", { + id: "image 414 (Traced)", + "fill-rule": "evenodd", + "clip-rule": "evenodd", + d: "M2.01513 0.0546421C1.19571 0.195435 0.393224 0.877322 0.143564 1.64496C0.0564841 1.9127 -0.00197242 1.84636 0.659082 2.22993C0.91105 2.37612 1.64082 2.80042 2.28084 3.17276C2.92086 3.54514 3.96809 4.1544 4.60811 4.52674C5.24813 4.89905 6.37321 5.55428 7.10833 5.98278C7.84346 6.41131 8.46401 6.7689 8.48736 6.77743C8.52111 6.78982 10.4367 5.69077 12.6253 4.40341C12.7865 4.30852 13.8173 3.70613 14.9159 3.06475L16.9133 1.89856L16.903 1.78079C16.8974 1.71603 16.8178 1.51568 16.7262 1.3356C16.3776 0.650318 15.6775 0.156143 14.8905 0.039982C14.4716 -0.0218423 2.38016 -0.00809191 2.01513 0.0546421ZM6.60933e-06 6.62054C0.000739608 10.251 -0.00834948 10.1158 0.27063 10.655C0.659815 11.4073 1.39721 11.8833 2.30408 11.9675C2.77169 12.0109 14.2345 12.0108 14.7024 11.9673C15.3604 11.9062 15.8152 11.7008 16.2911 11.2498C16.5236 11.0295 16.619 10.9066 16.7395 10.6725C17.0173 10.133 17.0065 10.3025 16.996 6.65494L16.9866 3.40211L15.8322 4.07294C15.1972 4.44186 13.9767 5.15156 13.1201 5.65004C11.2459 6.74049 10.2603 7.31342 9.46206 7.77628C8.76656 8.17962 8.59368 8.23389 8.2745 8.14908C8.14446 8.11454 7.64668 7.84559 6.81451 7.36034C4.15032 5.80665 0.097862 3.44588 0.0268711 3.40617C0.0117346 3.39774 -0.00032324 4.84419 6.60933e-06 6.62054Z", + fill: "url(#paint0_linear_4445_310)", + }), + jsxRuntime.jsx("defs", { + children: jsxRuntime.jsxs( + "linearGradient", + genericComponentOverrideContext.__assign( + { + id: "paint0_linear_4445_310", + x1: "8.5", + y1: "0", + x2: "8.5", + y2: "12", + gradientUnits: "userSpaceOnUse", + }, + { + children: [ + jsxRuntime.jsx("stop", { "stop-color": "#5FACFF" }), + jsxRuntime.jsx("stop", { offset: "1", "stop-color": "#1686FF" }), + ], + } + ) + ), + }), + ], + } + ) + ); +}; + var OTPSMSIcon = function () { return jsxRuntime.jsxs( "svg", @@ -340,7 +380,7 @@ var otpEmailFactor = { name: "Email based OTP", description: "Get an OTP code on your email address to complete the authentication request", path: "/mfa/otp-email", - logo: otpEmailIcon.OTPEmailIcon, + logo: OTPEmailIcon, }; var passwordlessFactors = ["otp-phone", "otp-email", "link-phone", "link-email"]; var Passwordless = /** @class */ (function (_super) { diff --git a/lib/build/passwordless.js b/lib/build/passwordless.js index 03beb6c3e..8ce80efe8 100644 --- a/lib/build/passwordless.js +++ b/lib/build/passwordless.js @@ -16,7 +16,6 @@ require("supertokens-web-js/utils/normalisedURLDomain"); require("supertokens-web-js/utils/normalisedURLPath"); require("react/jsx-runtime"); require("supertokens-web-js/recipe/passwordless"); -require("./otpEmailIcon.js"); require("./authRecipe-shared.js"); require("./recipeModule-shared.js"); require("./session-shared2.js"); diff --git a/lib/build/passwordlessprebuiltui.js b/lib/build/passwordlessprebuiltui.js index 92334bd67..f12826f2d 100644 --- a/lib/build/passwordlessprebuiltui.js +++ b/lib/build/passwordlessprebuiltui.js @@ -42,7 +42,6 @@ require("./emailpassword-shared6.js"); require("./multifactorauth-shared2.js"); require("./emailpassword-shared8.js"); require("supertokens-web-js/recipe/passwordless"); -require("./otpEmailIcon.js"); require("./authRecipe-shared.js"); exports.LinkClicked = passwordlessprebuiltui.LinkClicked; diff --git a/lib/build/recipe/totp/components/themes/mfa/blockedScreen.d.ts b/lib/build/recipe/totp/components/themes/mfa/blockedScreen.d.ts index feb3680e8..e2c2c6ca2 100644 --- a/lib/build/recipe/totp/components/themes/mfa/blockedScreen.d.ts +++ b/lib/build/recipe/totp/components/themes/mfa/blockedScreen.d.ts @@ -3,6 +3,7 @@ export declare const BlockedScreen: import("react").ComponentType< { nextRetryAt: number; onRetry: () => void; + onSignOutClicked: () => void; } & { children?: import("react").ReactNode; } diff --git a/lib/build/thirdpartypasswordless.js b/lib/build/thirdpartypasswordless.js index b1804d060..58a2e894f 100644 --- a/lib/build/thirdpartypasswordless.js +++ b/lib/build/thirdpartypasswordless.js @@ -26,7 +26,6 @@ require("supertokens-web-js/lib/build/normalisedURLPath"); require("supertokens-web-js/recipe/thirdpartypasswordless"); require("./passwordless-shared2.js"); require("supertokens-web-js/recipe/passwordless"); -require("./otpEmailIcon.js"); require("./multifactorauth-shared.js"); require("supertokens-web-js/recipe/multifactorauth"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); diff --git a/lib/build/thirdpartypasswordlessprebuiltui.js b/lib/build/thirdpartypasswordlessprebuiltui.js index 99de32ffe..18d55201a 100644 --- a/lib/build/thirdpartypasswordlessprebuiltui.js +++ b/lib/build/thirdpartypasswordlessprebuiltui.js @@ -49,7 +49,6 @@ require("supertokens-web-js/recipe/thirdpartypasswordless"); require("supertokens-web-js/recipe/multifactorauth"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); require("supertokens-web-js/recipe/passwordless"); -require("./otpEmailIcon.js"); function _interopDefault(e) { return e && e.__esModule ? e : { default: e }; diff --git a/lib/build/totp-shared.js b/lib/build/totp-shared.js index 4e75b1efe..4ce9b039e 100644 --- a/lib/build/totp-shared.js +++ b/lib/build/totp-shared.js @@ -4,7 +4,7 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext var TOTPWebJS = require("supertokens-web-js/recipe/totp"); var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath"); var postSuperTokensInitCallbacks = require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); -var otpEmailIcon = require("./otpEmailIcon.js"); +var jsxRuntime = require("react/jsx-runtime"); var recipe = require("./multifactorauth-shared.js"); var index = require("./recipeModule-shared.js"); var recipe$1 = require("./session-shared2.js"); @@ -20,6 +20,56 @@ var _a = genericComponentOverrideContext.createGenericComponentsOverrideContext( useContext = _a[0], Provider = _a[1]; +var TOTPIcon = function () { + return jsxRuntime.jsxs( + "svg", + genericComponentOverrideContext.__assign( + { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "23", viewBox: "0 4 22 23", fill: "none" }, + { + children: [ + jsxRuntime.jsx("path", { + d: "M7.56428 15.8664L5.26639 18.1643C5.11403 18.3167 4.90738 18.4023 4.69192 18.4023C4.47645 18.4023 4.2698 18.3167 4.11744 18.1643C3.96508 18.012 3.87949 17.8053 3.87949 17.5898C3.87949 17.3744 3.96508 17.1677 4.11744 17.0154L6.41533 14.7175C6.56769 14.5651 6.77434 14.4795 6.98981 14.4795C7.20528 14.4795 7.41192 14.5651 7.56428 14.7175C7.71664 14.8698 7.80224 15.0765 7.80224 15.292C7.80224 15.5074 7.71664 15.7141 7.56428 15.8664Z", + fill: "#73B6FF", + }), + jsxRuntime.jsx("path", { + d: "M5.17026 13.4675L1.72342 16.9143C1.57106 17.0667 1.36442 17.1523 1.14895 17.1523C0.933477 17.1523 0.726833 17.0667 0.574473 16.9143C0.422113 16.762 0.336519 16.5553 0.336519 16.3398C0.336519 16.1244 0.422113 15.9177 0.574473 15.7654L4.02131 12.3185C4.17367 12.1662 4.38032 12.0806 4.59579 12.0806C4.81125 12.0806 5.0179 12.1662 5.17026 12.3185C5.32262 12.4709 5.40821 12.6775 5.40821 12.893C5.40821 13.1085 5.32262 13.3151 5.17026 13.4675Z", + fill: "#73B6FF", + }), + jsxRuntime.jsx("path", { + d: "M10.0492 18.1315L6.60233 21.5784C6.44997 21.7307 6.24332 21.8163 6.02785 21.8163C5.81238 21.8163 5.60574 21.7307 5.45338 21.5784C5.30102 21.426 5.21542 21.2194 5.21542 21.0039C5.21542 20.7884 5.30102 20.5818 5.45338 20.4294L8.90022 16.9826C9.05258 16.8302 9.25922 16.7446 9.47469 16.7446C9.69016 16.7446 9.89681 16.8302 10.0492 16.9826C10.2015 17.135 10.2871 17.3416 10.2871 17.5571C10.2871 17.7725 10.2015 17.9792 10.0492 18.1315Z", + fill: "#73B6FF", + }), + jsxRuntime.jsx("path", { + d: "M16.935 4.28797L4.96211 8.24925C4.38349 8.47179 4.29448 9.27295 4.87309 9.49549L8.96789 11.3649L14.8876 7.13653L10.6592 13.0562L12.5286 17.151C12.7956 17.6851 13.5523 17.6406 13.7303 17.0175L17.6916 5.04462C17.8696 4.59953 17.4246 4.15444 16.935 4.28797Z", + fill: "url(#paint0_linear_3828_8733)", + }), + jsxRuntime.jsx("defs", { + children: jsxRuntime.jsxs( + "linearGradient", + genericComponentOverrideContext.__assign( + { + id: "paint0_linear_3828_8733", + x1: "16.9576", + y1: "4.56946", + x2: "9.50502", + y2: "12.0221", + gradientUnits: "userSpaceOnUse", + }, + { + children: [ + jsxRuntime.jsx("stop", { stopColor: "#5FABFF" }), + jsxRuntime.jsx("stop", { offset: "1", stopColor: "#1485FF" }), + ], + } + ) + ), + }), + ], + } + ) + ); +}; + /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * * This software is licensed under the Apache License, Version 2.0 (the @@ -111,7 +161,7 @@ var totpFactor = { name: "TOTP", description: "Use an authenticator app to complete the authentication request", path: "/mfa/totp", - logo: otpEmailIcon.OTPEmailIcon, + logo: TOTPIcon, }; var TOTP = /** @class */ (function (_super) { genericComponentOverrideContext.__extends(TOTP, _super); diff --git a/lib/build/totp.js b/lib/build/totp.js index fe8c511ff..41bb21540 100644 --- a/lib/build/totp.js +++ b/lib/build/totp.js @@ -15,7 +15,6 @@ require("supertokens-web-js/utils/normalisedURLDomain"); require("supertokens-web-js/utils/normalisedURLPath"); require("react/jsx-runtime"); require("supertokens-web-js/recipe/totp"); -require("./otpEmailIcon.js"); require("./multifactorauth-shared.js"); require("supertokens-web-js/recipe/multifactorauth"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); diff --git a/lib/build/totpprebuiltui.js b/lib/build/totpprebuiltui.js index d8258f08d..4f28e1afd 100644 --- a/lib/build/totpprebuiltui.js +++ b/lib/build/totpprebuiltui.js @@ -16,10 +16,10 @@ var translations = require("./translations.js"); var translationContext = require("./translationContext.js"); var generalError = require("./emailpassword-shared.js"); var sessionprebuiltui = require("./sessionprebuiltui.js"); +var arrowLeftIcon = require("./arrowLeftIcon.js"); var formBase = require("./emailpassword-shared9.js"); var STGeneralError = require("supertokens-web-js/utils/error"); var validators = require("./passwordless-shared3.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); var backButton = require("./emailpassword-shared8.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); @@ -32,7 +32,6 @@ require("./multitenancy-shared.js"); require("supertokens-web-js/recipe/session"); require("./session-shared3.js"); require("supertokens-web-js/recipe/totp"); -require("./otpEmailIcon.js"); require("./recipeModule-shared.js"); require("supertokens-web-js/recipe/multifactorauth"); require("supertokens-web-js/utils/sessionClaimValidatorStore"); @@ -74,7 +73,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: 255, 155, 51;\n --palette-primaryBorder: 238, 141, 35;\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: 34, 34, 34;\n --palette-textLabel: 34, 34, 34;\n --palette-textInput: 34, 34, 34;\n --palette-textPrimary: 101, 101, 101;\n --palette-textLink: 0, 118, 255;\n --palette-buttonText: 255, 255, 255;\n --palette-textGray: 128, 128, 128;\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}\n/*\n * Default styles.\n */\n@-webkit-keyframes slideTop {\n 0% {\n -webkit-transform: translateY(-5px);\n transform: translateY(-5px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slideTop {\n 0% {\n -webkit-transform: translateY(-5px);\n transform: translateY(-5px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@-webkit-keyframes swing-in-top-fwd {\n 0% {\n -webkit-transform: rotateX(-100deg);\n transform: rotateX(-100deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n -webkit-transform: rotateX(0deg);\n transform: rotateX(0deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 1;\n }\n}\n@keyframes swing-in-top-fwd {\n 0% {\n -webkit-transform: rotateX(-100deg);\n transform: rotateX(-100deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n -webkit-transform: rotateX(0deg);\n transform: rotateX(0deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 1;\n }\n}\n[data-supertokens~="container"] {\n font-family: "Rubik", 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: 0 auto;\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: 15px;\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 -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\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: 40px;\n letter-spacing: 0.58px;\n font-weight: 600;\n margin-bottom: 2px;\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n margin-bottom: 21px;\n}\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\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-1);\n font-weight: 500;\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: 300;\n letter-spacing: 0.4px;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="divider"] {\n margin-top: 1em;\n margin-bottom: 1em;\n border-bottom: 0.3px solid #dddddd;\n align-items: center;\n padding-bottom: 5px;\n}\n[data-supertokens~="headerTinyTitle"] {\n margin-top: 13px;\n font-size: var(--font-size-3);\n letter-spacing: 1.1px;\n font-weight: 500;\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 -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\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: "Rubik", sans-serif;\n background-color: transparent;\n border: 0;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"] {\n font-weight: 500;\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: "Rubik", sans-serif;\n background-color: rgb(var(--palette-primary));\n color: rgb(var(--palette-buttonText));\n width: 100%;\n height: 34px;\n font-weight: 700;\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 -webkit-filter: brightness(0.85);\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 -webkit-animation-duration: 0.1s;\n animation-duration: 0.1s;\n -webkit-animation-name: animate-fade;\n animation-name: animate-fade;\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n}\n@-webkit-keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 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: 500;\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/* 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 -webkit-filter: none;\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~="forgotPasswordLink"] {\n margin-top: 10px;\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 -webkit-animation: slideTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\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: 600;\n font-size: var(--font-size-1);\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: 34px;\n}\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\n[data-supertokens~="headerTinyTitle"] {\n margin-top: 13px;\n font-size: var(--font-size-3);\n letter-spacing: 1.1px;\n font-weight: 500;\n line-height: 28px;\n}\n[data-supertokens~="sendVerifyEmailText"] {\n line-height: 21px;\n font-size: var(--font-size-1);\n text-align: center;\n font-weight: 300;\n letter-spacing: 0.8px;\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~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 300;\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~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n[data-supertokens~="container"] {\n padding-top: 24px;\n}\n[data-supertokens~="divider"] {\n margin-top: 32px;\n margin-bottom: 32px;\n}\n[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: 100px;\n max-height: 100px;\n}\n[data-supertokens~="showTOTPSecret"] {\n display: block;\n color: rgb(var(--palette-textSecondary));\n font-size: var(--font-size-0);\n margin: 4px;\n}\n[data-supertokens~="totpSecret"] {\n display: block;\n border-radius: 6px;\n padding: 12px;\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}\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: 255, 155, 51;\n --palette-primaryBorder: 238, 141, 35;\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: 34, 34, 34;\n --palette-textLabel: 34, 34, 34;\n --palette-textInput: 34, 34, 34;\n --palette-textPrimary: 101, 101, 101;\n --palette-textLink: 0, 118, 255;\n --palette-buttonText: 255, 255, 255;\n --palette-textGray: 128, 128, 128;\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}\n/*\n * Default styles.\n */\n@-webkit-keyframes slideTop {\n 0% {\n -webkit-transform: translateY(-5px);\n transform: translateY(-5px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@keyframes slideTop {\n 0% {\n -webkit-transform: translateY(-5px);\n transform: translateY(-5px);\n }\n 100% {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n }\n}\n@-webkit-keyframes swing-in-top-fwd {\n 0% {\n -webkit-transform: rotateX(-100deg);\n transform: rotateX(-100deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n -webkit-transform: rotateX(0deg);\n transform: rotateX(0deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 1;\n }\n}\n@keyframes swing-in-top-fwd {\n 0% {\n -webkit-transform: rotateX(-100deg);\n transform: rotateX(-100deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 0;\n }\n 100% {\n -webkit-transform: rotateX(0deg);\n transform: rotateX(0deg);\n -webkit-transform-origin: top;\n transform-origin: top;\n opacity: 1;\n }\n}\n[data-supertokens~="container"] {\n font-family: "Rubik", 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: 0 auto;\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: 15px;\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 -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\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: 40px;\n letter-spacing: 0.58px;\n font-weight: 600;\n margin-bottom: 2px;\n color: rgb(var(--palette-textTitle));\n}\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n margin-bottom: 21px;\n}\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\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-1);\n font-weight: 500;\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: 300;\n letter-spacing: 0.4px;\n color: rgb(var(--palette-textPrimary));\n}\n[data-supertokens~="divider"] {\n margin-top: 1em;\n margin-bottom: 1em;\n border-bottom: 0.3px solid #dddddd;\n align-items: center;\n padding-bottom: 5px;\n}\n[data-supertokens~="headerTinyTitle"] {\n margin-top: 13px;\n font-size: var(--font-size-3);\n letter-spacing: 1.1px;\n font-weight: 500;\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 -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\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: "Rubik", sans-serif;\n background-color: transparent;\n border: 0;\n}\n[data-supertokens~="secondaryLinkWithLeftArrow"] {\n font-weight: 500;\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: "Rubik", sans-serif;\n background-color: rgb(var(--palette-primary));\n color: rgb(var(--palette-buttonText));\n width: 100%;\n height: 34px;\n font-weight: 700;\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 -webkit-filter: brightness(0.85);\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 -webkit-animation-duration: 0.1s;\n animation-duration: 0.1s;\n -webkit-animation-name: animate-fade;\n animation-name: animate-fade;\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n}\n@-webkit-keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 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: 500;\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/* 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 -webkit-filter: none;\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~="forgotPasswordLink"] {\n margin-top: 10px;\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 -webkit-animation: slideTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\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: 600;\n font-size: var(--font-size-1);\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: 34px;\n}\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\n[data-supertokens~="headerTinyTitle"] {\n margin-top: 13px;\n font-size: var(--font-size-3);\n letter-spacing: 1.1px;\n font-weight: 500;\n line-height: 28px;\n}\n[data-supertokens~="sendVerifyEmailText"] {\n line-height: 21px;\n font-size: var(--font-size-1);\n text-align: center;\n font-weight: 300;\n letter-spacing: 0.8px;\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~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 300;\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~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\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: 4px;\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}\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, @@ -85,7 +84,7 @@ var ThemeBase = function (_a) { children, loadDefaultFont && jsxRuntime.jsx("link", { - href: "//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700", + href: "//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700", rel: "stylesheet", type: "text/css", }), @@ -185,7 +184,7 @@ var TOTPBlockedScreen = function (props) { return jsxRuntime.jsx( "div", genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, + { "data-supertokens": "container totp" }, { children: jsxRuntime.jsxs( "div", @@ -219,6 +218,23 @@ var TOTPBlockedScreen = function (props) { }, "form-button" ), + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { + "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", + onClick: props.onSignOutClicked, + }, + { + children: [ + jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { + color: "rgb(var(--palette-textPrimary))", + }), + t("TOTP_MFA_LOGOUT"), + ], + } + ) + ), ], } ) @@ -233,7 +249,7 @@ var TOTPLoadingScreen = function () { return jsxRuntime.jsx( "div", genericComponentOverrideContext.__assign( - { "data-supertokens": "container delayedRender" }, + { "data-supertokens": "container delayedRender totp" }, { children: jsxRuntime.jsx( "div", @@ -349,7 +365,7 @@ var CodeVerificationFooter = uiEntry.withOverride( return jsxRuntime.jsxs( "div", genericComponentOverrideContext.__assign( - { "data-supertokens": "footerLinkGroup totpMFAVerificationFooter" }, + { "data-supertokens": "footerLinkGroupVert totpMFAVerificationFooter" }, { children: [ claim.loading === false && @@ -360,10 +376,7 @@ var CodeVerificationFooter = uiEntry.withOverride( jsxRuntime.jsx( "div", genericComponentOverrideContext.__assign( - { - "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", - onClick: onFactorChooserButtonClicked, - }, + { "data-supertokens": "secondaryText", onClick: onFactorChooserButtonClicked }, { children: t("TOTP_MFA_FOOTER_CHOOSER_ANOTHER") } ) ), @@ -3417,7 +3430,7 @@ var DeviceSetupFooter = uiEntry.withOverride("TOTPDeviceSetupFooter", function T return jsxRuntime.jsxs( "div", genericComponentOverrideContext.__assign( - { "data-supertokens": "footerLinkGroup totpMFASetupFooter" }, + { "data-supertokens": "footerLinkGroupVert totpMFASetupFooter" }, { children: [ claim.loading === false && @@ -3428,10 +3441,7 @@ var DeviceSetupFooter = uiEntry.withOverride("TOTPDeviceSetupFooter", function T jsxRuntime.jsx( "div", genericComponentOverrideContext.__assign( - { - "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", - onClick: onFactorChooserButtonClicked, - }, + { "data-supertokens": "secondaryText", onClick: onFactorChooserButtonClicked }, { children: t("TOTP_MFA_FOOTER_CHOOSER_ANOTHER") } ) ), @@ -3519,7 +3529,11 @@ var SignInUpTheme = function (_a) { }, }; return activeScreen === TOTPMFAScreens.Blocked - ? jsxRuntime.jsx(BlockedScreen, { nextRetryAt: featureState.nextRetryAt, onRetry: props.onRetryClicked }) + ? jsxRuntime.jsx(BlockedScreen, { + nextRetryAt: featureState.nextRetryAt, + onRetry: props.onRetryClicked, + onSignOutClicked: props.onSignOutClicked, + }) : activeScreen === TOTPMFAScreens.AccessDenied ? jsxRuntime.jsx(sessionprebuiltui.AccessDeniedScreen, { error: t(featureState.error), useShadowDom: false }) : activeScreen === TOTPMFAScreens.Loading @@ -3527,7 +3541,7 @@ var SignInUpTheme = function (_a) { : jsxRuntime.jsxs( "div", genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, + { "data-supertokens": "container totp" }, { children: [ jsxRuntime.jsx( @@ -3676,7 +3690,7 @@ var defaultTranslationsTOTP = { en: genericComponentOverrideContext.__assign( genericComponentOverrideContext.__assign({}, translations.defaultTranslationsCommon.en), { - TOTP_SHOW_SECRET_START: "Unable to scan? Use a secret key", + TOTP_SHOW_SECRET_START: "Unable to scan? Use a", TOTP_SHOW_SECRET_LINK: "secret key", TOTP_SHOW_SECRET_END: "", TOTP_CODE_VERIFICATION_HEADER_TITLE: "Enter TOTP", diff --git a/lib/ts/components/assets/totpIcon.tsx b/lib/ts/components/assets/totpIcon.tsx new file mode 100644 index 000000000..dc3d8d6b4 --- /dev/null +++ b/lib/ts/components/assets/totpIcon.tsx @@ -0,0 +1,32 @@ +export const TOTPIcon = () => ( + + + + + + + + + + + + +); diff --git a/lib/ts/recipe/totp/components/themes/mfa/blockedScreen.tsx b/lib/ts/recipe/totp/components/themes/mfa/blockedScreen.tsx index 86ffab026..c8f0de8bc 100644 --- a/lib/ts/recipe/totp/components/themes/mfa/blockedScreen.tsx +++ b/lib/ts/recipe/totp/components/themes/mfa/blockedScreen.tsx @@ -12,6 +12,7 @@ * License for the specific language governing permissions and limitations * under the License. */ +import ArrowLeftIcon from "../../../../../components/assets/arrowLeftIcon"; import { BlockedIcon } from "../../../../../components/assets/blockedIcon"; import { withOverride } from "../../../../../components/componentOverride/withOverride"; import { useTranslation } from "../../../../../translation/translationContext"; @@ -19,11 +20,13 @@ import { FormRow } from "../../../../emailpassword/components/library"; import { RetryButton } from "./retryButton"; -const TOTPBlockedScreen: React.FC<{ nextRetryAt: number; onRetry: () => void }> = (props) => { +const TOTPBlockedScreen: React.FC<{ nextRetryAt: number; onRetry: () => void; onSignOutClicked: () => void }> = ( + props +) => { const t = useTranslation(); return ( -
+
{t("TOTP_BLOCKED_TITLE")}
@@ -32,6 +35,10 @@ const TOTPBlockedScreen: React.FC<{ nextRetryAt: number; onRetry: () => void }> +
+ + {t("TOTP_MFA_LOGOUT")} +
); diff --git a/lib/ts/recipe/totp/components/themes/mfa/index.tsx b/lib/ts/recipe/totp/components/themes/mfa/index.tsx index e727213e9..320249060 100644 --- a/lib/ts/recipe/totp/components/themes/mfa/index.tsx +++ b/lib/ts/recipe/totp/components/themes/mfa/index.tsx @@ -63,13 +63,17 @@ const SignInUpTheme: React.FC = }; return activeScreen === TOTPMFAScreens.Blocked ? ( - + ) : activeScreen === TOTPMFAScreens.AccessDenied ? ( ) : activeScreen === TOTPMFAScreens.Loading ? ( ) : ( -
+
{featureState.loaded && ( diff --git a/lib/ts/recipe/totp/components/themes/mfa/loadingScreen.tsx b/lib/ts/recipe/totp/components/themes/mfa/loadingScreen.tsx index bb59d8ad9..2d28928fd 100644 --- a/lib/ts/recipe/totp/components/themes/mfa/loadingScreen.tsx +++ b/lib/ts/recipe/totp/components/themes/mfa/loadingScreen.tsx @@ -17,7 +17,7 @@ import { withOverride } from "../../../../../components/componentOverride/withOv const TOTPLoadingScreen: React.FC = () => { return ( -
+
diff --git a/lib/ts/recipe/totp/components/themes/mfa/totpCodeVerificationFooter.tsx b/lib/ts/recipe/totp/components/themes/mfa/totpCodeVerificationFooter.tsx index 0aa42b761..a32b23c28 100644 --- a/lib/ts/recipe/totp/components/themes/mfa/totpCodeVerificationFooter.tsx +++ b/lib/ts/recipe/totp/components/themes/mfa/totpCodeVerificationFooter.tsx @@ -30,11 +30,9 @@ export const CodeVerificationFooter = withOverride( const t = useTranslation(); return ( -
+
{claim.loading === false && (claim.value?.n.length ?? 0) > 1 && ( -
+
{t("TOTP_MFA_FOOTER_CHOOSER_ANOTHER")}
)} diff --git a/lib/ts/recipe/totp/components/themes/mfa/totpDeviceSetupFooter.tsx b/lib/ts/recipe/totp/components/themes/mfa/totpDeviceSetupFooter.tsx index bdd7e3903..7b2d71da2 100644 --- a/lib/ts/recipe/totp/components/themes/mfa/totpDeviceSetupFooter.tsx +++ b/lib/ts/recipe/totp/components/themes/mfa/totpDeviceSetupFooter.tsx @@ -34,11 +34,9 @@ export const DeviceSetupFooter = withOverride( const t = useTranslation(); return ( -
+
{claim.loading === false && (claim.value?.n.length ?? 0) > 1 && ( -
+
{t("TOTP_MFA_FOOTER_CHOOSER_ANOTHER")}
)} diff --git a/lib/ts/recipe/totp/components/themes/styles.css b/lib/ts/recipe/totp/components/themes/styles.css index d1ac3be0f..17d7ec16d 100644 --- a/lib/ts/recipe/totp/components/themes/styles.css +++ b/lib/ts/recipe/totp/components/themes/styles.css @@ -1,16 +1,16 @@ @import "../../../../styles/styles.css"; @import "../../../emailpassword/components/themes/styles.css"; -[data-supertokens~="container"] { +[data-supertokens~="totp"] [data-supertokens~="container"] { padding-top: 24px; } -[data-supertokens~="divider"] { - margin-top: 32px; - margin-bottom: 32px; +[data-supertokens~="totp"] [data-supertokens~="divider"] { + margin-top: 20px; + margin-bottom: 20px; } -[data-supertokens~="row"] { +[data-supertokens~="totp"] [data-supertokens~="row"] { padding-top: 16px; padding-bottom: 8px; width: auto; @@ -21,13 +21,13 @@ border-radius: 12px; border: 1px solid rgb(var(--palette-inputBorder)); padding: 16px; - max-width: 100px; - max-height: 100px; + max-width: 172px; + max-height: 172px; } [data-supertokens~="showTOTPSecret"] { display: block; - color: rgb(var(--palette-textSecondary)); + color: rgb(var(--palette-textGray)); font-size: var(--font-size-0); margin: 4px; } @@ -35,7 +35,7 @@ [data-supertokens~="totpSecret"] { display: block; border-radius: 6px; - padding: 12px; + padding: 7px 15px; color: rgb(var(--palette-textLink)); font-size: var(--font-size-1); font-weight: 600; diff --git a/lib/ts/recipe/totp/components/themes/themeBase.tsx b/lib/ts/recipe/totp/components/themes/themeBase.tsx index cfdf405a4..4dc8cad23 100644 --- a/lib/ts/recipe/totp/components/themes/themeBase.tsx +++ b/lib/ts/recipe/totp/components/themes/themeBase.tsx @@ -28,7 +28,7 @@ export const ThemeBase: React.FC< {children} {loadDefaultFont && ( )} diff --git a/lib/ts/recipe/totp/components/themes/translations.ts b/lib/ts/recipe/totp/components/themes/translations.ts index 708cbf242..936b249a5 100644 --- a/lib/ts/recipe/totp/components/themes/translations.ts +++ b/lib/ts/recipe/totp/components/themes/translations.ts @@ -3,7 +3,7 @@ import { defaultTranslationsCommon } from "../../../../translation/translations" export const defaultTranslationsTOTP = { en: { ...defaultTranslationsCommon.en, - TOTP_SHOW_SECRET_START: "Unable to scan? Use a secret key", + TOTP_SHOW_SECRET_START: "Unable to scan? Use a", TOTP_SHOW_SECRET_LINK: "secret key", TOTP_SHOW_SECRET_END: "", TOTP_CODE_VERIFICATION_HEADER_TITLE: "Enter TOTP", diff --git a/lib/ts/recipe/totp/recipe.tsx b/lib/ts/recipe/totp/recipe.tsx index 7eccaa929..0973c70cb 100644 --- a/lib/ts/recipe/totp/recipe.tsx +++ b/lib/ts/recipe/totp/recipe.tsx @@ -21,7 +21,7 @@ import TOTPWebJS from "supertokens-web-js/recipe/totp"; import NormalisedURLPath from "supertokens-web-js/utils/normalisedURLPath"; import { PostSuperTokensInitCallbacks } from "supertokens-web-js/utils/postSuperTokensInitCallbacks"; -import { OTPEmailIcon } from "../../components/assets/otpEmailIcon"; +import { TOTPIcon } from "../../components/assets/totpIcon"; import { SSR_ERROR } from "../../constants"; import MultiFactorAuth from "../multifactorauth/recipe"; import RecipeModule from "../recipeModule"; @@ -46,7 +46,7 @@ export const totpFactor = { name: "TOTP", description: "Use an authenticator app to complete the authentication request", path: "/mfa/totp", - logo: OTPEmailIcon, + logo: TOTPIcon, }; export default class TOTP extends RecipeModule<