From 6f0c28e3bc92839e484a3928e0344698f2537e86 Mon Sep 17 00:00:00 2001
From: Pedro Rezende <pedrorezende@users.noreply.github.com>
Date: Wed, 15 Nov 2023 05:40:50 -0300
Subject: [PATCH] fix(extension,setup): properly displaying validation messages
 (#444)

---
 .../Settings/ChangePassword/ChangePassword.tsx  |  3 +--
 .../src/Setup/Common/Password/Password.tsx      | 17 +++++++++--------
 packages/components/src/Input/types.ts          |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx b/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx
index a2f0cfcf69c..eedae316c28 100644
--- 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
index 98811275b03..27a86b4bbd9 100644
--- 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
index 83740632ee7..b5020ff63e5 100644
--- 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;