feat(frontend): handle username in lowercase

When handling usernames for login and registering with local or permissions, this makes sure that the username is always in lowercase.

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Philip Molares 2023-05-21 21:59:46 +02:00 committed by Tilman Vatteroth
parent 0a8945d934
commit e13055736a
9 changed files with 95 additions and 15 deletions

View file

@ -3,7 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useOnInputChange } from '../../../../../../hooks/common/use-on-input-change'
import { useLowercaseOnInputChange } from '../../../../../../hooks/common/use-lowercase-on-input-change'
import { UiIcon } from '../../../../../common/icons/ui-icon'
import type { PermissionDisabledProps } from './permission-disabled.prop'
import React, { useCallback, useState } from 'react'
@ -31,7 +31,7 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps & Pe
const { t } = useTranslation()
const [newEntryIdentifier, setNewEntryIdentifier] = useState('')
const onChange = useOnInputChange(setNewEntryIdentifier)
const onChange = useLowercaseOnInputChange(setNewEntryIdentifier)
const onSubmit = useCallback(() => {
onAddEntry(newEntryIdentifier)

View file

@ -8,19 +8,26 @@ import React from 'react'
import { Form } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
export interface UsernameFieldProps extends AuthFieldProps {
value: string
}
//TODO: This should be replaced with the common username component. See https://github.com/hedgedoc/hedgedoc/issues/4128
/**
* Renders an input field for a username.
*
* @param onChange Hook that is called when the input is changed.
* @param invalid True indicates that the username is invalid, false otherwise.
* @param value the username value
*/
export const UsernameField: React.FC<AuthFieldProps> = ({ onChange, invalid }) => {
export const UsernameField: React.FC<UsernameFieldProps> = ({ onChange, invalid, value }) => {
const { t } = useTranslation()
return (
<Form.Group>
<Form.Control
isInvalid={invalid}
value={value}
type='text'
size='sm'
placeholder={t('login.auth.username') ?? undefined}

View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { doLdapLogin } from '../../../api/auth/ldap'
import { useLowercaseOnInputChange } from '../../../hooks/common/use-lowercase-on-input-change'
import { useOnInputChange } from '../../../hooks/common/use-on-input-change'
import { PasswordField } from './fields/password-field'
import { UsernameField } from './fields/username-field'
@ -38,7 +39,7 @@ export const ViaLdap: React.FC<ViaLdapProps> = ({ providerName, identifier }) =>
[username, password, identifier]
)
const onUsernameChange = useOnInputChange(setUsername)
const onUsernameChange = useLowercaseOnInputChange(setUsername)
const onPasswordChange = useOnInputChange(setPassword)
return (
@ -48,7 +49,7 @@ export const ViaLdap: React.FC<ViaLdapProps> = ({ providerName, identifier }) =>
<Trans i18nKey='login.signInVia' values={{ service: providerName }} />
</Card.Title>
<Form onSubmit={onLoginSubmit}>
<UsernameField onChange={onUsernameChange} invalid={!!error} />
<UsernameField onChange={onUsernameChange} invalid={!!error} value={username} />
<PasswordField onChange={onPasswordChange} invalid={!!error} />
<Alert className='small' show={!!error} variant='danger'>
<Trans i18nKey={error} />

View file

@ -5,6 +5,7 @@
*/
import { doLocalLogin } from '../../../api/auth/local'
import { ErrorToI18nKeyMapper } from '../../../api/common/error-to-i18n-key-mapper'
import { useLowercaseOnInputChange } from '../../../hooks/common/use-lowercase-on-input-change'
import { useOnInputChange } from '../../../hooks/common/use-on-input-change'
import { useFrontendConfig } from '../../common/frontend-config-context/use-frontend-config'
import { ShowIf } from '../../common/show-if/show-if'
@ -44,7 +45,7 @@ export const ViaLocal: React.FC = () => {
[username, password]
)
const onUsernameChange = useOnInputChange(setUsername)
const onUsernameChange = useLowercaseOnInputChange(setUsername)
const onPasswordChange = useOnInputChange(setPassword)
return (
@ -54,7 +55,7 @@ export const ViaLocal: React.FC = () => {
<Trans i18nKey='login.signInVia' values={{ service: t('login.auth.username') }} />
</Card.Title>
<Form onSubmit={onLoginSubmit} className={'d-flex gap-3 flex-column'}>
<UsernameField onChange={onUsernameChange} invalid={!!error} />
<UsernameField onChange={onUsernameChange} invalid={!!error} value={username} />
<PasswordField onChange={onPasswordChange} invalid={!!error} />
<Alert className='small' show={!!error} variant='danger'>
<Trans i18nKey={error} />