mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-13 06:34:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(frontend): deduplicated username field

Browse source 
Signed-off-by: Avinash <avinash.kumar.cs92@gmail.com>
This commit is contained in:
Avinash 2023-06-01 22:39:22 +05:30 • committed by Tilman Vatteroth
parent d0036e1a80
commit 6babc8997c
6 changed files with 63 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/components/common/fields/username-field.tsx
View file

@ -4,42 +4,38 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { CommonFieldProps } from './fields'
import React, { useMemo } from 'react'
import React from 'react'
import { Form } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { useTranslation } from 'react-i18next'
export interface UsernameFieldProps extends CommonFieldProps {
isInvalid?: boolean
isValid?: boolean
}
/**
* Renders an input field for the username when registering.
*
* @param onChange Hook that is called when the entered username changes.
* @param onChange Callback that is called when the entered username changes.
* @param value The currently entered username.
* @param isValid Is a valid field or not
* @param isInvalid Adds error style to label
*/
export const UsernameField: React.FC<CommonFieldProps> = ({ onChange, value }) => {
export const UsernameField: React.FC<UsernameFieldProps> = ({ onChange, value, isValid, isInvalid }) => {
const { t } = useTranslation()
const isValid = useMemo(() => {
return value?.trim() !== ''
}, [value])
return (
<Form.Group>
<Form.Label>
<Trans i18nKey='login.auth.username' />
</Form.Label>
<Form.Control
type='text'
size='sm'
value={value}
isValid={isValid}
onChange={onChange}
placeholder={t('login.auth.username') ?? undefined}
autoComplete='username'
autoFocus={true}
required
/>
<Form.Text>
<Trans i18nKey='login.register.usernameInfo' />
</Form.Text>
</Form.Group>
<Form.Control
type='text'
size='sm'
value={value}
isValid={isValid}
isInvalid={isInvalid}
onChange={onChange}
placeholder={t('login.auth.username') ?? undefined}
autoComplete='username'
autoFocus={true}
required
/>
)
}

32
frontend/src/components/common/fields/username-label-field.tsx Normal file
View file

@ -0,0 +1,32 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { UsernameField } from './username-field'
import type { UsernameFieldProps } from './username-field'
import React from 'react'
import { Form } from 'react-bootstrap'
import { Trans } from 'react-i18next'
/**
* Wraps and contains label and info for UsernameField
*
* @param onChange Callback that is called when the entered username changes.
* @param value The currently entered username.
* @param isValid Is a valid field or not
* @param isInvalid Adds error style to label
*/
export const UsernameLabelField: React.FC<UsernameFieldProps> = (props) => {
return (
<Form.Group>
<Form.Label>
<Trans i18nKey='login.auth.username' />
</Form.Label>
<UsernameField {...props} />
<Form.Text>
<Trans i18nKey='login.register.usernameInfo' />
</Form.Text>
</Form.Group>
)
}