mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-10-21 22:52:10 -04:00
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
|
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'
|
||
|
import { doInternalLogin } from '../../../../../api/auth'
|
||
|
import { ApplicationState } from '../../../../../redux'
|
||
|
import { getAndSetUser } from '../../../../../utils/apiUtils'
|
||
|
import { ShowIf } from '../../../../common/show-if/show-if'
|
||
|
|
||
|
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')}
|
||
|
onChange={(event) => setUsername(event.currentTarget.value)} className="bg-dark text-white"
|
||
|
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)}
|
||
|
className="bg-dark text-white"
|
||
|
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>
|
||
|
)
|
||
|
}
|