mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 18:25:21 -04:00
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:
parent
3399ed2023
commit
26f90505ff
227 changed files with 4726 additions and 2310 deletions
|
@ -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} />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue