refactor(ui): refine password input

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;

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) => {

packages/ui/src/hooks/use-sie.ts

@@ -42,20 +42,20 @@ export const usePasswordPolicy = () => {
 
   const requirementsDescription = useMemo(
     () =>
-      t('description.password_requirements', {
+      policy.length.min <= 1 && policy.characterTypes.min <= 1
-        items: condArray(
+        ? undefined
-          // There's no need to show the length requirement if it can be satisfied by the character types
+        : t('description.password_requirements', {
-          policy.length.min > policy.characterTypes.min &&
+            items: condArray(
-            t('description.password_requirement.length', { count: policy.length.min }),
+              // There's no need to show the length requirement if it can be satisfied by the character types
-          // Show the character types requirement if:
+              policy.length.min > policy.characterTypes.min &&
-          // - It's greater than 1, or;
+                t('description.password_requirement.length', { count: policy.length.min }),
-          // - The length requirement is equal to or less than 1 (since the length requirement will be hidden in this case)
+              // Show the character types requirement if it's greater than 1.
-          (policy.characterTypes.min > 1 || policy.length.min <= 1) &&
+              policy.characterTypes.min > 1 &&
-            t('description.password_requirement.character_types', {
+                t('description.password_requirement.character_types', {
-              count: policy.characterTypes.min,
+                  count: policy.characterTypes.min,
-            })
+                })
-        ),
+            ),
-      }),
+          }),
     [t, policy.length.min, policy.characterTypes.min]
   );
 

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}
       />

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}
       />

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}
       />