Move Koneksyon to component/sesyon & improve it
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
@@ -1,199 +0,0 @@
|
||||
import {useEffect, useState} from 'react'
|
||||
import {signIn} from 'next-auth/client'
|
||||
import {useRouter} from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
Box,
|
||||
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 {Google} from '@icons-pack/react-simple-icons'
|
||||
|
||||
import {validateEmail} from '../../lib/utils/emails'
|
||||
|
||||
import LoginProvider from './login-provider'
|
||||
|
||||
const PROVIDERS = [
|
||||
{
|
||||
id: 'google',
|
||||
title: 'Google',
|
||||
icon: <Google />
|
||||
}
|
||||
]
|
||||
|
||||
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 () => {
|
||||
if (!validateEmail(credentials.username) || credentials.password === '') {
|
||||
return
|
||||
}
|
||||
|
||||
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('/soumet')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = (event, reason) => {
|
||||
if (reason === 'clickaway') {
|
||||
return
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
setError('')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (loginError) {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
return () => {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [loginError])
|
||||
|
||||
const handleClickShowPassword = () => {
|
||||
setShowPassword(!showPassword)
|
||||
}
|
||||
|
||||
const handleMouseDownPassword = event => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const handleKeyUp = event => {
|
||||
if (event.keyCode === 13) {
|
||||
handleClick()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth='sm'>
|
||||
<Box align='center'>
|
||||
<Typography display='inline' variant='h5' component='h1'>
|
||||
Soumèt an tèks
|
||||
</Typography>
|
||||
<Typography>
|
||||
<small>(soumettre un texte)</small>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<FormControl fullWidth style={{marginTop: '1em'}} autoComplete='off'>
|
||||
<InputLabel htmlFor='username'>Email</InputLabel>
|
||||
<Input
|
||||
value={credentials.username}
|
||||
name='username'
|
||||
type='email'
|
||||
id='email'
|
||||
onChange={event => handleUpdate({username: event.target.value})}
|
||||
onKeyUp={handleKeyUp}
|
||||
/>
|
||||
</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})}
|
||||
onKeyUp={handleKeyUp}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
|
||||
style={{marginTop: 40}}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Typography style={{fontWeight: 'bold'}}>
|
||||
Koneksyon
|
||||
</Typography>
|
||||
</Button>
|
||||
|
||||
{loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
|
||||
|
||||
<Box align='center' marginTop={3}>
|
||||
<Typography display='block' variant='h6' component='h2'>
|
||||
Pour obtenir un accès, faites-en la demande
|
||||
</Typography>
|
||||
<Typography style={{fontSize: 20}} display='block'>
|
||||
📩
|
||||
</Typography>
|
||||
<Link passHref href='mailto:kontak@o-k-i.net?subject=Accès à soumèt'>
|
||||
<a style={{color: 'green', fontSize: 20, textDecoration: 'none', fontWeight: 'bold'}}>kontak@o-k-i.net</a>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<Box marginTop={3} align='center'>
|
||||
<Typography display='block' variant='caption'>
|
||||
Vous pouvez également vous connecter via votre compte Google
|
||||
</Typography>
|
||||
{PROVIDERS.map(({id, title, icon}) => (
|
||||
<Box key={id} marginTop={1}>
|
||||
<LoginProvider id={id} title={title} icon={icon} />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{loginError && (
|
||||
<Snackbar
|
||||
open={open}
|
||||
autoHideDuration={6000}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
|
||||
</Snackbar>
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default Koneksyon
|
||||
Reference in New Issue
Block a user