Cédric FAMIBELLE-PRONZOLA
139 lines
3.5 KiB
JavaScript
139 lines
3.5 KiB
JavaScript
import {useEffect, useState} from 'react'
|
|
import {signIn} from 'next-auth/client'
|
|
import {useRouter} from 'next/router'
|
|
import {
|
|
Button,
|
|
Container,
|
|
FormControl,
|
|
IconButton,
|
|
Input,
|
|
InputAdornment,
|
|
InputLabel,
|
|
LinearProgress,
|
|
Snackbar,
|
|
Typography
|
|
} from '@material-ui/core'
|
|
import {Visibility, VisibilityOff} from '@material-ui/icons'
|
|
import MuiAlert from '@material-ui/lab/Alert'
|
|
|
|
import {validateEmail} from '../../lib/utils/emails'
|
|
|
|
function Alert(props) {
|
|
return <MuiAlert elevation={6} variant='filled' {...props} />
|
|
}
|
|
|
|
function Koneksyon() {
|
|
const [loginError, setError] = useState('')
|
|
const [credentials, setCredentials] = useState({username: '', password: ''})
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [open, setOpen] = useState(true)
|
|
const router = useRouter()
|
|
|
|
const handleUpdate = update => {
|
|
setCredentials({...credentials, ...update})
|
|
}
|
|
|
|
const handleClick = async () => {
|
|
setLoading(true)
|
|
const response = await signIn('credentials', {
|
|
redirect: false,
|
|
...credentials
|
|
})
|
|
if (response.error) {
|
|
setError(response.error)
|
|
setLoading(false)
|
|
} else if (response.ok) {
|
|
setLoading(false)
|
|
router.push('/kont')
|
|
}
|
|
}
|
|
|
|
const handleClose = (event, reason) => {
|
|
if (reason === 'clickaway') {
|
|
return
|
|
}
|
|
|
|
setOpen(false)
|
|
setError('')
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (loginError) {
|
|
setOpen(true)
|
|
}
|
|
}, [loginError])
|
|
|
|
const handleClickShowPassword = () => {
|
|
setShowPassword(!showPassword)
|
|
}
|
|
|
|
const handleMouseDownPassword = event => {
|
|
event.preventDefault()
|
|
}
|
|
|
|
return (
|
|
<Container maxWidth='sm'>
|
|
<FormControl fullWidth style={{marginTop: '5em'}} autoComplete='off'>
|
|
<InputLabel htmlFor='username'>Email</InputLabel>
|
|
<Input
|
|
value={credentials.username}
|
|
name='username'
|
|
type='email'
|
|
id='email'
|
|
onChange={event => handleUpdate({username: event.target.value})}
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormControl fullWidth style={{marginTop: '1em'}}>
|
|
<InputLabel htmlFor='password'>Mot de passe</InputLabel>
|
|
<Input
|
|
value={credentials.password}
|
|
name='password'
|
|
type={showPassword ? 'text' : 'password'}
|
|
id='password'
|
|
endAdornment={
|
|
<InputAdornment position='end'>
|
|
<IconButton
|
|
aria-label='password visibility'
|
|
onClick={handleClickShowPassword}
|
|
onMouseDown={handleMouseDownPassword}
|
|
>
|
|
{showPassword ? <Visibility /> : <VisibilityOff />}
|
|
</IconButton>
|
|
</InputAdornment>
|
|
}
|
|
onChange={event => handleUpdate({password: event.target.value})}
|
|
/>
|
|
</FormControl>
|
|
|
|
<Button
|
|
fullWidth
|
|
disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
|
|
style={{marginTop: 50}}
|
|
variant='contained'
|
|
color='primary'
|
|
onClick={handleClick}
|
|
>
|
|
<Typography style={{fontWeight: 'bold'}}>
|
|
Koneksyon
|
|
</Typography>
|
|
</Button>
|
|
|
|
{loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
|
|
|
|
{loginError && (
|
|
<Snackbar
|
|
open={open}
|
|
autoHideDuration={6000}
|
|
onClose={handleClose}
|
|
>
|
|
<Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
|
|
</Snackbar>
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default Koneksyon
|