fix(frontend): add error prop to password input

Signed-off-by: Avinash <avinash.kumar.cs92@gmail.com>

frontend/src/components/common/fields/fields.ts

@@ -8,4 +8,5 @@ import type { ChangeEvent } from 'react'
 export interface CommonFieldProps {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
   value: string
+  hasError?: boolean
 }

frontend/src/components/common/fields/new-password-field.tsx

@@ -14,7 +14,7 @@ import { Trans, useTranslation } from 'react-i18next'
  * @param onChange Hook that is called when the entered password changes.
  * @param value The currently entered password.
  */
-export const NewPasswordField: React.FC<CommonFieldProps> = ({ onChange, value }) => {
+export const NewPasswordField: React.FC<CommonFieldProps> = ({ onChange, value, hasError = false }) => {
   const { t } = useTranslation()
 
   const isValid = useMemo(() => {
@@ -30,6 +30,7 @@ export const NewPasswordField: React.FC<CommonFieldProps> = ({ onChange, value }
         type='password'
         size='sm'
         isValid={isValid}
+        isInvalid={hasError}
         onChange={onChange}
         placeholder={t('login.auth.password') ?? undefined}
         className='bg-dark text-light'

frontend/src/components/common/fields/password-again-field.tsx

@@ -19,16 +19,21 @@ interface PasswordAgainFieldProps extends CommonFieldProps {
  * @param value The currently entered retype of the password.
  * @param password The password entered into the password input field.
  */
-export const PasswordAgainField: React.FC<PasswordAgainFieldProps> = ({ onChange, value, password }) => {
+export const PasswordAgainField: React.FC<PasswordAgainFieldProps> = ({
+  onChange,
+  value,
+  password,
+  hasError = false
+}) => {
   const { t } = useTranslation()
 
   const isInvalid = useMemo(() => {
-    return value !== '' && password !== value
+    return value !== '' && password !== value && hasError
-  }, [password, value])
+  }, [password, value, hasError])
 
   const isValid = useMemo(() => {
-    return password !== '' && password === value
+    return password !== '' && password === value && !hasError
-  }, [password, value])
+  }, [password, value, hasError])
 
   return (
     <Form.Group>

frontend/src/pages/register.tsx

@@ -69,6 +69,10 @@ export const RegisterPage: NextPage = () => {
     )
   }, [username, password, displayName, passwordAgain])
 
+  const isWeakPassword = useMemo(() => {
+    return error === RegisterErrorType.PASSWORD_TOO_WEAK
+  }, [error])
+
   const onUsernameChange = useOnInputChange(setUsername)
   const onDisplayNameChange = useOnInputChange(setDisplayName)
   const onPasswordChange = useOnInputChange(setPassword)
@@ -95,8 +99,13 @@ export const RegisterPage: NextPage = () => {
                 <Form onSubmit={doRegisterSubmit}>
                   <UsernameField onChange={onUsernameChange} value={username} />
                   <DisplayNameField onChange={onDisplayNameChange} value={displayName} />
-                  <NewPasswordField onChange={onPasswordChange} value={password} />
+                  <NewPasswordField onChange={onPasswordChange} value={password} hasError={isWeakPassword} />
-                  <PasswordAgainField password={password} onChange={onPasswordAgainChange} value={passwordAgain} />
+                  <PasswordAgainField
+                    password={password}
+                    onChange={onPasswordAgainChange}
+                    value={passwordAgain}
+                    hasError={isWeakPassword}
+                  />
 
                   <RegisterInfos />