mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 02:05:21 -04:00
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:
parent
0a8945d934
commit
e13055736a
9 changed files with 95 additions and 15 deletions
|
@ -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)
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue