Create Koneksyon & Dekoneksyon components

components/kont/dekoneksyon.js

@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import {signOut} from 'next-auth/client'
+import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
+import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+
+const useStyles = makeStyles(() => ({
+  dekoneksyon: {
+    position: 'absolute',
+    right: 5
+  }
+}))
+
+const DekoneksonTooltip = withStyles(() => ({
+  tooltip: {
+    fontSize: 18
+  }
+}))(Tooltip)
+
+function Dekoneksyon() {
+  const classes = useStyles()
+
+  const handleLogout = event => {
+    event.preventDefault()
+    signOut()
+  }
+
+  return (
+    <Link href='/api/auth/signout'>
+      <DekoneksonTooltip title='Dékoneksyon' placement='left' TransitionComponent={Zoom}>
+        <Fab
+          className={classes.dekoneksyon}
+          color='secondary'
+          aria-label='logout'
+          size='small'
+          onClick={event => handleLogout(event)}
+        >
+          <ExitToAppIcon />
+        </Fab>
+      </DekoneksonTooltip>
+    </Link>
+  )
+}
+
+export default Dekoneksyon

components/kont/koneksyon.js

@@ -0,0 +1,129 @@
+import {useEffect, useState} from 'react'
+import {signIn} from 'next-auth/client'
+import {useRouter} from 'next/router'
+import {
+  Button,
+  Container,
+  FormControl,
+  IconButton,
+  Input,
+  InputAdornment,
+  InputLabel,
+  Snackbar,
+  Typography
+} from '@material-ui/core'
+import {Alert} from '@material-ui/lab'
+import Slide from '@material-ui/core/Slide'
+import {Visibility, VisibilityOff} from '@material-ui/icons'
+
+import {validateEmail} from '../../lib/utils/emails'
+
+function Koneksyon() {
+  const [loginError, setError] = useState('')
+  const [credentials, setCredentials] = useState({username: '', password: ''})
+  const [showPassword, setShowPassword] = useState(false)
+  const [open, setOpen] = useState(true)
+  const router = useRouter()
+
+  const handleUpdate = update => {
+    setCredentials({...credentials, ...update})
+  }
+
+  const handleClick = async () => {
+    const response = await signIn('credentials', {
+      redirect: false,
+      ...credentials
+    })
+    if (response.error) {
+      setError(response.error)
+    } else if (response.ok) {
+      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={!validateEmail(credentials.username) || credentials.password === ''}
+        style={{marginTop: 50}}
+        variant='contained'
+        color='primary'
+        onClick={handleClick}
+      >
+        <Typography style={{fontWeight: 'bold'}}>
+          Koneksyon
+        </Typography>
+      </Button>
+
+      {loginError && (
+        <Snackbar
+          open={open}
+          autoHideDuration={6000}
+          TransitionComponent={Slide}
+          onClose={handleClose}
+        >
+          <Alert severity='error' onClose={handleClose}>{loginError}</Alert>
+        </Snackbar>
+      )}
+    </Container>
+  )
+}
+
+export default Koneksyon