Adapt react-client to use the real backend API (#1545)

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Erik Michelson 2022-04-15 23:03:15 +02:00 committed by GitHub
parent 3399ed2023
commit 26f90505ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
227 changed files with 4726 additions and 2310 deletions

View file

@ -5,37 +5,36 @@
*/
import type { FormEvent } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import React, { useCallback, useState } from 'react'
import { Button, Card, Form } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
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 { AuthError as AuthErrorType } from '../../../api/auth/types'
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'
export interface ViaLdapProps {
providerName: string
identifier: string
}
/**
* Renders the LDAP login box with username and password field.
*/
export const ViaLdap: React.FC = () => {
export const ViaLdap: React.FC<ViaLdapProps> = ({ providerName, identifier }) => {
useTranslation()
const ldapCustomName = useApplicationState((state) => state.config.customAuthNames.ldap)
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState<AuthErrorType>()
const name = useMemo(() => {
return ldapCustomName ? `${ldapCustomName} (LDAP)` : 'LDAP'
}, [ldapCustomName])
const onLoginSubmit = useCallback(
(event: FormEvent) => {
doLdapLogin(username, password)
doLdapLogin(identifier, username, password)
.then(() => fetchAndSetUser())
.catch((error: Error) => {
setError(
@ -46,7 +45,7 @@ export const ViaLdap: React.FC = () => {
})
event.preventDefault()
},
[username, password]
[username, password, identifier]
)
const onUsernameChange = useOnInputChange(setUsername)
@ -56,7 +55,7 @@ export const ViaLdap: React.FC = () => {
<Card className='bg-dark mb-4'>
<Card.Body>
<Card.Title>
<Trans i18nKey='login.signInVia' values={{ service: name }} />
<Trans i18nKey='login.signInVia' values={{ service: providerName }} />
</Card.Title>
<Form onSubmit={onLoginSubmit}>
<UsernameField onChange={onUsernameChange} invalid={!!error} />