diff --git a/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx b/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx index a2f0cfcf69..eedae316c2 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(" ")} /> { } }; + const displayError = zxcvbnFeedback.warning + ? zxcvbnFeedback.warning + : zxcvbnFeedback.suggestions.map((suggestion: string, index: number) => ( + + {suggestion} + + )); + return ( <> ( - - {suggestion} - - ) - )} + 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 83740632ee..b5020ff63e 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;