From 045d01ff1cc206996bf03090c2d10fc04c60763e Mon Sep 17 00:00:00 2001 From: Mihaly Lengyel Date: Thu, 2 May 2024 18:32:36 +0800 Subject: [PATCH] feat: fix UI review comments --- lib/build/passwordlessprebuiltui.js | 8 +++++--- .../passwordless/components/themes/translations.d.ts | 3 ++- .../components/features/signInAndUpEPCombo/index.tsx | 1 + .../components/themes/continueWithPasswordless/index.tsx | 2 +- .../signInUpEPCombo/continueWithPasswordlessFooter.tsx | 2 +- .../recipe/passwordless/components/themes/translations.ts | 3 ++- stories/allrecipes.stories.tsx | 2 +- 7 files changed, 13 insertions(+), 8 deletions(-) diff --git a/lib/build/passwordlessprebuiltui.js b/lib/build/passwordlessprebuiltui.js index ee57e0592..78c696a85 100644 --- a/lib/build/passwordlessprebuiltui.js +++ b/lib/build/passwordlessprebuiltui.js @@ -113,7 +113,7 @@ var ContinueWithPasswordless = function (props) { props.continueWithPasswordlessClicked(); }, type: "button", - label: "PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS", + label: "PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON", }), } ) @@ -274,7 +274,8 @@ var defaultTranslationsPasswordless = { PWLESS_SIGN_IN_UP_SWITCH_TO_PHONE: "Use a Phone number", PWLESS_SIGN_IN_UP_SWITCH_TO_EMAIL: "Use an Email", PWLESS_SIGN_IN_UP_CONTINUE_BUTTON: "CONTINUE", - PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS: "Continue with passwordless", + PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_LINK: "Continue with passwordless", + PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON: "CONTINUE WITH PASSWORDLESS", PWLESS_COMBO_PASSWORD_LABEL: "Password", PWLESS_COMBO_FORGOT_PW_LINK: "Forgot password?", PWLESS_LINK_SENT_RESEND_SUCCESS: "Link resent", @@ -5617,7 +5618,7 @@ var ContinueWithPasswordlessFooter = function (_a) { }); }, }, - { children: t("PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS") } + { children: t("PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_LINK") } ) ); }; @@ -6012,6 +6013,7 @@ function useChildProps$1(recipe$2, factorIds, error, onError, clearError, rebuil setIsPhoneNumber: function (isPhone) { if (isPhone && showPasswordField) { setShowPasswordField(false); + setShowContinueWithPasswordlessLink(false); } setIsPhoneNumber(isPhone); }, diff --git a/lib/build/recipe/passwordless/components/themes/translations.d.ts b/lib/build/recipe/passwordless/components/themes/translations.d.ts index a35c1785c..d60b40a2e 100644 --- a/lib/build/recipe/passwordless/components/themes/translations.d.ts +++ b/lib/build/recipe/passwordless/components/themes/translations.d.ts @@ -19,7 +19,8 @@ export declare const defaultTranslationsPasswordless: { PWLESS_SIGN_IN_UP_SWITCH_TO_PHONE: string; PWLESS_SIGN_IN_UP_SWITCH_TO_EMAIL: string; PWLESS_SIGN_IN_UP_CONTINUE_BUTTON: string; - PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS: string; + PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_LINK: string; + PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON: string; PWLESS_COMBO_PASSWORD_LABEL: string; PWLESS_COMBO_FORGOT_PW_LINK: string; PWLESS_LINK_SENT_RESEND_SUCCESS: string; diff --git a/lib/ts/recipe/passwordless/components/features/signInAndUpEPCombo/index.tsx b/lib/ts/recipe/passwordless/components/features/signInAndUpEPCombo/index.tsx index 3f502110d..dd0a26b34 100644 --- a/lib/ts/recipe/passwordless/components/features/signInAndUpEPCombo/index.tsx +++ b/lib/ts/recipe/passwordless/components/features/signInAndUpEPCombo/index.tsx @@ -65,6 +65,7 @@ export function useChildProps( setIsPhoneNumber: (isPhone) => { if (isPhone && showPasswordField) { setShowPasswordField(false); + setShowContinueWithPasswordlessLink(false); } setIsPhoneNumber(isPhone); }, diff --git a/lib/ts/recipe/passwordless/components/themes/continueWithPasswordless/index.tsx b/lib/ts/recipe/passwordless/components/themes/continueWithPasswordless/index.tsx index 103430c52..72ec56b60 100644 --- a/lib/ts/recipe/passwordless/components/themes/continueWithPasswordless/index.tsx +++ b/lib/ts/recipe/passwordless/components/themes/continueWithPasswordless/index.tsx @@ -35,7 +35,7 @@ const ContinueWithPasswordless: React.FC<{ continueWithPasswordlessClicked: () = props.continueWithPasswordlessClicked(); }} type="button" - label={"PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS"} + label={"PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON"} /> ); diff --git a/lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.tsx b/lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.tsx index e191977bb..c426d94d8 100644 --- a/lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.tsx +++ b/lib/ts/recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.tsx @@ -45,7 +45,7 @@ export const ContinueWithPasswordlessFooter: React.FC<{ return onContinueWithPasswordlessClick(email); } }}> - {t("PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS")} + {t("PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_LINK")} ); }; diff --git a/lib/ts/recipe/passwordless/components/themes/translations.ts b/lib/ts/recipe/passwordless/components/themes/translations.ts index 5c66e4b58..b0d58cabc 100644 --- a/lib/ts/recipe/passwordless/components/themes/translations.ts +++ b/lib/ts/recipe/passwordless/components/themes/translations.ts @@ -27,7 +27,8 @@ export const defaultTranslationsPasswordless = { PWLESS_SIGN_IN_UP_SWITCH_TO_PHONE: "Use a Phone number", PWLESS_SIGN_IN_UP_SWITCH_TO_EMAIL: "Use an Email", PWLESS_SIGN_IN_UP_CONTINUE_BUTTON: "CONTINUE", - PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS: "Continue with passwordless", + PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_LINK: "Continue with passwordless", + PWLESS_COMBO_CONTINUE_WITH_PASSWORDLESS_BUTTON: "CONTINUE WITH PASSWORDLESS", PWLESS_COMBO_PASSWORD_LABEL: "Password", PWLESS_COMBO_FORGOT_PW_LINK: "Forgot password?", diff --git a/stories/allrecipes.stories.tsx b/stories/allrecipes.stories.tsx index d3006992e..6b13ea26f 100644 --- a/stories/allrecipes.stories.tsx +++ b/stories/allrecipes.stories.tsx @@ -98,7 +98,7 @@ export const SignUpPasswordless: Story = { // Assigns canvas to the component root element const canvas = within(canvasElement); - const switcher = await canvas.findByText("Continue with passwordless"); + const switcher = await canvas.findByText("CONTINUE WITH PASSWORDLESS"); await new Promise((res) => setTimeout(res, 100)); canvasElement; await userEvent.click(switcher, { delay: 200 });