This repository has been archived by the owner on Jan 9, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
Login.tsx
100 lines (89 loc) · 3.01 KB
/
Login.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { Alert, Container, Panel } from '@hospitalrun/components'
import React, { useEffect, useState } from 'react'
import Button from 'react-bootstrap/Button'
import { useDispatch, useSelector } from 'react-redux'
import { Redirect } from 'react-router-dom'
import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
import { remoteDb } from '../shared/config/pouchdb'
import useTranslator from '../shared/hooks/useTranslator'
import logo from '../shared/static/images/logo-on-transparent.png'
import { RootState } from '../shared/store'
import { getCurrentSession, login } from '../user/user-slice'
const Login = () => {
const dispatch = useDispatch()
const { t } = useTranslator()
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const { loginError, user } = useSelector((root: RootState) => root.user)
const [loading, setLoading] = useState(true)
useEffect(() => {
const init = async () => {
try {
const session = await remoteDb.getSession()
if (session.userCtx.name) {
await dispatch(getCurrentSession(session.userCtx.name))
}
} catch (e) {
console.log(e)
}
setLoading(false)
}
init()
}, [dispatch])
const onUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.currentTarget
setUsername(value)
}
const onPasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.currentTarget
setPassword(value)
}
const onSignInClick = async () => {
await dispatch(login(username, password))
}
if (loading) {
return null
}
if (user) {
return <Redirect to="/" />
}
return (
<>
<Container className="container align-items-center" style={{ width: '50%' }}>
<img src={logo} alt="HospitalRun" style={{ width: '100%', textAlign: 'center' }} />
<form>
<Panel title="Please Sign In" color="primary">
{loginError?.message && (
<Alert color="danger" message={t(loginError?.message)} title="Unable to login" />
)}
<TextInputWithLabelFormGroup
isEditable
label="username"
name="username"
value={username}
onChange={onUsernameChange}
isRequired
isInvalid={!!loginError?.username && !username}
feedback={t(loginError?.username)}
/>
<TextInputWithLabelFormGroup
isEditable
type="password"
label="password"
name="password"
value={password}
onChange={onPasswordChange}
isRequired
isInvalid={!!loginError?.password && !password}
feedback={t(loginError?.password)}
/>
<Button block onClick={onSignInClick}>
Sign In
</Button>
</Panel>
</form>
</Container>
</>
)
}
export default Login