diff --git a/components/sesyon/koneksyon.js b/components/sesyon/koneksyon.js
index 8626c8f..de2071f 100644
--- a/components/sesyon/koneksyon.js
+++ b/components/sesyon/koneksyon.js
@@ -2,45 +2,122 @@ import {useEffect, useState, forwardRef} from 'react'
import {signIn} from 'next-auth/react'
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 Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Container from '@mui/material/Container'
+import FormControl from '@mui/material/FormControl'
+import IconButton from '@mui/material/IconButton'
+import Input from '@mui/material/Input'
+import InputAdornment from '@mui/material/InputAdornment'
+import InputLabel from '@mui/material/InputLabel'
+import LinearProgress from '@mui/material/LinearProgress'
+import Snackbar from '@mui/material/Snackbar'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import Typography from '@mui/material/Typography'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
import MuiAlert from '@mui/material/Alert'
+import LoginIcon from '@mui/icons-material/Login'
+import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRounded'
+import axios from 'axios'
import {validateEmail} from '../../lib/utils/emails'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+
+function TabPanel(props) {
+ const {children, value, index, ...other} = props
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ )
+}
+
+TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.number.isRequired,
+ value: PropTypes.number.isRequired,
+}
+
+function a11yProps(index) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ }
+}
const Alert = forwardRef(function Alert(props, ref) {
return
})
-function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
+function Koneksyon({chimen}) {
const [loginError, setError] = useState('')
- const [credentials, setCredentials] = useState({username: '', password: ''})
+ const [loginCredentials, setLoginCredentials] = useState({username: '', password: ''})
+ const [registerCredentials, setRegisterCredentials] = useState({username: '', email: '', password: ''})
+ const [passwordVerification, setPasswordVerification] = useState('')
const [showPassword, setShowPassword] = useState(false)
+ const [showRegisterPassword, setShowRegisterPassword] = useState(false)
+ const [showVerificationPassword, setShowVerificationPassword] = useState(false)
const [loading, setLoading] = useState(false)
const [open, setOpen] = useState(true)
+ const [registrationSuccess, setRegistrationSuccess] = useState(false)
+ const [value, setValue] = useState(0)
const router = useRouter()
const handleUpdate = update => {
- setCredentials({...credentials, ...update})
+ setLoginCredentials({...loginCredentials, ...update})
}
- const handleClick = async () => {
- if (!validateEmail(credentials.username) || credentials.password === '') {
+ const handleRegisterUpdate = update => {
+ setRegisterCredentials({...registerCredentials, ...update})
+ }
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue)
+ }
+
+ const register = async () => {
+ try {
+ const response = await axios.post(`${apiUrl}/auth/local/register`, {
+ ...registerCredentials
+ }, {
+ headers: {
+ 'content-type': 'application/json'
+ }
+ })
+ localStorage.setItem('user-id', response?.data?.user?._id)
+ setRegistrationSuccess(true)
+ resetRegisterForm()
+ } catch (error) {
+ if (error.message.endsWith(400)) {
+ setError('Email ou utilisateur déjà enregistré')
+ } else {
+ setError('Une erreur s’est produite')
+ }
+ }
+ }
+
+ const resetRegisterForm = () => {
+ setRegisterCredentials({username: '', email: '', password: ''})
+ setPasswordVerification('')
+ }
+
+ const handleClickLogin = async () => {
+ if (!validateEmail(loginCredentials.username) || loginCredentials.password === '') {
return
}
@@ -48,7 +125,7 @@ function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
const response = await signIn('credentials', {
callbackUrl: `${siteUrl}${chimen}`,
redirect: false,
- ...credentials
+ ...loginCredentials
})
if (response.error) {
setError(response.error)
@@ -59,12 +136,35 @@ function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
}
}
+ const handleClickRegister = async () => {
+ setLoading(true)
+ if (!validateEmail(registerCredentials.email) || registerCredentials.password === '') {
+ return
+ }
+
+ if (registerCredentials.password !== passwordVerification) {
+ setError('Les 2 mots de passe de correspondent pas')
+ setLoading(false)
+ return
+ }
+
+ if (registerCredentials.username.length < 3) {
+ setError('Le nom d’utilisateur est trop court, 3 caratères minimum')
+ setLoading(false)
+ return
+ }
+
+ await register()
+ setLoading(false)
+ }
+
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return
}
setOpen(false)
+ setRegistrationSuccess(false)
setError('')
}
@@ -82,96 +182,186 @@ function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
setShowPassword(!showPassword)
}
+ const handleClickShowRegisterPassword = () => {
+ setShowRegisterPassword(!showRegisterPassword)
+ }
+
+ const handleClickShowVerificationPassword = () => {
+ setShowVerificationPassword(!showVerificationPassword)
+ }
+
const handleMouseDownPassword = event => {
event.preventDefault()
}
- const handleKeyUp = event => {
+ const handleMouseDownRegisterPassword = event => {
+ event.preventDefault()
+ }
+
+ const handleMouseDownVerificationPassword = event => {
+ event.preventDefault()
+ }
+
+ const handleKeyUpLogin = event => {
if (event.keyCode === 13) {
- handleClick()
+ handleClickLogin()
+ }
+ }
+
+ const handleKeyUpRegister = event => {
+ if (event.keyCode === 13) {
+ handleClickRegister()
}
}
return (
-
- {tit && (
-
-
- {tit}
-
- {soutit && (
-
- {soutit}
+
+
+
+
+ } label='Se connecter' {...a11yProps(0)} />
+ } label='S’inscrire' {...a11yProps(1)} />
+
+
+
+ Email
+ handleUpdate({username: event.target.value})}
+ onKeyUp={handleKeyUpLogin}
+ />
+
+
+
+ Mot de passe
+
+
+ {showPassword ? : }
+
+
+ }
+ onChange={event => handleUpdate({password: event.target.value})}
+ onKeyUp={handleKeyUpLogin}
+ />
+
+
+
- )}
-
-
- Email
- handleUpdate({username: event.target.value})}
- onKeyUp={handleKeyUp}
- />
-
-
-
- Mot de passe
-
-
- {showPassword ? : }
-
-
- }
- onChange={event => handleUpdate({password: event.target.value})}
- onKeyUp={handleKeyUp}
- />
-
-
-
+
+
+
+
+ Nom d’utilisateur
+ handleRegisterUpdate({username: event.target.value})}
+ onKeyUp={handleKeyUpRegister}
+ />
+
+
+ Email
+ handleRegisterUpdate({email: event.target.value})}
+ onKeyUp={handleKeyUpRegister}
+ />
+
+
+ Mot de passe
+
+
+ {showRegisterPassword ? : }
+
+
+ }
+ onChange={event => handleRegisterUpdate({password: event.target.value})}
+ onKeyUp={handleKeyUpRegister}
+ />
+
+
+ Vérification du mot de passe
+
+
+ {showVerificationPassword ? : }
+
+
+ }
+ onChange={event => setPasswordVerification(event.target.value)}
+ onKeyUp={handleKeyUpRegister}
+ />
+
+
+
+
{loading && }
- {detay && (
-
-
- Pour obtenir un accès, faites-en la demande
-
-
- 📩
-
-
- kontak@oki.re
-
-
- )}
-
{loginError && (
{loginError}
)}
+
+ {registrationSuccess && (
+
+ Inscription réussie. Veuillez confirmer votre adresse email, via le lien qui vous a été envoyé.
+
+ )}
)
}
-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
}