diff --git a/CHANGELOG.md b/CHANGELOG.md index 3712dbb0c..4f4fa2766 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,7 @@ To use this you'll need compatible versions: - Removed an `ErrorBoundary` wrapping all our feature components to make sure all errors are properly catchable by the app - Added a `footer` prop to `EmailOrPhoneForm`, `EmailForm` and `PhoneForm` which is used to override the default sign in/up footers in case the component is for MFA - The passwordless and thirdpartypasswordless sign in/up screens now respect the first configuration (defined in the `MultiFactorAuth` recipe or in the tenant information) when selecting the available contact methods. +- Added TOTP recipe. For more details please check our guide [here](TODO) - Fixed a font loading issue, that caused apps using the default (Rubik) font to appear with the incorrect font weights - Some default styling has changed related to how fonts/font-weights are applied diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js index 29611c0c3..d6e6e3206 100644 --- a/examples/for-tests/src/App.js +++ b/examples/for-tests/src/App.js @@ -15,6 +15,7 @@ import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyema import ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless"; import UserRoles from "supertokens-auth-react/recipe/userroles"; import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth"; +import TOTP from "supertokens-auth-react/recipe/totp"; import axios from "axios"; import { useSessionContext } from "supertokens-auth-react/recipe/session"; @@ -332,7 +333,100 @@ const customFields = [ const testContext = getTestContext(); +let storedTOTPDevices = window.localStorage.getItem("totpDevices"); +let totpDevices = storedTOTPDevices ? JSON.parse(storedTOTPDevices) : []; + +function removeTOTPDevice(deviceName) { + const origLength = totpDevices.length; + totpDevices = totpDevices.filter((d) => d.deviceName !== deviceName); + window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices)); + return totpDevices.length !== origLength; +} + +function addTOTPDevice(deviceName) { + totpDevices.push({ + deviceName, + verified: false, + }); + window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices)); +} + +function verifyTOTPDevice(deviceName) { + totpDevices = totpDevices.filter((d) => d.deviceName !== deviceName); + totpDevices.push({ + deviceName, + verified: true, + }); + window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices)); +} +let tryCount = 0; + +setInterval(() => (tryCount = tryCount > 0 ? tryCount - 1 : 0), 30000); +window.resetTOTP = () => { + totpDevices = []; + window.localStorage.setItem("totpDevices", JSON.stringify(totpDevices)); + tryCount = 0; +}; let recipeList = [ + TOTP.init({ + override: { + functions: (oI) => ({ + ...oI, + listDevices: async () => ({ devices: totpDevices, status: "OK" }), + removeDevice: async ({ deviceName }) => { + return { status: "OK", didDeviceExist: removeTOTPDevice(deviceName) }; + }, + createDevice: async ({ deviceName }) => { + deviceName = deviceName ?? `totp-${Date.now()}`; + addTOTPDevice(deviceName); + return { + status: "OK", + deviceName: deviceName, + issuerName: "st", + qrCodeString: deviceName, + secret: `secret-${deviceName}`, + }; + }, + verifyCode: async ({ totp }) => { + const dev = totpDevices.find((d) => d.deviceName.endsWith(totp) && d.verified); + if (dev) { + await fetch("http://localhost:8082/completeFactor", { + method: "POST", + body: JSON.stringify({ id: "totp" }), + headers: new Headers([["Content-Type", "application/json"]]), + }); + return { status: "OK" }; + } + + if (++tryCount > 3) { + return { status: "LIMIT_REACHED_ERROR", retryAfterMs: 30000 }; + } + return { status: "INVALID_TOTP_ERROR" }; + }, + verifyDevice: async ({ deviceName, totp }) => { + const dev = totpDevices.find((d) => d.deviceName === deviceName); + if (!dev) { + return { status: "UNKNOWN_DEVICE_ERROR" }; + } + if (deviceName.endsWith(totp)) { + const wasAlreadyVerified = dev.verified; + verifyTOTPDevice(deviceName); + await fetch("http://localhost:8082/completeFactor", { + method: "POST", + body: JSON.stringify({ id: "totp" }), + headers: new Headers([["Content-Type", "application/json"]]), + }); + return { status: "OK", wasAlreadyVerified }; + } + + if (++tryCount > 3) { + return { status: "LIMIT_REACHED_ERROR", retryAfterMs: 30000 }; + } + return { status: "INVALID_TOTP_ERROR" }; + }, + }), + }, + }), MultiFactorAuth.init({ firstFactors: testContext.firstFactors, }), @@ -645,7 +739,13 @@ export function DashboardHelper({ redirectOnLogout, ...props } = {}) {
session context userID: {sessionContext.userId}
{JSON.stringify(sessionContext.invalidClaims, undefined, 2)}
- MultiFactorAuth.redirectToFactorChooser(true, props.history)}>MFA chooser + { + return MultiFactorAuth.redirectToFactorChooser(true, props.history); + }}> + MFA chooser + ); } diff --git a/examples/for-tests/src/AppWithReactDomRouter.js b/examples/for-tests/src/AppWithReactDomRouter.js index 7c007ceb8..76373238a 100644 --- a/examples/for-tests/src/AppWithReactDomRouter.js +++ b/examples/for-tests/src/AppWithReactDomRouter.js @@ -16,6 +16,7 @@ import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/email import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui"; import { AccessDeniedScreen } from "supertokens-auth-react/recipe/session/prebuiltui"; import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui"; +import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui"; import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App"; import { getEnabledRecipes } from "./testContext"; @@ -35,7 +36,7 @@ function AppWithReactDomRouter(props) { const emailVerificationMode = window.localStorage.getItem("mode") || "OFF"; const websiteBasePath = window.localStorage.getItem("websiteBasePath") || undefined; - let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI]; + let recipePreBuiltUIList = [MultiFactorAuthPreBuiltUI, TOTPPreBuiltUI]; if (enabledRecipes.includes("emailpassword")) { recipePreBuiltUIList.push(EmailPasswordPreBuiltUI); } diff --git a/examples/for-tests/src/testContext.js b/examples/for-tests/src/testContext.js index 3851358dd..901c43978 100644 --- a/examples/for-tests/src/testContext.js +++ b/examples/for-tests/src/testContext.js @@ -9,6 +9,7 @@ export function getTestContext() { thirdPartyRedirectURL: localStorage.getItem("thirdPartyRedirectURL"), authRecipe: window.localStorage.getItem("authRecipe") || "emailpassword", usesDynamicLoginMethods: localStorage.getItem("usesDynamicLoginMethods") === "true", + enableAllRecipes: localStorage.getItem("enableAllRecipes") === "true", clientRecipeListForDynamicLogin: localStorage.getItem("clientRecipeListForDynamicLogin"), mockLoginMethodsForDynamicLogin: localStorage.getItem("mockLoginMethodsForDynamicLogin"), staticProviderList: localStorage.getItem("staticProviderList"), @@ -28,18 +29,24 @@ export function getEnabledRecipes() { let enabledRecipes = []; - if (testContext.usesDynamicLoginMethods) { - if (testContext.clientRecipeListForDynamicLogin) { - enabledRecipes = JSON.parse(testContext.clientRecipeListForDynamicLogin); - } else { - enabledRecipes = [ - "emailpassword", - "thirdparty", - "thirdpartyemailpassword", - "passwordless", - "thirdpartypasswordless", - ]; - } + if (testContext.enableAllRecipes) { + enabledRecipes = [ + "emailpassword", + "thirdparty", + "thirdpartyemailpassword", + "passwordless", + "thirdpartypasswordless", + ]; + } else if (testContext.clientRecipeListForDynamicLogin) { + enabledRecipes = JSON.parse(testContext.clientRecipeListForDynamicLogin); + } else if (testContext.usesDynamicLoginMethods) { + enabledRecipes = [ + "emailpassword", + "thirdparty", + "thirdpartyemailpassword", + "passwordless", + "thirdpartypasswordless", + ]; } else { if (testContext.authRecipe === "both") { enabledRecipes.push("emailpassword", "thirdparty"); diff --git a/lib/build/components/assets/blockedIcon.d.ts b/lib/build/components/assets/blockedIcon.d.ts new file mode 100644 index 000000000..1832c8417 --- /dev/null +++ b/lib/build/components/assets/blockedIcon.d.ts @@ -0,0 +1,2 @@ +/// +export declare const BlockedIcon: () => JSX.Element; 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/emailpassword-shared4.js b/lib/build/emailpassword-shared4.js index e2f54ebcc..937af37ee 100644 --- a/lib/build/emailpassword-shared4.js +++ b/lib/build/emailpassword-shared4.js @@ -4,7 +4,8 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext var EmailPasswordWebJS = require("supertokens-web-js/recipe/emailpassword"); var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath"); var utils = require("./authRecipe-shared.js"); -var validators = require("./emailpassword-shared5.js"); +var constants = require("./emailpassword-shared5.js"); +var validators = require("./emailpassword-shared6.js"); function _interopDefault(e) { return e && e.__esModule ? e : { default: e }; @@ -235,7 +236,7 @@ function normaliseSignInFormFeatureConfig(defaultFormFields, config) { userFormFields = config.formFields // Filter on email and password only. .filter(function (field) { - return validators.MANDATORY_FORM_FIELDS_ID_ARRAY.includes(field.id); + return constants.MANDATORY_FORM_FIELDS_ID_ARRAY.includes(field.id); }) // Sign In fields are never optional. .map(function (field) { @@ -345,7 +346,7 @@ function mergeFormFields(defaultFormFields, userFormFields) { optional = userField.optional; } // If "email" or "password", always mandatory. - if (validators.MANDATORY_FORM_FIELDS_ID_ARRAY.includes(userField.id)) { + if (constants.MANDATORY_FORM_FIELDS_ID_ARRAY.includes(userField.id)) { optional = false; } // Merge. @@ -435,7 +436,7 @@ var EmailPassword = /** @class */ (function (_super) { return genericComponentOverrideContext.__generator(this, function (_a) { if (context.action === "RESET_PASSWORD") { resetPasswordPath = new NormalisedURLPath__default.default( - validators.DEFAULT_RESET_PASSWORD_PATH + constants.DEFAULT_RESET_PASSWORD_PATH ); return [ 2 /*return*/, diff --git a/lib/build/emailpassword-shared5.js b/lib/build/emailpassword-shared5.js index 2f2d37441..8b145c4f7 100644 --- a/lib/build/emailpassword-shared5.js +++ b/lib/build/emailpassword-shared5.js @@ -1,7 +1,5 @@ "use strict"; -var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); - /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * * This software is licensed under the Apache License, Version 2.0 (the @@ -19,103 +17,5 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext var MANDATORY_FORM_FIELDS_ID_ARRAY = ["email", "password"]; var DEFAULT_RESET_PASSWORD_PATH = "/reset-password"; -/* 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. - */ -/* - * defaultEmailValidator. - */ -function defaultEmailValidator(value) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - var defaultEmailValidatorRegexp; - return genericComponentOverrideContext.__generator(this, function (_a) { - if (typeof value !== "string") { - return [2 /*return*/, "ERROR_EMAIL_NON_STRING"]; - } - value = value.trim(); - defaultEmailValidatorRegexp = - // eslint-disable-next-line no-useless-escape - /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - // We check if the email syntax is correct - // As per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438 - // Regex from https://stackoverflow.com/a/46181/3867175 - if (value.match(defaultEmailValidatorRegexp) === null) { - return [2 /*return*/, "ERROR_EMAIL_INVALID"]; - } - return [2 /*return*/, undefined]; - }); - }); -} -/* - * defaultPasswordValidator. - * min 8 characters. - * Contains lowercase, uppercase, and numbers. - */ -function defaultPasswordValidator(value) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - if (typeof value !== "string") { - return [2 /*return*/, "ERROR_PASSWORD_NON_STRING"]; - } - // length >= 8 && < 100 - // must have a number and a character - // as per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438 - if (value.length < 8) { - return [2 /*return*/, "ERROR_PASSWORD_TOO_SHORT"]; - } - if (value.length >= 100) { - return [2 /*return*/, "ERROR_PASSWORD_TOO_LONG"]; - } - if (value.match(/^.*[A-Za-z]+.*$/) === null) { - return [2 /*return*/, "ERROR_PASSWORD_NO_ALPHA"]; - } - if (value.match(/^.*[0-9]+.*$/) === null) { - return [2 /*return*/, "ERROR_PASSWORD_NO_NUM"]; - } - return [2 /*return*/, undefined]; - }); - }); -} -/* - * defaultLoginPasswordValidator. - * type string - */ -function defaultLoginPasswordValidator(value) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - if (typeof value !== "string") { - return [2 /*return*/, "ERROR_PASSWORD_NON_STRING"]; - } - return [2 /*return*/, undefined]; - }); - }); -} -/* - * defaultValidate - */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -function defaultValidate(_) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - return [2 /*return*/, undefined]; - }); - }); -} - exports.DEFAULT_RESET_PASSWORD_PATH = DEFAULT_RESET_PASSWORD_PATH; exports.MANDATORY_FORM_FIELDS_ID_ARRAY = MANDATORY_FORM_FIELDS_ID_ARRAY; -exports.defaultEmailValidator = defaultEmailValidator; -exports.defaultLoginPasswordValidator = defaultLoginPasswordValidator; -exports.defaultPasswordValidator = defaultPasswordValidator; -exports.defaultValidate = defaultValidate; diff --git a/lib/build/emailpassword-shared6.js b/lib/build/emailpassword-shared6.js index 2916a01a4..97e3b35d7 100644 --- a/lib/build/emailpassword-shared6.js +++ b/lib/build/emailpassword-shared6.js @@ -1,1514 +1,102 @@ "use strict"; var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); -var jsxRuntime = require("react/jsx-runtime"); -var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath"); -var uiEntry = require("./index2.js"); -var authWidgetWrapper = require("./authRecipe-shared2.js"); -var componentOverrideContext = require("./emailpassword-shared3.js"); -var React = require("react"); -var translations = require("./translations.js"); -var translations$1 = require("./emailverification-shared2.js"); -var translationContext = require("./translationContext.js"); -var backButton = require("./emailpassword-shared7.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); -var formBase = require("./emailpassword-shared8.js"); -var generalError = require("./emailpassword-shared.js"); -var STGeneralError = require("supertokens-web-js/utils/error"); -var button = require("./emailpassword-shared2.js"); -var recipe = require("./session-shared2.js"); -var SuperTokensBranding = require("./SuperTokensBranding.js"); -var STGeneralError$1 = require("supertokens-web-js/lib/build/error"); -var validators = require("./emailpassword-shared5.js"); -var recipe$1 = require("./emailpassword-shared4.js"); -function _interopDefault(e) { - return e && e.__esModule ? e : { default: e }; -} - -function _interopNamespace(e) { - if (e && e.__esModule) return e; - var n = Object.create(null); - if (e) { - Object.keys(e).forEach(function (k) { - if (k !== "default") { - var d = Object.getOwnPropertyDescriptor(e, k); - Object.defineProperty( - n, - k, - d.get - ? d - : { - enumerable: true, - get: function () { - return e[k]; - }, - } - ); - } +/* 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. + */ +/* + * defaultEmailValidator. + */ +function defaultEmailValidator(value) { + return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { + var defaultEmailValidatorRegexp; + return genericComponentOverrideContext.__generator(this, function (_a) { + if (typeof value !== "string") { + return [2 /*return*/, "ERROR_EMAIL_NON_STRING"]; + } + value = value.trim(); + defaultEmailValidatorRegexp = + // eslint-disable-next-line no-useless-escape + /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + // We check if the email syntax is correct + // As per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438 + // Regex from https://stackoverflow.com/a/46181/3867175 + if (value.match(defaultEmailValidatorRegexp) === null) { + return [2 /*return*/, "ERROR_EMAIL_INVALID"]; + } + return [2 /*return*/, undefined]; }); - } - n.default = e; - return Object.freeze(n); + }); } - -var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath); -var React__namespace = /*#__PURE__*/ _interopNamespace(React); -var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError); -var STGeneralError__default$1 = /*#__PURE__*/ _interopDefault(STGeneralError$1); - /* - * Component. + * defaultPasswordValidator. + * min 8 characters. + * Contains lowercase, uppercase, and numbers. */ -function BackToSignInButton(_a) { - var onClick = _a.onClick; - var t = translationContext.useTranslation(); - return jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", onClick: onClick }, - { - children: [ - jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { color: "rgb(var(--palette-secondaryText))" }), - t("EMAIL_PASSWORD_RESET_SIGN_IN_LINK"), - ], +function defaultPasswordValidator(value) { + return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { + return genericComponentOverrideContext.__generator(this, function (_a) { + if (typeof value !== "string") { + return [2 /*return*/, "ERROR_PASSWORD_NON_STRING"]; } - ) - ); -} - -var EmailPasswordResetPasswordEmail = function (props) { - var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); - var _a = React.useState("READY"), - status = _a[0], - setStatus = _a[1]; - var _b = React.useState(""), - emailFieldValue = _b[0], - setEmailFieldValue = _b[1]; - var onSuccess = function () { - setStatus("SENT"); - }; - var resend = function () { - setStatus("READY"); - }; - var formFields = props.formFields; - var emailSuccessText = - t("EMAIL_PASSWORD_RESET_SEND_BEFORE_EMAIL") + - (emailFieldValue !== undefined && emailFieldValue.length > 0 - ? emailFieldValue - : t("EMAIL_PASSWORD_RESET_SEND_FALLBACK_EMAIL")) + - t("EMAIL_PASSWORD_RESET_SEND_AFTER_EMAIL"); - if (status === "SENT") { - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "primaryText enterEmailSuccessMessage" }, - { - children: [ - emailSuccessText, - jsxRuntime.jsx( - "span", - genericComponentOverrideContext.__assign( - { - "data-supertokens": "link resendEmailLink", - onClick: resend, - }, - { children: t("EMAIL_PASSWORD_RESET_RESEND_LINK") } - ) - ), - ], - } - ) - ), - jsxRuntime.jsx(BackToSignInButton, { onClick: props.onBackButtonClicked }), - ], - } - ) - ), - } - ) - ); - } - // Otherwise, return Form. - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle withBackButton" }, - { - children: [ - jsxRuntime.jsx(backButton.BackButton, { - onClick: props.onBackButtonClicked, - }), - t("EMAIL_PASSWORD_RESET_HEADER_TITLE"), - jsxRuntime.jsx("span", { - "data-supertokens": "backButtonPlaceholder backButtonCommon", - }), - ], - } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle" }, - { - children: jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText" }, - { children: t("EMAIL_PASSWORD_RESET_HEADER_SUBTITLE") } - ) - ), - } - ) - ), - props.error !== undefined && - jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), - jsxRuntime.jsx(formBase.FormBase, { - clearError: props.clearError, - onError: props.onError, - formFields: formFields, - buttonLabel: "EMAIL_PASSWORD_RESET_SEND_BTN", - onSuccess: onSuccess, - callAPI: function (formFields) { - return genericComponentOverrideContext.__awaiter( - void 0, - void 0, - void 0, - function () { - var validationErrors, emailField, resp; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [ - 4 /*yield*/, - genericComponentOverrideContext.validateForm( - formFields, - props.config.resetPasswordUsingTokenFeature - .enterEmailForm.formFields - ), - ]; - case 1: - validationErrors = _a.sent(); - if (validationErrors.length > 0) { - return [ - 2 /*return*/, - { - status: "FIELD_ERROR", - formFields: validationErrors, - }, - ]; - } - emailField = formFields.find(function (field) { - return field.id === "email"; - }); - if (emailField !== undefined) { - setEmailFieldValue(emailField.value); - } - return [ - 4 /*yield*/, - props.recipeImplementation.sendPasswordResetEmail({ - formFields: formFields, - userContext: userContext, - }), - ]; - case 2: - resp = _a.sent(); - if (resp.status === "PASSWORD_RESET_NOT_ALLOWED") { - return [ - 2 /*return*/, - { - status: "FIELD_ERROR", - formFields: [ - { id: "email", error: resp.reason }, - ], - }, - ]; - } - return [2 /*return*/, resp]; - } - }); - } - ); - }, - showLabels: true, - validateOnBlur: true, - }), - ], - } - ) - ), + // length >= 8 && < 100 + // must have a number and a character + // as per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438 + if (value.length < 8) { + return [2 /*return*/, "ERROR_PASSWORD_TOO_SHORT"]; } - ) - ); -}; -var ResetPasswordEmail = uiEntry.withOverride("EmailPasswordResetPasswordEmail", EmailPasswordResetPasswordEmail); - -var EmailPasswordSubmitNewPassword = function (props) { - var t = translationContext.useTranslation(); - var userContext = uiEntry.useUserContext(); - var _a = React.useState("READY"), - status = _a[0], - setStatus = _a[1]; - var onSuccess = function () { - setStatus("SUCCESS"); - }; - var formFields = props.formFields, - onSignInClicked = props.onSignInClicked; - if (status === "SUCCESS") { - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_HEADER_TITLE") } - ) - ), - jsxRuntime.jsx( - formBase.FormRow, - { - children: jsxRuntime.jsxs(React.Fragment, { - children: [ - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { - "data-supertokens": - "primaryText submitNewPasswordSuccessMessage", - }, - { - children: t( - "EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_DESC" - ), - } - ) - ), - jsxRuntime.jsx(button.Button, { - disabled: false, - isLoading: false, - type: "button", - onClick: onSignInClicked, - label: "EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_SIGN_IN_BTN", - }), - ], - }), - }, - "form-button" - ), - ], - } - ) - ), - } - ) - ); - } - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_TITLE") } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle" }, - { - children: jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText" }, - { children: t("EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_SUBTITLE") } - ) - ), - } - ) - ), - props.error !== undefined && - jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), - jsxRuntime.jsx(formBase.FormBase, { - formFields: formFields, - clearError: props.clearError, - onError: props.onError, - buttonLabel: "EMAIL_PASSWORD_RESET_SUBMIT_PW_CHANGE_PW_BTN", - onSuccess: onSuccess, - validateOnBlur: true, - callAPI: function (fields) { - return genericComponentOverrideContext.__awaiter( - void 0, - void 0, - void 0, - function () { - var validationErrors, response; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [ - 4 /*yield*/, - genericComponentOverrideContext.validateForm( - fields, - props.config.resetPasswordUsingTokenFeature - .submitNewPasswordForm.formFields - ), - ]; - case 1: - validationErrors = _a.sent(); - if (validationErrors.length > 0) { - return [ - 2 /*return*/, - { - status: "FIELD_ERROR", - formFields: validationErrors, - }, - ]; - } - // Verify that both passwords match. - if (fields[0].value !== fields[1].value) { - return [ - 2 /*return*/, - { - status: "FIELD_ERROR", - formFields: [ - { - id: fields[1].id, - error: "ERROR_CONFIRM_PASSWORD_NO_MATCH", - }, - ], - }, - ]; - } - return [ - 4 /*yield*/, - props.recipeImplementation.submitNewPassword({ - formFields: fields, - userContext: userContext, - }), - ]; - case 2: - response = _a.sent(); - if ( - response.status === "RESET_PASSWORD_INVALID_TOKEN_ERROR" - ) { - throw new STGeneralError__default.default( - "EMAIL_PASSWORD_RESET_PASSWORD_INVALID_TOKEN_ERROR" - ); - } - return [ - 2 /*return*/, - response.status === "FIELD_ERROR" - ? response - : { - status: "OK", - }, - ]; - } - }); - } - ); - }, - showLabels: true, - }), - ], - } - ) - ), + if (value.length >= 100) { + return [2 /*return*/, "ERROR_PASSWORD_TOO_LONG"]; } - ) - ); -}; -var SubmitNewPassword = uiEntry.withOverride("EmailPasswordSubmitNewPassword", EmailPasswordSubmitNewPassword); - -/* - * Component. - */ -function ResetPasswordUsingTokenTheme(props) { - /* - * Render. - */ - // If no token, return SubmitNewPassword. - if (props.submitNewPasswordForm !== undefined) { - return jsxRuntime.jsx( - SubmitNewPassword, - genericComponentOverrideContext.__assign({}, props.submitNewPasswordForm) - ); - } - // Otherwise, return EnterEmail. - return jsxRuntime.jsx(ResetPasswordEmail, genericComponentOverrideContext.__assign({}, props.enterEmailForm)); -} -function ResetPasswordUsingTokenThemeWrapper(props) { - var hasFont = translations.hasFontDefined(props.config.rootStyle); - var userStyles = props.submitNewPasswordForm - ? props.config.resetPasswordUsingTokenFeature.submitNewPasswordForm.style - : props.config.resetPasswordUsingTokenFeature.enterEmailForm.style; - return jsxRuntime.jsx( - uiEntry.UserContextWrapper, - genericComponentOverrideContext.__assign( - { userContext: props.userContext }, - { - children: jsxRuntime.jsx( - translations$1.ThemeBase, - genericComponentOverrideContext.__assign( - { loadDefaultFont: !hasFont, userStyles: [props.config.rootStyle, userStyles] }, - { - children: jsxRuntime.jsx( - ResetPasswordUsingTokenTheme, - genericComponentOverrideContext.__assign({}, props) - ), - } - ) - ), + if (value.match(/^.*[A-Za-z]+.*$/) === null) { + return [2 /*return*/, "ERROR_PASSWORD_NO_ALPHA"]; } - ) - ); -} - -var defaultTranslationsEmailPassword = { - en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, translations.defaultTranslationsCommon.en), - translations$1.defaultTranslationsEmailVerification.en - ), - { - EMAIL_PASSWORD_EMAIL_LABEL: "Email", - EMAIL_PASSWORD_EMAIL_PLACEHOLDER: "Email address", - EMAIL_PASSWORD_PASSWORD_LABEL: "Password", - EMAIL_PASSWORD_PASSWORD_PLACEHOLDER: "Password", - EMAIL_PASSWORD_SIGN_IN_HEADER_TITLE: "Sign In", - EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_START: "Not registered yet?", - EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_SIGN_UP_LINK: "Sign Up", - EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_END: "", - EMAIL_PASSWORD_SIGN_IN_FOOTER_FORGOT_PW_LINK: "Forgot password?", - EMAIL_PASSWORD_SIGN_IN_SUBMIT_BTN: "SIGN IN", - EMAIL_PASSWORD_SIGN_IN_WRONG_CREDENTIALS_ERROR: "Incorrect email and password combination", - EMAIL_PASSWORD_SIGN_UP_HEADER_TITLE: "Sign Up", - EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_START: "Already have an account?", - EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_SIGN_IN_LINK: "Sign In", - EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_END: "", - EMAIL_PASSWORD_SIGN_UP_FOOTER_START: "By continuing, you agree to our ", - EMAIL_PASSWORD_SIGN_UP_FOOTER_TOS: "Terms of Service", - EMAIL_PASSWORD_SIGN_UP_FOOTER_AND: " and ", - EMAIL_PASSWORD_SIGN_UP_FOOTER_PP: "Privacy Policy", - EMAIL_PASSWORD_SIGN_UP_FOOTER_END: "", - EMAIL_PASSWORD_SIGN_UP_SUBMIT_BTN: "SIGN UP", - EMAIL_PASSWORD_EMAIL_ALREADY_EXISTS: "This email already exists. Please sign in instead", - EMAIL_PASSWORD_RESET_HEADER_TITLE: "Reset your password", - EMAIL_PASSWORD_RESET_HEADER_SUBTITLE: "We will send you an email to reset your password", - EMAIL_PASSWORD_RESET_SEND_FALLBACK_EMAIL: "your account", - EMAIL_PASSWORD_RESET_SEND_BEFORE_EMAIL: "A password reset email has been sent to ", - EMAIL_PASSWORD_RESET_SEND_AFTER_EMAIL: ", if it exists in our system. ", - EMAIL_PASSWORD_RESET_RESEND_LINK: "Resend or change email", - EMAIL_PASSWORD_RESET_SEND_BTN: "Email me", - EMAIL_PASSWORD_RESET_SIGN_IN_LINK: "Sign In", - EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_HEADER_TITLE: "Success!", - EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_DESC: "Your password has been updated successfully", - EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_SIGN_IN_BTN: "SIGN IN", - EMAIL_PASSWORD_NEW_PASSWORD_LABEL: "New password", - EMAIL_PASSWORD_NEW_PASSWORD_PLACEHOLDER: "New password", - EMAIL_PASSWORD_CONFIRM_PASSWORD_LABEL: "Confirm password", - EMAIL_PASSWORD_CONFIRM_PASSWORD_PLACEHOLDER: "Confirm your password", - EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_TITLE: "Change your password", - EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_SUBTITLE: "Enter a new password below to change your password", - EMAIL_PASSWORD_RESET_SUBMIT_PW_CHANGE_PW_BTN: "CHANGE PASSWORD", - EMAIL_PASSWORD_RESET_PASSWORD_INVALID_TOKEN_ERROR: "Invalid password reset token", - ERROR_EMAIL_NON_STRING: "Email must be of type string", - ERROR_EMAIL_INVALID: "Email is invalid", - ERROR_PASSWORD_NON_STRING: "Password must be of type string", - ERROR_PASSWORD_TOO_SHORT: "Password must contain at least 8 characters, including a number", - ERROR_PASSWORD_TOO_LONG: "Password's length must be lesser than 100 characters", - ERROR_PASSWORD_NO_ALPHA: "Password must contain at least one alphabet", - ERROR_PASSWORD_NO_NUM: "Password must contain at least one number", - ERROR_CONFIRM_PASSWORD_NO_MATCH: "Confirmation password doesn't match", - ERROR_NON_OPTIONAL: "Field is not optional", - /* - * The following are error messages from our backend SDK. - * These are returned as full messages to preserver compatibilty, but they work just like the keys above. - * They are shown as is by default (setting the value to undefined will display the raw translation key) - */ - "This email already exists. Please sign in instead.": undefined, - "Field is not optional": undefined, - "Password must contain at least 8 characters, including a number": undefined, - "Password's length must be lesser than 100 characters": undefined, - "Password must contain at least one alphabet": undefined, - "Password must contain at least one number": undefined, - "Email is invalid": undefined, - "Reset password link was not created because of account take over risk. Please contact support. (ERR_CODE_001)": - undefined, - "Cannot sign up due to security reasons. Please try logging in, use a different login method or contact support. (ERR_CODE_007)": - undefined, - "Cannot sign in due to security reasons. Please try resetting your password, use a different login method or contact support. (ERR_CODE_008)": - undefined, - } - ), -}; - -var ResetPasswordUsingToken$1 = function (props) { - var token = genericComponentOverrideContext.getQueryParams("token"); - var _a = React__namespace.useState(), - error = _a[0], - setError = _a[1]; - var enterEmailFormFeature = props.recipe.config.resetPasswordUsingTokenFeature.enterEmailForm; - var submitNewPasswordFormFeature = props.recipe.config.resetPasswordUsingTokenFeature.submitNewPasswordForm; - var submitNewPasswordForm = - token === undefined || token === null - ? undefined - : { - error: error, - onError: function (error) { - return setError(error); - }, - clearError: function () { - return setError(undefined); - }, - styleFromInit: submitNewPasswordFormFeature.style, - formFields: submitNewPasswordFormFeature.formFields, - recipeImplementation: props.recipe.webJSRecipe, - config: props.recipe.config, - onSignInClicked: function () { - void genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - show: "signin", - history: props.history, - redirectBack: false, - }); - }, - token: token, - }; - var enterEmailForm = { - onBackButtonClicked: function () { - return genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - show: "signin", - history: props.history, - redirectBack: false, - }); - }, - error: error, - onError: function (error) { - return setError(error); - }, - clearError: function () { - return setError(undefined); - }, - styleFromInit: enterEmailFormFeature.style, - formFields: enterEmailFormFeature.formFields, - recipeImplementation: props.recipe.webJSRecipe, - config: props.recipe.config, - }; - var childProps = { - config: props.recipe.config, - submitNewPasswordForm: submitNewPasswordForm, - enterEmailForm: enterEmailForm, - }; - var recipeComponentOverrides = props.useComponentOverrides(); - return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, - genericComponentOverrideContext.__assign( - { value: recipeComponentOverrides }, - { - children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, - genericComponentOverrideContext.__assign( - { - useShadowDom: props.recipe.config.useShadowDom, - defaultStore: defaultTranslationsEmailPassword, - }, - { - children: jsxRuntime.jsxs(React.Fragment, { - children: [ - props.children === undefined && - jsxRuntime.jsx( - ResetPasswordUsingTokenThemeWrapper, - genericComponentOverrideContext.__assign({}, childProps) - ), - props.children && - React__namespace.Children.map(props.children, function (child) { - if (React__namespace.isValidElement(child)) { - return React__namespace.cloneElement(child, childProps); - } - return child; - }), - ], - }), - } - ) - ), + if (value.match(/^.*[0-9]+.*$/) === null) { + return [2 /*return*/, "ERROR_PASSWORD_NO_NUM"]; } - ) - ); -}; - -var SignInFooter = uiEntry.withOverride("EmailPasswordSignInFooter", function EmailPasswordSignInFooter(_a) { - var onClick = _a.onClick; - var t = translationContext.useTranslation(); - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "link secondaryText forgotPasswordLink", onClick: onClick }, - { children: t("EMAIL_PASSWORD_SIGN_IN_FOOTER_FORGOT_PW_LINK") } - ) - ); -}); - -var SignInForm = uiEntry.withOverride("EmailPasswordSignInForm", function EmailPasswordSignInForm(props) { - var _this = this; - var userContext = uiEntry.useUserContext(); - return jsxRuntime.jsx(formBase.FormBase, { - formFields: props.formFields, - clearError: props.clearError, - onError: props.onError, - buttonLabel: "EMAIL_PASSWORD_SIGN_IN_SUBMIT_BTN", - onSuccess: props.onSuccess, - callAPI: function (formFields) { - return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { - var validationErrors, response; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [ - 4 /*yield*/, - genericComponentOverrideContext.validateForm( - formFields, - props.config.signInAndUpFeature.signInForm.formFields - ), - ]; - case 1: - validationErrors = _a.sent(); - if (validationErrors.length > 0) { - return [ - 2 /*return*/, - { - status: "FIELD_ERROR", - formFields: validationErrors, - }, - ]; - } - return [ - 4 /*yield*/, - props.recipeImplementation.signIn({ - formFields: formFields, - userContext: userContext, - }), - ]; - case 2: - response = _a.sent(); - if (response.status === "WRONG_CREDENTIALS_ERROR") { - throw new STGeneralError__default.default( - "EMAIL_PASSWORD_SIGN_IN_WRONG_CREDENTIALS_ERROR" - ); - } else if (response.status === "SIGN_IN_NOT_ALLOWED") { - throw new STGeneralError__default.default(response.reason); - } else { - return [2 /*return*/, response]; - } - } - }); - }); - }, - validateOnBlur: false, - showLabels: true, - footer: props.footer, - }); -}); - -var SignInHeader = uiEntry.withOverride("EmailPasswordSignInHeader", function EmailPasswordSignInHeader(_a) { - var onClick = _a.onClick; - var t = translationContext.useTranslation(); - return jsxRuntime.jsxs(React.Fragment, { - children: [ - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("EMAIL_PASSWORD_SIGN_IN_HEADER_TITLE") } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText" }, - { - children: [ - t("EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_START"), - jsxRuntime.jsx( - "span", - genericComponentOverrideContext.__assign( - { "data-supertokens": "link", onClick: onClick }, - { children: t("EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_SIGN_UP_LINK") } - ) - ), - t("EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_END"), - ], - } - ) - ), - } - ) - ), - jsxRuntime.jsx("div", { "data-supertokens": "divider" }), - ], + return [2 /*return*/, undefined]; + }); }); -}); - -var SignIn = uiEntry.withOverride("EmailPasswordSignIn", function EmailPasswordSignIn(props) { - return jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: [ - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsx(SignInHeader, { onClick: props.signUpClicked }), - props.error !== undefined && - jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), - jsxRuntime.jsx( - SignInForm, - genericComponentOverrideContext.__assign({}, props, { - footer: jsxRuntime.jsx(SignInFooter, { - onClick: props.forgotPasswordClick, - }), - }) - ), - ], - } - ) - ), - jsxRuntime.jsx(SuperTokensBranding.SuperTokensBranding, {}), - ], - } - ) - ); -}); - -var SignUpFooter = uiEntry.withOverride("EmailPasswordSignUpFooter", function EmailPasswordSignUpFooter(_a) { - var termsOfServiceLink = _a.termsOfServiceLink, - privacyPolicyLink = _a.privacyPolicyLink; - var t = translationContext.useTranslation(); - if (termsOfServiceLink === undefined && privacyPolicyLink === undefined) { - return null; - } - return jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText privacyPolicyAndTermsAndConditions" }, - { - children: [ - t("EMAIL_PASSWORD_SIGN_UP_FOOTER_START"), - termsOfServiceLink !== undefined && - jsxRuntime.jsx( - "a", - genericComponentOverrideContext.__assign( - { - "data-supertokens": "link", - href: termsOfServiceLink, - target: "_blank", - rel: "noopener noreferer", - }, - { children: t("EMAIL_PASSWORD_SIGN_UP_FOOTER_TOS") } - ) - ), - termsOfServiceLink !== undefined && - privacyPolicyLink !== undefined && - t("EMAIL_PASSWORD_SIGN_UP_FOOTER_AND"), - privacyPolicyLink !== undefined && - jsxRuntime.jsx( - "a", - genericComponentOverrideContext.__assign( - { - "data-supertokens": "link", - href: privacyPolicyLink, - target: "_blank", - rel: "noopener noreferer", - }, - { children: t("EMAIL_PASSWORD_SIGN_UP_FOOTER_PP") } - ) - ), - t("EMAIL_PASSWORD_SIGN_UP_FOOTER_END"), - ], - } - ) - ); -}); - +} /* - * Component. + * defaultLoginPasswordValidator. + * type string */ -var SignUpForm = uiEntry.withOverride("EmailPasswordSignUpForm", function EmailPasswordSignUpForm(props) { - var _this = this; - var userContext = uiEntry.useUserContext(); - return jsxRuntime.jsx(formBase.FormBase, { - formFields: props.formFields, - clearError: props.clearError, - onError: props.onError, - buttonLabel: "EMAIL_PASSWORD_SIGN_UP_SUBMIT_BTN", - onSuccess: props.onSuccess, - callAPI: function (formFields) { - return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { - var validationErrors, res; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [ - 4 /*yield*/, - genericComponentOverrideContext.validateForm( - formFields, - props.config.signInAndUpFeature.signUpForm.formFields - ), - ]; - case 1: - validationErrors = _a.sent(); - if (validationErrors.length > 0) { - return [ - 2 /*return*/, - { - status: "FIELD_ERROR", - formFields: validationErrors, - }, - ]; - } - return [ - 4 /*yield*/, - props.recipeImplementation.signUp({ - formFields: formFields, - userContext: userContext, - }), - ]; - case 2: - res = _a.sent(); - if (res.status === "SIGN_UP_NOT_ALLOWED") { - throw new STGeneralError__default$1.default(res.reason); - } - return [2 /*return*/, res]; - } - }); - }); - }, - validateOnBlur: true, - showLabels: true, - footer: props.footer, - }); -}); - -var SignUpHeader = uiEntry.withOverride("EmailPasswordSignUpHeader", function EmailPasswordSignUpHeader(_a) { - var onClick = _a.onClick; - var t = translationContext.useTranslation(); - return jsxRuntime.jsxs(React.Fragment, { - children: [ - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("EMAIL_PASSWORD_SIGN_UP_HEADER_TITLE") } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText" }, - { - children: [ - t("EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_START"), - jsxRuntime.jsx( - "span", - genericComponentOverrideContext.__assign( - { "data-supertokens": "link", onClick: onClick }, - { children: t("EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_SIGN_IN_LINK") } - ) - ), - t("EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_END"), - ], - } - ) - ), - } - ) - ), - jsxRuntime.jsx("div", { "data-supertokens": "divider" }), - ], - }); -}); - -var SignUp = uiEntry.withOverride("EmailPasswordSignUp", function EmailPasswordSignUp(props) { - return jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: [ - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: [ - jsxRuntime.jsx(SignUpHeader, { onClick: props.signInClicked }), - props.error !== undefined && - jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), - jsxRuntime.jsx( - SignUpForm, - genericComponentOverrideContext.__assign({}, props, { - footer: jsxRuntime.jsx(SignUpFooter, { - privacyPolicyLink: - props.config.signInAndUpFeature.signUpForm.privacyPolicyLink, - termsOfServiceLink: - props.config.signInAndUpFeature.signUpForm.termsOfServiceLink, - }), - }) - ), - ], - } - ) - ), - jsxRuntime.jsx(SuperTokensBranding.SuperTokensBranding, {}), - ], - } - ) - ); -}); - -var SignInAndUpTheme = function (props) { - // If isSignUp, return signUp. - if (props.featureState.isSignUp) { - return jsxRuntime.jsx( - SignUp, - genericComponentOverrideContext.__assign({}, props.signUpForm, { - signInClicked: function () { - props.dispatch({ type: "setSignIn" }); - }, - }) - ); - } - // Otherwise, return SignIn. - return jsxRuntime.jsx( - SignIn, - genericComponentOverrideContext.__assign({}, props.signInForm, { - signUpClicked: function () { - props.dispatch({ type: "setSignUp" }); - }, - }) - ); -}; -function SignInAndUpThemeWrapper(props) { - var hasFont = translations.hasFontDefined(props.config.rootStyle); - var activeStyle = props.featureState.isSignUp - ? props.config.signInAndUpFeature.signUpForm.style - : props.config.signInAndUpFeature.signInForm.style; - return jsxRuntime.jsx( - uiEntry.UserContextWrapper, - genericComponentOverrideContext.__assign( - { userContext: props.userContext }, - { - children: jsxRuntime.jsx( - translations$1.ThemeBase, - genericComponentOverrideContext.__assign( - { loadDefaultFont: !hasFont, userStyles: [props.config.rootStyle, activeStyle] }, - { - children: jsxRuntime.jsx( - SignInAndUpTheme, - genericComponentOverrideContext.__assign({}, props) - ), - } - ) - ), - } - ) - ); -} - -var useFeatureReducer = function (recipe) { - return React__namespace.useReducer( - function (oldState, action) { - switch (action.type) { - case "setSignIn": - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, oldState), - { error: undefined, isSignUp: false } - ); - case "setSignUp": - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, oldState), - { error: undefined, isSignUp: true } - ); - case "setError": - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, oldState), - { error: action.error } - ); - default: - return oldState; +function defaultLoginPasswordValidator(value) { + return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { + return genericComponentOverrideContext.__generator(this, function (_a) { + if (typeof value !== "string") { + return [2 /*return*/, "ERROR_PASSWORD_NON_STRING"]; } - }, - { - isSignUp: recipe === undefined ? false : recipe.config.signInAndUpFeature.defaultToSignUp, - user: undefined, - error: undefined, - }, - function (initArg) { - var show = genericComponentOverrideContext.getQueryParams("show"); - var isSignUp = initArg.isSignUp; - if (show !== null) { - isSignUp = show === "signup"; - } - return { - isSignUp: isSignUp, - user: undefined, - error: undefined, - }; - } - ); -}; -function useChildProps(recipe$1, state, dispatch, history) { - var _this = this; - var recipeImplementation = React.useMemo( - function () { - return recipe$1 && getModifiedRecipeImplementation(recipe$1.webJSRecipe); - }, - [recipe$1] - ); - var userContext = uiEntry.useUserContext(); - var onSignInSuccess = React.useCallback( - function (response) { - return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - return [ - 2 /*return*/, - recipe.Session.getInstanceOrThrow().validateGlobalClaimsAndHandleSuccessRedirection( - { - rid: recipe$1.config.recipeId, - successRedirectContext: { - action: "SUCCESS", - isNewRecipeUser: false, - user: response.user, - redirectToPath: genericComponentOverrideContext.getRedirectToPathFromURL(), - }, - }, - userContext, - history - ), - ]; - }); - }); - }, - [recipe$1, userContext, history] - ); - var onSignUpSuccess = React.useCallback( - function (response) { - return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - return [ - 2 /*return*/, - recipe.Session.getInstanceOrThrow().validateGlobalClaimsAndHandleSuccessRedirection( - { - rid: recipe$1.config.recipeId, - successRedirectContext: { - action: "SUCCESS", - isNewRecipeUser: true, - user: response.user, - redirectToPath: genericComponentOverrideContext.getRedirectToPathFromURL(), - }, - }, - userContext, - history - ), - ]; - }); - }); - }, - [recipe$1, userContext, history] - ); - return React.useMemo( - function () { - if (recipe$1 === undefined || recipeImplementation === undefined) { - return; - } - var signInAndUpFeature = recipe$1.config.signInAndUpFeature; - var signUpFeature = signInAndUpFeature.signUpForm; - var signInFeature = signInAndUpFeature.signInForm; - var signInForm = { - recipeImplementation: recipeImplementation, - config: recipe$1.config, - styleFromInit: signInFeature.style, - formFields: signInFeature.formFields, - error: state.error, - clearError: function () { - return dispatch({ type: "setError", error: undefined }); - }, - onError: function (error) { - return dispatch({ type: "setError", error: error }); - }, - onSuccess: onSignInSuccess, - forgotPasswordClick: function () { - return recipe$1.redirect({ action: "RESET_PASSWORD" }, history); - }, - }; - var signUpForm = { - recipeImplementation: recipeImplementation, - config: recipe$1.config, - styleFromInit: signUpFeature.style, - formFields: getThemeSignUpFeatureFormFields(signUpFeature.formFields, recipe$1, userContext), - error: state.error, - clearError: function () { - return dispatch({ type: "setError", error: undefined }); - }, - onError: function (error) { - return dispatch({ type: "setError", error: error }); - }, - onSuccess: onSignUpSuccess, - }; - return { - config: recipe$1.config, - signInForm: signInForm, - signUpForm: signUpForm, - }; - }, - [recipe$1, state, dispatch] - ); + return [2 /*return*/, undefined]; + }); + }); } -var SignInAndUpFeature = function (props) { - var _a = useFeatureReducer(props.recipe), - state = _a[0], - dispatch = _a[1]; - var childProps = useChildProps(props.recipe, state, dispatch, props.history); - var recipeComponentOverrides = props.useComponentOverrides(); - return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, - genericComponentOverrideContext.__assign( - { value: recipeComponentOverrides }, - { - children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, - genericComponentOverrideContext.__assign( - { - useShadowDom: props.recipe.config.useShadowDom, - defaultStore: defaultTranslationsEmailPassword, - }, - { - children: jsxRuntime.jsxs(React.Fragment, { - children: [ - props.children === undefined && - jsxRuntime.jsx( - SignInAndUpThemeWrapper, - genericComponentOverrideContext.__assign({}, childProps, { - featureState: state, - dispatch: dispatch, - }) - ), - props.children && - React__namespace.Children.map(props.children, function (child) { - if (React__namespace.isValidElement(child)) { - return React__namespace.cloneElement( - child, - genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, childProps), - { featureState: state, dispatch: dispatch } - ) - ); - } - return child; - }), - ], - }), - } - ) - ), - } - ) - ); -}; -var getModifiedRecipeImplementation = function (origImpl) { - return genericComponentOverrideContext.__assign({}, origImpl); -}; -function getThemeSignUpFeatureFormFields(formFields, recipe, userContext) { - var _this = this; - var emailPasswordOnly = formFields.length === 2; - return formFields.map(function (field) { - return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, field), { - showIsRequired: (function () { - // If email and password only, do not show required indicator (*). - if (emailPasswordOnly) { - return false; - } - // Otherwise, show for all non optional fields (including email and password). - return field.optional === false; - })(), - validate: (function () { - // If field is not email, return field validate unchanged. - if (field.id !== "email") { - return field.validate; - } - // Otherwise, if email, use syntax validate method and check if email exists. - return function (value) { - return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { - var error, emailExists, err_1; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [4 /*yield*/, field.validate(value)]; - case 1: - error = _a.sent(); - if (error !== undefined) { - return [2 /*return*/, error]; - } - if (typeof value !== "string") { - return [2 /*return*/, "GENERAL_ERROR_EMAIL_NON_STRING"]; - } - _a.label = 2; - case 2: - _a.trys.push([2, 4, , 5]); - return [ - 4 /*yield*/, - recipe.webJSRecipe.doesEmailExist({ - email: value, - userContext: userContext, - }), - ]; - case 3: - emailExists = _a.sent().doesExist; - if (emailExists) { - return [2 /*return*/, "EMAIL_PASSWORD_EMAIL_ALREADY_EXISTS"]; - } - return [3 /*break*/, 5]; - case 4: - err_1 = _a.sent(); - if (STGeneralError__default.default.isThisError(err_1)) { - return [2 /*return*/, err_1.message]; - } - return [3 /*break*/, 5]; - case 5: - return [2 /*return*/, undefined]; - } - }); - }); - }; - })(), +/* + * defaultValidate + */ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function defaultValidate(_) { + return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { + return genericComponentOverrideContext.__generator(this, function (_a) { + return [2 /*return*/, undefined]; }); }); } -var EmailPasswordPreBuiltUI = /** @class */ (function (_super) { - genericComponentOverrideContext.__extends(EmailPasswordPreBuiltUI, _super); - function EmailPasswordPreBuiltUI(recipeInstance) { - var _this = _super.call(this) || this; - _this.recipeInstance = recipeInstance; - // Instance methods - _this.getFeatures = function (useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - var features = {}; - if (_this.recipeInstance.config.signInAndUpFeature.disableDefaultUI !== true) { - var normalisedFullPath = _this.recipeInstance.config.appInfo.websiteBasePath.appendPath( - new NormalisedURLPath__default.default("/") - ); - features[normalisedFullPath.getAsStringDangerous()] = { - matches: genericComponentOverrideContext.matchRecipeIdUsingQueryParams( - _this.recipeInstance.config.recipeId - ), - component: function (props) { - return _this.getFeatureComponent("signinup", props, useComponentOverrides); - }, - recipeID: recipe$1.EmailPassword.RECIPE_ID, - }; - } - if (_this.recipeInstance.config.resetPasswordUsingTokenFeature.disableDefaultUI !== true) { - var normalisedFullPath = _this.recipeInstance.config.appInfo.websiteBasePath.appendPath( - new NormalisedURLPath__default.default(validators.DEFAULT_RESET_PASSWORD_PATH) - ); - features[normalisedFullPath.getAsStringDangerous()] = { - matches: genericComponentOverrideContext.matchRecipeIdUsingQueryParams( - _this.recipeInstance.config.recipeId - ), - component: function (props) { - return _this.getFeatureComponent("resetpassword", props, useComponentOverrides); - }, - recipeID: recipe$1.EmailPassword.RECIPE_ID, - }; - } - return features; - }; - _this.getFeatureComponent = function (componentName, props, useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - if (componentName === "signinup") { - if (props.redirectOnSessionExists !== false) { - return jsxRuntime.jsx( - uiEntry.UserContextWrapper, - genericComponentOverrideContext.__assign( - { userContext: props.userContext }, - { - children: jsxRuntime.jsx( - authWidgetWrapper.AuthWidgetWrapper, - genericComponentOverrideContext.__assign( - { authRecipe: _this.recipeInstance, history: props.history }, - { - children: jsxRuntime.jsx( - SignInAndUpFeature, - genericComponentOverrideContext.__assign( - { recipe: _this.recipeInstance }, - props, - { useComponentOverrides: useComponentOverrides } - ) - ), - } - ) - ), - } - ) - ); - } else { - return jsxRuntime.jsx( - uiEntry.UserContextWrapper, - genericComponentOverrideContext.__assign( - { userContext: props.userContext }, - { - children: jsxRuntime.jsx( - SignInAndUpFeature, - genericComponentOverrideContext.__assign({ recipe: _this.recipeInstance }, props, { - useComponentOverrides: useComponentOverrides, - }) - ), - } - ) - ); - } - } else if (componentName === "resetpassword") { - return jsxRuntime.jsx( - uiEntry.UserContextWrapper, - genericComponentOverrideContext.__assign( - { userContext: props.userContext }, - { - children: jsxRuntime.jsx( - ResetPasswordUsingToken$1, - genericComponentOverrideContext.__assign({ recipe: _this.recipeInstance }, props, { - useComponentOverrides: useComponentOverrides, - }) - ), - } - ) - ); - } else { - throw new Error("Should never come here."); - } - }; - return _this; - } - // Static methods - EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance = function () { - if (EmailPasswordPreBuiltUI.instance === undefined) { - var recipeInstance = recipe$1.EmailPassword.getInstanceOrThrow(); - EmailPasswordPreBuiltUI.instance = new EmailPasswordPreBuiltUI(recipeInstance); - } - return EmailPasswordPreBuiltUI.instance; - }; - EmailPasswordPreBuiltUI.getFeatures = function (useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides); - }; - EmailPasswordPreBuiltUI.getFeatureComponent = function (componentName, props, useComponentOverrides) { - if (useComponentOverrides === void 0) { - useComponentOverrides = componentOverrideContext.useContext; - } - return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent( - componentName, - props, - useComponentOverrides - ); - }; - // For tests - EmailPasswordPreBuiltUI.reset = function () { - if (!genericComponentOverrideContext.isTest()) { - return; - } - EmailPasswordPreBuiltUI.instance = undefined; - return; - }; - EmailPasswordPreBuiltUI.SignInAndUp = function (prop) { - if (prop === void 0) { - prop = {}; - } - return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent("signinup", prop); - }; - EmailPasswordPreBuiltUI.ResetPasswordUsingToken = function (prop) { - return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent("resetpassword", prop); - }; - EmailPasswordPreBuiltUI.ResetPasswordUsingTokenTheme = ResetPasswordUsingTokenThemeWrapper; - EmailPasswordPreBuiltUI.SignInAndUpTheme = SignInAndUpThemeWrapper; - return EmailPasswordPreBuiltUI; -})(uiEntry.RecipeRouter); -var SignInAndUp = EmailPasswordPreBuiltUI.SignInAndUp; -var ResetPasswordUsingToken = EmailPasswordPreBuiltUI.ResetPasswordUsingToken; - -exports.EmailPasswordPreBuiltUI = EmailPasswordPreBuiltUI; -exports.ResetPasswordUsingToken = ResetPasswordUsingToken; -exports.ResetPasswordUsingTokenThemeWrapper = ResetPasswordUsingTokenThemeWrapper; -exports.SignInAndUp = SignInAndUp; -exports.SignInAndUpThemeWrapper = SignInAndUpThemeWrapper; -exports.SignInFooter = SignInFooter; -exports.SignInForm = SignInForm; -exports.SignInHeader = SignInHeader; -exports.SignUpFooter = SignUpFooter; -exports.SignUpForm = SignUpForm; -exports.SignUpHeader = SignUpHeader; -exports.defaultTranslationsEmailPassword = defaultTranslationsEmailPassword; -exports.useChildProps = useChildProps; -exports.useFeatureReducer = useFeatureReducer; +exports.defaultEmailValidator = defaultEmailValidator; +exports.defaultLoginPasswordValidator = defaultLoginPasswordValidator; +exports.defaultPasswordValidator = defaultPasswordValidator; +exports.defaultValidate = defaultValidate; diff --git a/lib/build/emailpassword-shared7.js b/lib/build/emailpassword-shared7.js index d2336cadd..73b9b6e38 100644 --- a/lib/build/emailpassword-shared7.js +++ b/lib/build/emailpassword-shared7.js @@ -2,62 +2,1513 @@ 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 authWidgetWrapper = require("./authRecipe-shared2.js"); +var componentOverrideContext = require("./emailpassword-shared3.js"); +var React = require("react"); +var translations = require("./translations.js"); +var translations$1 = require("./emailverification-shared2.js"); +var translationContext = require("./translationContext.js"); +var backButton = require("./emailpassword-shared8.js"); +var arrowLeftIcon = require("./arrowLeftIcon.js"); +var formBase = require("./emailpassword-shared9.js"); +var generalError = require("./emailpassword-shared.js"); +var STGeneralError = require("supertokens-web-js/utils/error"); +var button = require("./emailpassword-shared2.js"); +var recipe = require("./session-shared2.js"); +var SuperTokensBranding = require("./SuperTokensBranding.js"); +var STGeneralError$1 = require("supertokens-web-js/lib/build/error"); +var constants = require("./emailpassword-shared5.js"); +var recipe$1 = require("./emailpassword-shared4.js"); + +function _interopDefault(e) { + return e && e.__esModule ? e : { default: e }; +} + +function _interopNamespace(e) { + if (e && e.__esModule) return e; + var n = Object.create(null); + if (e) { + Object.keys(e).forEach(function (k) { + if (k !== "default") { + var d = Object.getOwnPropertyDescriptor(e, k); + Object.defineProperty( + n, + k, + d.get + ? d + : { + enumerable: true, + get: function () { + return e[k]; + }, + } + ); + } + }); + } + n.default = e; + return Object.freeze(n); +} + +var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath); +var React__namespace = /*#__PURE__*/ _interopNamespace(React); +var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError); +var STGeneralError__default$1 = /*#__PURE__*/ _interopDefault(STGeneralError$1); -/* 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 BackToSignInButton(_a) { + var onClick = _a.onClick; + var t = translationContext.useTranslation(); + return jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "secondaryText secondaryLinkWithLeftArrow", onClick: onClick }, + { + children: [ + jsxRuntime.jsx(arrowLeftIcon.ArrowLeftIcon, { color: "rgb(var(--palette-secondaryText))" }), + t("EMAIL_PASSWORD_RESET_SIGN_IN_LINK"), + ], + } + ) + ); +} + +var EmailPasswordResetPasswordEmail = function (props) { + var t = translationContext.useTranslation(); + var userContext = uiEntry.useUserContext(); + var _a = React.useState("READY"), + status = _a[0], + setStatus = _a[1]; + var _b = React.useState(""), + emailFieldValue = _b[0], + setEmailFieldValue = _b[1]; + var onSuccess = function () { + setStatus("SENT"); + }; + var resend = function () { + setStatus("READY"); + }; + var formFields = props.formFields; + var emailSuccessText = + t("EMAIL_PASSWORD_RESET_SEND_BEFORE_EMAIL") + + (emailFieldValue !== undefined && emailFieldValue.length > 0 + ? emailFieldValue + : t("EMAIL_PASSWORD_RESET_SEND_FALLBACK_EMAIL")) + + t("EMAIL_PASSWORD_RESET_SEND_AFTER_EMAIL"); + if (status === "SENT") { + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "primaryText enterEmailSuccessMessage" }, + { + children: [ + emailSuccessText, + jsxRuntime.jsx( + "span", + genericComponentOverrideContext.__assign( + { + "data-supertokens": "link resendEmailLink", + onClick: resend, + }, + { children: t("EMAIL_PASSWORD_RESET_RESEND_LINK") } + ) + ), + ], + } + ) + ), + jsxRuntime.jsx(BackToSignInButton, { onClick: props.onBackButtonClicked }), + ], + } + ) + ), + } + ) + ); + } + // Otherwise, return Form. + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle withBackButton" }, + { + children: [ + jsxRuntime.jsx(backButton.BackButton, { + onClick: props.onBackButtonClicked, + }), + t("EMAIL_PASSWORD_RESET_HEADER_TITLE"), + jsxRuntime.jsx("span", { + "data-supertokens": "backButtonPlaceholder backButtonCommon", + }), + ], + } + ) + ), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerSubtitle" }, + { + children: jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "secondaryText" }, + { children: t("EMAIL_PASSWORD_RESET_HEADER_SUBTITLE") } + ) + ), + } + ) + ), + props.error !== undefined && + jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), + jsxRuntime.jsx(formBase.FormBase, { + clearError: props.clearError, + onError: props.onError, + formFields: formFields, + buttonLabel: "EMAIL_PASSWORD_RESET_SEND_BTN", + onSuccess: onSuccess, + callAPI: function (formFields) { + return genericComponentOverrideContext.__awaiter( + void 0, + void 0, + void 0, + function () { + var validationErrors, emailField, resp; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [ + 4 /*yield*/, + genericComponentOverrideContext.validateForm( + formFields, + props.config.resetPasswordUsingTokenFeature + .enterEmailForm.formFields + ), + ]; + case 1: + validationErrors = _a.sent(); + if (validationErrors.length > 0) { + return [ + 2 /*return*/, + { + status: "FIELD_ERROR", + formFields: validationErrors, + }, + ]; + } + emailField = formFields.find(function (field) { + return field.id === "email"; + }); + if (emailField !== undefined) { + setEmailFieldValue(emailField.value); + } + return [ + 4 /*yield*/, + props.recipeImplementation.sendPasswordResetEmail({ + formFields: formFields, + userContext: userContext, + }), + ]; + case 2: + resp = _a.sent(); + if (resp.status === "PASSWORD_RESET_NOT_ALLOWED") { + return [ + 2 /*return*/, + { + status: "FIELD_ERROR", + formFields: [ + { id: "email", error: resp.reason }, + ], + }, + ]; + } + return [2 /*return*/, resp]; + } + }); + } + ); + }, + showLabels: true, + validateOnBlur: true, + }), + ], + } + ) + ), + } + ) + ); +}; +var ResetPasswordEmail = uiEntry.withOverride("EmailPasswordResetPasswordEmail", EmailPasswordResetPasswordEmail); + +var EmailPasswordSubmitNewPassword = function (props) { + var t = translationContext.useTranslation(); + var userContext = uiEntry.useUserContext(); + var _a = React.useState("READY"), + status = _a[0], + setStatus = _a[1]; + var onSuccess = function () { + setStatus("SUCCESS"); + }; + var formFields = props.formFields, + onSignInClicked = props.onSignInClicked; + if (status === "SUCCESS") { + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle" }, + { children: t("EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_HEADER_TITLE") } + ) + ), + jsxRuntime.jsx( + formBase.FormRow, + { + children: jsxRuntime.jsxs(React.Fragment, { + children: [ + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { + "data-supertokens": + "primaryText submitNewPasswordSuccessMessage", + }, + { + children: t( + "EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_DESC" + ), + } + ) + ), + jsxRuntime.jsx(button.Button, { + disabled: false, + isLoading: false, + type: "button", + onClick: onSignInClicked, + label: "EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_SIGN_IN_BTN", + }), + ], + }), + }, + "form-button" + ), + ], + } + ) + ), + } + ) + ); + } + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle" }, + { children: t("EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_TITLE") } + ) + ), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerSubtitle" }, + { + children: jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "secondaryText" }, + { children: t("EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_SUBTITLE") } + ) + ), + } + ) + ), + props.error !== undefined && + jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), + jsxRuntime.jsx(formBase.FormBase, { + formFields: formFields, + clearError: props.clearError, + onError: props.onError, + buttonLabel: "EMAIL_PASSWORD_RESET_SUBMIT_PW_CHANGE_PW_BTN", + onSuccess: onSuccess, + validateOnBlur: true, + callAPI: function (fields) { + return genericComponentOverrideContext.__awaiter( + void 0, + void 0, + void 0, + function () { + var validationErrors, response; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [ + 4 /*yield*/, + genericComponentOverrideContext.validateForm( + fields, + props.config.resetPasswordUsingTokenFeature + .submitNewPasswordForm.formFields + ), + ]; + case 1: + validationErrors = _a.sent(); + if (validationErrors.length > 0) { + return [ + 2 /*return*/, + { + status: "FIELD_ERROR", + formFields: validationErrors, + }, + ]; + } + // Verify that both passwords match. + if (fields[0].value !== fields[1].value) { + return [ + 2 /*return*/, + { + status: "FIELD_ERROR", + formFields: [ + { + id: fields[1].id, + error: "ERROR_CONFIRM_PASSWORD_NO_MATCH", + }, + ], + }, + ]; + } + return [ + 4 /*yield*/, + props.recipeImplementation.submitNewPassword({ + formFields: fields, + userContext: userContext, + }), + ]; + case 2: + response = _a.sent(); + if ( + response.status === "RESET_PASSWORD_INVALID_TOKEN_ERROR" + ) { + throw new STGeneralError__default.default( + "EMAIL_PASSWORD_RESET_PASSWORD_INVALID_TOKEN_ERROR" + ); + } + return [ + 2 /*return*/, + response.status === "FIELD_ERROR" + ? response + : { + status: "OK", + }, + ]; + } + }); + } + ); + }, + showLabels: true, + }), + ], + } + ) + ), + } + ) + ); +}; +var SubmitNewPassword = uiEntry.withOverride("EmailPasswordSubmitNewPassword", EmailPasswordSubmitNewPassword); + /* * Component. */ -function HeavyArrowLeftIcon(_a) { - var color = _a.color; +function ResetPasswordUsingTokenTheme(props) { + /* + * Render. + */ + // If no token, return SubmitNewPassword. + if (props.submitNewPasswordForm !== undefined) { + return jsxRuntime.jsx( + SubmitNewPassword, + genericComponentOverrideContext.__assign({}, props.submitNewPasswordForm) + ); + } + // Otherwise, return EnterEmail. + return jsxRuntime.jsx(ResetPasswordEmail, genericComponentOverrideContext.__assign({}, props.enterEmailForm)); +} +function ResetPasswordUsingTokenThemeWrapper(props) { + var hasFont = translations.hasFontDefined(props.config.rootStyle); + var userStyles = props.submitNewPasswordForm + ? props.config.resetPasswordUsingTokenFeature.submitNewPasswordForm.style + : props.config.resetPasswordUsingTokenFeature.enterEmailForm.style; return jsxRuntime.jsx( - "svg", + uiEntry.UserContextWrapper, genericComponentOverrideContext.__assign( + { userContext: props.userContext }, { - xmlns: "http://www.w3.org/2000/svg", - width: "16", - height: "13", - viewBox: "0 0 16 13", - "data-supertokens": "heavyArrowLeftIcon", - }, - { - children: jsxRuntime.jsx("path", { - fill: color, - d: "M13 6.8h.022H3.8l2.9 2.9a.761.761 0 0 1 0 1.07l-.451.451a.754.754 0 0 1-1.064 0L.22 6.254a.759.759 0 0 1 0-1.068L5.186.22a.755.755 0 0 1 1.064 0l.45.451a.746.746 0 0 1 .22.532.724.724 0 0 1-.22.522l-2.93 2.92h9.24a.781.781 0 0 1 .764.773v.638A.766.766 0 0 1 13 6.8z", - transform: "translate(1.182 .708)", - }), + children: jsxRuntime.jsx( + translations$1.ThemeBase, + genericComponentOverrideContext.__assign( + { loadDefaultFont: !hasFont, userStyles: [props.config.rootStyle, userStyles] }, + { + children: jsxRuntime.jsx( + ResetPasswordUsingTokenTheme, + genericComponentOverrideContext.__assign({}, props) + ), + } + ) + ), } ) ); } +var defaultTranslationsEmailPassword = { + en: genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, translations.defaultTranslationsCommon.en), + translations$1.defaultTranslationsEmailVerification.en + ), + { + EMAIL_PASSWORD_EMAIL_LABEL: "Email", + EMAIL_PASSWORD_EMAIL_PLACEHOLDER: "Email address", + EMAIL_PASSWORD_PASSWORD_LABEL: "Password", + EMAIL_PASSWORD_PASSWORD_PLACEHOLDER: "Password", + EMAIL_PASSWORD_SIGN_IN_HEADER_TITLE: "Sign In", + EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_START: "Not registered yet?", + EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_SIGN_UP_LINK: "Sign Up", + EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_END: "", + EMAIL_PASSWORD_SIGN_IN_FOOTER_FORGOT_PW_LINK: "Forgot password?", + EMAIL_PASSWORD_SIGN_IN_SUBMIT_BTN: "SIGN IN", + EMAIL_PASSWORD_SIGN_IN_WRONG_CREDENTIALS_ERROR: "Incorrect email and password combination", + EMAIL_PASSWORD_SIGN_UP_HEADER_TITLE: "Sign Up", + EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_START: "Already have an account?", + EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_SIGN_IN_LINK: "Sign In", + EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_END: "", + EMAIL_PASSWORD_SIGN_UP_FOOTER_START: "By continuing, you agree to our ", + EMAIL_PASSWORD_SIGN_UP_FOOTER_TOS: "Terms of Service", + EMAIL_PASSWORD_SIGN_UP_FOOTER_AND: " and ", + EMAIL_PASSWORD_SIGN_UP_FOOTER_PP: "Privacy Policy", + EMAIL_PASSWORD_SIGN_UP_FOOTER_END: "", + EMAIL_PASSWORD_SIGN_UP_SUBMIT_BTN: "SIGN UP", + EMAIL_PASSWORD_EMAIL_ALREADY_EXISTS: "This email already exists. Please sign in instead", + EMAIL_PASSWORD_RESET_HEADER_TITLE: "Reset your password", + EMAIL_PASSWORD_RESET_HEADER_SUBTITLE: "We will send you an email to reset your password", + EMAIL_PASSWORD_RESET_SEND_FALLBACK_EMAIL: "your account", + EMAIL_PASSWORD_RESET_SEND_BEFORE_EMAIL: "A password reset email has been sent to ", + EMAIL_PASSWORD_RESET_SEND_AFTER_EMAIL: ", if it exists in our system. ", + EMAIL_PASSWORD_RESET_RESEND_LINK: "Resend or change email", + EMAIL_PASSWORD_RESET_SEND_BTN: "Email me", + EMAIL_PASSWORD_RESET_SIGN_IN_LINK: "Sign In", + EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_HEADER_TITLE: "Success!", + EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_DESC: "Your password has been updated successfully", + EMAIL_PASSWORD_RESET_SUBMIT_PW_SUCCESS_SIGN_IN_BTN: "SIGN IN", + EMAIL_PASSWORD_NEW_PASSWORD_LABEL: "New password", + EMAIL_PASSWORD_NEW_PASSWORD_PLACEHOLDER: "New password", + EMAIL_PASSWORD_CONFIRM_PASSWORD_LABEL: "Confirm password", + EMAIL_PASSWORD_CONFIRM_PASSWORD_PLACEHOLDER: "Confirm your password", + EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_TITLE: "Change your password", + EMAIL_PASSWORD_RESET_SUBMIT_PW_HEADER_SUBTITLE: "Enter a new password below to change your password", + EMAIL_PASSWORD_RESET_SUBMIT_PW_CHANGE_PW_BTN: "CHANGE PASSWORD", + EMAIL_PASSWORD_RESET_PASSWORD_INVALID_TOKEN_ERROR: "Invalid password reset token", + ERROR_EMAIL_NON_STRING: "Email must be of type string", + ERROR_EMAIL_INVALID: "Email is invalid", + ERROR_PASSWORD_NON_STRING: "Password must be of type string", + ERROR_PASSWORD_TOO_SHORT: "Password must contain at least 8 characters, including a number", + ERROR_PASSWORD_TOO_LONG: "Password's length must be lesser than 100 characters", + ERROR_PASSWORD_NO_ALPHA: "Password must contain at least one alphabet", + ERROR_PASSWORD_NO_NUM: "Password must contain at least one number", + ERROR_CONFIRM_PASSWORD_NO_MATCH: "Confirmation password doesn't match", + ERROR_NON_OPTIONAL: "Field is not optional", + /* + * The following are error messages from our backend SDK. + * These are returned as full messages to preserver compatibilty, but they work just like the keys above. + * They are shown as is by default (setting the value to undefined will display the raw translation key) + */ + "This email already exists. Please sign in instead.": undefined, + "Field is not optional": undefined, + "Password must contain at least 8 characters, including a number": undefined, + "Password's length must be lesser than 100 characters": undefined, + "Password must contain at least one alphabet": undefined, + "Password must contain at least one number": undefined, + "Email is invalid": undefined, + "Reset password link was not created because of account take over risk. Please contact support. (ERR_CODE_001)": + undefined, + "Cannot sign up due to security reasons. Please try logging in, use a different login method or contact support. (ERR_CODE_007)": + undefined, + "Cannot sign in due to security reasons. Please try resetting your password, use a different login method or contact support. (ERR_CODE_008)": + undefined, + } + ), +}; + +var ResetPasswordUsingToken$1 = function (props) { + var token = genericComponentOverrideContext.getQueryParams("token"); + var _a = React__namespace.useState(), + error = _a[0], + setError = _a[1]; + var enterEmailFormFeature = props.recipe.config.resetPasswordUsingTokenFeature.enterEmailForm; + var submitNewPasswordFormFeature = props.recipe.config.resetPasswordUsingTokenFeature.submitNewPasswordForm; + var submitNewPasswordForm = + token === undefined || token === null + ? undefined + : { + error: error, + onError: function (error) { + return setError(error); + }, + clearError: function () { + return setError(undefined); + }, + styleFromInit: submitNewPasswordFormFeature.style, + formFields: submitNewPasswordFormFeature.formFields, + recipeImplementation: props.recipe.webJSRecipe, + config: props.recipe.config, + onSignInClicked: function () { + void genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ + show: "signin", + history: props.history, + redirectBack: false, + }); + }, + token: token, + }; + var enterEmailForm = { + onBackButtonClicked: function () { + return genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ + show: "signin", + history: props.history, + redirectBack: false, + }); + }, + error: error, + onError: function (error) { + return setError(error); + }, + clearError: function () { + return setError(undefined); + }, + styleFromInit: enterEmailFormFeature.style, + formFields: enterEmailFormFeature.formFields, + recipeImplementation: props.recipe.webJSRecipe, + config: props.recipe.config, + }; + var childProps = { + config: props.recipe.config, + submitNewPasswordForm: submitNewPasswordForm, + enterEmailForm: enterEmailForm, + }; + var recipeComponentOverrides = props.useComponentOverrides(); + return jsxRuntime.jsx( + uiEntry.ComponentOverrideContext.Provider, + genericComponentOverrideContext.__assign( + { value: recipeComponentOverrides }, + { + children: jsxRuntime.jsx( + uiEntry.FeatureWrapper, + genericComponentOverrideContext.__assign( + { + useShadowDom: props.recipe.config.useShadowDom, + defaultStore: defaultTranslationsEmailPassword, + }, + { + children: jsxRuntime.jsxs(React.Fragment, { + children: [ + props.children === undefined && + jsxRuntime.jsx( + ResetPasswordUsingTokenThemeWrapper, + genericComponentOverrideContext.__assign({}, childProps) + ), + props.children && + React__namespace.Children.map(props.children, function (child) { + if (React__namespace.isValidElement(child)) { + return React__namespace.cloneElement(child, childProps); + } + return child; + }), + ], + }), + } + ) + ), + } + ) + ); +}; + +var SignInFooter = uiEntry.withOverride("EmailPasswordSignInFooter", function EmailPasswordSignInFooter(_a) { + var onClick = _a.onClick; + var t = translationContext.useTranslation(); + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "link secondaryText forgotPasswordLink", onClick: onClick }, + { children: t("EMAIL_PASSWORD_SIGN_IN_FOOTER_FORGOT_PW_LINK") } + ) + ); +}); + +var SignInForm = uiEntry.withOverride("EmailPasswordSignInForm", function EmailPasswordSignInForm(props) { + var _this = this; + var userContext = uiEntry.useUserContext(); + return jsxRuntime.jsx(formBase.FormBase, { + formFields: props.formFields, + clearError: props.clearError, + onError: props.onError, + buttonLabel: "EMAIL_PASSWORD_SIGN_IN_SUBMIT_BTN", + onSuccess: props.onSuccess, + callAPI: function (formFields) { + return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { + var validationErrors, response; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [ + 4 /*yield*/, + genericComponentOverrideContext.validateForm( + formFields, + props.config.signInAndUpFeature.signInForm.formFields + ), + ]; + case 1: + validationErrors = _a.sent(); + if (validationErrors.length > 0) { + return [ + 2 /*return*/, + { + status: "FIELD_ERROR", + formFields: validationErrors, + }, + ]; + } + return [ + 4 /*yield*/, + props.recipeImplementation.signIn({ + formFields: formFields, + userContext: userContext, + }), + ]; + case 2: + response = _a.sent(); + if (response.status === "WRONG_CREDENTIALS_ERROR") { + throw new STGeneralError__default.default( + "EMAIL_PASSWORD_SIGN_IN_WRONG_CREDENTIALS_ERROR" + ); + } else if (response.status === "SIGN_IN_NOT_ALLOWED") { + throw new STGeneralError__default.default(response.reason); + } else { + return [2 /*return*/, response]; + } + } + }); + }); + }, + validateOnBlur: false, + showLabels: true, + footer: props.footer, + }); +}); + +var SignInHeader = uiEntry.withOverride("EmailPasswordSignInHeader", function EmailPasswordSignInHeader(_a) { + var onClick = _a.onClick; + var t = translationContext.useTranslation(); + return jsxRuntime.jsxs(React.Fragment, { + children: [ + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle" }, + { children: t("EMAIL_PASSWORD_SIGN_IN_HEADER_TITLE") } + ) + ), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerSubtitle" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "secondaryText" }, + { + children: [ + t("EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_START"), + jsxRuntime.jsx( + "span", + genericComponentOverrideContext.__assign( + { "data-supertokens": "link", onClick: onClick }, + { children: t("EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_SIGN_UP_LINK") } + ) + ), + t("EMAIL_PASSWORD_SIGN_IN_HEADER_SUBTITLE_END"), + ], + } + ) + ), + } + ) + ), + jsxRuntime.jsx("div", { "data-supertokens": "divider" }), + ], + }); +}); + +var SignIn = uiEntry.withOverride("EmailPasswordSignIn", function EmailPasswordSignIn(props) { + return jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: [ + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsx(SignInHeader, { onClick: props.signUpClicked }), + props.error !== undefined && + jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), + jsxRuntime.jsx( + SignInForm, + genericComponentOverrideContext.__assign({}, props, { + footer: jsxRuntime.jsx(SignInFooter, { + onClick: props.forgotPasswordClick, + }), + }) + ), + ], + } + ) + ), + jsxRuntime.jsx(SuperTokensBranding.SuperTokensBranding, {}), + ], + } + ) + ); +}); + +var SignUpFooter = uiEntry.withOverride("EmailPasswordSignUpFooter", function EmailPasswordSignUpFooter(_a) { + var termsOfServiceLink = _a.termsOfServiceLink, + privacyPolicyLink = _a.privacyPolicyLink; + var t = translationContext.useTranslation(); + if (termsOfServiceLink === undefined && privacyPolicyLink === undefined) { + return null; + } + return jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "secondaryText privacyPolicyAndTermsAndConditions" }, + { + children: [ + t("EMAIL_PASSWORD_SIGN_UP_FOOTER_START"), + termsOfServiceLink !== undefined && + jsxRuntime.jsx( + "a", + genericComponentOverrideContext.__assign( + { + "data-supertokens": "link", + href: termsOfServiceLink, + target: "_blank", + rel: "noopener noreferer", + }, + { children: t("EMAIL_PASSWORD_SIGN_UP_FOOTER_TOS") } + ) + ), + termsOfServiceLink !== undefined && + privacyPolicyLink !== undefined && + t("EMAIL_PASSWORD_SIGN_UP_FOOTER_AND"), + privacyPolicyLink !== undefined && + jsxRuntime.jsx( + "a", + genericComponentOverrideContext.__assign( + { + "data-supertokens": "link", + href: privacyPolicyLink, + target: "_blank", + rel: "noopener noreferer", + }, + { children: t("EMAIL_PASSWORD_SIGN_UP_FOOTER_PP") } + ) + ), + t("EMAIL_PASSWORD_SIGN_UP_FOOTER_END"), + ], + } + ) + ); +}); + /* * Component. */ -function BackButton(_a) { +var SignUpForm = uiEntry.withOverride("EmailPasswordSignUpForm", function EmailPasswordSignUpForm(props) { + var _this = this; + var userContext = uiEntry.useUserContext(); + return jsxRuntime.jsx(formBase.FormBase, { + formFields: props.formFields, + clearError: props.clearError, + onError: props.onError, + buttonLabel: "EMAIL_PASSWORD_SIGN_UP_SUBMIT_BTN", + onSuccess: props.onSuccess, + callAPI: function (formFields) { + return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { + var validationErrors, res; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [ + 4 /*yield*/, + genericComponentOverrideContext.validateForm( + formFields, + props.config.signInAndUpFeature.signUpForm.formFields + ), + ]; + case 1: + validationErrors = _a.sent(); + if (validationErrors.length > 0) { + return [ + 2 /*return*/, + { + status: "FIELD_ERROR", + formFields: validationErrors, + }, + ]; + } + return [ + 4 /*yield*/, + props.recipeImplementation.signUp({ + formFields: formFields, + userContext: userContext, + }), + ]; + case 2: + res = _a.sent(); + if (res.status === "SIGN_UP_NOT_ALLOWED") { + throw new STGeneralError__default$1.default(res.reason); + } + return [2 /*return*/, res]; + } + }); + }); + }, + validateOnBlur: true, + showLabels: true, + footer: props.footer, + }); +}); + +var SignUpHeader = uiEntry.withOverride("EmailPasswordSignUpHeader", function EmailPasswordSignUpHeader(_a) { var onClick = _a.onClick; + var t = translationContext.useTranslation(); + return jsxRuntime.jsxs(React.Fragment, { + children: [ + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle" }, + { children: t("EMAIL_PASSWORD_SIGN_UP_HEADER_TITLE") } + ) + ), + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerSubtitle" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "secondaryText" }, + { + children: [ + t("EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_START"), + jsxRuntime.jsx( + "span", + genericComponentOverrideContext.__assign( + { "data-supertokens": "link", onClick: onClick }, + { children: t("EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_SIGN_IN_LINK") } + ) + ), + t("EMAIL_PASSWORD_SIGN_UP_HEADER_SUBTITLE_END"), + ], + } + ) + ), + } + ) + ), + jsxRuntime.jsx("div", { "data-supertokens": "divider" }), + ], + }); +}); + +var SignUp = uiEntry.withOverride("EmailPasswordSignUp", function EmailPasswordSignUp(props) { + return jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "container" }, + { + children: [ + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "row" }, + { + children: [ + jsxRuntime.jsx(SignUpHeader, { onClick: props.signInClicked }), + props.error !== undefined && + jsxRuntime.jsx(generalError.GeneralError, { error: props.error }), + jsxRuntime.jsx( + SignUpForm, + genericComponentOverrideContext.__assign({}, props, { + footer: jsxRuntime.jsx(SignUpFooter, { + privacyPolicyLink: + props.config.signInAndUpFeature.signUpForm.privacyPolicyLink, + termsOfServiceLink: + props.config.signInAndUpFeature.signUpForm.termsOfServiceLink, + }), + }) + ), + ], + } + ) + ), + jsxRuntime.jsx(SuperTokensBranding.SuperTokensBranding, {}), + ], + } + ) + ); +}); + +var SignInAndUpTheme = function (props) { + // If isSignUp, return signUp. + if (props.featureState.isSignUp) { + return jsxRuntime.jsx( + SignUp, + genericComponentOverrideContext.__assign({}, props.signUpForm, { + signInClicked: function () { + props.dispatch({ type: "setSignIn" }); + }, + }) + ); + } + // Otherwise, return SignIn. + return jsxRuntime.jsx( + SignIn, + genericComponentOverrideContext.__assign({}, props.signInForm, { + signUpClicked: function () { + props.dispatch({ type: "setSignUp" }); + }, + }) + ); +}; +function SignInAndUpThemeWrapper(props) { + var hasFont = translations.hasFontDefined(props.config.rootStyle); + var activeStyle = props.featureState.isSignUp + ? props.config.signInAndUpFeature.signUpForm.style + : props.config.signInAndUpFeature.signInForm.style; return jsxRuntime.jsx( - "button", + uiEntry.UserContextWrapper, genericComponentOverrideContext.__assign( - { onClick: onClick, "data-supertokens": "backButton backButtonCommon" }, - { children: jsxRuntime.jsx(HeavyArrowLeftIcon, { color: "rgb(var(--palette-textTitle))" }) } + { userContext: props.userContext }, + { + children: jsxRuntime.jsx( + translations$1.ThemeBase, + genericComponentOverrideContext.__assign( + { loadDefaultFont: !hasFont, userStyles: [props.config.rootStyle, activeStyle] }, + { + children: jsxRuntime.jsx( + SignInAndUpTheme, + genericComponentOverrideContext.__assign({}, props) + ), + } + ) + ), + } + ) + ); +} + +var useFeatureReducer = function (recipe) { + return React__namespace.useReducer( + function (oldState, action) { + switch (action.type) { + case "setSignIn": + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, oldState), + { error: undefined, isSignUp: false } + ); + case "setSignUp": + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, oldState), + { error: undefined, isSignUp: true } + ); + case "setError": + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, oldState), + { error: action.error } + ); + default: + return oldState; + } + }, + { + isSignUp: recipe === undefined ? false : recipe.config.signInAndUpFeature.defaultToSignUp, + user: undefined, + error: undefined, + }, + function (initArg) { + var show = genericComponentOverrideContext.getQueryParams("show"); + var isSignUp = initArg.isSignUp; + if (show !== null) { + isSignUp = show === "signup"; + } + return { + isSignUp: isSignUp, + user: undefined, + error: undefined, + }; + } + ); +}; +function useChildProps(recipe$1, state, dispatch, history) { + var _this = this; + var recipeImplementation = React.useMemo( + function () { + return recipe$1 && getModifiedRecipeImplementation(recipe$1.webJSRecipe); + }, + [recipe$1] + ); + var userContext = uiEntry.useUserContext(); + var onSignInSuccess = React.useCallback( + function (response) { + return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { + return genericComponentOverrideContext.__generator(this, function (_a) { + return [ + 2 /*return*/, + recipe.Session.getInstanceOrThrow().validateGlobalClaimsAndHandleSuccessRedirection( + { + rid: recipe$1.config.recipeId, + successRedirectContext: { + action: "SUCCESS", + isNewRecipeUser: false, + user: response.user, + redirectToPath: genericComponentOverrideContext.getRedirectToPathFromURL(), + }, + }, + userContext, + history + ), + ]; + }); + }); + }, + [recipe$1, userContext, history] + ); + var onSignUpSuccess = React.useCallback( + function (response) { + return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { + return genericComponentOverrideContext.__generator(this, function (_a) { + return [ + 2 /*return*/, + recipe.Session.getInstanceOrThrow().validateGlobalClaimsAndHandleSuccessRedirection( + { + rid: recipe$1.config.recipeId, + successRedirectContext: { + action: "SUCCESS", + isNewRecipeUser: true, + user: response.user, + redirectToPath: genericComponentOverrideContext.getRedirectToPathFromURL(), + }, + }, + userContext, + history + ), + ]; + }); + }); + }, + [recipe$1, userContext, history] + ); + return React.useMemo( + function () { + if (recipe$1 === undefined || recipeImplementation === undefined) { + return; + } + var signInAndUpFeature = recipe$1.config.signInAndUpFeature; + var signUpFeature = signInAndUpFeature.signUpForm; + var signInFeature = signInAndUpFeature.signInForm; + var signInForm = { + recipeImplementation: recipeImplementation, + config: recipe$1.config, + styleFromInit: signInFeature.style, + formFields: signInFeature.formFields, + error: state.error, + clearError: function () { + return dispatch({ type: "setError", error: undefined }); + }, + onError: function (error) { + return dispatch({ type: "setError", error: error }); + }, + onSuccess: onSignInSuccess, + forgotPasswordClick: function () { + return recipe$1.redirect({ action: "RESET_PASSWORD" }, history); + }, + }; + var signUpForm = { + recipeImplementation: recipeImplementation, + config: recipe$1.config, + styleFromInit: signUpFeature.style, + formFields: getThemeSignUpFeatureFormFields(signUpFeature.formFields, recipe$1, userContext), + error: state.error, + clearError: function () { + return dispatch({ type: "setError", error: undefined }); + }, + onError: function (error) { + return dispatch({ type: "setError", error: error }); + }, + onSuccess: onSignUpSuccess, + }; + return { + config: recipe$1.config, + signInForm: signInForm, + signUpForm: signUpForm, + }; + }, + [recipe$1, state, dispatch] + ); +} +var SignInAndUpFeature = function (props) { + var _a = useFeatureReducer(props.recipe), + state = _a[0], + dispatch = _a[1]; + var childProps = useChildProps(props.recipe, state, dispatch, props.history); + var recipeComponentOverrides = props.useComponentOverrides(); + return jsxRuntime.jsx( + uiEntry.ComponentOverrideContext.Provider, + genericComponentOverrideContext.__assign( + { value: recipeComponentOverrides }, + { + children: jsxRuntime.jsx( + uiEntry.FeatureWrapper, + genericComponentOverrideContext.__assign( + { + useShadowDom: props.recipe.config.useShadowDom, + defaultStore: defaultTranslationsEmailPassword, + }, + { + children: jsxRuntime.jsxs(React.Fragment, { + children: [ + props.children === undefined && + jsxRuntime.jsx( + SignInAndUpThemeWrapper, + genericComponentOverrideContext.__assign({}, childProps, { + featureState: state, + dispatch: dispatch, + }) + ), + props.children && + React__namespace.Children.map(props.children, function (child) { + if (React__namespace.isValidElement(child)) { + return React__namespace.cloneElement( + child, + genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, childProps), + { featureState: state, dispatch: dispatch } + ) + ); + } + return child; + }), + ], + }), + } + ) + ), + } ) ); +}; +var getModifiedRecipeImplementation = function (origImpl) { + return genericComponentOverrideContext.__assign({}, origImpl); +}; +function getThemeSignUpFeatureFormFields(formFields, recipe, userContext) { + var _this = this; + var emailPasswordOnly = formFields.length === 2; + return formFields.map(function (field) { + return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, field), { + showIsRequired: (function () { + // If email and password only, do not show required indicator (*). + if (emailPasswordOnly) { + return false; + } + // Otherwise, show for all non optional fields (including email and password). + return field.optional === false; + })(), + validate: (function () { + // If field is not email, return field validate unchanged. + if (field.id !== "email") { + return field.validate; + } + // Otherwise, if email, use syntax validate method and check if email exists. + return function (value) { + return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { + var error, emailExists, err_1; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [4 /*yield*/, field.validate(value)]; + case 1: + error = _a.sent(); + if (error !== undefined) { + return [2 /*return*/, error]; + } + if (typeof value !== "string") { + return [2 /*return*/, "GENERAL_ERROR_EMAIL_NON_STRING"]; + } + _a.label = 2; + case 2: + _a.trys.push([2, 4, , 5]); + return [ + 4 /*yield*/, + recipe.webJSRecipe.doesEmailExist({ + email: value, + userContext: userContext, + }), + ]; + case 3: + emailExists = _a.sent().doesExist; + if (emailExists) { + return [2 /*return*/, "EMAIL_PASSWORD_EMAIL_ALREADY_EXISTS"]; + } + return [3 /*break*/, 5]; + case 4: + err_1 = _a.sent(); + if (STGeneralError__default.default.isThisError(err_1)) { + return [2 /*return*/, err_1.message]; + } + return [3 /*break*/, 5]; + case 5: + return [2 /*return*/, undefined]; + } + }); + }); + }; + })(), + }); + }); } -exports.BackButton = BackButton; +var EmailPasswordPreBuiltUI = /** @class */ (function (_super) { + genericComponentOverrideContext.__extends(EmailPasswordPreBuiltUI, _super); + function EmailPasswordPreBuiltUI(recipeInstance) { + var _this = _super.call(this) || this; + _this.recipeInstance = recipeInstance; + // Instance methods + _this.getFeatures = function (useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = componentOverrideContext.useContext; + } + var features = {}; + if (_this.recipeInstance.config.signInAndUpFeature.disableDefaultUI !== true) { + var normalisedFullPath = _this.recipeInstance.config.appInfo.websiteBasePath.appendPath( + new NormalisedURLPath__default.default("/") + ); + features[normalisedFullPath.getAsStringDangerous()] = { + matches: genericComponentOverrideContext.matchRecipeIdUsingQueryParams( + _this.recipeInstance.config.recipeId + ), + component: function (props) { + return _this.getFeatureComponent("signinup", props, useComponentOverrides); + }, + recipeID: recipe$1.EmailPassword.RECIPE_ID, + }; + } + if (_this.recipeInstance.config.resetPasswordUsingTokenFeature.disableDefaultUI !== true) { + var normalisedFullPath = _this.recipeInstance.config.appInfo.websiteBasePath.appendPath( + new NormalisedURLPath__default.default(constants.DEFAULT_RESET_PASSWORD_PATH) + ); + features[normalisedFullPath.getAsStringDangerous()] = { + matches: genericComponentOverrideContext.matchRecipeIdUsingQueryParams( + _this.recipeInstance.config.recipeId + ), + component: function (props) { + return _this.getFeatureComponent("resetpassword", props, useComponentOverrides); + }, + recipeID: recipe$1.EmailPassword.RECIPE_ID, + }; + } + return features; + }; + _this.getFeatureComponent = function (componentName, props, useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = componentOverrideContext.useContext; + } + if (componentName === "signinup") { + if (props.redirectOnSessionExists !== false) { + return jsxRuntime.jsx( + uiEntry.UserContextWrapper, + genericComponentOverrideContext.__assign( + { userContext: props.userContext }, + { + children: jsxRuntime.jsx( + authWidgetWrapper.AuthWidgetWrapper, + genericComponentOverrideContext.__assign( + { authRecipe: _this.recipeInstance, history: props.history }, + { + children: jsxRuntime.jsx( + SignInAndUpFeature, + genericComponentOverrideContext.__assign( + { recipe: _this.recipeInstance }, + props, + { useComponentOverrides: useComponentOverrides } + ) + ), + } + ) + ), + } + ) + ); + } else { + return jsxRuntime.jsx( + uiEntry.UserContextWrapper, + genericComponentOverrideContext.__assign( + { userContext: props.userContext }, + { + children: jsxRuntime.jsx( + SignInAndUpFeature, + genericComponentOverrideContext.__assign({ recipe: _this.recipeInstance }, props, { + useComponentOverrides: useComponentOverrides, + }) + ), + } + ) + ); + } + } else if (componentName === "resetpassword") { + return jsxRuntime.jsx( + uiEntry.UserContextWrapper, + genericComponentOverrideContext.__assign( + { userContext: props.userContext }, + { + children: jsxRuntime.jsx( + ResetPasswordUsingToken$1, + genericComponentOverrideContext.__assign({ recipe: _this.recipeInstance }, props, { + useComponentOverrides: useComponentOverrides, + }) + ), + } + ) + ); + } else { + throw new Error("Should never come here."); + } + }; + return _this; + } + // Static methods + EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance = function () { + if (EmailPasswordPreBuiltUI.instance === undefined) { + var recipeInstance = recipe$1.EmailPassword.getInstanceOrThrow(); + EmailPasswordPreBuiltUI.instance = new EmailPasswordPreBuiltUI(recipeInstance); + } + return EmailPasswordPreBuiltUI.instance; + }; + EmailPasswordPreBuiltUI.getFeatures = function (useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = componentOverrideContext.useContext; + } + return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides); + }; + EmailPasswordPreBuiltUI.getFeatureComponent = function (componentName, props, useComponentOverrides) { + if (useComponentOverrides === void 0) { + useComponentOverrides = componentOverrideContext.useContext; + } + return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent( + componentName, + props, + useComponentOverrides + ); + }; + // For tests + EmailPasswordPreBuiltUI.reset = function () { + if (!genericComponentOverrideContext.isTest()) { + return; + } + EmailPasswordPreBuiltUI.instance = undefined; + return; + }; + EmailPasswordPreBuiltUI.SignInAndUp = function (prop) { + if (prop === void 0) { + prop = {}; + } + return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent("signinup", prop); + }; + EmailPasswordPreBuiltUI.ResetPasswordUsingToken = function (prop) { + return EmailPasswordPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent("resetpassword", prop); + }; + EmailPasswordPreBuiltUI.ResetPasswordUsingTokenTheme = ResetPasswordUsingTokenThemeWrapper; + EmailPasswordPreBuiltUI.SignInAndUpTheme = SignInAndUpThemeWrapper; + return EmailPasswordPreBuiltUI; +})(uiEntry.RecipeRouter); +var SignInAndUp = EmailPasswordPreBuiltUI.SignInAndUp; +var ResetPasswordUsingToken = EmailPasswordPreBuiltUI.ResetPasswordUsingToken; + +exports.EmailPasswordPreBuiltUI = EmailPasswordPreBuiltUI; +exports.ResetPasswordUsingToken = ResetPasswordUsingToken; +exports.ResetPasswordUsingTokenThemeWrapper = ResetPasswordUsingTokenThemeWrapper; +exports.SignInAndUp = SignInAndUp; +exports.SignInAndUpThemeWrapper = SignInAndUpThemeWrapper; +exports.SignInFooter = SignInFooter; +exports.SignInForm = SignInForm; +exports.SignInHeader = SignInHeader; +exports.SignUpFooter = SignUpFooter; +exports.SignUpForm = SignUpForm; +exports.SignUpHeader = SignUpHeader; +exports.defaultTranslationsEmailPassword = defaultTranslationsEmailPassword; +exports.useChildProps = useChildProps; +exports.useFeatureReducer = useFeatureReducer; diff --git a/lib/build/emailpassword-shared8.js b/lib/build/emailpassword-shared8.js index e48dc5334..d2336cadd 100644 --- a/lib/build/emailpassword-shared8.js +++ b/lib/build/emailpassword-shared8.js @@ -2,33 +2,6 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); var jsxRuntime = require("react/jsx-runtime"); -var React = require("react"); -var STGeneralError = require("supertokens-web-js/utils/error"); -var validators = require("./emailpassword-shared5.js"); -var button = require("./emailpassword-shared2.js"); -require("./index2.js"); -var translationContext = require("./translationContext.js"); - -function _interopDefault(e) { - return e && e.__esModule ? e : { default: e }; -} - -var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError); - -/* - * Component. - */ -function FormRow(_a) { - var children = _a.children, - hasError = _a.hasError; - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": ["formRow", hasError ? "hasError" : ""].join(" ") }, - { children: children } - ) - ); -} /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * @@ -50,798 +23,41 @@ function FormRow(_a) { /* * Component. */ -function CheckedIcon() { +function HeavyArrowLeftIcon(_a) { + var color = _a.color; return jsxRuntime.jsx( "svg", genericComponentOverrideContext.__assign( { xmlns: "http://www.w3.org/2000/svg", - width: "14.862", - height: "12.033", - viewBox: "0 0 14.862 12.033", - "data-supertokens": "checkedIcon", + width: "16", + height: "13", + viewBox: "0 0 16 13", + "data-supertokens": "heavyArrowLeftIcon", }, { children: jsxRuntime.jsx("path", { - fill: "rgb(var(--palette-primary))", - d: "M12.629 49L5.06 56.572l-2.829-2.829L0 55.977l5.057 5.057.654-.651 9.152-9.152z", - transform: "translate(0 -49)", + fill: color, + d: "M13 6.8h.022H3.8l2.9 2.9a.761.761 0 0 1 0 1.07l-.451.451a.754.754 0 0 1-1.064 0L.22 6.254a.759.759 0 0 1 0-1.068L5.186.22a.755.755 0 0 1 1.064 0l.45.451a.746.746 0 0 1 .22.532.724.724 0 0 1-.22.522l-2.93 2.92h9.24a.781.781 0 0 1 .764.773v.638A.766.766 0 0 1 13 6.8z", + transform: "translate(1.182 .708)", }), } ) ); } -/* 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 ErrorIcon() { +function BackButton(_a) { + var onClick = _a.onClick; return jsxRuntime.jsx( - "svg", + "button", genericComponentOverrideContext.__assign( - { - xmlns: "http://www.w3.org/2000/svg", - width: "17", - height: "15", - viewBox: "0 0 17 15", - "data-supertokens": "errorIcon", - }, - { - children: jsxRuntime.jsxs("g", { - children: [ - jsxRuntime.jsx( - "g", - genericComponentOverrideContext.__assign( - { className: "Asdf", fill: "rgb(var(--palette-error))" }, - { - children: jsxRuntime.jsx("path", { - d: "M13.568 14.75H3.432c-.63 0-1.195-.325-1.512-.869-.317-.544-.32-1.196-.01-1.744l5.067-8.943c.315-.556.884-.887 1.523-.887.639 0 1.208.331 1.523.887l5.067 8.943c.31.548.307 1.2-.01 1.744s-.882.869-1.512.869z", - transform: "translate(-824.894 -352.829) translate(824.894 352.829)", - }), - } - ) - ), - jsxRuntime.jsx( - "text", - genericComponentOverrideContext.__assign( - { - fill: "#fff", - fontSize: "10px", - fontWeight: "700", - transform: "translate(-824.894 -352.829) translate(832.014 365.198)", - }, - { - children: jsxRuntime.jsx( - "tspan", - genericComponentOverrideContext.__assign({ x: "0", y: "0" }, { children: "!" }) - ), - } - ) - ), - ], - }), - } + { onClick: onClick, "data-supertokens": "backButton backButtonCommon" }, + { children: jsxRuntime.jsx(HeavyArrowLeftIcon, { color: "rgb(var(--palette-textTitle))" }) } ) ); } -/* 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 ShowPasswordIcon(_a) { - var showPassword = _a.showPassword; - if (showPassword === true) { - return jsxRuntime.jsx("div", { - children: jsxRuntime.jsx( - "svg", - genericComponentOverrideContext.__assign( - { - xmlns: "http://www.w3.org/2000/svg", - width: "18.391", - height: "16.276", - viewBox: "0 0 18.391 16.276", - "data-supertokens": "showPasswordIcon show", - }, - { - children: jsxRuntime.jsxs("g", { - children: [ - jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("path", { - fill: "rgb(var(--palette-textPrimary))", - d: "M29.289 100.33c-2.4-3.63-5.619-5.63-9.069-5.63s-6.67 2-9.069 5.63a.767.767 0 0 0 0 .845c2.4 3.63 5.619 5.63 9.069 5.63s6.67-2 9.069-5.63a.767.767 0 0 0 0-.845zm-9.069 4.944c-2.785 0-5.435-1.6-7.5-4.519 2.065-2.92 4.715-4.519 7.5-4.519s5.435 1.6 7.5 4.519c-2.064 2.92-4.711 4.519-7.5 4.519z", - transform: - "translate(-822 -420.048) translate(822 422.035) translate(-11.025 -94.7)", - }), - }), - }), - }), - jsxRuntime.jsxs( - "g", - genericComponentOverrideContext.__assign( - { - fill: "rgb(var(--palette-textPrimary))", - stroke: "rgb(var(--palette-inputBackground))", - transform: "translate(-822 -420.048) translate(827.164 424.055)", - }, - { - children: [ - jsxRuntime.jsx("circle", { - cx: "4.036", - cy: "4.036", - r: "4.036", - stroke: "none", - }), - jsxRuntime.jsx("circle", { - cx: "4.036", - cy: "4.036", - r: "3.536", - fill: "none", - }), - ], - } - ) - ), - jsxRuntime.jsx("path", { - fill: "none", - stroke: "#707070", - strokeLinecap: "round", - strokeWidth: "2.25px", - d: "M11.981 0L0 11.981", - transform: "translate(-822 -420.048) translate(825.084 421.639)", - }), - jsxRuntime.jsx("path", { - fill: "none", - stroke: "rgb(var(--palette-inputBackground))", - strokeLinecap: "round", - d: "M13.978 0L0 13.978", - transform: "translate(-822 -420.048) translate(825.084 421.639)", - }), - ], - }), - } - ) - ), - }); - } - return jsxRuntime.jsx("div", { - children: jsxRuntime.jsx( - "svg", - genericComponentOverrideContext.__assign( - { - xmlns: "http://www.w3.org/2000/svg", - width: "18.281", - height: "12.033", - viewBox: "0 0 18.281 12.033", - "data-supertokens": "showPasswordIcon hide", - }, - { - children: jsxRuntime.jsxs("g", { - children: [ - jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("g", { - children: jsxRuntime.jsx("path", { - fill: "rgb(var(--palette-textPrimary))", - d: "M29.18 100.3c-2.384-3.608-5.586-5.6-9.015-5.6s-6.63 1.989-9.015 5.6a.763.763 0 0 0 0 .84c2.384 3.608 5.586 5.6 9.015 5.6s6.63-1.989 9.015-5.6a.763.763 0 0 0 0-.84zm-9.015 4.914c-2.769 0-5.4-1.589-7.459-4.492 2.052-2.9 4.686-4.492 7.459-4.492s5.4 1.589 7.459 4.492c-2.056 2.899-4.686 4.489-7.458 4.489z", - transform: - "translate(-822 -422.088) translate(822 422.088) translate(-11.025 -94.7)", - }), - }), - }), - }), - jsxRuntime.jsxs( - "g", - genericComponentOverrideContext.__assign( - { - fill: "rgb(var(--palette-textPrimary))", - stroke: "rgb(var(--palette-inputBackground))", - transform: "translate(-822 -422.088) translate(827.133 424.096)", - }, - { - children: [ - jsxRuntime.jsx("circle", { - cx: "4.012", - cy: "4.012", - r: "4.012", - stroke: "none", - }), - jsxRuntime.jsx("circle", { - cx: "4.012", - cy: "4.012", - r: "3.512", - fill: "none", - }), - ], - } - ) - ), - ], - }), - } - ) - ), - }); -} - -var Input = function (_a) { - var type = _a.type, - name = _a.name, - hasError = _a.hasError, - autoComplete = _a.autoComplete, - onInputFocus = _a.onInputFocus, - onInputBlur = _a.onInputBlur, - onChange = _a.onChange, - value = _a.value, - placeholder = _a.placeholder, - validated = _a.validated, - autofocus = _a.autofocus; - var t = translationContext.useTranslation(); - var _b = React.useState(false), - showPassword = _b[0], - setShowPassword = _b[1]; - /* - * Method. - */ - function handleFocus() { - if (onInputFocus !== undefined) { - onInputFocus(value); - } - } - function handleBlur() { - if (onInputBlur !== undefined) { - onInputBlur(value); - } - } - function handleChange(event) { - if (onChange) { - onChange(event.target.value); - } - } - if (autoComplete === undefined) { - autoComplete = "off"; - } - var inputType = type; - if (type === "password" && showPassword === true) { - inputType = "text"; - } - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "inputContainer" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": ["inputWrapper", hasError ? "inputError" : ""].join(" ") }, - { - children: [ - jsxRuntime.jsx("input", { - autoFocus: autofocus, - autoComplete: autoComplete, - "data-supertokens": "input", - className: "supertokens-input", - onFocus: handleFocus, - onBlur: handleBlur, - type: inputType, - name: name, - placeholder: t(placeholder), - onChange: handleChange, - value: value, - }), - hasError === true && - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "inputAdornment inputAdornmentError" }, - { children: jsxRuntime.jsx(ErrorIcon, {}) } - ) - ), - validated === true && - hasError === false && - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "inputAdornment inputAdornmentSuccess" }, - { children: jsxRuntime.jsx(CheckedIcon, {}) } - ) - ), - type === "password" && - value.length > 0 && - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { - onClick: function () { - return setShowPassword(showPassword === false); - }, - "data-supertokens": "inputAdornment showPassword", - }, - { - children: jsxRuntime.jsx(ShowPasswordIcon, { - showPassword: showPassword, - }), - } - ) - ), - ], - } - ) - ), - } - ) - ); -}; - -function InputError(_a) { - var error = _a.error; - var t = translationContext.useTranslation(); - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign({ "data-supertokens": "inputErrorMessage" }, { children: t(error) }) - ); -} - -function Label(_a) { - var value = _a.value, - showIsRequired = _a.showIsRequired; - var t = translationContext.useTranslation(); - return jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "label" }, - { children: [t(value), showIsRequired && value && value.trim() !== "" && " *"] } - ) - ); -} - -var fetchDefaultValue = function (field) { - if (field.getDefaultValue !== undefined) { - var defaultValue = field.getDefaultValue(); - if (typeof defaultValue !== "string") { - throw new Error("getDefaultValue for ".concat(field.id, " must return a string")); - } else { - return defaultValue; - } - } - return ""; -}; -function InputComponentWrapper(props) { - var field = props.field, - type = props.type, - fstate = props.fstate, - onInputFocus = props.onInputFocus, - onInputBlur = props.onInputBlur, - onInputChange = props.onInputChange; - var useCallbackOnInputFocus = React.useCallback( - function (value) { - onInputFocus({ - id: field.id, - value: value, - }); - }, - [onInputFocus, field] - ); - var useCallbackOnInputBlur = React.useCallback( - function (value) { - onInputBlur({ - id: field.id, - value: value, - }); - }, - [onInputBlur, field] - ); - var useCallbackOnInputChange = React.useCallback( - function (value) { - onInputChange({ - id: field.id, - value: value, - }); - }, - [onInputChange, field] - ); - return field.inputComponent !== undefined - ? jsxRuntime.jsx(field.inputComponent, { - type: type, - name: field.id, - validated: fstate.validated === true, - placeholder: field.placeholder, - value: fstate.value, - autoComplete: field.autoComplete, - autofocus: field.autofocus, - onInputFocus: useCallbackOnInputFocus, - onInputBlur: useCallbackOnInputBlur, - onChange: useCallbackOnInputChange, - hasError: fstate.error !== undefined, - }) - : jsxRuntime.jsx(Input, { - type: type, - name: field.id, - validated: fstate.validated === true, - placeholder: field.placeholder, - value: fstate.value, - autoComplete: field.autoComplete, - onInputFocus: useCallbackOnInputFocus, - onInputBlur: useCallbackOnInputBlur, - onChange: useCallbackOnInputChange, - autofocus: field.autofocus, - hasError: fstate.error !== undefined, - }); -} -var FormBase = function (props) { - var footer = props.footer, - buttonLabel = props.buttonLabel, - showLabels = props.showLabels, - validateOnBlur = props.validateOnBlur, - formFields = props.formFields; - var unmounting = React.useRef(new AbortController()); - React.useEffect( - function () { - // We need this because in some cases this gets called multiple times - unmounting.current = new AbortController(); - return function () { - unmounting.current.abort(); - }; - }, - [unmounting] - ); - var _a = React.useState( - props.formFields.map(function (f) { - return { id: f.id, value: fetchDefaultValue(f) }; - }) - ), - fieldStates = _a[0], - setFieldStates = _a[1]; - var _b = React.useState(false), - isLoading = _b[0], - setIsLoading = _b[1]; - var updateFieldState = React.useCallback( - function (id, update) { - setFieldStates(function (os) { - var field = os.find(function (f) { - return f.id === id; - }); - if (field === undefined) { - return genericComponentOverrideContext.__spreadArray( - genericComponentOverrideContext.__spreadArray([], os, true), - [update({ id: id, value: "" })], - false - ); - } - return os - .filter(function (f) { - return f !== field; - }) - .concat(update(field)); - }); - }, - [setFieldStates] - ); - var onInputFocus = React.useCallback( - function (field) { - updateFieldState(field.id, function (os) { - return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, os), { - validated: false, - }); - }); - }, - [updateFieldState] - ); - var onInputBlur = React.useCallback( - function (field) { - return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { - var fieldConfig, error, _a; - return genericComponentOverrideContext.__generator(this, function (_b) { - switch (_b.label) { - case 0: - if (!validateOnBlur) { - return [2 /*return*/]; - } - fieldConfig = props.formFields.find(function (f) { - return f.id === field.id; - }); - if (!(fieldConfig && field.value !== "")) return [3 /*break*/, 2]; - return [4 /*yield*/, fieldConfig.validate(field.value)]; - case 1: - _a = _b.sent(); - return [3 /*break*/, 3]; - case 2: - _a = undefined; - _b.label = 3; - case 3: - error = _a; - updateFieldState(field.id, function (os) { - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, os), - { error: error, validated: error === undefined && field.value.length !== 0 } - ); - }); - return [2 /*return*/]; - } - }); - }); - }, - [validateOnBlur, updateFieldState, props.formFields] - ); - var onInputChange = React.useCallback( - function (field) { - if (typeof field.value !== "string") { - throw new Error("".concat(field.id, " value must be a string")); - } - updateFieldState(field.id, function (os) { - return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, os), { - value: field.value, - error: undefined, - }); - }); - props.clearError(); - }, - [updateFieldState] - ); - var onFormSubmit = React.useCallback( - function (e) { - return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { - var apiFields, - fieldUpdates, - result, - generalError, - e_1, - _loop_1, - _i, - formFields_1, - field, - errorFields_1, - getErrorMessage_1; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - // Prevent default event propagation. - e.preventDefault(); - // Set loading state. - setIsLoading(true); - setFieldStates(function (os) { - return os.map(function (fs) { - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, fs), - { error: undefined } - ); - }); - }); - apiFields = formFields.map(function (field) { - var fieldState = fieldStates.find(function (fs) { - return fs.id === field.id; - }); - return { - id: field.id, - value: fieldState === undefined ? "" : fieldState.value, - }; - }); - fieldUpdates = []; - _a.label = 1; - case 1: - _a.trys.push([1, 6, 7, 8]); - result = void 0; - generalError = void 0; - _a.label = 2; - case 2: - _a.trys.push([2, 4, , 5]); - return [ - 4 /*yield*/, - props.callAPI(apiFields, function (id, value) { - return fieldUpdates.push({ id: id, value: value }); - }), - ]; - case 3: - result = _a.sent(); - return [3 /*break*/, 5]; - case 4: - e_1 = _a.sent(); - if (STGeneralError__default.default.isThisError(e_1)) { - generalError = e_1; - } else { - throw e_1; - } - return [3 /*break*/, 5]; - case 5: - if (unmounting.current.signal.aborted) { - return [2 /*return*/]; - } - _loop_1 = function (field) { - var update = fieldUpdates.find(function (f) { - return f.id === field.id; - }); - if (update || field.clearOnSubmit === true) { - // We can do these one by one, it's almost never more than one field - updateFieldState(field.id, function (os) { - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, os), - { value: update ? update.value : "" } - ); - }); - } - }; - for (_i = 0, formFields_1 = formFields; _i < formFields_1.length; _i++) { - field = formFields_1[_i]; - _loop_1(field); - } - if (generalError !== undefined) { - props.onError(generalError.message); - } else { - // If successful - if (result.status === "OK") { - setIsLoading(false); - props.clearError(); - if (props.onSuccess !== undefined) { - props.onSuccess(result); - } - } - if (unmounting.current.signal.aborted) { - return [2 /*return*/]; - } - // If field error. - if (result.status === "FIELD_ERROR") { - errorFields_1 = result.formFields; - getErrorMessage_1 = function (fs) { - var _a; - var errorMessage = - (_a = errorFields_1.find(function (ef) { - return ef.id === fs.id; - })) === null || _a === void 0 - ? void 0 - : _a.error; - if (errorMessage === "Field is not optional") { - var fieldConfigData = props.formFields.find(function (f) { - return f.id === fs.id; - }); - // replace non-optional server error message from nonOptionalErrorMsg - if ( - (fieldConfigData === null || fieldConfigData === void 0 - ? void 0 - : fieldConfigData.nonOptionalErrorMsg) !== undefined - ) { - return fieldConfigData === null || fieldConfigData === void 0 - ? void 0 - : fieldConfigData.nonOptionalErrorMsg; - } - } - return errorMessage; - }; - setFieldStates(function (os) { - return os.map(function (fs) { - return genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, fs), - { error: getErrorMessage_1(fs) } - ); - }); - }); - } - } - return [3 /*break*/, 8]; - case 6: - _a.sent(); - props.onError("SOMETHING_WENT_WRONG_ERROR"); - return [3 /*break*/, 8]; - case 7: - setIsLoading(false); - return [7 /*endfinally*/]; - case 8: - return [2 /*return*/]; - } - }); - }); - }, - [setIsLoading, setFieldStates, props, formFields, fieldStates] - ); - return jsxRuntime.jsxs( - "form", - genericComponentOverrideContext.__assign( - { autoComplete: "on", noValidate: true, onSubmit: onFormSubmit }, - { - children: [ - formFields.map(function (field) { - var type = "text"; - // If email or password, replace field type. - if (validators.MANDATORY_FORM_FIELDS_ID_ARRAY.includes(field.id)) { - type = field.id; - } - if (field.id === "confirm-password") { - type = "password"; - } - var fstate = fieldStates.find(function (s) { - return s.id === field.id; - }); - if (fstate === undefined) { - throw new Error("Should never come here"); - } - return jsxRuntime.jsx( - FormRow, - genericComponentOverrideContext.__assign( - { hasError: fstate.error !== undefined }, - { - children: jsxRuntime.jsxs(React.Fragment, { - children: [ - showLabels && - (field.labelComponent !== undefined - ? field.labelComponent - : jsxRuntime.jsx(Label, { - value: field.label, - showIsRequired: field.showIsRequired, - })), - jsxRuntime.jsx(InputComponentWrapper, { - type: type, - field: field, - fstate: fstate, - onInputFocus: onInputFocus, - onInputBlur: onInputBlur, - onInputChange: onInputChange, - }), - fstate.error && jsxRuntime.jsx(InputError, { error: fstate.error }), - ], - }), - } - ), - field.id - ); - }), - jsxRuntime.jsx( - FormRow, - { - children: jsxRuntime.jsxs(React.Fragment, { - children: [ - jsxRuntime.jsx(button.Button, { - disabled: isLoading, - isLoading: isLoading, - type: "submit", - label: buttonLabel, - }), - footer, - ], - }), - }, - "form-button" - ), - ], - } - ) - ); -}; - -exports.ErrorIcon = ErrorIcon; -exports.FormBase = FormBase; -exports.FormRow = FormRow; -exports.Label = Label; +exports.BackButton = BackButton; diff --git a/lib/build/emailpassword-shared9.js b/lib/build/emailpassword-shared9.js new file mode 100644 index 000000000..51eb9af1f --- /dev/null +++ b/lib/build/emailpassword-shared9.js @@ -0,0 +1,847 @@ +"use strict"; + +var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); +var jsxRuntime = require("react/jsx-runtime"); +var React = require("react"); +var STGeneralError = require("supertokens-web-js/utils/error"); +var constants = require("./emailpassword-shared5.js"); +var button = require("./emailpassword-shared2.js"); +require("./index2.js"); +var translationContext = require("./translationContext.js"); + +function _interopDefault(e) { + return e && e.__esModule ? e : { default: e }; +} + +var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError); + +/* + * Component. + */ +function FormRow(_a) { + var children = _a.children, + hasError = _a.hasError; + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": ["formRow", hasError ? "hasError" : ""].join(" ") }, + { children: children } + ) + ); +} + +/* 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 CheckedIcon() { + return jsxRuntime.jsx( + "svg", + genericComponentOverrideContext.__assign( + { + xmlns: "http://www.w3.org/2000/svg", + width: "14.862", + height: "12.033", + viewBox: "0 0 14.862 12.033", + "data-supertokens": "checkedIcon", + }, + { + children: jsxRuntime.jsx("path", { + fill: "rgb(var(--palette-primary))", + d: "M12.629 49L5.06 56.572l-2.829-2.829L0 55.977l5.057 5.057.654-.651 9.152-9.152z", + transform: "translate(0 -49)", + }), + } + ) + ); +} + +/* 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 ErrorIcon() { + return jsxRuntime.jsx( + "svg", + genericComponentOverrideContext.__assign( + { + xmlns: "http://www.w3.org/2000/svg", + width: "17", + height: "15", + viewBox: "0 0 17 15", + "data-supertokens": "errorIcon", + }, + { + children: jsxRuntime.jsxs("g", { + children: [ + jsxRuntime.jsx( + "g", + genericComponentOverrideContext.__assign( + { className: "Asdf", fill: "rgb(var(--palette-error))" }, + { + children: jsxRuntime.jsx("path", { + d: "M13.568 14.75H3.432c-.63 0-1.195-.325-1.512-.869-.317-.544-.32-1.196-.01-1.744l5.067-8.943c.315-.556.884-.887 1.523-.887.639 0 1.208.331 1.523.887l5.067 8.943c.31.548.307 1.2-.01 1.744s-.882.869-1.512.869z", + transform: "translate(-824.894 -352.829) translate(824.894 352.829)", + }), + } + ) + ), + jsxRuntime.jsx( + "text", + genericComponentOverrideContext.__assign( + { + fill: "#fff", + fontSize: "10px", + fontWeight: "700", + transform: "translate(-824.894 -352.829) translate(832.014 365.198)", + }, + { + children: jsxRuntime.jsx( + "tspan", + genericComponentOverrideContext.__assign({ x: "0", y: "0" }, { children: "!" }) + ), + } + ) + ), + ], + }), + } + ) + ); +} + +/* 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 ShowPasswordIcon(_a) { + var showPassword = _a.showPassword; + if (showPassword === true) { + return jsxRuntime.jsx("div", { + children: jsxRuntime.jsx( + "svg", + genericComponentOverrideContext.__assign( + { + xmlns: "http://www.w3.org/2000/svg", + width: "18.391", + height: "16.276", + viewBox: "0 0 18.391 16.276", + "data-supertokens": "showPasswordIcon show", + }, + { + children: jsxRuntime.jsxs("g", { + children: [ + jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("path", { + fill: "rgb(var(--palette-textPrimary))", + d: "M29.289 100.33c-2.4-3.63-5.619-5.63-9.069-5.63s-6.67 2-9.069 5.63a.767.767 0 0 0 0 .845c2.4 3.63 5.619 5.63 9.069 5.63s6.67-2 9.069-5.63a.767.767 0 0 0 0-.845zm-9.069 4.944c-2.785 0-5.435-1.6-7.5-4.519 2.065-2.92 4.715-4.519 7.5-4.519s5.435 1.6 7.5 4.519c-2.064 2.92-4.711 4.519-7.5 4.519z", + transform: + "translate(-822 -420.048) translate(822 422.035) translate(-11.025 -94.7)", + }), + }), + }), + }), + jsxRuntime.jsxs( + "g", + genericComponentOverrideContext.__assign( + { + fill: "rgb(var(--palette-textPrimary))", + stroke: "rgb(var(--palette-inputBackground))", + transform: "translate(-822 -420.048) translate(827.164 424.055)", + }, + { + children: [ + jsxRuntime.jsx("circle", { + cx: "4.036", + cy: "4.036", + r: "4.036", + stroke: "none", + }), + jsxRuntime.jsx("circle", { + cx: "4.036", + cy: "4.036", + r: "3.536", + fill: "none", + }), + ], + } + ) + ), + jsxRuntime.jsx("path", { + fill: "none", + stroke: "#707070", + strokeLinecap: "round", + strokeWidth: "2.25px", + d: "M11.981 0L0 11.981", + transform: "translate(-822 -420.048) translate(825.084 421.639)", + }), + jsxRuntime.jsx("path", { + fill: "none", + stroke: "rgb(var(--palette-inputBackground))", + strokeLinecap: "round", + d: "M13.978 0L0 13.978", + transform: "translate(-822 -420.048) translate(825.084 421.639)", + }), + ], + }), + } + ) + ), + }); + } + return jsxRuntime.jsx("div", { + children: jsxRuntime.jsx( + "svg", + genericComponentOverrideContext.__assign( + { + xmlns: "http://www.w3.org/2000/svg", + width: "18.281", + height: "12.033", + viewBox: "0 0 18.281 12.033", + "data-supertokens": "showPasswordIcon hide", + }, + { + children: jsxRuntime.jsxs("g", { + children: [ + jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("g", { + children: jsxRuntime.jsx("path", { + fill: "rgb(var(--palette-textPrimary))", + d: "M29.18 100.3c-2.384-3.608-5.586-5.6-9.015-5.6s-6.63 1.989-9.015 5.6a.763.763 0 0 0 0 .84c2.384 3.608 5.586 5.6 9.015 5.6s6.63-1.989 9.015-5.6a.763.763 0 0 0 0-.84zm-9.015 4.914c-2.769 0-5.4-1.589-7.459-4.492 2.052-2.9 4.686-4.492 7.459-4.492s5.4 1.589 7.459 4.492c-2.056 2.899-4.686 4.489-7.458 4.489z", + transform: + "translate(-822 -422.088) translate(822 422.088) translate(-11.025 -94.7)", + }), + }), + }), + }), + jsxRuntime.jsxs( + "g", + genericComponentOverrideContext.__assign( + { + fill: "rgb(var(--palette-textPrimary))", + stroke: "rgb(var(--palette-inputBackground))", + transform: "translate(-822 -422.088) translate(827.133 424.096)", + }, + { + children: [ + jsxRuntime.jsx("circle", { + cx: "4.012", + cy: "4.012", + r: "4.012", + stroke: "none", + }), + jsxRuntime.jsx("circle", { + cx: "4.012", + cy: "4.012", + r: "3.512", + fill: "none", + }), + ], + } + ) + ), + ], + }), + } + ) + ), + }); +} + +var Input = function (_a) { + var type = _a.type, + name = _a.name, + hasError = _a.hasError, + autoComplete = _a.autoComplete, + onInputFocus = _a.onInputFocus, + onInputBlur = _a.onInputBlur, + onChange = _a.onChange, + value = _a.value, + placeholder = _a.placeholder, + validated = _a.validated, + autofocus = _a.autofocus; + var t = translationContext.useTranslation(); + var _b = React.useState(false), + showPassword = _b[0], + setShowPassword = _b[1]; + /* + * Method. + */ + function handleFocus() { + if (onInputFocus !== undefined) { + onInputFocus(value); + } + } + function handleBlur() { + if (onInputBlur !== undefined) { + onInputBlur(value); + } + } + function handleChange(event) { + if (onChange) { + onChange(event.target.value); + } + } + if (autoComplete === undefined) { + autoComplete = "off"; + } + var inputType = type; + if (type === "password" && showPassword === true) { + inputType = "text"; + } + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "inputContainer" }, + { + children: jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": ["inputWrapper", hasError ? "inputError" : ""].join(" ") }, + { + children: [ + jsxRuntime.jsx("input", { + autoFocus: autofocus, + autoComplete: autoComplete, + "data-supertokens": "input", + className: "supertokens-input", + onFocus: handleFocus, + onBlur: handleBlur, + type: inputType, + name: name, + placeholder: t(placeholder), + onChange: handleChange, + value: value, + }), + hasError === true && + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "inputAdornment inputAdornmentError" }, + { children: jsxRuntime.jsx(ErrorIcon, {}) } + ) + ), + validated === true && + hasError === false && + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "inputAdornment inputAdornmentSuccess" }, + { children: jsxRuntime.jsx(CheckedIcon, {}) } + ) + ), + type === "password" && + value.length > 0 && + jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign( + { + onClick: function () { + return setShowPassword(showPassword === false); + }, + "data-supertokens": "inputAdornment showPassword", + }, + { + children: jsxRuntime.jsx(ShowPasswordIcon, { + showPassword: showPassword, + }), + } + ) + ), + ], + } + ) + ), + } + ) + ); +}; + +function InputError(_a) { + var error = _a.error; + var t = translationContext.useTranslation(); + return jsxRuntime.jsx( + "div", + genericComponentOverrideContext.__assign({ "data-supertokens": "inputErrorMessage" }, { children: t(error) }) + ); +} + +function Label(_a) { + var value = _a.value, + showIsRequired = _a.showIsRequired; + var t = translationContext.useTranslation(); + return jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "label" }, + { children: [t(value), showIsRequired && value && value.trim() !== "" && " *"] } + ) + ); +} + +var fetchDefaultValue = function (field) { + if (field.getDefaultValue !== undefined) { + var defaultValue = field.getDefaultValue(); + if (typeof defaultValue !== "string") { + throw new Error("getDefaultValue for ".concat(field.id, " must return a string")); + } else { + return defaultValue; + } + } + return ""; +}; +function InputComponentWrapper(props) { + var field = props.field, + type = props.type, + fstate = props.fstate, + onInputFocus = props.onInputFocus, + onInputBlur = props.onInputBlur, + onInputChange = props.onInputChange; + var useCallbackOnInputFocus = React.useCallback( + function (value) { + onInputFocus({ + id: field.id, + value: value, + }); + }, + [onInputFocus, field] + ); + var useCallbackOnInputBlur = React.useCallback( + function (value) { + onInputBlur({ + id: field.id, + value: value, + }); + }, + [onInputBlur, field] + ); + var useCallbackOnInputChange = React.useCallback( + function (value) { + onInputChange({ + id: field.id, + value: value, + }); + }, + [onInputChange, field] + ); + return field.inputComponent !== undefined + ? jsxRuntime.jsx(field.inputComponent, { + type: type, + name: field.id, + validated: fstate.validated === true, + placeholder: field.placeholder, + value: fstate.value, + autoComplete: field.autoComplete, + autofocus: field.autofocus, + onInputFocus: useCallbackOnInputFocus, + onInputBlur: useCallbackOnInputBlur, + onChange: useCallbackOnInputChange, + hasError: fstate.error !== undefined, + }) + : jsxRuntime.jsx(Input, { + type: type, + name: field.id, + validated: fstate.validated === true, + placeholder: field.placeholder, + value: fstate.value, + autoComplete: field.autoComplete, + onInputFocus: useCallbackOnInputFocus, + onInputBlur: useCallbackOnInputBlur, + onChange: useCallbackOnInputChange, + autofocus: field.autofocus, + hasError: fstate.error !== undefined, + }); +} +var FormBase = function (props) { + var footer = props.footer, + buttonLabel = props.buttonLabel, + showLabels = props.showLabels, + validateOnBlur = props.validateOnBlur, + formFields = props.formFields; + var unmounting = React.useRef(new AbortController()); + React.useEffect( + function () { + // We need this because in some cases this gets called multiple times + unmounting.current = new AbortController(); + return function () { + unmounting.current.abort(); + }; + }, + [unmounting] + ); + var _a = React.useState( + props.formFields.map(function (f) { + return { id: f.id, value: fetchDefaultValue(f) }; + }) + ), + fieldStates = _a[0], + setFieldStates = _a[1]; + var _b = React.useState(false), + isLoading = _b[0], + setIsLoading = _b[1]; + var updateFieldState = React.useCallback( + function (id, update) { + setFieldStates(function (os) { + var field = os.find(function (f) { + return f.id === id; + }); + if (field === undefined) { + return genericComponentOverrideContext.__spreadArray( + genericComponentOverrideContext.__spreadArray([], os, true), + [update({ id: id, value: "" })], + false + ); + } + return os + .filter(function (f) { + return f !== field; + }) + .concat(update(field)); + }); + }, + [setFieldStates] + ); + var onInputFocus = React.useCallback( + function (field) { + updateFieldState(field.id, function (os) { + return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, os), { + validated: false, + }); + }); + }, + [updateFieldState] + ); + var onInputBlur = React.useCallback( + function (field) { + return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { + var fieldConfig, error, _a; + return genericComponentOverrideContext.__generator(this, function (_b) { + switch (_b.label) { + case 0: + if (!validateOnBlur) { + return [2 /*return*/]; + } + fieldConfig = props.formFields.find(function (f) { + return f.id === field.id; + }); + if (!(fieldConfig && field.value !== "")) return [3 /*break*/, 2]; + return [4 /*yield*/, fieldConfig.validate(field.value)]; + case 1: + _a = _b.sent(); + return [3 /*break*/, 3]; + case 2: + _a = undefined; + _b.label = 3; + case 3: + error = _a; + updateFieldState(field.id, function (os) { + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, os), + { error: error, validated: error === undefined && field.value.length !== 0 } + ); + }); + return [2 /*return*/]; + } + }); + }); + }, + [validateOnBlur, updateFieldState, props.formFields] + ); + var onInputChange = React.useCallback( + function (field) { + if (typeof field.value !== "string") { + throw new Error("".concat(field.id, " value must be a string")); + } + updateFieldState(field.id, function (os) { + return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, os), { + value: field.value, + error: undefined, + }); + }); + props.clearError(); + }, + [updateFieldState] + ); + var onFormSubmit = React.useCallback( + function (e) { + return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { + var apiFields, + fieldUpdates, + result, + generalError, + e_1, + _loop_1, + _i, + formFields_1, + field, + errorFields_1, + getErrorMessage_1; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + // Prevent default event propagation. + e.preventDefault(); + // Set loading state. + setIsLoading(true); + setFieldStates(function (os) { + return os.map(function (fs) { + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, fs), + { error: undefined } + ); + }); + }); + apiFields = formFields.map(function (field) { + var fieldState = fieldStates.find(function (fs) { + return fs.id === field.id; + }); + return { + id: field.id, + value: fieldState === undefined ? "" : fieldState.value, + }; + }); + fieldUpdates = []; + _a.label = 1; + case 1: + _a.trys.push([1, 6, 7, 8]); + result = void 0; + generalError = void 0; + _a.label = 2; + case 2: + _a.trys.push([2, 4, , 5]); + return [ + 4 /*yield*/, + props.callAPI(apiFields, function (id, value) { + return fieldUpdates.push({ id: id, value: value }); + }), + ]; + case 3: + result = _a.sent(); + return [3 /*break*/, 5]; + case 4: + e_1 = _a.sent(); + if (STGeneralError__default.default.isThisError(e_1)) { + generalError = e_1; + } else { + throw e_1; + } + return [3 /*break*/, 5]; + case 5: + if (unmounting.current.signal.aborted) { + return [2 /*return*/]; + } + _loop_1 = function (field) { + var update = fieldUpdates.find(function (f) { + return f.id === field.id; + }); + if (update || field.clearOnSubmit === true) { + // We can do these one by one, it's almost never more than one field + updateFieldState(field.id, function (os) { + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, os), + { value: update ? update.value : "" } + ); + }); + } + }; + for (_i = 0, formFields_1 = formFields; _i < formFields_1.length; _i++) { + field = formFields_1[_i]; + _loop_1(field); + } + if (generalError !== undefined) { + props.onError(generalError.message); + } else { + // If successful + if (result.status === "OK") { + setIsLoading(false); + props.clearError(); + if (props.onSuccess !== undefined) { + props.onSuccess(result); + } + } + if (unmounting.current.signal.aborted) { + return [2 /*return*/]; + } + // If field error. + if (result.status === "FIELD_ERROR") { + errorFields_1 = result.formFields; + getErrorMessage_1 = function (fs) { + var _a; + var errorMessage = + (_a = errorFields_1.find(function (ef) { + return ef.id === fs.id; + })) === null || _a === void 0 + ? void 0 + : _a.error; + if (errorMessage === "Field is not optional") { + var fieldConfigData = props.formFields.find(function (f) { + return f.id === fs.id; + }); + // replace non-optional server error message from nonOptionalErrorMsg + if ( + (fieldConfigData === null || fieldConfigData === void 0 + ? void 0 + : fieldConfigData.nonOptionalErrorMsg) !== undefined + ) { + return fieldConfigData === null || fieldConfigData === void 0 + ? void 0 + : fieldConfigData.nonOptionalErrorMsg; + } + } + return errorMessage; + }; + setFieldStates(function (os) { + return os.map(function (fs) { + return genericComponentOverrideContext.__assign( + genericComponentOverrideContext.__assign({}, fs), + { error: getErrorMessage_1(fs) } + ); + }); + }); + } + } + return [3 /*break*/, 8]; + case 6: + _a.sent(); + props.onError("SOMETHING_WENT_WRONG_ERROR"); + return [3 /*break*/, 8]; + case 7: + setIsLoading(false); + return [7 /*endfinally*/]; + case 8: + return [2 /*return*/]; + } + }); + }); + }, + [setIsLoading, setFieldStates, props, formFields, fieldStates] + ); + return jsxRuntime.jsxs( + "form", + genericComponentOverrideContext.__assign( + { autoComplete: "on", noValidate: true, onSubmit: onFormSubmit }, + { + children: [ + formFields.map(function (field) { + var type = "text"; + // If email or password, replace field type. + if (constants.MANDATORY_FORM_FIELDS_ID_ARRAY.includes(field.id)) { + type = field.id; + } + if (field.id === "confirm-password") { + type = "password"; + } + var fstate = fieldStates.find(function (s) { + return s.id === field.id; + }); + if (fstate === undefined) { + throw new Error("Should never come here"); + } + return jsxRuntime.jsx( + FormRow, + genericComponentOverrideContext.__assign( + { hasError: fstate.error !== undefined }, + { + children: jsxRuntime.jsxs(React.Fragment, { + children: [ + showLabels && + (field.labelComponent !== undefined + ? field.labelComponent + : jsxRuntime.jsx(Label, { + value: field.label, + showIsRequired: field.showIsRequired, + })), + jsxRuntime.jsx(InputComponentWrapper, { + type: type, + field: field, + fstate: fstate, + onInputFocus: onInputFocus, + onInputBlur: onInputBlur, + onInputChange: onInputChange, + }), + fstate.error && jsxRuntime.jsx(InputError, { error: fstate.error }), + ], + }), + } + ), + field.id + ); + }), + jsxRuntime.jsx( + FormRow, + { + children: jsxRuntime.jsxs(React.Fragment, { + children: [ + jsxRuntime.jsx(button.Button, { + disabled: isLoading, + isLoading: isLoading, + type: "submit", + label: buttonLabel, + }), + footer, + ], + }), + }, + "form-button" + ), + ], + } + ) + ); +}; + +exports.ErrorIcon = ErrorIcon; +exports.FormBase = FormBase; +exports.FormRow = FormRow; +exports.Label = Label; diff --git a/lib/build/emailpassword.js b/lib/build/emailpassword.js index 54ade2cbb..784e001ea 100644 --- a/lib/build/emailpassword.js +++ b/lib/build/emailpassword.js @@ -21,6 +21,7 @@ require("./recipeModule-shared.js"); require("./session-shared2.js"); require("supertokens-web-js/recipe/session"); require("./emailpassword-shared5.js"); +require("./emailpassword-shared6.js"); /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * diff --git a/lib/build/emailpasswordprebuiltui.js b/lib/build/emailpasswordprebuiltui.js index 58e98cf2d..df890d7e1 100644 --- a/lib/build/emailpasswordprebuiltui.js +++ b/lib/build/emailpasswordprebuiltui.js @@ -6,7 +6,7 @@ require("supertokens-web-js/utils/normalisedURLPath"); require("./index2.js"); require("./authRecipe-shared2.js"); require("./emailpassword-shared3.js"); -var emailpasswordprebuiltui = require("./emailpassword-shared6.js"); +var emailpasswordprebuiltui = require("./emailpassword-shared7.js"); require("./emailpassword-shared5.js"); require("./emailpassword-shared4.js"); require("supertokens-web-js"); @@ -30,9 +30,9 @@ require("./session-shared.js"); require("./session-shared3.js"); require("./translations.js"); require("./emailverification-shared2.js"); -require("./emailpassword-shared7.js"); -require("./arrowLeftIcon.js"); require("./emailpassword-shared8.js"); +require("./arrowLeftIcon.js"); +require("./emailpassword-shared9.js"); require("supertokens-web-js/utils/error"); require("./emailpassword-shared2.js"); require("./emailpassword-shared.js"); @@ -40,6 +40,7 @@ require("./SuperTokensBranding.js"); require("supertokens-web-js/lib/build/error"); require("supertokens-web-js/recipe/emailpassword"); require("./authRecipe-shared.js"); +require("./emailpassword-shared6.js"); exports.EmailPasswordPreBuiltUI = emailpasswordprebuiltui.EmailPasswordPreBuiltUI; exports.ResetPasswordUsingToken = emailpasswordprebuiltui.ResetPasswordUsingToken; diff --git a/lib/build/index2.js b/lib/build/index2.js index cfcf81a7d..d7f1150c5 100644 --- a/lib/build/index2.js +++ b/lib/build/index2.js @@ -276,7 +276,7 @@ var withOverride = function (overrideKey, DefaultComponent) { }; 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[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@keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\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: 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'; var ThemeBase = function (_a) { var children = _a.children, diff --git a/lib/build/multifactorauth-shared.js b/lib/build/multifactorauth-shared.js index 23669ebb0..23aeb7dee 100644 --- a/lib/build/multifactorauth-shared.js +++ b/lib/build/multifactorauth-shared.js @@ -2,7 +2,6 @@ var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); var MultiFactorAuthWebJS = require("supertokens-web-js/recipe/multifactorauth"); -var utils = require("supertokens-web-js/utils"); var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath"); var postSuperTokensInitCallbacks = require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); var sessionClaimValidatorStore = require("supertokens-web-js/utils/sessionClaimValidatorStore"); @@ -273,7 +272,7 @@ var MultiFactorAuth = /** @class */ (function (_super) { }; MultiFactorAuth.getInstanceOrThrow = function () { if (MultiFactorAuth.instance === undefined) { - var error = "No instance of EmailVerification found. Make sure to call the EmailVerification.init method."; + var error = "No instance of MultiFactorAuth found. Make sure to call the MultiFactorAuth.init method."; // eslint-disable-next-line supertokens-auth-react/no-direct-window-object if (typeof window === "undefined") { error = error + genericComponentOverrideContext.SSR_ERROR; @@ -319,11 +318,15 @@ var MultiFactorAuth = /** @class */ (function (_super) { redirectUrl = genericComponentOverrideContext .getCurrentNormalisedUrlPath() .getAsStringDangerous(); - url = utils.appendQueryParamsToURL(url, { redirectToPath: redirectUrl }); + url = genericComponentOverrideContext.appendQueryParamsToURL(url, { + redirectToPath: redirectUrl, + }); } else { redirectUrl = genericComponentOverrideContext.getRedirectToPathFromURL(); if (redirectUrl) { - url = utils.appendQueryParamsToURL(url, { redirectToPath: redirectUrl }); + url = genericComponentOverrideContext.appendQueryParamsToURL(url, { + redirectToPath: redirectUrl, + }); } } return [ @@ -353,11 +356,15 @@ var MultiFactorAuth = /** @class */ (function (_super) { redirectUrl = genericComponentOverrideContext .getCurrentNormalisedUrlPath() .getAsStringDangerous(); - url = utils.appendQueryParamsToURL(url, { redirectToPath: redirectUrl }); + url = genericComponentOverrideContext.appendQueryParamsToURL(url, { + redirectToPath: redirectUrl, + }); } else { redirectUrl = genericComponentOverrideContext.getRedirectToPathFromURL(); if (redirectUrl) { - url = utils.appendQueryParamsToURL(url, { redirectToPath: redirectUrl }); + url = genericComponentOverrideContext.appendQueryParamsToURL(url, { + redirectToPath: redirectUrl, + }); } } return [ diff --git a/lib/build/multifactorauthprebuiltui.js b/lib/build/multifactorauthprebuiltui.js index 5df6c54ca..7c7dcfcdf 100644 --- a/lib/build/multifactorauthprebuiltui.js +++ b/lib/build/multifactorauthprebuiltui.js @@ -15,7 +15,7 @@ var translations = require("./translations.js"); var translationContext = require("./translationContext.js"); var sessionprebuiltui = require("./sessionprebuiltui.js"); var arrowLeftIcon = require("./arrowLeftIcon.js"); -var backButton = require("./emailpassword-shared7.js"); +var backButton = require("./emailpassword-shared8.js"); require("supertokens-web-js"); require("supertokens-web-js/utils/cookieHandler"); require("supertokens-web-js/utils/postSuperTokensInitCallbacks"); diff --git a/lib/build/passwordless-shared2.js b/lib/build/passwordless-shared2.js index 94a68dd00..b2723095d 100644 --- a/lib/build/passwordless-shared2.js +++ b/lib/build/passwordless-shared2.js @@ -6,7 +6,7 @@ var postSuperTokensInitCallbacks = require("supertokens-web-js/utils/postSuperTo var jsxRuntime = require("react/jsx-runtime"); var utils = require("./authRecipe-shared.js"); var recipe = require("./multifactorauth-shared.js"); -var windowHandler = require("supertokens-web-js/utils/windowHandler"); +var validators = require("./passwordless-shared3.js"); function _interopDefault(e) { return e && e.__esModule ? e : { default: e }; @@ -192,234 +192,6 @@ var getFunctionOverrides = function (onHandleEvent) { }; }; -var phoneNumberUtilsImport; -function getPhoneNumberUtils() { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - var global; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - return [4 /*yield*/, preloadPhoneNumberUtils()]; - case 1: - _a.sent(); - global = windowHandler.WindowHandlerReference.getReferenceOrThrow().windowHandler.getWindowUnsafe(); - return [2 /*return*/, global.intlTelInputUtils]; - } - }); - }); -} -function preloadPhoneNumberUtils() { - if (phoneNumberUtilsImport === undefined) { - /* eslint-disable @typescript-eslint/ban-ts-comment */ - // @ts-ignore: We need to disable no implicit any here, otherwise we'd need to add types for this module - phoneNumberUtilsImport = Promise.resolve().then(function () { - return require("./utils.js"); - }); - /* eslint-enable @typescript-eslint/ban-ts-comment */ - } - return phoneNumberUtilsImport; -} - -/* 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. - */ -function defaultEmailValidator(value) { - if (typeof value !== "string") { - return "GENERAL_ERROR_EMAIL_NON_STRING"; - } - value = value.trim(); - var defaultEmailValidatorRegexp = - // eslint-disable-next-line no-useless-escape - /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - // We check if the email syntax is correct - // As per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438 - // Regex from https://stackoverflow.com/a/46181/3867175 - if (value.match(defaultEmailValidatorRegexp) === null) { - return "GENERAL_ERROR_EMAIL_INVALID"; - } - return undefined; -} -function defaultPhoneNumberValidator(value) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - var intlTelInputUtils; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - if (typeof value !== "string") { - return [2 /*return*/, "GENERAL_ERROR_PHONE_NON_STRING"]; - } - value = value.trim(); - return [4 /*yield*/, getPhoneNumberUtils()]; - case 1: - intlTelInputUtils = _a.sent(); - if (!intlTelInputUtils.isValidNumber(value, undefined)) { - return [2 /*return*/, "GENERAL_ERROR_PHONE_INVALID"]; - } - return [2 /*return*/, undefined]; - } - }); - }); -} -function defaultEmailValidatorForCombinedInput(value) { - if (typeof value !== "string") { - return "GENERAL_ERROR_EMAIL_OR_PHONE_NON_STRING"; - } - value = value.trim(); - var defaultEmailValidatorRegexp = - // eslint-disable-next-line no-useless-escape - /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - // We check if the email syntax is correct - // As per https://github.com/supertokens/supertokens-auth-react/issues/5#issuecomment-709512438 - // Regex from https://stackoverflow.com/a/46181/3867175 - if (value.match(defaultEmailValidatorRegexp) === null) { - return "GENERAL_ERROR_EMAIL_OR_PHONE_INVALID"; - } - return undefined; -} -function defaultPhoneNumberValidatorForCombinedInput(value) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - var intlTelInputUtils; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - if (typeof value !== "string") { - return [2 /*return*/, "GENERAL_ERROR_EMAIL_OR_PHONE_NON_STRING"]; - } - value = value.trim(); - return [4 /*yield*/, getPhoneNumberUtils()]; - case 1: - intlTelInputUtils = _a.sent(); - if (!intlTelInputUtils.isValidNumber(value, undefined)) { - return [2 /*return*/, "GENERAL_ERROR_EMAIL_OR_PHONE_INVALID"]; - } - return [2 /*return*/, undefined]; - } - }); - }); -} -function userInputCodeValidate(value) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - if (typeof value !== "string") { - return [2 /*return*/, "GENERAL_ERROR_OTP_NON_STRING"]; - } - if (value.length === 0) { - return [2 /*return*/, "GENERAL_ERROR_OTP_EMPTY"]; - } - return [2 /*return*/, undefined]; - }); - }); -} -/* - * defaultValidate - */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -function defaultValidate(_) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - return genericComponentOverrideContext.__generator(this, function (_a) { - return [2 /*return*/, undefined]; - }); - }); -} -function defaultGuessInternationPhoneNumberFromInputPhoneNumber(value, defaultCountryFromConfig) { - return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { - var intlTelInputUtils, - libGuess, - phoneNumberCharCount, - filteredInput, - countryData, - matchingCountryCodes, - _i, - matchingCountryCodes_1, - code, - defaultCountry; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - if (value === undefined || value.length === 0) { - return [2 /*return*/, value]; - } - return [4 /*yield*/, getPhoneNumberUtils()]; - case 1: - intlTelInputUtils = _a.sent(); - libGuess = intlTelInputUtils.formatNumber( - value, - defaultCountryFromConfig, - intlTelInputUtils.numberFormat.E164 - ); - if (intlTelInputUtils.isValidNumber(libGuess, defaultCountryFromConfig)) { - return [2 /*return*/, libGuess]; - } - phoneNumberCharCount = (value.match(/(\d|[+\-().])/g) || []).length; - // If the number of valid characters for a phonenumber is less than half the input we assume it's not a phone number. - // I.e.: if less than half of the input is numbers or in: "+-()." - if (value.includes("@") || phoneNumberCharCount < value.length / 2) { - return [2 /*return*/, undefined]; - } - filteredInput = "+" + value.replace(/\D/g, "").replace(/^00/, ""); - if (intlTelInputUtils.isValidNumber(filteredInput, defaultCountryFromConfig)) { - return [ - 2 /*return*/, - intlTelInputUtils.formatNumber( - filteredInput, - defaultCountryFromConfig, - intlTelInputUtils.numberFormat.E164 - ), - ]; - } - countryData = windowHandler.WindowHandlerReference.getReferenceOrThrow() - .windowHandler.getWindowUnsafe() - .intlTelInputGlobals.getCountryData(); - matchingCountryCodes = countryData - .filter(function (c) { - return filteredInput.startsWith("+" + c.dialCode); - }) - .map(function (c) { - return c.iso2; - }); - for ( - _i = 0, matchingCountryCodes_1 = matchingCountryCodes; - _i < matchingCountryCodes_1.length; - _i++ - ) { - code = matchingCountryCodes_1[_i]; - if (intlTelInputUtils.isValidNumber(filteredInput, code)) { - return [ - 2 /*return*/, - intlTelInputUtils.formatNumber( - filteredInput, - code, - intlTelInputUtils.numberFormat.E164 - ), - ]; - } - } - if (defaultCountryFromConfig) { - defaultCountry = countryData.find(function (c) { - return c.iso2 === defaultCountryFromConfig.toLowerCase(); - }); - if (defaultCountry) { - return [2 /*return*/, "+" + defaultCountry.dialCode + filteredInput.substring(1)]; - } - } - // We want to return the value as an international number because the phone number input lib expects it this way - return [2 /*return*/, filteredInput]; - } - }); - }); -} - /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * * This software is licensed under the Apache License, Version 2.0 (the @@ -450,23 +222,23 @@ function normalisePasswordlessConfig(config) { }, config.override ); - var validateEmailAddress = defaultEmailValidator; + var validateEmailAddress = validators.defaultEmailValidator; if ( (config.contactMethod === "EMAIL" || config.contactMethod === "EMAIL_OR_PHONE") && config.validateEmailAddress !== undefined ) { validateEmailAddress = config.validateEmailAddress; } else if (config.contactMethod === "EMAIL_OR_PHONE") { - validateEmailAddress = defaultEmailValidatorForCombinedInput; + validateEmailAddress = validators.defaultEmailValidatorForCombinedInput; } - var validatePhoneNumber = defaultPhoneNumberValidator; + var validatePhoneNumber = validators.defaultPhoneNumberValidator; if ( (config.contactMethod === "PHONE" || config.contactMethod === "EMAIL_OR_PHONE") && config.validatePhoneNumber !== undefined ) { validatePhoneNumber = config.validatePhoneNumber; } else if (config.contactMethod === "EMAIL_OR_PHONE") { - validatePhoneNumber = defaultPhoneNumberValidatorForCombinedInput; + validatePhoneNumber = validators.defaultPhoneNumberValidatorForCombinedInput; } return genericComponentOverrideContext.__assign( genericComponentOverrideContext.__assign({}, utils.normaliseAuthRecipe(config)), @@ -530,7 +302,7 @@ function normalizeSignInUpFeatureConfig(signInUpInput, config) { "guessInternationPhoneNumberFromInputPhoneNumber" in signInUpInput && signInUpInput.guessInternationPhoneNumberFromInputPhoneNumber !== undefined ? signInUpInput.guessInternationPhoneNumberFromInputPhoneNumber - : defaultGuessInternationPhoneNumberFromInputPhoneNumber, + : validators.defaultGuessInternationPhoneNumberFromInputPhoneNumber, } ); return signInUpFeature; @@ -695,11 +467,6 @@ var Passwordless = /** @class */ (function (_super) { })(utils.AuthRecipe); exports.Passwordless = Passwordless; -exports.defaultEmailValidator = defaultEmailValidator; -exports.defaultValidate = defaultValidate; exports.getEnabledContactMethods = getEnabledContactMethods; -exports.getPhoneNumberUtils = getPhoneNumberUtils; exports.normalisePasswordlessConfig = normalisePasswordlessConfig; exports.passwordlessFirstFactors = passwordlessFirstFactors; -exports.preloadPhoneNumberUtils = preloadPhoneNumberUtils; -exports.userInputCodeValidate = userInputCodeValidate; diff --git a/lib/build/passwordless-shared3.js b/lib/build/passwordless-shared3.js index 62f455661..5decc31b4 100644 --- a/lib/build/passwordless-shared3.js +++ b/lib/build/passwordless-shared3.js @@ -1,4282 +1,35 @@ "use strict"; var genericComponentOverrideContext = require("./genericComponentOverrideContext.js"); -var jsxRuntime = require("react/jsx-runtime"); -var NormalisedURLPath = require("supertokens-web-js/utils/normalisedURLPath"); -var uiEntry = require("./index2.js"); -var authWidgetWrapper = require("./authRecipe-shared2.js"); -var session = require("./session-shared.js"); -var componentOverrideContext = require("./passwordless-shared.js"); -var React = require("react"); -var STGeneralError = require("supertokens-web-js/utils/error"); -var recipe = require("./session-shared2.js"); -var translations = require("./translations.js"); -var translationContext = require("./translationContext.js"); -var button = require("./emailpassword-shared2.js"); var windowHandler = require("supertokens-web-js/utils/windowHandler"); -var recipe$2 = require("./multifactorauth-shared.js"); -var recipe$1 = require("./passwordless-shared2.js"); -var SuperTokensBranding = require("./SuperTokensBranding.js"); -var generalError = require("./emailpassword-shared.js"); -var sessionprebuiltui = require("./sessionprebuiltui.js"); -var checkedRoundIcon = require("./checkedRoundIcon.js"); -var formBase = require("./emailpassword-shared8.js"); -var validators = require("./emailpassword-shared5.js"); -var arrowLeftIcon = require("./arrowLeftIcon.js"); -var multifactorauth = require("./multifactorauth-shared2.js"); -var backButton = require("./emailpassword-shared7.js"); -function _interopDefault(e) { - return e && e.__esModule ? e : { default: e }; -} - -function _interopNamespace(e) { - if (e && e.__esModule) return e; - var n = Object.create(null); - if (e) { - Object.keys(e).forEach(function (k) { - if (k !== "default") { - var d = Object.getOwnPropertyDescriptor(e, k); - Object.defineProperty( - n, - k, - d.get - ? d - : { - enumerable: true, - get: function () { - return e[k]; - }, - } - ); +var phoneNumberUtilsImport; +function getPhoneNumberUtils() { + return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () { + var global; + return genericComponentOverrideContext.__generator(this, function (_a) { + switch (_a.label) { + case 0: + return [4 /*yield*/, preloadPhoneNumberUtils()]; + case 1: + _a.sent(); + global = windowHandler.WindowHandlerReference.getReferenceOrThrow().windowHandler.getWindowUnsafe(); + return [2 /*return*/, global.intlTelInputUtils]; } }); - } - n.default = e; - return Object.freeze(n); -} - -var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath); -var React__namespace = /*#__PURE__*/ _interopNamespace(React); -var STGeneralError__default = /*#__PURE__*/ _interopDefault(STGeneralError); - -var styles = - '/* 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: 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/*\n * Default styles.\n */\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\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\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\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\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\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: 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\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\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\n[data-supertokens~="headerSubtitle"] {\n font-weight: 400;\n margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\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-1);\n font-weight: 500;\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: 300;\n letter-spacing: 0.4px;\n color: rgb(var(--palette-textPrimary));\n}\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\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\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 -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\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: "Rubik", sans-serif;\n background-color: transparent;\n border: 0;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"] {\n font-weight: 500;\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: "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\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 -webkit-filter: brightness(0.85);\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 -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\n@-webkit-keyframes animate-fade {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 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: 500;\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/* 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 -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\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~="forgotPasswordLink"] {\n margin-top: 10px;\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 -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\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: 600;\n font-size: var(--font-size-1);\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: 34px;\n}\n\n[data-supertokens~="formRow"][data-supertokens~="hasError"] {\n padding-bottom: 0;\n}\n\n[data-supertokens~="sendVerifyEmailIcon"] {\n margin-top: 11px;\n}\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\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\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~="sendVerifyEmailResend"] {\n margin-top: 13px;\n font-weight: 300;\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~="withBackButton"] {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n[data-supertokens~="resendEmailLink"] {\n display: inline-block;\n}\n\n[data-supertokens~="generalSuccess"] {\n margin-bottom: 20px;\n -webkit-animation: swingIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) alternate 2 both;\n animation: swingIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) alternate 2 both;\n}\n\n[data-supertokens~="codeInputLabelWrapper"] {\n display: flex;\n justify-content: space-between;\n align-items: center;\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~="sendCodeText"] {\n margin-top: 15px;\n margin-bottom: 20px;\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~="resendCodeBtn"] {\n width: auto;\n margin-top: 0;\n line-height: 24px;\n}\n\n[data-supertokens~="resendCodeBtn"]:hover {\n text-decoration: underline;\n}\n\n[data-supertokens~="resendCodeBtn"]:disabled {\n color: rgb(var(--palette-textPrimary));\n cursor: default;\n text-decoration: none;\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\n[data-supertokens~="phoneInputWrapper"] .iti [data-supertokens~="input"] {\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'; - -var ThemeBase = function (_a) { - var children = _a.children, - userStyles = _a.userStyles, - loadDefaultFont = _a.loadDefaultFont; - return jsxRuntime.jsxs(React.Fragment, { - children: [ - children, - loadDefaultFont && - jsxRuntime.jsx("link", { - href: "//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700", - rel: "stylesheet", - type: "text/css", - }), - jsxRuntime.jsxs("style", { children: [styles, userStyles.join("\n")] }), - ], - }); -}; - -var PasswordlessLinkClickedScreen = function (props) { - var t = translationContext.useTranslation(); - var _a = React.useState(false), - loading = _a[0], - setLoading = _a[1]; - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row" }, - { - children: - props.requireUserInteraction === true - ? jsxRuntime.jsxs(React__namespace.default.Fragment, { - children: [ - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("PWLESS_LINK_CLICKED_CONTINUE_HEADER") } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle secondaryText" }, - { children: t("PWLESS_LINK_CLICKED_CONTINUE_DESC") } - ) - ), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "continueButtonWrapper" }, - { - children: jsxRuntime.jsx(button.Button, { - isLoading: loading, - onClick: function () { - setLoading(true); - props.consumeCode(); - }, - type: "button", - label: "PWLESS_LINK_CLICKED_CONTINUE_BUTTON", - }), - } - ) - ), - ], - }) - : jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "spinner" }, - { children: jsxRuntime.jsx(uiEntry.SpinnerIcon, {}) } - ) - ), - } - ) - ), - } - ) - ); -}; -var LinkClickedScreenWithOverride = uiEntry.withOverride( - "PasswordlessLinkClickedScreen", - PasswordlessLinkClickedScreen -); -var LinkClickedScreen$1 = function (props) { - var hasFont = translations.hasFontDefined(props.config.rootStyle); - return jsxRuntime.jsx( - ThemeBase, - genericComponentOverrideContext.__assign( - { - loadDefaultFont: !hasFont, - userStyles: [props.config.rootStyle, props.config.linkClickedScreenFeature.style], - }, - { - children: jsxRuntime.jsx( - LinkClickedScreenWithOverride, - genericComponentOverrideContext.__assign({}, props) - ), - } - ) - ); -}; - -var defaultTranslationsPasswordless = { - en: genericComponentOverrideContext.__assign( - genericComponentOverrideContext.__assign({}, translations.defaultTranslationsCommon.en), - { - GENERAL_ERROR_EMAIL_UNDEFINED: "Please set your email", - GENERAL_ERROR_EMAIL_NON_STRING: "Email must be of type string", - GENERAL_ERROR_EMAIL_INVALID: "Email is invalid", - GENERAL_ERROR_PHONE_UNDEFINED: "Please set your phone number", - GENERAL_ERROR_PHONE_NON_STRING: "Phone number must be of type string", - GENERAL_ERROR_PHONE_INVALID: "Phone number is invalid", - GENERAL_ERROR_EMAIL_OR_PHONE_UNDEFINED: "Please set your email or phone number", - GENERAL_ERROR_EMAIL_OR_PHONE_NON_STRING: "Email or Phone number must be of type string", - GENERAL_ERROR_EMAIL_OR_PHONE_INVALID: "Email or Phone number is invalid", - GENERAL_ERROR_OTP_UNDEFINED: "Please fill your OTP", - GENERAL_ERROR_OTP_INVALID: "Invalid OTP", - GENERAL_ERROR_OTP_EXPIRED: "Expired OTP.", - GENERAL_ERROR_OTP_NON_STRING: "OTP must be of type string", - GENERAL_ERROR_OTP_EMPTY: "OTP cannot be empty", - ERROR_SIGN_IN_UP_LINK: "Invalid magic link. Please try again.", - ERROR_SIGN_IN_UP_RESEND_RESTART_FLOW: "Login timed out. Please try again.", - ERROR_SIGN_IN_UP_CODE_CONSUME_RESTART_FLOW: "Login unsuccessful. Please try again.", - PWLESS_CLOSE_TAB_TITLE: "Success!", - PWLESS_CLOSE_TAB_SUBTITLE_LINE1: "You have been successfully signed in.", - PWLESS_CLOSE_TAB_SUBTITLE_LINE2: "Please close this tab", - PWLESS_SIGN_IN_UP_HEADER_TITLE: "Sign Up or Log In", - PWLESS_SIGN_IN_UP_FOOTER_START: "By continuing, you agree to our ", - PWLESS_SIGN_IN_UP_FOOTER_TOS: "Terms of Service", - PWLESS_SIGN_IN_UP_FOOTER_AND: " and ", - PWLESS_SIGN_IN_UP_FOOTER_PP: "Privacy Policy", - PWLESS_SIGN_IN_UP_FOOTER_END: "", - PWLESS_SIGN_IN_UP_EMAIL_LABEL: "Email", - PWLESS_SIGN_IN_UP_PHONE_LABEL: "Phone Number", - PWLESS_SIGN_IN_UP_EMAIL_OR_PHONE_LABEL: "Email or Phone number", - PWLESS_SIGN_IN_UP_CONTINUE_BUTTON: "CONTINUE", - PWLESS_EMAIL_OR_PHONE_INVALID_INPUT_GUESS_PHONE_ERR: - "Please enter a valid phone number with its country code.", - PWLESS_LINK_SENT_RESEND_SUCCESS: "Link resent", - PWLESS_LINK_SENT_RESEND_TITLE: "Link sent!", - PWLESS_LINK_SENT_RESEND_DESC_START_EMAIL: "We sent a link to ", - PWLESS_LINK_SENT_RESEND_DESC_START_PHONE: "We sent a link to your phone number ", - PWLESS_LINK_SENT_RESEND_DESC_END_EMAIL: " Click the link to login or sign up", - PWLESS_LINK_SENT_RESEND_DESC_END_PHONE: "", - PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_EMAIL: "Change email", - PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_PHONE: "Change phone number", - PWLESS_LINK_CLICKED_CONTINUE_HEADER: "Sign Up or Log In", - PWLESS_LINK_CLICKED_CONTINUE_DESC: "Click the button below to log in on this device", - PWLESS_LINK_CLICKED_CONTINUE_BUTTON: "CONTINUE", - PWLESS_RESEND_SUCCESS_EMAIL: "Email resent", - PWLESS_RESEND_SUCCESS_PHONE: "SMS resent", - PWLESS_RESEND_BTN_DISABLED_START: "Resend in ", - PWLESS_RESEND_BTN_DISABLED_END: "", - PWLESS_RESEND_BTN_EMAIL: "Resend Email", - PWLESS_RESEND_BTN_PHONE: "Resend SMS", - PWLESS_USER_INPUT_CODE_HEADER_TITLE: "Enter OTP", - PWLESS_USER_INPUT_CODE_HEADER_SUBTITLE: "An OTP was sent to you at", - PWLESS_USER_INPUT_CODE_HEADER_SUBTITLE_LINK: "An OTP and a magic link was sent to you at", - PWLESS_USER_INPUT_CODE_INPUT_LABEL: "OTP", - PWLESS_MFA_LOGOUT: "Logout", - PWLESS_MFA_HEADER_TITLE_PHONE: "SMS based OTP", - PWLESS_MFA_HEADER_TITLE_EMAIL: "Email based OTP", - PWLESS_MFA_FOOTER_CHOOSER_ANOTHER: "Choose another factor", - PWLESS_MFA_FOOTER_LOGOUT: "Logout", - PWLESS_MFA_OTP_NOT_ALLOWED_TO_SETUP: "You are not allowed to set up OTP.", - /* - * The following are error messages from our backend SDK. - * These are returned as full messages to preserver compatibilty, but they work just like the keys above. - * They are shown as is by default (setting the value to undefined will display the raw translation key) - */ - "Failed to generate a one time code. Please try again": undefined, - "Phone number is invalid": undefined, - "Email is invalid": undefined, - "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_002)": - undefined, - "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_003)": - undefined, - } - ), -}; - -var LinkClickedScreen = function (props) { - var userContext = uiEntry.useUserContext(); - var _a = React.useState(false), - requireUserInteraction = _a[0], - setRequireUserInteraction = _a[1]; - var consumeCodeAtMount = React.useCallback( - function () { - return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { - var preAuthSessionId, linkCode, loginAttemptInfo; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - preAuthSessionId = genericComponentOverrideContext.getQueryParams("preAuthSessionId"); - linkCode = genericComponentOverrideContext.getURLHash(); - if (!(preAuthSessionId === null || preAuthSessionId.length === 0 || linkCode.length === 0)) - return [3 /*break*/, 2]; - return [ - 4 /*yield*/, - genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - history: props.history, - queryParams: { - error: "signin", - }, - redirectBack: false, - }), - ]; - case 1: - _a.sent(); - return [2 /*return*/, "REDIRECTING"]; - case 2: - return [ - 4 /*yield*/, - props.recipe.webJSRecipe.getLoginAttemptInfo({ userContext: userContext }), - ]; - case 3: - loginAttemptInfo = _a.sent(); - if ( - (loginAttemptInfo === null || loginAttemptInfo === void 0 - ? void 0 - : loginAttemptInfo.preAuthSessionId) !== preAuthSessionId - ) { - return [2 /*return*/, "REQUIRES_INTERACTION"]; - } - return [ - 2 /*return*/, - props.recipe.webJSRecipe.consumeCode({ - userContext: userContext, - }), - ]; - } - }); - }); - }, - [props.recipe, props.history] - ); - var handleConsumeResp = React.useCallback( - function (response) { - return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { - var loginAttemptInfo; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - if (response === "REQUIRES_INTERACTION") { - // We set this here, to make sure it's set after a possible remount - setRequireUserInteraction(true); - } - if (typeof response === "string") { - // In this case we are already redirecting or showing the continue button - return [2 /*return*/]; - } - if (response.status === "RESTART_FLOW_ERROR") { - return [ - 2 /*return*/, - genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - history: props.history, - queryParams: { - error: "restart_link", - }, - redirectBack: false, - }), - ]; - } - if (response.status === "SIGN_IN_UP_NOT_ALLOWED") { - return [ - 2 /*return*/, - genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - history: props.history, - queryParams: { - error: response.reason, - }, - redirectBack: false, - }), - ]; - } - if (!(response.status === "OK")) return [3 /*break*/, 3]; - return [ - 4 /*yield*/, - props.recipe.webJSRecipe.getLoginAttemptInfo({ - userContext: userContext, - }), - ]; - case 1: - loginAttemptInfo = _a.sent(); - return [ - 4 /*yield*/, - props.recipe.webJSRecipe.clearLoginAttemptInfo({ - userContext: userContext, - }), - ]; - case 2: - _a.sent(); - return [ - 2 /*return*/, - recipe.Session.getInstanceOrThrow().validateGlobalClaimsAndHandleSuccessRedirection( - { - rid: props.recipe.config.recipeId, - successRedirectContext: { - action: "SUCCESS", - isNewRecipeUser: response.createdNewRecipeUser, - user: response.user, - redirectToPath: - loginAttemptInfo === null || loginAttemptInfo === void 0 - ? void 0 - : loginAttemptInfo.redirectToPath, - }, - }, - userContext, - props.history - ), - ]; - case 3: - return [2 /*return*/]; - } - }); - }); - }, - [props.history, props.recipe] - ); - var handleConsumeError = React.useCallback( - function (err) { - if (STGeneralError__default.default.isThisError(err)) { - return genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - history: props.history, - queryParams: { - error: "custom", - message: err.message, - }, - redirectBack: false, - }); - } else { - return genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({ - history: props.history, - queryParams: { - error: "signin", - }, - redirectBack: false, - }); - } - }, - [props.recipe, props.history] - ); - genericComponentOverrideContext.useOnMountAPICall(consumeCodeAtMount, handleConsumeResp, handleConsumeError); - var recipeComponentOverrides = props.useComponentOverrides(); - var childProps = { - recipeImplementation: props.recipe.webJSRecipe, - config: props.recipe.config, - requireUserInteraction: requireUserInteraction, - consumeCode: function () { - return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () { - var consumeResp, err_1; - return genericComponentOverrideContext.__generator(this, function (_a) { - switch (_a.label) { - case 0: - _a.trys.push([0, 3, , 4]); - return [ - 4 /*yield*/, - props.recipe.webJSRecipe.consumeCode({ - userContext: userContext, - }), - ]; - case 1: - consumeResp = _a.sent(); - return [4 /*yield*/, handleConsumeResp(consumeResp)]; - case 2: - _a.sent(); - return [3 /*break*/, 4]; - case 3: - err_1 = _a.sent(); - void handleConsumeError(err_1); - return [3 /*break*/, 4]; - case 4: - return [2 /*return*/]; - } - }); - }); - }, - }; - return jsxRuntime.jsx( - uiEntry.ComponentOverrideContext.Provider, - genericComponentOverrideContext.__assign( - { value: recipeComponentOverrides }, - { - children: jsxRuntime.jsx( - uiEntry.FeatureWrapper, - genericComponentOverrideContext.__assign( - { - useShadowDom: props.recipe.config.useShadowDom, - defaultStore: defaultTranslationsPasswordless, - }, - { - children: jsxRuntime.jsxs(React.Fragment, { - children: [ - props.children === undefined && - jsxRuntime.jsx( - LinkClickedScreen$1, - genericComponentOverrideContext.__assign({}, childProps) - ), - props.children && - React__namespace.default.Children.map(props.children, function (child) { - if (React__namespace.default.isValidElement(child)) { - return React__namespace.default.cloneElement(child, childProps); - } - return child; - }), - ], - }), - } - ) - ), - } - ) - ); -}; - -var PasswordlessCloseTabScreen = function () { - var t = translationContext.useTranslation(); - return jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "container" }, - { - children: jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "row noFormRow" }, - { - children: [ - jsxRuntime.jsx(checkedRoundIcon.CheckedRoundIcon, {}), - jsxRuntime.jsx( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle" }, - { children: t("PWLESS_CLOSE_TAB_TITLE") } - ) - ), - jsxRuntime.jsx("div", { "data-supertokens": "divider" }), - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerSubtitle secondaryText" }, - { - children: [ - t("PWLESS_CLOSE_TAB_SUBTITLE_LINE1"), - jsxRuntime.jsx("br", {}), - t("PWLESS_CLOSE_TAB_SUBTITLE_LINE2"), - ], - } - ) - ), - ], - } - ) - ), - } - ) - ); -}; -var CloseTabScreen = uiEntry.withOverride("PasswordlessCloseTabScreen", PasswordlessCloseTabScreen); - -var SignInUpFooter = uiEntry.withOverride("PasswordlessSignInUpFooter", function PasswordlessSignInUpFooter(_a) { - var termsOfServiceLink = _a.termsOfServiceLink, - privacyPolicyLink = _a.privacyPolicyLink; - var t = translationContext.useTranslation(); - if (termsOfServiceLink === undefined && privacyPolicyLink === undefined) { - return null; - } - return jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "secondaryText privacyPolicyAndTermsAndConditions" }, - { - children: [ - t("PWLESS_SIGN_IN_UP_FOOTER_START"), - termsOfServiceLink !== undefined && - jsxRuntime.jsx( - "a", - genericComponentOverrideContext.__assign( - { - "data-supertokens": "link", - href: termsOfServiceLink, - target: "_blank", - rel: "noopener noreferer", - }, - { children: t("PWLESS_SIGN_IN_UP_FOOTER_TOS") } - ) - ), - termsOfServiceLink !== undefined && - privacyPolicyLink !== undefined && - t("PWLESS_SIGN_IN_UP_FOOTER_AND"), - privacyPolicyLink !== undefined && - jsxRuntime.jsx( - "a", - genericComponentOverrideContext.__assign( - { - "data-supertokens": "link", - href: privacyPolicyLink, - target: "_blank", - rel: "noopener noreferer", - }, - { children: t("PWLESS_SIGN_IN_UP_FOOTER_PP") } - ) - ), - t("PWLESS_SIGN_IN_UP_FOOTER_END"), - ], - } - ) - ); -}); - -var EmailForm = uiEntry.withOverride("PasswordlessEmailForm", function PasswordlessEmailForm(props) { - var _this = this; - var _a; - var userContext = uiEntry.useUserContext(); - return jsxRuntime.jsx(formBase.FormBase, { - clearError: props.clearError, - onError: props.onError, - formFields: [ - { - id: "email", - label: "PWLESS_SIGN_IN_UP_EMAIL_LABEL", - optional: false, - autofocus: true, - placeholder: "", - autoComplete: "email", - // We are using the default validator that allows any string - validate: validators.defaultValidate, - }, - ], - buttonLabel: "PWLESS_SIGN_IN_UP_CONTINUE_BUTTON", - onSuccess: props.onSuccess, - callAPI: function (formFields) { - return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () { - var email, validationRes, response; - var _a; - return genericComponentOverrideContext.__generator(this, function (_b) { - switch (_b.label) { - case 0: - email = - (_a = formFields.find(function (field) { - return field.id === "email"; - })) === null || _a === void 0 - ? void 0 - : _a.value; - if (email === undefined) { - throw new STGeneralError__default.default("GENERAL_ERROR_EMAIL_UNDEFINED"); - } - return [4 /*yield*/, props.config.validateEmailAddress(email)]; - case 1: - validationRes = _b.sent(); - if (validationRes !== undefined) { - throw new STGeneralError__default.default(validationRes); - } - return [ - 4 /*yield*/, - props.recipeImplementation.createCode({ - email: email, - userContext: userContext, - }), - ]; - case 2: - response = _b.sent(); - if (response.status === "SIGN_IN_UP_NOT_ALLOWED") { - throw new STGeneralError__default.default(response.reason); - } - return [2 /*return*/, response]; - } - }); - }); - }, - validateOnBlur: false, - showLabels: true, - footer: - (_a = props.footer) !== null && _a !== void 0 - ? _a - : jsxRuntime.jsx(SignInUpFooter, { - privacyPolicyLink: props.config.signInUpFeature.privacyPolicyLink, - termsOfServiceLink: props.config.signInUpFeature.termsOfServiceLink, - }), }); -}); - -function getDefaultExportFromCjs(x) { - return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x; -} - -var intlTelInputExports$1 = {}; -var intlTelInput$2 = { - get exports() { - return intlTelInputExports$1; - }, - set exports(v) { - intlTelInputExports$1 = v; - }, -}; - -var intlTelInputExports = {}; -var intlTelInput$1 = { - get exports() { - return intlTelInputExports; - }, - set exports(v) { - intlTelInputExports = v; - }, -}; - -/* - * International Telephone Input v17.0.21 - * https://github.com/jackocnr/intl-tel-input.git - * Licensed under the MIT license - */ - -(function (module) { - // wrap in UMD - (function (factory) { - if (module.exports) module.exports = factory(); - else window.intlTelInput = factory(); - })(function (undefined$1) { - return (function () { - // Array of country objects for the flag dropdown. - // Here is the criteria for the plugin to support a given country/territory - // - It has an iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 - // - It has it's own country calling code (it is not a sub-region of another country): https://en.wikipedia.org/wiki/List_of_country_calling_codes - // - It has a flag in the region-flags project: https://github.com/behdad/region-flags/tree/gh-pages/png - // - It is supported by libphonenumber (it must be listed on this page): https://github.com/googlei18n/libphonenumber/blob/master/resources/ShortNumberMetadata.xml - // Each country array has the following information: - // [ - // Country name, - // iso2 code, - // International dial code, - // Order (if >1 country with same dial code), - // Area codes - // ] - var allCountries = [ - ["Afghanistan (‫افغانستان‬‎)", "af", "93"], - ["Albania (Shqipëri)", "al", "355"], - ["Algeria (‫الجزائر‬‎)", "dz", "213"], - ["American Samoa", "as", "1", 5, ["684"]], - ["Andorra", "ad", "376"], - ["Angola", "ao", "244"], - ["Anguilla", "ai", "1", 6, ["264"]], - ["Antigua and Barbuda", "ag", "1", 7, ["268"]], - ["Argentina", "ar", "54"], - ["Armenia (Հայաստան)", "am", "374"], - ["Aruba", "aw", "297"], - ["Ascension Island", "ac", "247"], - ["Australia", "au", "61", 0], - ["Austria (Österreich)", "at", "43"], - ["Azerbaijan (Azərbaycan)", "az", "994"], - ["Bahamas", "bs", "1", 8, ["242"]], - ["Bahrain (‫البحرين‬‎)", "bh", "973"], - ["Bangladesh (বাংলাদেশ)", "bd", "880"], - ["Barbados", "bb", "1", 9, ["246"]], - ["Belarus (Беларусь)", "by", "375"], - ["Belgium (België)", "be", "32"], - ["Belize", "bz", "501"], - ["Benin (Bénin)", "bj", "229"], - ["Bermuda", "bm", "1", 10, ["441"]], - ["Bhutan (འབྲུག)", "bt", "975"], - ["Bolivia", "bo", "591"], - ["Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387"], - ["Botswana", "bw", "267"], - ["Brazil (Brasil)", "br", "55"], - ["British Indian Ocean Territory", "io", "246"], - ["British Virgin Islands", "vg", "1", 11, ["284"]], - ["Brunei", "bn", "673"], - ["Bulgaria (България)", "bg", "359"], - ["Burkina Faso", "bf", "226"], - ["Burundi (Uburundi)", "bi", "257"], - ["Cambodia (កម្ពុជា)", "kh", "855"], - ["Cameroon (Cameroun)", "cm", "237"], - [ - "Canada", - "ca", - "1", - 1, - [ - "204", - "226", - "236", - "249", - "250", - "289", - "306", - "343", - "365", - "387", - "403", - "416", - "418", - "431", - "437", - "438", - "450", - "506", - "514", - "519", - "548", - "579", - "581", - "587", - "604", - "613", - "639", - "647", - "672", - "705", - "709", - "742", - "778", - "780", - "782", - "807", - "819", - "825", - "867", - "873", - "902", - "905", - ], - ], - ["Cape Verde (Kabu Verdi)", "cv", "238"], - ["Caribbean Netherlands", "bq", "599", 1, ["3", "4", "7"]], - ["Cayman Islands", "ky", "1", 12, ["345"]], - ["Central African Republic (République centrafricaine)", "cf", "236"], - ["Chad (Tchad)", "td", "235"], - ["Chile", "cl", "56"], - ["China (中国)", "cn", "86"], - ["Christmas Island", "cx", "61", 2, ["89164"]], - ["Cocos (Keeling) Islands", "cc", "61", 1, ["89162"]], - ["Colombia", "co", "57"], - ["Comoros (‫جزر القمر‬‎)", "km", "269"], - ["Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243"], - ["Congo (Republic) (Congo-Brazzaville)", "cg", "242"], - ["Cook Islands", "ck", "682"], - ["Costa Rica", "cr", "506"], - ["Côte d’Ivoire", "ci", "225"], - ["Croatia (Hrvatska)", "hr", "385"], - ["Cuba", "cu", "53"], - ["Curaçao", "cw", "599", 0], - ["Cyprus (Κύπρος)", "cy", "357"], - ["Czech Republic (Česká republika)", "cz", "420"], - ["Denmark (Danmark)", "dk", "45"], - ["Djibouti", "dj", "253"], - ["Dominica", "dm", "1", 13, ["767"]], - ["Dominican Republic (República Dominicana)", "do", "1", 2, ["809", "829", "849"]], - ["Ecuador", "ec", "593"], - ["Egypt (‫مصر‬‎)", "eg", "20"], - ["El Salvador", "sv", "503"], - ["Equatorial Guinea (Guinea Ecuatorial)", "gq", "240"], - ["Eritrea", "er", "291"], - ["Estonia (Eesti)", "ee", "372"], - ["Eswatini", "sz", "268"], - ["Ethiopia", "et", "251"], - ["Falkland Islands (Islas Malvinas)", "fk", "500"], - ["Faroe Islands (Føroyar)", "fo", "298"], - ["Fiji", "fj", "679"], - ["Finland (Suomi)", "fi", "358", 0], - ["France", "fr", "33"], - ["French Guiana (Guyane française)", "gf", "594"], - ["French Polynesia (Polynésie française)", "pf", "689"], - ["Gabon", "ga", "241"], - ["Gambia", "gm", "220"], - ["Georgia (საქართველო)", "ge", "995"], - ["Germany (Deutschland)", "de", "49"], - ["Ghana (Gaana)", "gh", "233"], - ["Gibraltar", "gi", "350"], - ["Greece (Ελλάδα)", "gr", "30"], - ["Greenland (Kalaallit Nunaat)", "gl", "299"], - ["Grenada", "gd", "1", 14, ["473"]], - ["Guadeloupe", "gp", "590", 0], - ["Guam", "gu", "1", 15, ["671"]], - ["Guatemala", "gt", "502"], - ["Guernsey", "gg", "44", 1, ["1481", "7781", "7839", "7911"]], - ["Guinea (Guinée)", "gn", "224"], - ["Guinea-Bissau (Guiné Bissau)", "gw", "245"], - ["Guyana", "gy", "592"], - ["Haiti", "ht", "509"], - ["Honduras", "hn", "504"], - ["Hong Kong (香港)", "hk", "852"], - ["Hungary (Magyarország)", "hu", "36"], - ["Iceland (Ísland)", "is", "354"], - ["India (भारत)", "in", "91"], - ["Indonesia", "id", "62"], - ["Iran (‫ایران‬‎)", "ir", "98"], - ["Iraq (‫العراق‬‎)", "iq", "964"], - ["Ireland", "ie", "353"], - ["Isle of Man", "im", "44", 2, ["1624", "74576", "7524", "7924", "7624"]], - ["Israel (‫ישראל‬‎)", "il", "972"], - ["Italy (Italia)", "it", "39", 0], - ["Jamaica", "jm", "1", 4, ["876", "658"]], - ["Japan (日本)", "jp", "81"], - ["Jersey", "je", "44", 3, ["1534", "7509", "7700", "7797", "7829", "7937"]], - ["Jordan (‫الأردن‬‎)", "jo", "962"], - ["Kazakhstan (Казахстан)", "kz", "7", 1, ["33", "7"]], - ["Kenya", "ke", "254"], - ["Kiribati", "ki", "686"], - ["Kosovo", "xk", "383"], - ["Kuwait (‫الكويت‬‎)", "kw", "965"], - ["Kyrgyzstan (Кыргызстан)", "kg", "996"], - ["Laos (ລາວ)", "la", "856"], - ["Latvia (Latvija)", "lv", "371"], - ["Lebanon (‫لبنان‬‎)", "lb", "961"], - ["Lesotho", "ls", "266"], - ["Liberia", "lr", "231"], - ["Libya (‫ليبيا‬‎)", "ly", "218"], - ["Liechtenstein", "li", "423"], - ["Lithuania (Lietuva)", "lt", "370"], - ["Luxembourg", "lu", "352"], - ["Macau (澳門)", "mo", "853"], - ["Madagascar (Madagasikara)", "mg", "261"], - ["Malawi", "mw", "265"], - ["Malaysia", "my", "60"], - ["Maldives", "mv", "960"], - ["Mali", "ml", "223"], - ["Malta", "mt", "356"], - ["Marshall Islands", "mh", "692"], - ["Martinique", "mq", "596"], - ["Mauritania (‫موريتانيا‬‎)", "mr", "222"], - ["Mauritius (Moris)", "mu", "230"], - ["Mayotte", "yt", "262", 1, ["269", "639"]], - ["Mexico (México)", "mx", "52"], - ["Micronesia", "fm", "691"], - ["Moldova (Republica Moldova)", "md", "373"], - ["Monaco", "mc", "377"], - ["Mongolia (Монгол)", "mn", "976"], - ["Montenegro (Crna Gora)", "me", "382"], - ["Montserrat", "ms", "1", 16, ["664"]], - ["Morocco (‫المغرب‬‎)", "ma", "212", 0], - ["Mozambique (Moçambique)", "mz", "258"], - ["Myanmar (Burma) (မြန်မာ)", "mm", "95"], - ["Namibia (Namibië)", "na", "264"], - ["Nauru", "nr", "674"], - ["Nepal (नेपाल)", "np", "977"], - ["Netherlands (Nederland)", "nl", "31"], - ["New Caledonia (Nouvelle-Calédonie)", "nc", "687"], - ["New Zealand", "nz", "64"], - ["Nicaragua", "ni", "505"], - ["Niger (Nijar)", "ne", "227"], - ["Nigeria", "ng", "234"], - ["Niue", "nu", "683"], - ["Norfolk Island", "nf", "672"], - ["North Korea (조선 민주주의 인민 공화국)", "kp", "850"], - ["North Macedonia (Северна Македонија)", "mk", "389"], - ["Northern Mariana Islands", "mp", "1", 17, ["670"]], - ["Norway (Norge)", "no", "47", 0], - ["Oman (‫عُمان‬‎)", "om", "968"], - ["Pakistan (‫پاکستان‬‎)", "pk", "92"], - ["Palau", "pw", "680"], - ["Palestine (‫فلسطين‬‎)", "ps", "970"], - ["Panama (Panamá)", "pa", "507"], - ["Papua New Guinea", "pg", "675"], - ["Paraguay", "py", "595"], - ["Peru (Perú)", "pe", "51"], - ["Philippines", "ph", "63"], - ["Poland (Polska)", "pl", "48"], - ["Portugal", "pt", "351"], - ["Puerto Rico", "pr", "1", 3, ["787", "939"]], - ["Qatar (‫قطر‬‎)", "qa", "974"], - ["Réunion (La Réunion)", "re", "262", 0], - ["Romania (România)", "ro", "40"], - ["Russia (Россия)", "ru", "7", 0], - ["Rwanda", "rw", "250"], - ["Saint Barthélemy", "bl", "590", 1], - ["Saint Helena", "sh", "290"], - ["Saint Kitts and Nevis", "kn", "1", 18, ["869"]], - ["Saint Lucia", "lc", "1", 19, ["758"]], - ["Saint Martin (Saint-Martin (partie française))", "mf", "590", 2], - ["Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508"], - ["Saint Vincent and the Grenadines", "vc", "1", 20, ["784"]], - ["Samoa", "ws", "685"], - ["San Marino", "sm", "378"], - ["São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239"], - ["Saudi Arabia (‫المملكة العربية السعودية‬‎)", "sa", "966"], - ["Senegal (Sénégal)", "sn", "221"], - ["Serbia (Србија)", "rs", "381"], - ["Seychelles", "sc", "248"], - ["Sierra Leone", "sl", "232"], - ["Singapore", "sg", "65"], - ["Sint Maarten", "sx", "1", 21, ["721"]], - ["Slovakia (Slovensko)", "sk", "421"], - ["Slovenia (Slovenija)", "si", "386"], - ["Solomon Islands", "sb", "677"], - ["Somalia (Soomaaliya)", "so", "252"], - ["South Africa", "za", "27"], - ["South Korea (대한민국)", "kr", "82"], - ["South Sudan (‫جنوب السودان‬‎)", "ss", "211"], - ["Spain (España)", "es", "34"], - ["Sri Lanka (ශ්‍රී ලංකාව)", "lk", "94"], - ["Sudan (‫السودان‬‎)", "sd", "249"], - ["Suriname", "sr", "597"], - ["Svalbard and Jan Mayen", "sj", "47", 1, ["79"]], - ["Sweden (Sverige)", "se", "46"], - ["Switzerland (Schweiz)", "ch", "41"], - ["Syria (‫سوريا‬‎)", "sy", "963"], - ["Taiwan (台灣)", "tw", "886"], - ["Tajikistan", "tj", "992"], - ["Tanzania", "tz", "255"], - ["Thailand (ไทย)", "th", "66"], - ["Timor-Leste", "tl", "670"], - ["Togo", "tg", "228"], - ["Tokelau", "tk", "690"], - ["Tonga", "to", "676"], - ["Trinidad and Tobago", "tt", "1", 22, ["868"]], - ["Tunisia (‫تونس‬‎)", "tn", "216"], - ["Turkey (Türkiye)", "tr", "90"], - ["Turkmenistan", "tm", "993"], - ["Turks and Caicos Islands", "tc", "1", 23, ["649"]], - ["Tuvalu", "tv", "688"], - ["U.S. Virgin Islands", "vi", "1", 24, ["340"]], - ["Uganda", "ug", "256"], - ["Ukraine (Україна)", "ua", "380"], - ["United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", "ae", "971"], - ["United Kingdom", "gb", "44", 0], - ["United States", "us", "1", 0], - ["Uruguay", "uy", "598"], - ["Uzbekistan (Oʻzbekiston)", "uz", "998"], - ["Vanuatu", "vu", "678"], - ["Vatican City (Città del Vaticano)", "va", "39", 1, ["06698"]], - ["Venezuela", "ve", "58"], - ["Vietnam (Việt Nam)", "vn", "84"], - ["Wallis and Futuna (Wallis-et-Futuna)", "wf", "681"], - ["Western Sahara (‫الصحراء الغربية‬‎)", "eh", "212", 1, ["5288", "5289"]], - ["Yemen (‫اليمن‬‎)", "ye", "967"], - ["Zambia", "zm", "260"], - ["Zimbabwe", "zw", "263"], - ["Åland Islands", "ax", "358", 1, ["18"]], - ]; - // loop over all of the countries above, restructuring the data to be objects with named keys - for (var i = 0; i < allCountries.length; i++) { - var c = allCountries[i]; - allCountries[i] = { - name: c[0], - iso2: c[1], - dialCode: c[2], - priority: c[3] || 0, - areaCodes: c[4] || null, - }; - } - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - var intlTelInputGlobals = { - getInstance: function getInstance(input) { - var id = input.getAttribute("data-intl-tel-input-id"); - return window.intlTelInputGlobals.instances[id]; - }, - instances: {}, - // using a global like this allows us to mock it in the tests - documentReady: function documentReady() { - return document.readyState === "complete"; - }, - }; - if (typeof window === "object") window.intlTelInputGlobals = intlTelInputGlobals; - // these vars persist through all instances of the plugin - var id = 0; - var defaults = { - // whether or not to allow the dropdown - allowDropdown: true, - // if there is just a dial code in the input: remove it on blur - autoHideDialCode: true, - // add a placeholder in the input with an example number for the selected country - autoPlaceholder: "polite", - // modify the parentClass - customContainer: "", - // modify the auto placeholder - customPlaceholder: null, - // append menu to specified element - dropdownContainer: null, - // don't display these countries - excludeCountries: [], - // format the input value during initialisation and on setNumber - formatOnDisplay: true, - // geoIp lookup function - geoIpLookup: null, - // inject a hidden input with this name, and on submit, populate it with the result of getNumber - hiddenInput: "", - // initial country - initialCountry: "", - // localized country names e.g. { 'de': 'Deutschland' } - localizedCountries: null, - // don't insert international dial codes - nationalMode: true, - // display only these countries - onlyCountries: [], - // number type to use for placeholders - placeholderNumberType: "MOBILE", - // the countries at the top of the list. defaults to united states and united kingdom - preferredCountries: ["us", "gb"], - // display the country dial code next to the selected flag so it's not part of the typed number - separateDialCode: false, - // specify the path to the libphonenumber script to enable validation/formatting - utilsScript: "", - }; - // https://en.wikipedia.org/wiki/List_of_North_American_Numbering_Plan_area_codes#Non-geographic_area_codes - var regionlessNanpNumbers = [ - "800", - "822", - "833", - "844", - "855", - "866", - "877", - "880", - "881", - "882", - "883", - "884", - "885", - "886", - "887", - "888", - "889", - ]; - // utility function to iterate over an object. can't use Object.entries or native forEach because - // of IE11 - var forEachProp = function forEachProp(obj, callback) { - var keys = Object.keys(obj); - for (var i = 0; i < keys.length; i++) { - callback(keys[i], obj[keys[i]]); - } - }; - // run a method on each instance of the plugin - var forEachInstance = function forEachInstance(method) { - forEachProp(window.intlTelInputGlobals.instances, function (key) { - window.intlTelInputGlobals.instances[key][method](); - }); - }; - // this is our plugin class that we will create an instance of - // eslint-disable-next-line no-unused-vars - var Iti = - /*#__PURE__*/ - (function () { - function Iti(input, options) { - var _this = this; - _classCallCheck(this, Iti); - this.id = id++; - this.telInput = input; - this.activeItem = null; - this.highlightedItem = null; - // process specified options / defaults - // alternative to Object.assign, which isn't supported by IE11 - var customOptions = options || {}; - this.options = {}; - forEachProp(defaults, function (key, value) { - _this.options[key] = customOptions.hasOwnProperty(key) ? customOptions[key] : value; - }); - this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder")); - } - _createClass(Iti, [ - { - key: "_init", - value: function _init() { - var _this2 = this; - // if in nationalMode, disable options relating to dial codes - if (this.options.nationalMode) this.options.autoHideDialCode = false; - // if separateDialCode then doesn't make sense to A) insert dial code into input - // (autoHideDialCode), and B) display national numbers (because we're displaying the country - // dial code next to them) - if (this.options.separateDialCode) { - this.options.autoHideDialCode = this.options.nationalMode = false; - } - // we cannot just test screen size as some smartphones/website meta tags will report desktop - // resolutions - // Note: for some reason jasmine breaks if you put this in the main Plugin function with the - // rest of these declarations - // Note: to target Android Mobiles (and not Tablets), we must find 'Android' and 'Mobile' - this.isMobile = - /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test( - navigator.userAgent - ); - if (this.isMobile) { - // trigger the mobile dropdown css - document.body.classList.add("iti-mobile"); - // on mobile, we want a full screen dropdown, so we must append it to the body - if (!this.options.dropdownContainer) this.options.dropdownContainer = document.body; - } - // these promises get resolved when their individual requests complete - // this way the dev can do something like iti.promise.then(...) to know when all requests are - // complete - if (typeof Promise !== "undefined") { - var autoCountryPromise = new Promise(function (resolve, reject) { - _this2.resolveAutoCountryPromise = resolve; - _this2.rejectAutoCountryPromise = reject; - }); - var utilsScriptPromise = new Promise(function (resolve, reject) { - _this2.resolveUtilsScriptPromise = resolve; - _this2.rejectUtilsScriptPromise = reject; - }); - this.promise = Promise.all([autoCountryPromise, utilsScriptPromise]); - } else { - // prevent errors when Promise doesn't exist - this.resolveAutoCountryPromise = this.rejectAutoCountryPromise = function () {}; - this.resolveUtilsScriptPromise = this.rejectUtilsScriptPromise = function () {}; - } - // in various situations there could be no country selected initially, but we need to be able - // to assume this variable exists - this.selectedCountryData = {}; - // process all the data: onlyCountries, excludeCountries, preferredCountries etc - this._processCountryData(); - // generate the markup - this._generateMarkup(); - // set the initial state of the input value and the selected flag - this._setInitialState(); - // start all of the event listeners: autoHideDialCode, input keydown, selectedFlag click - this._initListeners(); - // utils script, and auto country - this._initRequests(); - }, - }, - { - key: "_processCountryData", - value: function _processCountryData() { - // process onlyCountries or excludeCountries array if present - this._processAllCountries(); - // process the countryCodes map - this._processCountryCodes(); - // process the preferredCountries - this._processPreferredCountries(); - // translate countries according to localizedCountries option - if (this.options.localizedCountries) this._translateCountriesByLocale(); - // sort countries by name - if (this.options.onlyCountries.length || this.options.localizedCountries) { - this.countries.sort(this._countryNameSort); - } - }, - }, - { - key: "_addCountryCode", - value: function _addCountryCode(iso2, countryCode, priority) { - if (countryCode.length > this.countryCodeMaxLen) { - this.countryCodeMaxLen = countryCode.length; - } - if (!this.countryCodes.hasOwnProperty(countryCode)) { - this.countryCodes[countryCode] = []; - } - // bail if we already have this country for this countryCode - for (var i = 0; i < this.countryCodes[countryCode].length; i++) { - if (this.countryCodes[countryCode][i] === iso2) return; - } - // check for undefined as 0 is falsy - var index = priority !== undefined$1 ? priority : this.countryCodes[countryCode].length; - this.countryCodes[countryCode][index] = iso2; - }, - }, - { - key: "_processAllCountries", - value: function _processAllCountries() { - if (this.options.onlyCountries.length) { - var lowerCaseOnlyCountries = this.options.onlyCountries.map(function (country) { - return country.toLowerCase(); - }); - this.countries = allCountries.filter(function (country) { - return lowerCaseOnlyCountries.indexOf(country.iso2) > -1; - }); - } else if (this.options.excludeCountries.length) { - var lowerCaseExcludeCountries = this.options.excludeCountries.map(function ( - country - ) { - return country.toLowerCase(); - }); - this.countries = allCountries.filter(function (country) { - return lowerCaseExcludeCountries.indexOf(country.iso2) === -1; - }); - } else { - this.countries = allCountries; - } - }, - }, - { - key: "_translateCountriesByLocale", - value: function _translateCountriesByLocale() { - for (var i = 0; i < this.countries.length; i++) { - var iso = this.countries[i].iso2.toLowerCase(); - if (this.options.localizedCountries.hasOwnProperty(iso)) { - this.countries[i].name = this.options.localizedCountries[iso]; - } - } - }, - }, - { - key: "_countryNameSort", - value: function _countryNameSort(a, b) { - return a.name.localeCompare(b.name); - }, - }, - { - key: "_processCountryCodes", - value: function _processCountryCodes() { - this.countryCodeMaxLen = 0; - // here we store just dial codes - this.dialCodes = {}; - // here we store "country codes" (both dial codes and their area codes) - this.countryCodes = {}; - // first: add dial codes - for (var i = 0; i < this.countries.length; i++) { - var c = this.countries[i]; - if (!this.dialCodes[c.dialCode]) this.dialCodes[c.dialCode] = true; - this._addCountryCode(c.iso2, c.dialCode, c.priority); - } - // next: add area codes - // this is a second loop over countries, to make sure we have all of the "root" countries - // already in the map, so that we can access them, as each time we add an area code substring - // to the map, we also need to include the "root" country's code, as that also matches - for (var _i = 0; _i < this.countries.length; _i++) { - var _c = this.countries[_i]; - // area codes - if (_c.areaCodes) { - var rootCountryCode = this.countryCodes[_c.dialCode][0]; - // for each area code - for (var j = 0; j < _c.areaCodes.length; j++) { - var areaCode = _c.areaCodes[j]; - // for each digit in the area code to add all partial matches as well - for (var k = 1; k < areaCode.length; k++) { - var partialDialCode = _c.dialCode + areaCode.substr(0, k); - // start with the root country, as that also matches this dial code - this._addCountryCode(rootCountryCode, partialDialCode); - this._addCountryCode(_c.iso2, partialDialCode); - } - // add the full area code - this._addCountryCode(_c.iso2, _c.dialCode + areaCode); - } - } - } - }, - }, - { - key: "_processPreferredCountries", - value: function _processPreferredCountries() { - this.preferredCountries = []; - for (var i = 0; i < this.options.preferredCountries.length; i++) { - var countryCode = this.options.preferredCountries[i].toLowerCase(); - var countryData = this._getCountryData(countryCode, false, true); - if (countryData) this.preferredCountries.push(countryData); - } - }, - }, - { - key: "_createEl", - value: function _createEl(name, attrs, container) { - var el = document.createElement(name); - if (attrs) - forEachProp(attrs, function (key, value) { - return el.setAttribute(key, value); - }); - if (container) container.appendChild(el); - return el; - }, - }, - { - key: "_generateMarkup", - value: function _generateMarkup() { - // if autocomplete does not exist on the element and its form, then - // prevent autocomplete as there's no safe, cross-browser event we can react to, so it can - // easily put the plugin in an inconsistent state e.g. the wrong flag selected for the - // autocompleted number, which on submit could mean wrong number is saved (esp in nationalMode) - if ( - !this.telInput.hasAttribute("autocomplete") && - !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete")) - ) { - this.telInput.setAttribute("autocomplete", "off"); - } - // containers (mostly for positioning) - var parentClass = "iti"; - if (this.options.allowDropdown) parentClass += " iti--allow-dropdown"; - if (this.options.separateDialCode) parentClass += " iti--separate-dial-code"; - if (this.options.customContainer) { - parentClass += " "; - parentClass += this.options.customContainer; - } - var wrapper = this._createEl("div", { - class: parentClass, - }); - this.telInput.parentNode.insertBefore(wrapper, this.telInput); - this.flagsContainer = this._createEl( - "div", - { - class: "iti__flag-container", - }, - wrapper - ); - wrapper.appendChild(this.telInput); - // selected flag (displayed to left of input) - this.selectedFlag = this._createEl( - "div", - { - class: "iti__selected-flag", - role: "combobox", - "aria-controls": "iti-".concat(this.id, "__country-listbox"), - "aria-owns": "iti-".concat(this.id, "__country-listbox"), - "aria-expanded": "false", - }, - this.flagsContainer - ); - this.selectedFlagInner = this._createEl( - "div", - { - class: "iti__flag", - }, - this.selectedFlag - ); - if (this.options.separateDialCode) { - this.selectedDialCode = this._createEl( - "div", - { - class: "iti__selected-dial-code", - }, - this.selectedFlag - ); - } - if (this.options.allowDropdown) { - // make element focusable and tab navigable - this.selectedFlag.setAttribute("tabindex", "0"); - this.dropdownArrow = this._createEl( - "div", - { - class: "iti__arrow", - }, - this.selectedFlag - ); - // country dropdown: preferred countries, then divider, then all countries - this.countryList = this._createEl("ul", { - class: "iti__country-list iti__hide", - id: "iti-".concat(this.id, "__country-listbox"), - role: "listbox", - "aria-label": "List of countries", - }); - if (this.preferredCountries.length) { - this._appendListItems(this.preferredCountries, "iti__preferred", true); - this._createEl( - "li", - { - class: "iti__divider", - role: "separator", - "aria-disabled": "true", - }, - this.countryList - ); - } - this._appendListItems(this.countries, "iti__standard"); - // create dropdownContainer markup - if (this.options.dropdownContainer) { - this.dropdown = this._createEl("div", { - class: "iti iti--container", - }); - this.dropdown.appendChild(this.countryList); - } else { - this.flagsContainer.appendChild(this.countryList); - } - } - if (this.options.hiddenInput) { - var hiddenInputName = this.options.hiddenInput; - var name = this.telInput.getAttribute("name"); - if (name) { - var i = name.lastIndexOf("["); - // if input name contains square brackets, then give the hidden input the same name, - // replacing the contents of the last set of brackets with the given hiddenInput name - if (i !== -1) - hiddenInputName = "" - .concat(name.substr(0, i), "[") - .concat(hiddenInputName, "]"); - } - this.hiddenInput = this._createEl("input", { - type: "hidden", - name: hiddenInputName, - }); - wrapper.appendChild(this.hiddenInput); - } - }, - }, - { - key: "_appendListItems", - value: function _appendListItems(countries, className, preferred) { - // we create so many DOM elements, it is faster to build a temp string - // and then add everything to the DOM in one go at the end - var tmp = ""; - // for each country - for (var i = 0; i < countries.length; i++) { - var c = countries[i]; - var idSuffix = preferred ? "-preferred" : ""; - // open the list item - tmp += "
  • "); - // add the flag - tmp += "
    " - ); - // and the country name and dial code - tmp += "".concat(c.name, ""); - tmp += "+".concat(c.dialCode, ""); - // close the list item - tmp += "
    • "; - } - this.countryList.insertAdjacentHTML("beforeend", tmp); - }, - }, - { - key: "_setInitialState", - value: function _setInitialState() { - // fix firefox bug: when first load page (with input with value set to number with intl dial - // code) and initialising plugin removes the dial code from the input, then refresh page, - // and we try to init plugin again but this time on number without dial code so get grey flag - var attributeValue = this.telInput.getAttribute("value"); - var inputValue = this.telInput.value; - var useAttribute = - attributeValue && - attributeValue.charAt(0) === "+" && - (!inputValue || inputValue.charAt(0) !== "+"); - var val = useAttribute ? attributeValue : inputValue; - var dialCode = this._getDialCode(val); - var isRegionlessNanp = this._isRegionlessNanp(val); - var _this$options = this.options, - initialCountry = _this$options.initialCountry, - nationalMode = _this$options.nationalMode, - autoHideDialCode = _this$options.autoHideDialCode, - separateDialCode = _this$options.separateDialCode; - // if we already have a dial code, and it's not a regionlessNanp, we can go ahead and set the - // flag, else fall back to the default country - if (dialCode && !isRegionlessNanp) { - this._updateFlagFromNumber(val); - } else if (initialCountry !== "auto") { - // see if we should select a flag - if (initialCountry) { - this._setFlag(initialCountry.toLowerCase()); - } else { - if (dialCode && isRegionlessNanp) { - // has intl dial code, is regionless nanp, and no initialCountry, so default to US - this._setFlag("us"); - } else { - // no dial code and no initialCountry, so default to first in list - this.defaultCountry = this.preferredCountries.length - ? this.preferredCountries[0].iso2 - : this.countries[0].iso2; - if (!val) { - this._setFlag(this.defaultCountry); - } - } - } - // if empty and no nationalMode and no autoHideDialCode then insert the default dial code - if (!val && !nationalMode && !autoHideDialCode && !separateDialCode) { - this.telInput.value = "+".concat(this.selectedCountryData.dialCode); - } - } - // NOTE: if initialCountry is set to auto, that will be handled separately - // format - note this wont be run after _updateDialCode as that's only called if no val - if (val) this._updateValFromNumber(val); - }, - }, - { - key: "_initListeners", - value: function _initListeners() { - this._initKeyListeners(); - if (this.options.autoHideDialCode) this._initBlurListeners(); - if (this.options.allowDropdown) this._initDropdownListeners(); - if (this.hiddenInput) this._initHiddenInputListener(); - }, - }, - { - key: "_initHiddenInputListener", - value: function _initHiddenInputListener() { - var _this3 = this; - this._handleHiddenInputSubmit = function () { - _this3.hiddenInput.value = _this3.getNumber(); - }; - if (this.telInput.form) - this.telInput.form.addEventListener("submit", this._handleHiddenInputSubmit); - }, - }, - { - key: "_getClosestLabel", - value: function _getClosestLabel() { - var el = this.telInput; - while (el && el.tagName !== "LABEL") { - el = el.parentNode; - } - return el; - }, - }, - { - key: "_initDropdownListeners", - value: function _initDropdownListeners() { - var _this4 = this; - // hack for input nested inside label (which is valid markup): clicking the selected-flag to - // open the dropdown would then automatically trigger a 2nd click on the input which would - // close it again - this._handleLabelClick = function (e) { - // if the dropdown is closed, then focus the input, else ignore the click - if (_this4.countryList.classList.contains("iti__hide")) _this4.telInput.focus(); - else e.preventDefault(); - }; - var label = this._getClosestLabel(); - if (label) label.addEventListener("click", this._handleLabelClick); - // toggle country dropdown on click - this._handleClickSelectedFlag = function () { - // only intercept this event if we're opening the dropdown - // else let it bubble up to the top ("click-off-to-close" listener) - // we cannot just stopPropagation as it may be needed to close another instance - if ( - _this4.countryList.classList.contains("iti__hide") && - !_this4.telInput.disabled && - !_this4.telInput.readOnly - ) { - _this4._showDropdown(); - } - }; - this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag); - // open dropdown list if currently focused - this._handleFlagsContainerKeydown = function (e) { - var isDropdownHidden = _this4.countryList.classList.contains("iti__hide"); - if ( - isDropdownHidden && - ["ArrowUp", "Up", "ArrowDown", "Down", " ", "Enter"].indexOf(e.key) !== -1 - ) { - // prevent form from being submitted if "ENTER" was pressed - e.preventDefault(); - // prevent event from being handled again by document - e.stopPropagation(); - _this4._showDropdown(); - } - // allow navigation from dropdown to input on TAB - if (e.key === "Tab") _this4._closeDropdown(); - }; - this.flagsContainer.addEventListener("keydown", this._handleFlagsContainerKeydown); - }, - }, - { - key: "_initRequests", - value: function _initRequests() { - var _this5 = this; - // if the user has specified the path to the utils script, fetch it on window.load, else resolve - if (this.options.utilsScript && !window.intlTelInputUtils) { - // if the plugin is being initialised after the window.load event has already been fired - if (window.intlTelInputGlobals.documentReady()) { - window.intlTelInputGlobals.loadUtils(this.options.utilsScript); - } else { - // wait until the load event so we don't block any other requests e.g. the flags image - window.addEventListener("load", function () { - window.intlTelInputGlobals.loadUtils(_this5.options.utilsScript); - }); - } - } else this.resolveUtilsScriptPromise(); - if (this.options.initialCountry === "auto") this._loadAutoCountry(); - else this.resolveAutoCountryPromise(); - }, - }, - { - key: "_loadAutoCountry", - value: function _loadAutoCountry() { - // 3 options: - // 1) already loaded (we're done) - // 2) not already started loading (start) - // 3) already started loading (do nothing - just wait for loading callback to fire) - if (window.intlTelInputGlobals.autoCountry) { - this.handleAutoCountry(); - } else if (!window.intlTelInputGlobals.startedLoadingAutoCountry) { - // don't do this twice! - window.intlTelInputGlobals.startedLoadingAutoCountry = true; - if (typeof this.options.geoIpLookup === "function") { - this.options.geoIpLookup( - function (countryCode) { - window.intlTelInputGlobals.autoCountry = countryCode.toLowerCase(); - // tell all instances the auto country is ready - // TODO: this should just be the current instances - // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight - // away (e.g. if they have already done the geo ip lookup somewhere else). Using - // setTimeout means that the current thread of execution will finish before executing - // this, which allows the plugin to finish initialising. - setTimeout(function () { - return forEachInstance("handleAutoCountry"); - }); - }, - function () { - return forEachInstance("rejectAutoCountryPromise"); - } - ); - } - } - }, - }, - { - key: "_initKeyListeners", - value: function _initKeyListeners() { - var _this6 = this; - // update flag on keyup - this._handleKeyupEvent = function () { - if (_this6._updateFlagFromNumber(_this6.telInput.value)) { - _this6._triggerCountryChange(); - } - }; - this.telInput.addEventListener("keyup", this._handleKeyupEvent); - // update flag on cut/paste events (now supported in all major browsers) - this._handleClipboardEvent = function () { - // hack because "paste" event is fired before input is updated - setTimeout(_this6._handleKeyupEvent); - }; - this.telInput.addEventListener("cut", this._handleClipboardEvent); - this.telInput.addEventListener("paste", this._handleClipboardEvent); - }, - }, - { - key: "_cap", - value: function _cap(number) { - var max = this.telInput.getAttribute("maxlength"); - return max && number.length > max ? number.substr(0, max) : number; - }, - }, - { - key: "_initBlurListeners", - value: function _initBlurListeners() { - var _this7 = this; - // on blur or form submit: if just a dial code then remove it - this._handleSubmitOrBlurEvent = function () { - _this7._removeEmptyDialCode(); - }; - if (this.telInput.form) - this.telInput.form.addEventListener("submit", this._handleSubmitOrBlurEvent); - this.telInput.addEventListener("blur", this._handleSubmitOrBlurEvent); - }, - }, - { - key: "_removeEmptyDialCode", - value: function _removeEmptyDialCode() { - if (this.telInput.value.charAt(0) === "+") { - var numeric = this._getNumeric(this.telInput.value); - // if just a plus, or if just a dial code - if (!numeric || this.selectedCountryData.dialCode === numeric) { - this.telInput.value = ""; - } - } - }, - }, - { - key: "_getNumeric", - value: function _getNumeric(s) { - return s.replace(/\D/g, ""); - }, - }, - { - key: "_trigger", - value: function _trigger(name) { - // have to use old school document.createEvent as IE11 doesn't support `new Event()` syntax - var e = document.createEvent("Event"); - e.initEvent(name, true, true); - // can bubble, and is cancellable - this.telInput.dispatchEvent(e); - }, - }, - { - key: "_showDropdown", - value: function _showDropdown() { - this.countryList.classList.remove("iti__hide"); - this.selectedFlag.setAttribute("aria-expanded", "true"); - this._setDropdownPosition(); - // update highlighting and scroll to active list item - if (this.activeItem) { - this._highlightListItem(this.activeItem, false); - this._scrollTo(this.activeItem, true); - } - // bind all the dropdown-related listeners: mouseover, click, click-off, keydown - this._bindDropdownListeners(); - // update the arrow - this.dropdownArrow.classList.add("iti__arrow--up"); - this._trigger("open:countrydropdown"); - }, - }, - { - key: "_toggleClass", - value: function _toggleClass(el, className, shouldHaveClass) { - if (shouldHaveClass && !el.classList.contains(className)) el.classList.add(className); - else if (!shouldHaveClass && el.classList.contains(className)) - el.classList.remove(className); - }, - }, - { - key: "_setDropdownPosition", - value: function _setDropdownPosition() { - var _this8 = this; - if (this.options.dropdownContainer) { - this.options.dropdownContainer.appendChild(this.dropdown); - } - if (!this.isMobile) { - var pos = this.telInput.getBoundingClientRect(); - // windowTop from https://stackoverflow.com/a/14384091/217866 - var windowTop = window.pageYOffset || document.documentElement.scrollTop; - var inputTop = pos.top + windowTop; - var dropdownHeight = this.countryList.offsetHeight; - // dropdownFitsBelow = (dropdownBottom < windowBottom) - var dropdownFitsBelow = - inputTop + this.telInput.offsetHeight + dropdownHeight < - windowTop + window.innerHeight; - var dropdownFitsAbove = inputTop - dropdownHeight > windowTop; - // by default, the dropdown will be below the input. If we want to position it above the - // input, we add the dropup class. - this._toggleClass( - this.countryList, - "iti__country-list--dropup", - !dropdownFitsBelow && dropdownFitsAbove - ); - // if dropdownContainer is enabled, calculate postion - if (this.options.dropdownContainer) { - // by default the dropdown will be directly over the input because it's not in the flow. - // If we want to position it below, we need to add some extra top value. - var extraTop = - !dropdownFitsBelow && dropdownFitsAbove ? 0 : this.telInput.offsetHeight; - // calculate placement - this.dropdown.style.top = "".concat(inputTop + extraTop, "px"); - this.dropdown.style.left = "".concat(pos.left + document.body.scrollLeft, "px"); - // close menu on window scroll - this._handleWindowScroll = function () { - return _this8._closeDropdown(); - }; - window.addEventListener("scroll", this._handleWindowScroll); - } - } - }, - }, - { - key: "_getClosestListItem", - value: function _getClosestListItem(target) { - var el = target; - while (el && el !== this.countryList && !el.classList.contains("iti__country")) { - el = el.parentNode; - } - // if we reached the countryList element, then return null - return el === this.countryList ? null : el; - }, - }, - { - key: "_bindDropdownListeners", - value: function _bindDropdownListeners() { - var _this9 = this; - // when mouse over a list item, just highlight that one - // we add the class "highlight", so if they hit "enter" we know which one to select - this._handleMouseoverCountryList = function (e) { - // handle event delegation, as we're listening for this event on the countryList - var listItem = _this9._getClosestListItem(e.target); - if (listItem) _this9._highlightListItem(listItem, false); - }; - this.countryList.addEventListener("mouseover", this._handleMouseoverCountryList); - // listen for country selection - this._handleClickCountryList = function (e) { - var listItem = _this9._getClosestListItem(e.target); - if (listItem) _this9._selectListItem(listItem); - }; - this.countryList.addEventListener("click", this._handleClickCountryList); - // click off to close - // (except when this initial opening click is bubbling up) - // we cannot just stopPropagation as it may be needed to close another instance - var isOpening = true; - this._handleClickOffToClose = function () { - if (!isOpening) _this9._closeDropdown(); - isOpening = false; - }; - document.documentElement.addEventListener("click", this._handleClickOffToClose); - // listen for up/down scrolling, enter to select, or letters to jump to country name. - // use keydown as keypress doesn't fire for non-char keys and we want to catch if they - // just hit down and hold it to scroll down (no keyup event). - // listen on the document because that's where key events are triggered if no input has focus - var query = ""; - var queryTimer = null; - this._handleKeydownOnDropdown = function (e) { - // prevent down key from scrolling the whole page, - // and enter key from submitting a form etc - e.preventDefault(); - // up and down to navigate - if ( - e.key === "ArrowUp" || - e.key === "Up" || - e.key === "ArrowDown" || - e.key === "Down" - ) - _this9._handleUpDownKey(e.key); - else if (e.key === "Enter") _this9._handleEnterKey(); - else if (e.key === "Escape") _this9._closeDropdown(); - else if (/^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) { - // jump to countries that start with the query string - if (queryTimer) clearTimeout(queryTimer); - query += e.key.toLowerCase(); - _this9._searchForCountry(query); - // if the timer hits 1 second, reset the query - queryTimer = setTimeout(function () { - query = ""; - }, 1e3); - } - }; - document.addEventListener("keydown", this._handleKeydownOnDropdown); - }, - }, - { - key: "_handleUpDownKey", - value: function _handleUpDownKey(key) { - var next = - key === "ArrowUp" || key === "Up" - ? this.highlightedItem.previousElementSibling - : this.highlightedItem.nextElementSibling; - if (next) { - // skip the divider - if (next.classList.contains("iti__divider")) { - next = - key === "ArrowUp" || key === "Up" - ? next.previousElementSibling - : next.nextElementSibling; - } - this._highlightListItem(next, true); - } - }, - }, - { - key: "_handleEnterKey", - value: function _handleEnterKey() { - if (this.highlightedItem) this._selectListItem(this.highlightedItem); - }, - }, - { - key: "_searchForCountry", - value: function _searchForCountry(query) { - for (var i = 0; i < this.countries.length; i++) { - if (this._startsWith(this.countries[i].name, query)) { - var listItem = this.countryList.querySelector( - "#iti-".concat(this.id, "__item-").concat(this.countries[i].iso2) - ); - // update highlighting and scroll - this._highlightListItem(listItem, false); - this._scrollTo(listItem, true); - break; - } - } - }, - }, - { - key: "_startsWith", - value: function _startsWith(a, b) { - return a.substr(0, b.length).toLowerCase() === b; - }, - }, - { - key: "_updateValFromNumber", - value: function _updateValFromNumber(originalNumber) { - var number = originalNumber; - if ( - this.options.formatOnDisplay && - window.intlTelInputUtils && - this.selectedCountryData - ) { - var useNational = - !this.options.separateDialCode && - (this.options.nationalMode || number.charAt(0) !== "+"); - var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, - NATIONAL = _intlTelInputUtils$nu.NATIONAL, - INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL; - var format = useNational ? NATIONAL : INTERNATIONAL; - number = intlTelInputUtils.formatNumber( - number, - this.selectedCountryData.iso2, - format - ); - } - number = this._beforeSetNumber(number); - this.telInput.value = number; - }, - }, - { - key: "_updateFlagFromNumber", - value: function _updateFlagFromNumber(originalNumber) { - // if we're in nationalMode and we already have US/Canada selected, make sure the number starts - // with a +1 so _getDialCode will be able to extract the area code - // update: if we dont yet have selectedCountryData, but we're here (trying to update the flag - // from the number), that means we're initialising the plugin with a number that already has a - // dial code, so fine to ignore this bit - var number = originalNumber; - var selectedDialCode = this.selectedCountryData.dialCode; - var isNanp = selectedDialCode === "1"; - if (number && this.options.nationalMode && isNanp && number.charAt(0) !== "+") { - if (number.charAt(0) !== "1") number = "1".concat(number); - number = "+".concat(number); - } - // update flag if user types area code for another country - if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== "+") { - number = "+".concat(selectedDialCode).concat(number); - } - // try and extract valid dial code from input - var dialCode = this._getDialCode(number, true); - var numeric = this._getNumeric(number); - var countryCode = null; - if (dialCode) { - var countryCodes = this.countryCodes[this._getNumeric(dialCode)]; - // check if the right country is already selected. this should be false if the number is - // longer than the matched dial code because in this case we need to make sure that if - // there are multiple country matches, that the first one is selected (note: we could - // just check that here, but it requires the same loop that we already have later) - var alreadySelected = - countryCodes.indexOf(this.selectedCountryData.iso2) !== -1 && - numeric.length <= dialCode.length - 1; - var isRegionlessNanpNumber = - selectedDialCode === "1" && this._isRegionlessNanp(numeric); - // only update the flag if: - // A) NOT (we currently have a NANP flag selected, and the number is a regionlessNanp) - // AND - // B) the right country is not already selected - if (!isRegionlessNanpNumber && !alreadySelected) { - // if using onlyCountries option, countryCodes[0] may be empty, so we must find the first - // non-empty index - for (var j = 0; j < countryCodes.length; j++) { - if (countryCodes[j]) { - countryCode = countryCodes[j]; - break; - } - } - } - } else if (number.charAt(0) === "+" && numeric.length) { - // invalid dial code, so empty - // Note: use getNumeric here because the number has not been formatted yet, so could contain - // bad chars - countryCode = ""; - } else if (!number || number === "+") { - // empty, or just a plus, so default - countryCode = this.defaultCountry; - } - if (countryCode !== null) { - return this._setFlag(countryCode); - } - return false; - }, - }, - { - key: "_isRegionlessNanp", - value: function _isRegionlessNanp(number) { - var numeric = this._getNumeric(number); - if (numeric.charAt(0) === "1") { - var areaCode = numeric.substr(1, 3); - return regionlessNanpNumbers.indexOf(areaCode) !== -1; - } - return false; - }, - }, - { - key: "_highlightListItem", - value: function _highlightListItem(listItem, shouldFocus) { - var prevItem = this.highlightedItem; - if (prevItem) prevItem.classList.remove("iti__highlight"); - this.highlightedItem = listItem; - this.highlightedItem.classList.add("iti__highlight"); - if (shouldFocus) this.highlightedItem.focus(); - }, - }, - { - key: "_getCountryData", - value: function _getCountryData(countryCode, ignoreOnlyCountriesOption, allowFail) { - var countryList = ignoreOnlyCountriesOption ? allCountries : this.countries; - for (var i = 0; i < countryList.length; i++) { - if (countryList[i].iso2 === countryCode) { - return countryList[i]; - } - } - if (allowFail) { - return null; - } - throw new Error("No country data for '".concat(countryCode, "'")); - }, - }, - { - key: "_setFlag", - value: function _setFlag(countryCode) { - var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {}; - // do this first as it will throw an error and stop if countryCode is invalid - this.selectedCountryData = countryCode - ? this._getCountryData(countryCode, false, false) - : {}; - // update the defaultCountry - we only need the iso2 from now on, so just store that - if (this.selectedCountryData.iso2) { - this.defaultCountry = this.selectedCountryData.iso2; - } - this.selectedFlagInner.setAttribute("class", "iti__flag iti__".concat(countryCode)); - // update the selected country's title attribute - var title = countryCode - ? "" - .concat(this.selectedCountryData.name, ": +") - .concat(this.selectedCountryData.dialCode) - : "Unknown"; - this.selectedFlag.setAttribute("title", title); - if (this.options.separateDialCode) { - var dialCode = this.selectedCountryData.dialCode - ? "+".concat(this.selectedCountryData.dialCode) - : ""; - this.selectedDialCode.innerHTML = dialCode; - // offsetWidth is zero if input is in a hidden container during initialisation - var selectedFlagWidth = - this.selectedFlag.offsetWidth || this._getHiddenSelectedFlagWidth(); - // add 6px of padding after the grey selected-dial-code box, as this is what we use in the css - this.telInput.style.paddingLeft = "".concat(selectedFlagWidth + 6, "px"); - } - // and the input's placeholder - this._updatePlaceholder(); - // update the active list item - if (this.options.allowDropdown) { - var prevItem = this.activeItem; - if (prevItem) { - prevItem.classList.remove("iti__active"); - prevItem.setAttribute("aria-selected", "false"); - } - if (countryCode) { - // check if there is a preferred item first, else fall back to standard - var nextItem = - this.countryList.querySelector( - "#iti-".concat(this.id, "__item-").concat(countryCode, "-preferred") - ) || - this.countryList.querySelector( - "#iti-".concat(this.id, "__item-").concat(countryCode) - ); - nextItem.setAttribute("aria-selected", "true"); - nextItem.classList.add("iti__active"); - this.activeItem = nextItem; - this.selectedFlag.setAttribute( - "aria-activedescendant", - nextItem.getAttribute("id") - ); - } - } - // return if the flag has changed or not - return prevCountry.iso2 !== countryCode; - }, - }, - { - key: "_getHiddenSelectedFlagWidth", - value: function _getHiddenSelectedFlagWidth() { - // to get the right styling to apply, all we need is a shallow clone of the container, - // and then to inject a deep clone of the selectedFlag element - var containerClone = this.telInput.parentNode.cloneNode(); - containerClone.style.visibility = "hidden"; - document.body.appendChild(containerClone); - var flagsContainerClone = this.flagsContainer.cloneNode(); - containerClone.appendChild(flagsContainerClone); - var selectedFlagClone = this.selectedFlag.cloneNode(true); - flagsContainerClone.appendChild(selectedFlagClone); - var width = selectedFlagClone.offsetWidth; - containerClone.parentNode.removeChild(containerClone); - return width; - }, - }, - { - key: "_updatePlaceholder", - value: function _updatePlaceholder() { - var shouldSetPlaceholder = - this.options.autoPlaceholder === "aggressive" || - (!this.hadInitialPlaceholder && this.options.autoPlaceholder === "polite"); - if (window.intlTelInputUtils && shouldSetPlaceholder) { - var numberType = intlTelInputUtils.numberType[this.options.placeholderNumberType]; - var placeholder = this.selectedCountryData.iso2 - ? intlTelInputUtils.getExampleNumber( - this.selectedCountryData.iso2, - this.options.nationalMode, - numberType - ) - : ""; - placeholder = this._beforeSetNumber(placeholder); - if (typeof this.options.customPlaceholder === "function") { - placeholder = this.options.customPlaceholder( - placeholder, - this.selectedCountryData - ); - } - this.telInput.setAttribute("placeholder", placeholder); - } - }, - }, - { - key: "_selectListItem", - value: function _selectListItem(listItem) { - // update selected flag and active list item - var flagChanged = this._setFlag(listItem.getAttribute("data-country-code")); - this._closeDropdown(); - this._updateDialCode(listItem.getAttribute("data-dial-code"), true); - // focus the input - this.telInput.focus(); - // put cursor at end - this fix is required for FF and IE11 (with nationalMode=false i.e. auto - // inserting dial code), who try to put the cursor at the beginning the first time - var len = this.telInput.value.length; - this.telInput.setSelectionRange(len, len); - if (flagChanged) { - this._triggerCountryChange(); - } - }, - }, - { - key: "_closeDropdown", - value: function _closeDropdown() { - this.countryList.classList.add("iti__hide"); - this.selectedFlag.setAttribute("aria-expanded", "false"); - // update the arrow - this.dropdownArrow.classList.remove("iti__arrow--up"); - // unbind key events - document.removeEventListener("keydown", this._handleKeydownOnDropdown); - document.documentElement.removeEventListener("click", this._handleClickOffToClose); - this.countryList.removeEventListener("mouseover", this._handleMouseoverCountryList); - this.countryList.removeEventListener("click", this._handleClickCountryList); - // remove menu from container - if (this.options.dropdownContainer) { - if (!this.isMobile) window.removeEventListener("scroll", this._handleWindowScroll); - if (this.dropdown.parentNode) this.dropdown.parentNode.removeChild(this.dropdown); - } - this._trigger("close:countrydropdown"); - }, - }, - { - key: "_scrollTo", - value: function _scrollTo(element, middle) { - var container = this.countryList; - // windowTop from https://stackoverflow.com/a/14384091/217866 - var windowTop = window.pageYOffset || document.documentElement.scrollTop; - var containerHeight = container.offsetHeight; - var containerTop = container.getBoundingClientRect().top + windowTop; - var containerBottom = containerTop + containerHeight; - var elementHeight = element.offsetHeight; - var elementTop = element.getBoundingClientRect().top + windowTop; - var elementBottom = elementTop + elementHeight; - var newScrollTop = elementTop - containerTop + container.scrollTop; - var middleOffset = containerHeight / 2 - elementHeight / 2; - if (elementTop < containerTop) { - // scroll up - if (middle) newScrollTop -= middleOffset; - container.scrollTop = newScrollTop; - } else if (elementBottom > containerBottom) { - // scroll down - if (middle) newScrollTop += middleOffset; - var heightDifference = containerHeight - elementHeight; - container.scrollTop = newScrollTop - heightDifference; - } - }, - }, - { - key: "_updateDialCode", - value: function _updateDialCode(newDialCodeBare, hasSelectedListItem) { - var inputVal = this.telInput.value; - // save having to pass this every time - var newDialCode = "+".concat(newDialCodeBare); - var newNumber; - if (inputVal.charAt(0) === "+") { - // there's a plus so we're dealing with a replacement (doesn't matter if nationalMode or not) - var prevDialCode = this._getDialCode(inputVal); - if (prevDialCode) { - // current number contains a valid dial code, so replace it - newNumber = inputVal.replace(prevDialCode, newDialCode); - } else { - // current number contains an invalid dial code, so ditch it - // (no way to determine where the invalid dial code ends and the rest of the number begins) - newNumber = newDialCode; - } - } else if (this.options.nationalMode || this.options.separateDialCode) { - // don't do anything - return; - } else { - // nationalMode is disabled - if (inputVal) { - // there is an existing value with no dial code: prefix the new dial code - newNumber = newDialCode + inputVal; - } else if (hasSelectedListItem || !this.options.autoHideDialCode) { - // no existing value and either they've just selected a list item, or autoHideDialCode is - // disabled: insert new dial code - newNumber = newDialCode; - } else { - return; - } - } - this.telInput.value = newNumber; - }, - }, - { - key: "_getDialCode", - value: function _getDialCode(number, includeAreaCode) { - var dialCode = ""; - // only interested in international numbers (starting with a plus) - if (number.charAt(0) === "+") { - var numericChars = ""; - // iterate over chars - for (var i = 0; i < number.length; i++) { - var c = number.charAt(i); - // if char is number (https://stackoverflow.com/a/8935649/217866) - if (!isNaN(parseInt(c, 10))) { - numericChars += c; - // if current numericChars make a valid dial code - if (includeAreaCode) { - if (this.countryCodes[numericChars]) { - // store the actual raw string (useful for matching later) - dialCode = number.substr(0, i + 1); - } - } else { - if (this.dialCodes[numericChars]) { - dialCode = number.substr(0, i + 1); - // if we're just looking for a dial code, we can break as soon as we find one - break; - } - } - // stop searching as soon as we can - in this case when we hit max len - if (numericChars.length === this.countryCodeMaxLen) { - break; - } - } - } - } - return dialCode; - }, - }, - { - key: "_getFullNumber", - value: function _getFullNumber() { - var val = this.telInput.value.trim(); - var dialCode = this.selectedCountryData.dialCode; - var prefix; - var numericVal = this._getNumeric(val); - if (this.options.separateDialCode && val.charAt(0) !== "+" && dialCode && numericVal) { - // when using separateDialCode, it is visible so is effectively part of the typed number - prefix = "+".concat(dialCode); - } else { - prefix = ""; - } - return prefix + val; - }, - }, - { - key: "_beforeSetNumber", - value: function _beforeSetNumber(originalNumber) { - var number = originalNumber; - if (this.options.separateDialCode) { - var dialCode = this._getDialCode(number); - // if there is a valid dial code - if (dialCode) { - // in case _getDialCode returned an area code as well - dialCode = "+".concat(this.selectedCountryData.dialCode); - // a lot of numbers will have a space separating the dial code and the main number, and - // some NANP numbers will have a hyphen e.g. +1 684-733-1234 - in both cases we want to get - // rid of it - // NOTE: don't just trim all non-numerics as may want to preserve an open parenthesis etc - var start = - number[dialCode.length] === " " || number[dialCode.length] === "-" - ? dialCode.length + 1 - : dialCode.length; - number = number.substr(start); - } - } - return this._cap(number); - }, - }, - { - key: "_triggerCountryChange", - value: function _triggerCountryChange() { - this._trigger("countrychange"); - }, - }, - { - key: "handleAutoCountry", - value: function handleAutoCountry() { - if (this.options.initialCountry === "auto") { - // we must set this even if there is an initial val in the input: in case the initial val is - // invalid and they delete it - they should see their auto country - this.defaultCountry = window.intlTelInputGlobals.autoCountry; - // if there's no initial value in the input, then update the flag - if (!this.telInput.value) { - this.setCountry(this.defaultCountry); - } - this.resolveAutoCountryPromise(); - } - }, - }, - { - key: "handleUtils", - value: function handleUtils() { - // if the request was successful - if (window.intlTelInputUtils) { - // if there's an initial value in the input, then format it - if (this.telInput.value) { - this._updateValFromNumber(this.telInput.value); - } - this._updatePlaceholder(); - } - this.resolveUtilsScriptPromise(); - }, - }, - { - key: "destroy", - value: function destroy() { - var form = this.telInput.form; - if (this.options.allowDropdown) { - // make sure the dropdown is closed (and unbind listeners) - this._closeDropdown(); - this.selectedFlag.removeEventListener("click", this._handleClickSelectedFlag); - this.flagsContainer.removeEventListener( - "keydown", - this._handleFlagsContainerKeydown - ); - // label click hack - var label = this._getClosestLabel(); - if (label) label.removeEventListener("click", this._handleLabelClick); - } - // unbind hiddenInput listeners - if (this.hiddenInput && form) - form.removeEventListener("submit", this._handleHiddenInputSubmit); - // unbind autoHideDialCode listeners - if (this.options.autoHideDialCode) { - if (form) form.removeEventListener("submit", this._handleSubmitOrBlurEvent); - this.telInput.removeEventListener("blur", this._handleSubmitOrBlurEvent); - } - // unbind key events, and cut/paste events - this.telInput.removeEventListener("keyup", this._handleKeyupEvent); - this.telInput.removeEventListener("cut", this._handleClipboardEvent); - this.telInput.removeEventListener("paste", this._handleClipboardEvent); - // remove attribute of id instance: data-intl-tel-input-id - this.telInput.removeAttribute("data-intl-tel-input-id"); - // remove markup (but leave the original input) - var wrapper = this.telInput.parentNode; - wrapper.parentNode.insertBefore(this.telInput, wrapper); - wrapper.parentNode.removeChild(wrapper); - delete window.intlTelInputGlobals.instances[this.id]; - }, - }, - { - key: "getExtension", - value: function getExtension() { - if (window.intlTelInputUtils) { - return intlTelInputUtils.getExtension( - this._getFullNumber(), - this.selectedCountryData.iso2 - ); - } - return ""; - }, - }, - { - key: "getNumber", - value: function getNumber(format) { - if (window.intlTelInputUtils) { - var iso2 = this.selectedCountryData.iso2; - return intlTelInputUtils.formatNumber(this._getFullNumber(), iso2, format); - } - return ""; - }, - }, - { - key: "getNumberType", - value: function getNumberType() { - if (window.intlTelInputUtils) { - return intlTelInputUtils.getNumberType( - this._getFullNumber(), - this.selectedCountryData.iso2 - ); - } - return -99; - }, - }, - { - key: "getSelectedCountryData", - value: function getSelectedCountryData() { - return this.selectedCountryData; - }, - }, - { - key: "getValidationError", - value: function getValidationError() { - if (window.intlTelInputUtils) { - var iso2 = this.selectedCountryData.iso2; - return intlTelInputUtils.getValidationError(this._getFullNumber(), iso2); - } - return -99; - }, - }, - { - key: "isValidNumber", - value: function isValidNumber() { - var val = this._getFullNumber().trim(); - var countryCode = this.options.nationalMode ? this.selectedCountryData.iso2 : ""; - return window.intlTelInputUtils - ? intlTelInputUtils.isValidNumber(val, countryCode) - : null; - }, - }, - { - key: "setCountry", - value: function setCountry(originalCountryCode) { - var countryCode = originalCountryCode.toLowerCase(); - // check if already selected - if (!this.selectedFlagInner.classList.contains("iti__".concat(countryCode))) { - this._setFlag(countryCode); - this._updateDialCode(this.selectedCountryData.dialCode, false); - this._triggerCountryChange(); - } - }, - }, - { - key: "setNumber", - value: function setNumber(number) { - // we must update the flag first, which updates this.selectedCountryData, which is used for - // formatting the number before displaying it - var flagChanged = this._updateFlagFromNumber(number); - this._updateValFromNumber(number); - if (flagChanged) { - this._triggerCountryChange(); - } - }, - }, - { - key: "setPlaceholderNumberType", - value: function setPlaceholderNumberType(type) { - this.options.placeholderNumberType = type; - this._updatePlaceholder(); - }, - }, - ]); - return Iti; - })(); - /******************** - * STATIC METHODS - ********************/ - // get the country data object - intlTelInputGlobals.getCountryData = function () { - return allCountries; - }; - // inject a