fix(extension,setup): properly displaying validation messages (anoma#444

)
phy-chain · Nov 15, 2023 · 6f0c28e · 6f0c28e
1 parent db1f0f1
commit 6f0c28e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx b/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx
@@ -88,8 +88,7 @@ export const ChangePassword = ({
           variant={InputVariants.Password}
           value={newPassword}
           onChange={(e) => setNewPassword(e.target.value)}
-          hint={feedback.suggestions.join(" ")}
-          error={feedback.warning}
+          error={feedback.warning || feedback.suggestions.join(" ")}
         />
         <Input
           label="Confirm new password"

diff --git a/apps/extension/src/Setup/Common/Password/Password.tsx b/apps/extension/src/Setup/Common/Password/Password.tsx
@@ -49,20 +49,21 @@ const Password = ({ onValidPassword }: PasswordProps): JSX.Element => {
     }
   };
 
+  const displayError = zxcvbnFeedback.warning
+    ? zxcvbnFeedback.warning
+    : zxcvbnFeedback.suggestions.map((suggestion: string, index: number) => (
+        <InputFeedback key={`input-feedback-${index}`}>
+          {suggestion}
+        </InputFeedback>
+      ));
+
   return (
     <>
       <Input
         label="Create Extension Password"
         variant={InputVariants.Password}
         value={password}
-        error={zxcvbnFeedback.warning}
-        hint={zxcvbnFeedback.suggestions.map(
-          (suggestion: string, index: number) => (
-            <InputFeedback key={`input-feedback-${index}`}>
-              {suggestion}
-            </InputFeedback>
-          )
-        )}
+        error={displayError}
         placeholder="At least 8 characters"
         onChange={(e) => setPassword(e.target.value)}
         onBlur={() => {

diff --git a/packages/components/src/Input/types.ts b/packages/components/src/Input/types.ts
@@ -11,7 +11,7 @@ export enum InputVariants {
 
 export type ComponentProps = {
   label?: string | React.ReactNode;
-  error?: string;
+  error?: string | React.ReactNode;
   sensitive?: boolean;
   hint?: string | React.ReactNode;
   theme?: ThemeColor;