Move Koneksyon to component/sesyon & improve it

components/sesyon/koneksyon.js

@@ -0,0 +1,221 @@
+import {useEffect, useState} from 'react'
+import {signIn} from 'next-auth/client'
+import {useRouter} from 'next/router'
+import PropTypes from 'prop-types'
+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 siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+
+const PROVIDERS = [
+  {
+    id: 'google',
+    title: 'Google',
+    icon: <Google />
+  }
+]
+
+function Alert(props) {
+  return <MuiAlert elevation={6} variant='filled' {...props} />
+}
+
+function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
+  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', {
+      callbackUrl: `${siteUrl}${chimen}`,
+      redirect: false,
+      ...credentials
+    })
+    if (response.error) {
+      setError(response.error)
+      setLoading(false)
+    } else if (response.ok) {
+      setLoading(false)
+      router.push(chimen)
+    }
+  }
+
+  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'>
+      {tit && (
+        <Box align='center'>
+          <Typography display='inline' variant={`h${titGwose}`} component='h1'>
+            {tit}
+          </Typography>
+          {soutit && (
+            <Typography>
+              <small>{soutit}</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: 20}}
+        variant='contained'
+        color='primary'
+        onClick={handleClick}
+      >
+        <Typography style={{fontWeight: 'bold'}}>
+          Koneksyon
+        </Typography>
+      </Button>
+
+      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
+
+      {detay && (
+        <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'>
+            &#x1F4E9;
+          </Typography>
+          <Link passHref href='mailto:kontak@o-k-i.net?subject=Accès à #OKi'>
+            <a style={{color: 'green', fontSize: 20, textDecoration: 'none', fontWeight: 'bold'}}>kontak@o-k-i.net</a>
+          </Link>
+        </Box>
+      )}
+
+      <Box marginTop={3} marginBottom={3} align='center'>
+        {PROVIDERS.map(({id, title, icon}) => (
+          <Box key={id} marginTop={1}>
+            <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
+          </Box>
+        ))}
+      </Box>
+
+      {loginError && (
+        <Snackbar
+          open={open}
+          autoHideDuration={6000}
+          onClose={handleClose}
+        >
+          <Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
+        </Snackbar>
+      )}
+    </Container>
+  )
+}
+
+Koneksyon.defaultProps = {
+  detay: false,
+  tit: null,
+  soutit: null,
+  titGwose: 5
+}
+
+Koneksyon.propTypes = {
+  detay: PropTypes.bool,
+  tit: PropTypes.string,
+  soutit: PropTypes.string,
+  titGwose: PropTypes.number,
+  chimen: PropTypes.string.isRequired
+}
+
+export default Koneksyon