diff --git a/CHANGELOG.md b/CHANGELOG.md index 703408178..49a5f0b42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [unreleased] +## [0.49.0] 2024-12-13 + +### Breaking changes + +- Moved the overridden components UI inside auth container which was earlier being rendered outside the auth container + ## [0.48.0] - 2024-10-07 ### Fixes diff --git a/lib/build/emailpasswordprebuiltui.js b/lib/build/emailpasswordprebuiltui.js index 7614a23e1..8dcad4082 100644 --- a/lib/build/emailpasswordprebuiltui.js +++ b/lib/build/emailpasswordprebuiltui.js @@ -100,21 +100,12 @@ function BackToSignInButton(_a) { ); } -var EmailPasswordResetPasswordEmail = function (props) { +var EmailPasswordResetPasswordEmail = uiEntry.withOverride("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 _a = React.useState(""), + emailFieldValue = _a[0], + setEmailFieldValue = _a[1]; var formFields = props.formFields; var emailSuccessText = t("EMAIL_PASSWORD_RESET_SEND_BEFORE_EMAIL") + @@ -122,157 +113,148 @@ var EmailPasswordResetPasswordEmail = function (props) { ? 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 }), - ], - } - ) - ), - } - ) - ); + if (props.status === "SENT") { + return jsxRuntime.jsxs(React.Fragment, { + children: [ + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "primaryText enterEmailSuccessMessage" }, + { + children: [ + emailSuccessText, + jsxRuntime.jsx( + "span", + genericComponentOverrideContext.__assign( + { "data-supertokens": "link resendEmailLink", onClick: props.resend }, + { children: t("EMAIL_PASSWORD_RESET_RESEND_LINK") } + ) + ), + ], + } + ) + ), + jsxRuntime.jsx(BackToSignInButton, { onClick: props.onBackButtonClicked }), + ], + }); } // Otherwise, return Form. + return jsxRuntime.jsxs(React.Fragment, { + children: [ + jsxRuntime.jsxs( + "div", + genericComponentOverrideContext.__assign( + { "data-supertokens": "headerTitle withBackButton" }, + { + children: [ + jsxRuntime.jsx(uiEntry.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 secondaryText" }, + { children: t("EMAIL_PASSWORD_RESET_HEADER_SUBTITLE") } + ) + ), + props.error !== undefined && jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }), + jsxRuntime.jsx(formBase.FormBase, { + clearError: props.clearError, + onError: props.onError, + formFields: formFields, + buttonLabel: "EMAIL_PASSWORD_RESET_SEND_BTN", + onSuccess: props.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 = function (props) { + var _a = React.useState("READY"), + status = _a[0], + setStatus = _a[1]; + var onSuccess = function () { + setStatus("SENT"); + }; + var resend = function () { + setStatus("READY"); + }; return jsxRuntime.jsx( "div", genericComponentOverrideContext.__assign( - { "data-supertokens": "container resetPasswordEmailForm" }, + { "data-supertokens": "container ".concat(status === "SENT" ? "" : "resetPasswordEmailForm") }, { - children: jsxRuntime.jsxs( + children: jsxRuntime.jsx( "div", genericComponentOverrideContext.__assign( { "data-supertokens": "row" }, { - children: [ - jsxRuntime.jsxs( - "div", - genericComponentOverrideContext.__assign( - { "data-supertokens": "headerTitle withBackButton" }, - { - children: [ - jsxRuntime.jsx(uiEntry.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 secondaryText" }, - { children: t("EMAIL_PASSWORD_RESET_HEADER_SUBTITLE") } - ) - ), - props.error !== undefined && - jsxRuntime.jsx(uiEntry.GeneralError, { error: props.error }), - jsxRuntime.jsx(formBase.FormBase, { - clearError: props.clearError, - onError: props.onError, - formFields: formFields, - buttonLabel: "EMAIL_PASSWORD_RESET_SEND_BTN", + children: jsxRuntime.jsx( + EmailPasswordResetPasswordEmail, + genericComponentOverrideContext.__assign({}, props, { + status: status, 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, - }), - ], + resend: resend, + }) + ), } ) ), @@ -280,7 +262,6 @@ var EmailPasswordResetPasswordEmail = function (props) { ) ); }; -var ResetPasswordEmail = uiEntry.withOverride("EmailPasswordResetPasswordEmail", EmailPasswordResetPasswordEmail); var EmailPasswordSubmitNewPassword = function (props) { var t = translationContext.useTranslation(); diff --git a/lib/build/genericComponentOverrideContext.js b/lib/build/genericComponentOverrideContext.js index c488e0ce2..9f8c18ad7 100644 --- a/lib/build/genericComponentOverrideContext.js +++ b/lib/build/genericComponentOverrideContext.js @@ -266,7 +266,7 @@ var SSR_ERROR = * License for the specific language governing permissions and limitations * under the License. */ -var package_version = "0.48.0"; +var package_version = "0.49.0"; /* Copyright (c) 2021, VRAI Labs and/or its affiliates. All rights reserved. * diff --git a/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.d.ts b/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.d.ts index bcc6e2b05..abbe7ecc7 100644 --- a/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.d.ts +++ b/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.d.ts @@ -1,5 +1,6 @@ /// -export declare const ResetPasswordEmail: import("react").ComponentType< +import type { EnterEmailProps, EnterEmailStatus } from "../../../types"; +export declare const EmailPasswordResetPasswordEmail: import("react").ComponentType< import("../../../../../types").ThemeBaseProps & { formFields: Omit[]; error: string | undefined; @@ -11,6 +12,9 @@ export declare const ResetPasswordEmail: import("react").ComponentType< config: import("../../../types").NormalisedConfig; onBackButtonClicked: () => void; } & { - children?: import("react").ReactNode; + status: EnterEmailStatus; + onSuccess: () => void; + resend: () => void; } >; +export declare const ResetPasswordEmail: React.FC; diff --git a/lib/build/recipe/emailpassword/types.d.ts b/lib/build/recipe/emailpassword/types.d.ts index a6879a04d..2efe56282 100644 --- a/lib/build/recipe/emailpassword/types.d.ts +++ b/lib/build/recipe/emailpassword/types.d.ts @@ -1,6 +1,6 @@ /// import type { InputProps } from "./components/library/input"; -import type { ResetPasswordEmail } from "./components/themes/resetPasswordUsingToken/resetPasswordEmail"; +import type { EmailPasswordResetPasswordEmail } from "./components/themes/resetPasswordUsingToken/resetPasswordEmail"; import type { SubmitNewPassword } from "./components/themes/resetPasswordUsingToken/submitNewPassword"; import type { SignInForm } from "./components/themes/signIn"; import type { SignUpForm } from "./components/themes/signUp"; @@ -28,7 +28,7 @@ import type { User } from "supertokens-web-js/types"; export declare type ComponentOverrideMap = { EmailPasswordSignInForm_Override?: ComponentOverride; EmailPasswordSignUpForm_Override?: ComponentOverride; - EmailPasswordResetPasswordEmail_Override?: ComponentOverride; + EmailPasswordResetPasswordEmail_Override?: ComponentOverride; EmailPasswordSubmitNewPassword_Override?: ComponentOverride; }; export declare type UserInput = { diff --git a/lib/build/version.d.ts b/lib/build/version.d.ts index 102f68d86..f84ac887e 100644 --- a/lib/build/version.d.ts +++ b/lib/build/version.d.ts @@ -1 +1 @@ -export declare const package_version = "0.48.0"; +export declare const package_version = "0.49.0"; diff --git a/lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.tsx b/lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.tsx index da81d334b..bb04b9469 100644 --- a/lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.tsx +++ b/lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/resetPasswordEmail.tsx @@ -12,7 +12,7 @@ * License for the specific language governing permissions and limitations * under the License. */ -import { useState } from "react"; +import { Fragment, useState } from "react"; import { withOverride } from "../../../../../components/componentOverride/withOverride"; import { useTranslation } from "../../../../../translation/translationContext"; @@ -25,48 +25,44 @@ import GeneralError from "../../library/generalError"; import type { EnterEmailProps, EnterEmailStatus } from "../../../types"; -const EmailPasswordResetPasswordEmail: React.FC = (props) => { - const t = useTranslation(); - const userContext = useUserContext(); - const [status, setStatus] = useState("READY"); - const [emailFieldValue, setEmailFieldValue] = useState(""); - - const onSuccess = (): void => { - setStatus("SENT"); - }; - - const resend = (): void => { - setStatus("READY"); - }; - const { formFields } = props; +export const EmailPasswordResetPasswordEmail = withOverride( + "EmailPasswordResetPasswordEmail", + ( + props: EnterEmailProps & { + status: EnterEmailStatus; + onSuccess: () => void; + resend: () => void; + } + ) => { + const t = useTranslation(); + const userContext = useUserContext(); + const [emailFieldValue, setEmailFieldValue] = useState(""); + const { formFields } = props; - const 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"); + const 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 ( -
-
+ if (props.status === "SENT") { + return ( +
{emailSuccessText} - + {t("EMAIL_PASSWORD_RESET_RESEND_LINK")}
-
-
- ); - } + + ); + } - // Otherwise, return Form. - return ( -
-
+ // Otherwise, return Form. + return ( +
{t("EMAIL_PASSWORD_RESET_HEADER_TITLE")} @@ -81,7 +77,7 @@ const EmailPasswordResetPasswordEmail: React.FC = (props) => { onError={props.onError} formFields={formFields} buttonLabel={"EMAIL_PASSWORD_RESET_SEND_BTN"} - onSuccess={onSuccess} + onSuccess={props.onSuccess} callAPI={async (formFields) => { const validationErrors = await validateForm( formFields, @@ -118,9 +114,26 @@ const EmailPasswordResetPasswordEmail: React.FC = (props) => { showLabels={true} validateOnBlur={true} /> + + ); + } +); + +export const ResetPasswordEmail: React.FC = (props) => { + const [status, setStatus] = useState("READY"); + const onSuccess = (): void => { + setStatus("SENT"); + }; + + const resend = (): void => { + setStatus("READY"); + }; + + return ( +
+
+
); }; - -export const ResetPasswordEmail = withOverride("EmailPasswordResetPasswordEmail", EmailPasswordResetPasswordEmail); diff --git a/lib/ts/recipe/emailpassword/types.ts b/lib/ts/recipe/emailpassword/types.ts index b30f27e3f..8cce04fb4 100644 --- a/lib/ts/recipe/emailpassword/types.ts +++ b/lib/ts/recipe/emailpassword/types.ts @@ -14,7 +14,7 @@ */ import type { InputProps } from "./components/library/input"; -import type { ResetPasswordEmail } from "./components/themes/resetPasswordUsingToken/resetPasswordEmail"; +import type { EmailPasswordResetPasswordEmail } from "./components/themes/resetPasswordUsingToken/resetPasswordEmail"; import type { SubmitNewPassword } from "./components/themes/resetPasswordUsingToken/submitNewPassword"; import type { SignInForm } from "./components/themes/signIn"; import type { SignUpForm } from "./components/themes/signUp"; @@ -43,7 +43,7 @@ import type { User } from "supertokens-web-js/types"; export type ComponentOverrideMap = { EmailPasswordSignInForm_Override?: ComponentOverride; EmailPasswordSignUpForm_Override?: ComponentOverride; - EmailPasswordResetPasswordEmail_Override?: ComponentOverride; + EmailPasswordResetPasswordEmail_Override?: ComponentOverride; EmailPasswordSubmitNewPassword_Override?: ComponentOverride; }; diff --git a/lib/ts/version.ts b/lib/ts/version.ts index 41f9ac37a..1de93fae4 100644 --- a/lib/ts/version.ts +++ b/lib/ts/version.ts @@ -12,4 +12,4 @@ * License for the specific language governing permissions and limitations * under the License. */ -export const package_version = "0.48.0"; +export const package_version = "0.49.0"; diff --git a/package-lock.json b/package-lock.json index 994915e4b..05efcbe78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "supertokens-auth-react", - "version": "0.48.0", + "version": "0.49.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "supertokens-auth-react", - "version": "0.48.0", + "version": "0.49.0", "license": "Apache-2.0", "dependencies": { "intl-tel-input": "^17.0.19", diff --git a/package.json b/package.json index de18ca401..339fd0699 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "supertokens-auth-react", - "version": "0.48.0", + "version": "0.49.0", "description": "ReactJS SDK that provides login functionality with SuperTokens.", "main": "./index.js", "engines": {