From b68a58178904a03685fa1f16aee0ac026c4a58d9 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 7 Sep 2023 22:42:52 +0800
Subject: [PATCH] refactor(ui): refine password input

---
 .../src/Layout/SecondaryPageLayout/index.tsx  |  2 +-
 .../ui/src/containers/SetPassword/index.tsx   |  1 +
 packages/ui/src/hooks/use-sie.ts              | 28 +++++++++----------
 .../src/pages/Continue/SetPassword/index.tsx  |  5 ++--
 .../ui/src/pages/RegisterPassword/index.tsx   |  5 ++--
 packages/ui/src/pages/ResetPassword/index.tsx |  5 ++--
 6 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/Layout/SecondaryPageLayout/index.tsx b/packages/ui/src/Layout/SecondaryPageLayout/index.tsx
index 978a8ac25..f5a5899ae 100644
--- a/packages/ui/src/Layout/SecondaryPageLayout/index.tsx
+++ b/packages/ui/src/Layout/SecondaryPageLayout/index.tsx
@@ -12,7 +12,7 @@ import * as styles from './index.module.scss';
 
 type Props = {
   title: TFuncKey;
-  description?: TFuncKey | ReactElement;
+  description?: TFuncKey | ReactElement | '';
   titleProps?: Record<string, unknown>;
   descriptionProps?: Record<string, unknown>;
   notification?: TFuncKey;
diff --git a/packages/ui/src/containers/SetPassword/index.tsx b/packages/ui/src/containers/SetPassword/index.tsx
index d78b5f355..bdb07f582 100644
--- a/packages/ui/src/containers/SetPassword/index.tsx
+++ b/packages/ui/src/containers/SetPassword/index.tsx
@@ -10,6 +10,7 @@ type Props = {
   onSubmit: (password: string) => void;
   errorMessage?: string;
   clearErrorMessage?: () => void;
+  maxLength?: number;
 };
 
 const SetPassword = (props: Props) => {
diff --git a/packages/ui/src/hooks/use-sie.ts b/packages/ui/src/hooks/use-sie.ts
index 8beb39adb..4af0ab3d0 100644
--- a/packages/ui/src/hooks/use-sie.ts
+++ b/packages/ui/src/hooks/use-sie.ts
@@ -42,20 +42,20 @@ export const usePasswordPolicy = () => {
 
   const requirementsDescription = useMemo(
     () =>
-      t('description.password_requirements', {
-        items: condArray(
-          // There's no need to show the length requirement if it can be satisfied by the character types
-          policy.length.min > policy.characterTypes.min &&
-            t('description.password_requirement.length', { count: policy.length.min }),
-          // Show the character types requirement if:
-          // - It's greater than 1, or;
-          // - The length requirement is equal to or less than 1 (since the length requirement will be hidden in this case)
-          (policy.characterTypes.min > 1 || policy.length.min <= 1) &&
-            t('description.password_requirement.character_types', {
-              count: policy.characterTypes.min,
-            })
-        ),
-      }),
+      policy.length.min <= 1 && policy.characterTypes.min <= 1
+        ? undefined
+        : t('description.password_requirements', {
+            items: condArray(
+              // There's no need to show the length requirement if it can be satisfied by the character types
+              policy.length.min > policy.characterTypes.min &&
+                t('description.password_requirement.length', { count: policy.length.min }),
+              // Show the character types requirement if it's greater than 1.
+              policy.characterTypes.min > 1 &&
+                t('description.password_requirement.character_types', {
+                  count: policy.characterTypes.min,
+                })
+            ),
+          }),
     [t, policy.length.min, policy.characterTypes.min]
   );
 
diff --git a/packages/ui/src/pages/Continue/SetPassword/index.tsx b/packages/ui/src/pages/Continue/SetPassword/index.tsx
index 1b19b184e..aea74c9fd 100644
--- a/packages/ui/src/pages/Continue/SetPassword/index.tsx
+++ b/packages/ui/src/pages/Continue/SetPassword/index.tsx
@@ -44,7 +44,7 @@ const SetPassword = () => {
 
   const {
     policy: {
-      length: { min },
+      length: { min, max },
       characterTypes: { min: count },
     },
     requirementsDescription,
@@ -53,12 +53,13 @@ const SetPassword = () => {
   return (
     <SecondaryPageLayout
       title="description.set_password"
-      description={<span>{requirementsDescription}</span>}
+      description={requirementsDescription && <span>{requirementsDescription}</span>}
       descriptionProps={{ min, count }}
     >
       <SetPasswordForm
         autoFocus
         errorMessage={errorMessage}
+        maxLength={max}
         clearErrorMessage={clearErrorMessage}
         onSubmit={action}
       />
diff --git a/packages/ui/src/pages/RegisterPassword/index.tsx b/packages/ui/src/pages/RegisterPassword/index.tsx
index 78b9bcaf1..051139581 100644
--- a/packages/ui/src/pages/RegisterPassword/index.tsx
+++ b/packages/ui/src/pages/RegisterPassword/index.tsx
@@ -46,7 +46,7 @@ const RegisterPassword = () => {
 
   const {
     policy: {
-      length: { min },
+      length: { min, max },
       characterTypes: { min: count },
     },
     requirementsDescription,
@@ -59,12 +59,13 @@ const RegisterPassword = () => {
   return (
     <SecondaryPageLayout
       title="description.new_password"
-      description={<span>{requirementsDescription}</span>}
+      description={requirementsDescription && <span>{requirementsDescription}</span>}
       descriptionProps={{ min, count }}
     >
       <SetPassword
         autoFocus
         errorMessage={errorMessage}
+        maxLength={max}
         clearErrorMessage={clearErrorMessage}
         onSubmit={action}
       />
diff --git a/packages/ui/src/pages/ResetPassword/index.tsx b/packages/ui/src/pages/ResetPassword/index.tsx
index 604c46986..90d1e5310 100644
--- a/packages/ui/src/pages/ResetPassword/index.tsx
+++ b/packages/ui/src/pages/ResetPassword/index.tsx
@@ -50,7 +50,7 @@ const ResetPassword = () => {
   });
   const {
     policy: {
-      length: { min },
+      length: { min, max },
       characterTypes: { min: count },
     },
     requirementsDescription,
@@ -59,12 +59,13 @@ const ResetPassword = () => {
   return (
     <SecondaryPageLayout
       title="description.new_password"
-      description={<span>{requirementsDescription}</span>}
+      description={requirementsDescription && <span>{requirementsDescription}</span>}
       descriptionProps={{ min, count }}
     >
       <SetPassword
         autoFocus
         errorMessage={errorMessage}
+        maxLength={max}
         clearErrorMessage={clearErrorMessage}
         onSubmit={action}
       />