2020-08-04 17:13:12 -04:00
|
|
|
import React, { FormEvent, useCallback, useState } from 'react'
|
|
|
|
import { Alert, Button, Card, Form } from 'react-bootstrap'
|
|
|
|
import { Trans, useTranslation } from 'react-i18next'
|
|
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import { Link } from 'react-router-dom'
|
2020-08-16 10:02:26 -04:00
|
|
|
import { doInternalLogin } from '../../../api/auth'
|
|
|
|
import { ApplicationState } from '../../../redux'
|
|
|
|
import { ShowIf } from '../../common/show-if/show-if'
|
|
|
|
import { getAndSetUser } from './utils'
|
2020-08-04 17:13:12 -04:00
|
|
|
|
|
|
|
export const ViaInternal: React.FC = () => {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const [username, setUsername] = useState('')
|
|
|
|
const [password, setPassword] = useState('')
|
|
|
|
const [error, setError] = useState(false)
|
|
|
|
const allowRegister = useSelector((state: ApplicationState) => state.config.allowRegister)
|
|
|
|
|
|
|
|
const onLoginSubmit = useCallback((event: FormEvent) => {
|
|
|
|
doInternalLogin(username, password)
|
|
|
|
.then(() => getAndSetUser())
|
|
|
|
.catch(() => setError(true))
|
|
|
|
event.preventDefault()
|
|
|
|
}, [username, password])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Card className="bg-dark mb-4">
|
|
|
|
<Card.Body>
|
|
|
|
<Card.Title>
|
|
|
|
<Trans i18nKey="login.signInVia" values={{ service: t('login.auth.username') }}/>
|
|
|
|
</Card.Title>
|
|
|
|
<Form onSubmit={onLoginSubmit}>
|
|
|
|
<Form.Group controlId="internal-username">
|
|
|
|
<Form.Control
|
|
|
|
isInvalid={error}
|
|
|
|
type="text"
|
|
|
|
size="sm"
|
|
|
|
placeholder={t('login.auth.username')}
|
2020-09-13 12:04:02 -04:00
|
|
|
onChange={(event) => setUsername(event.currentTarget.value)} className="bg-dark text-light"
|
2020-08-04 17:13:12 -04:00
|
|
|
autoComplete='username'
|
|
|
|
/>
|
|
|
|
</Form.Group>
|
|
|
|
|
|
|
|
<Form.Group controlId="internal-password">
|
|
|
|
<Form.Control
|
|
|
|
isInvalid={error}
|
|
|
|
type="password"
|
|
|
|
size="sm"
|
|
|
|
placeholder={t('login.auth.password')}
|
|
|
|
onChange={(event) => setPassword(event.currentTarget.value)}
|
2020-09-13 12:04:02 -04:00
|
|
|
className="bg-dark text-light"
|
2020-08-04 17:13:12 -04:00
|
|
|
autoComplete='current-password'
|
|
|
|
/>
|
|
|
|
</Form.Group>
|
|
|
|
|
|
|
|
<Alert className="small" show={error} variant="danger">
|
|
|
|
<Trans i18nKey="login.auth.error.usernamePassword"/>
|
|
|
|
</Alert>
|
|
|
|
|
|
|
|
<div className='flex flex-row' dir='auto'>
|
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
variant="primary"
|
|
|
|
className='mx-2'>
|
|
|
|
<Trans i18nKey="login.signIn"/>
|
|
|
|
</Button>
|
|
|
|
<ShowIf condition={allowRegister}>
|
|
|
|
<Link to={'/register'}>
|
|
|
|
<Button
|
|
|
|
type='button'
|
|
|
|
variant='secondary'
|
|
|
|
className='mx-2'>
|
|
|
|
<Trans i18nKey='login.register.title'/>
|
|
|
|
</Button>
|
|
|
|
</Link>
|
|
|
|
</ShowIf>
|
|
|
|
</div>
|
|
|
|
</Form>
|
|
|
|
</Card.Body>
|
|
|
|
</Card>
|
|
|
|
)
|
|
|
|
}
|