mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 18:25:21 -04:00
Refactor login components and adjust login API routes (#1678)
* Refactor login components and adjust API routes Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Adjust API /me response and redux state Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Fix moved function Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Update cypress tests Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Adjust mock response Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Integrate new common fields and hook into profile page Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Remove openid Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Fix config mock Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de> Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
parent
fe640268c5
commit
eab189c3c6
44 changed files with 911 additions and 507 deletions
|
@ -5,34 +5,53 @@
|
|||
*/
|
||||
|
||||
import type { FormEvent } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { Alert, Button, Card, Form } from 'react-bootstrap'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import { Button, Card, Form } from 'react-bootstrap'
|
||||
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { doLdapLogin } from '../../../api/auth'
|
||||
import { doLdapLogin } from '../../../api/auth/ldap'
|
||||
import { fetchAndSetUser } from './utils'
|
||||
import { useApplicationState } from '../../../hooks/common/use-application-state'
|
||||
import { AuthError as AuthErrorType } from '../../../api/auth'
|
||||
import { UsernameField } from './fields/username-field'
|
||||
import { PasswordField } from './fields/password-field'
|
||||
import { AuthError } from './auth-error/auth-error'
|
||||
import { useOnInputChange } from '../../../hooks/common/use-on-input-change'
|
||||
|
||||
/**
|
||||
* Renders the LDAP login box with username and password field.
|
||||
*/
|
||||
export const ViaLdap: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
useTranslation()
|
||||
const ldapCustomName = useApplicationState((state) => state.config.customAuthNames.ldap)
|
||||
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState(false)
|
||||
const [error, setError] = useState<AuthErrorType>()
|
||||
|
||||
const name = ldapCustomName ? `${ldapCustomName} (LDAP)` : 'LDAP'
|
||||
const name = useMemo(() => {
|
||||
return ldapCustomName ? `${ldapCustomName} (LDAP)` : 'LDAP'
|
||||
}, [ldapCustomName])
|
||||
|
||||
const onLoginSubmit = useCallback(
|
||||
(event: FormEvent) => {
|
||||
doLdapLogin(username, password)
|
||||
.then(() => fetchAndSetUser())
|
||||
.catch(() => setError(true))
|
||||
.catch((error: Error) => {
|
||||
setError(
|
||||
Object.values(AuthErrorType).includes(error.message as AuthErrorType)
|
||||
? (error.message as AuthErrorType)
|
||||
: AuthErrorType.OTHER
|
||||
)
|
||||
})
|
||||
event.preventDefault()
|
||||
},
|
||||
[username, password]
|
||||
)
|
||||
|
||||
const onUsernameChange = useOnInputChange(setUsername)
|
||||
const onPasswordChange = useOnInputChange(setPassword)
|
||||
|
||||
return (
|
||||
<Card className='bg-dark mb-4'>
|
||||
<Card.Body>
|
||||
|
@ -40,33 +59,9 @@ export const ViaLdap: React.FC = () => {
|
|||
<Trans i18nKey='login.signInVia' values={{ service: name }} />
|
||||
</Card.Title>
|
||||
<Form onSubmit={onLoginSubmit}>
|
||||
<Form.Group controlId='ldap-username'>
|
||||
<Form.Control
|
||||
isInvalid={error}
|
||||
type='text'
|
||||
size='sm'
|
||||
placeholder={t('login.auth.username')}
|
||||
onChange={(event) => setUsername(event.currentTarget.value)}
|
||||
className='bg-dark text-light'
|
||||
autoComplete='username'
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group controlId='ldap-password'>
|
||||
<Form.Control
|
||||
isInvalid={error}
|
||||
type='password'
|
||||
size='sm'
|
||||
placeholder={t('login.auth.password')}
|
||||
onChange={(event) => setPassword(event.currentTarget.value)}
|
||||
className='bg-dark text-light'
|
||||
autoComplete='current-password'
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Alert className='small' show={error} variant='danger'>
|
||||
<Trans i18nKey='login.auth.error.usernamePassword' />
|
||||
</Alert>
|
||||
<UsernameField onChange={onUsernameChange} invalid={!!error} />
|
||||
<PasswordField onChange={onPasswordChange} invalid={!!error} />
|
||||
<AuthError error={error} />
|
||||
|
||||
<Button type='submit' variant='primary'>
|
||||
<Trans i18nKey='login.signIn' />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue