2020-05-27 09:43:28 -04:00
|
|
|
import React, { FormEvent, useState } from 'react'
|
2020-05-14 09:41:38 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
import { Trans, useTranslation } from 'react-i18next'
|
|
|
|
import { Alert, Button, Card, Form } from 'react-bootstrap'
|
|
|
|
import { postLdapLogin } from '../../../../../api/user'
|
|
|
|
import { getAndSetUser } from '../../../../../utils/apiUtils'
|
|
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import { ApplicationState } from '../../../../../redux'
|
2020-05-24 16:55:06 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
export const ViaLdap: React.FC = () => {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const ldapCustomName = useSelector((state: ApplicationState) => state.backendConfig.customAuthNames.ldap)
|
2020-05-24 16:55:06 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
const [username, setUsername] = useState('')
|
|
|
|
const [password, setPassword] = useState('')
|
|
|
|
const [error, setError] = useState(false)
|
2020-05-24 16:55:06 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
const name = ldapCustomName ? `${ldapCustomName} (LDAP)` : 'LDAP'
|
2020-05-16 13:12:49 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
const doAsyncLogin = async () => {
|
|
|
|
try {
|
|
|
|
await postLdapLogin(username, password)
|
|
|
|
await getAndSetUser()
|
|
|
|
} catch {
|
|
|
|
setError(true)
|
2020-05-24 16:55:06 -04:00
|
|
|
}
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
2020-05-16 13:12:49 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
const onFormSubmit = (event: FormEvent) => {
|
|
|
|
doAsyncLogin().catch(() => setError(true))
|
|
|
|
event.preventDefault()
|
|
|
|
}
|
2020-05-16 13:12:49 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
return (
|
|
|
|
<Card className="bg-dark mb-4">
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Title>
|
|
|
|
<Trans i18nKey="signInVia" values={{ service: name }}/>
|
|
|
|
</Card.Title>
|
|
|
|
<Form onSubmit={onFormSubmit}>
|
|
|
|
<Form.Group controlId="username">
|
|
|
|
<Form.Control
|
|
|
|
isInvalid={error}
|
|
|
|
type="text"
|
|
|
|
size="sm"
|
|
|
|
placeholder={t('username')}
|
|
|
|
onChange={(event) => setUsername(event.currentTarget.value)} className="bg-dark text-white"
|
|
|
|
/>
|
|
|
|
</Form.Group>
|
2020-05-16 13:12:49 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
<Form.Group controlId="password">
|
|
|
|
<Form.Control
|
|
|
|
isInvalid={error}
|
|
|
|
type="password"
|
|
|
|
size="sm"
|
|
|
|
placeholder={t('password')}
|
|
|
|
onChange={(event) => setPassword(event.currentTarget.value)}
|
|
|
|
className="bg-dark text-white"/>
|
|
|
|
</Form.Group>
|
2020-05-25 14:48:27 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
<Alert className="small" show={error} variant="danger">
|
|
|
|
<Trans i18nKey="errorLdapLogin"/>
|
|
|
|
</Alert>
|
2020-05-14 09:41:38 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
variant="primary">
|
|
|
|
<Trans i18nKey="signIn"/>
|
|
|
|
</Button>
|
|
|
|
</Form>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
)
|
|
|
|
}
|