Change 'kont' page to 'soumet' page & change EkriTeks title

2021-05-24 13:05:46 +02:00
parent 350d49b9a7
commit 456c40c153
6 changed files with 26 additions and 16 deletions
@@ -0,0 +1,142 @@
+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('/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()
+  }
+
+  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