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:
Erik Michelson 2021-12-11 01:32:38 +01:00 committed by GitHub
parent fe640268c5
commit eab189c3c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 911 additions and 507 deletions

View file

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