mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-12 22:26:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(frontend): add error prop to password input

Browse source 
Signed-off-by: Avinash <avinash.kumar.cs92@gmail.com>
This commit is contained in:
Avinash 2023-01-19 11:35:42 +05:30 • committed by Philip Molares
parent 58819f6018
commit dae3b9d8dc
4 changed files with 24 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/common/fields/fields.ts
View file

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

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

@ -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'

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

@ -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
}, [password, value])
return value !== '' && password !== value && hasError
}, [password, value, hasError])
const isValid = useMemo(() => {
return password !== '' && password === value
}, [password, value])
return password !== '' && password === value && !hasError
}, [password, value, hasError])
return (
<Form.Group>