pawol.nu/components/sesyon/koneksyon.js

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 '@mui/material'
import {Visibility, VisibilityOff} from '@mui/icons-material'
import MuiAlert from '@mui/material/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 sx={{textAlign: 'center', marginTop: 5}}>
          <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'
                size='large'
                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'}} />}

      <Box sx={{textAlign: 'center', marginBlock: 3}}>
        {PROVIDERS.map(({id, title, icon}) => (
          <Box key={id} marginTop={1}>
            <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
          </Box>
        ))}
      </Box>

      {detay && (
        <Box sx={{textAlign: '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>
      )}

      {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