|
|
|
@ -1,17 +1,15 @@ |
|
|
|
import React, { useRef, useState } from 'react' |
|
|
|
import { useState } from 'react' |
|
|
|
import classe from '../assets/AllStyleComponents.module.css' |
|
|
|
import img from '../assets/para.png' |
|
|
|
import classeHome from '../assets/Home.module.css' |
|
|
|
import { Box, Button, InputAdornment, TextField, Grid, Modal, Typography } from '@mui/material' |
|
|
|
import classeAdd from '../assets/AddStudent.module.css' |
|
|
|
import { useAuthContext } from '../contexts/AuthContext' |
|
|
|
import bcrypt from 'bcryptjs' |
|
|
|
import { FaEnvelope, FaLock, FaUser } from 'react-icons/fa' |
|
|
|
import validationSetting from './validation/Setting' |
|
|
|
import svgSuccess from '../assets/success.svg' |
|
|
|
import svgError from '../assets/error.svg' |
|
|
|
import { Link } from 'react-router-dom' |
|
|
|
import { GrConfigure } from "react-icons/gr"; |
|
|
|
import { GrConfigure } from 'react-icons/gr' |
|
|
|
import IpConfig from './IpConfig' |
|
|
|
|
|
|
|
const Setting = () => { |
|
|
|
@ -19,42 +17,13 @@ const Setting = () => { |
|
|
|
|
|
|
|
const userInfo = JSON.parse(token) |
|
|
|
|
|
|
|
const [isUsername, setIsUsername] = useState(true) |
|
|
|
|
|
|
|
const changeUsernameRef = useRef() |
|
|
|
const changeEmailRef = useRef() |
|
|
|
|
|
|
|
const changeEmail = (e) => { |
|
|
|
if (changeEmailRef.current.checked) { |
|
|
|
setIsUsername(false) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const changeUsername = (e) => { |
|
|
|
if (changeUsernameRef.current.checked) { |
|
|
|
setIsUsername(true) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const [formData, setFormData] = useState({ |
|
|
|
username: userInfo.username, |
|
|
|
newUsername: '', |
|
|
|
email: userInfo.email, |
|
|
|
newEmail: '', |
|
|
|
passwordVerif: '', |
|
|
|
password: '', |
|
|
|
id: userInfo.id |
|
|
|
}) |
|
|
|
|
|
|
|
const usernameRef = useRef() |
|
|
|
const emailRef = useRef() |
|
|
|
const passwordRef = useRef() |
|
|
|
const passwordChangeRef = useRef() |
|
|
|
const usernameError = useRef() |
|
|
|
const emailError = useRef() |
|
|
|
const passwordError = useRef() |
|
|
|
const passwordChangeError = useRef() |
|
|
|
|
|
|
|
/** |
|
|
|
* function to set the data in state |
|
|
|
* @param {*} e |
|
|
|
@ -70,79 +39,23 @@ const Setting = () => { |
|
|
|
const handleSubmit = async (e) => { |
|
|
|
e.preventDefault() |
|
|
|
// Handle form submission logic |
|
|
|
let validation = validationSetting( |
|
|
|
usernameRef.current, |
|
|
|
emailRef.current, |
|
|
|
passwordRef.current, |
|
|
|
passwordChangeRef.current, |
|
|
|
usernameError.current, |
|
|
|
emailError.current, |
|
|
|
passwordError.current, |
|
|
|
passwordChangeError.current |
|
|
|
) |
|
|
|
|
|
|
|
if (validation) { |
|
|
|
if (formData.username === formData.newUsername) { |
|
|
|
if (usernameError.current) { |
|
|
|
usernameError.current.textContent = |
|
|
|
"Le nom d'utilisateur doit être différent de l'original" |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (usernameError.current) { |
|
|
|
usernameError.current.textContent = '' // Clear the username error if condition is not met |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (formData.email === formData.newEmail) { |
|
|
|
if (emailError.current) { |
|
|
|
emailError.current.textContent = "Email doit être différent de l'original" |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (emailError.current) { |
|
|
|
emailError.current.textContent = '' // Clear the email error if condition is not met |
|
|
|
} |
|
|
|
} |
|
|
|
if (formData.email !== formData.newEmail && formData.username !== formData.newUsername) { |
|
|
|
// Password verification |
|
|
|
bcrypt.compare(formData.passwordVerif, userInfo.password, async function (err, result) { |
|
|
|
if (result) { |
|
|
|
// Clear password error if password matches |
|
|
|
if (passwordError.current) { |
|
|
|
passwordError.current.textContent = '' |
|
|
|
} |
|
|
|
|
|
|
|
// Update user information if password is verified |
|
|
|
const response = await window.allUser.updateUsers(formData) |
|
|
|
if (response.id) { |
|
|
|
setOpen(true) |
|
|
|
setToken(JSON.stringify(response)) |
|
|
|
setFormData({ |
|
|
|
passwordVerif: '', |
|
|
|
username: response.username, |
|
|
|
newUsername: '', |
|
|
|
email: response.email, |
|
|
|
newEmail: '', |
|
|
|
password: '', |
|
|
|
id: userInfo.id |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// Handle specific response code for errors |
|
|
|
if (response.code) { |
|
|
|
setCode(422) |
|
|
|
setOpen(true) |
|
|
|
} |
|
|
|
} else { |
|
|
|
// Set error message if password verification fails |
|
|
|
if (passwordError.current) { |
|
|
|
passwordError.current.textContent = 'mot de passe ne correspond pas' |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const response = await window.allUser.updateUsers(formData) |
|
|
|
console.log(response) |
|
|
|
if (response.success) { |
|
|
|
setOpen(true) |
|
|
|
setCode(200) |
|
|
|
setToken(JSON.stringify(response.users)) |
|
|
|
setFormData({ |
|
|
|
username: response.username, |
|
|
|
email: response.email, |
|
|
|
password: '', |
|
|
|
id: userInfo.id |
|
|
|
}) |
|
|
|
} else { |
|
|
|
setCode(422) |
|
|
|
setOpen(true) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* hook to open modal |
|
|
|
*/ |
|
|
|
@ -264,182 +177,49 @@ const Setting = () => { |
|
|
|
</span> |
|
|
|
|
|
|
|
<form onSubmit={handleSubmit} style={{ marginTop: '5%' }}> |
|
|
|
<Grid container spacing={2} sx={{ marginBottom: '30px' }}> |
|
|
|
<Grid |
|
|
|
item |
|
|
|
xs={12} |
|
|
|
sm={12} |
|
|
|
sx={{ |
|
|
|
display: 'flex', |
|
|
|
alignItems: 'center', |
|
|
|
justifyContent: 'center', |
|
|
|
gap: '20px' |
|
|
|
}} |
|
|
|
> |
|
|
|
<label htmlFor="usernameBlock"> |
|
|
|
<input |
|
|
|
type="radio" |
|
|
|
name="option" |
|
|
|
id="usernameBlock" |
|
|
|
ref={changeUsernameRef} |
|
|
|
onClick={changeUsername} |
|
|
|
/> |
|
|
|
Username |
|
|
|
</label> |
|
|
|
<label htmlFor="emailBlock"> |
|
|
|
<input |
|
|
|
type="radio" |
|
|
|
name="option" |
|
|
|
id="emailBlock" |
|
|
|
onClick={changeEmail} |
|
|
|
ref={changeEmailRef} |
|
|
|
/> |
|
|
|
Email |
|
|
|
</label> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
{/* */} |
|
|
|
<Grid container spacing={2}> |
|
|
|
{isUsername === true ? ( |
|
|
|
<Grid container spacing={2}> |
|
|
|
{/* username*/} |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
<TextField |
|
|
|
label="Nom d'utilisateur" |
|
|
|
name="username" |
|
|
|
color="warning" |
|
|
|
fullWidth |
|
|
|
disabled |
|
|
|
value={formData.username} |
|
|
|
onChange={handleInputChange} |
|
|
|
InputProps={{ |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaUser /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
borderColor: '#ff9800' // Set the border color on hover |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
<TextField |
|
|
|
label="Nouveau nom d'utilisateur" |
|
|
|
name="newUsername" |
|
|
|
color="warning" |
|
|
|
fullWidth |
|
|
|
value={formData.newUsername} |
|
|
|
onChange={handleInputChange} |
|
|
|
InputProps={{ |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaUser /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
inputRef={usernameRef} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
borderColor: '#ff9800' // Set the border color on hover |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
<span |
|
|
|
className="text-danger" |
|
|
|
ref={usernameError} |
|
|
|
style={{ fontSize: '13px' }} |
|
|
|
></span> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
) : ( |
|
|
|
<Grid container spacing={2}> |
|
|
|
{/* email */} |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
<TextField |
|
|
|
label="Email" |
|
|
|
name="email" |
|
|
|
fullWidth |
|
|
|
color="warning" |
|
|
|
value={formData.email} |
|
|
|
disabled |
|
|
|
onChange={handleInputChange} |
|
|
|
InputProps={{ |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaEnvelope /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
borderColor: '#ff9800' // Set the border color on hover |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
<TextField |
|
|
|
label="Nouveau email" |
|
|
|
name="newEmail" |
|
|
|
fullWidth |
|
|
|
color="warning" |
|
|
|
value={formData.newEmail} |
|
|
|
onChange={handleInputChange} |
|
|
|
InputProps={{ |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaEnvelope /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
inputRef={emailRef} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
borderColor: '#ff9800' // Set the border color on hover |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
<span |
|
|
|
className="text-danger" |
|
|
|
ref={emailError} |
|
|
|
style={{ fontSize: '13px' }} |
|
|
|
></span> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
)} |
|
|
|
<Grid item xs={12} sm={12}> |
|
|
|
<p> |
|
|
|
<b>Insérer le mot de passe pour confirmer le changement</b> |
|
|
|
</p> |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
<TextField |
|
|
|
label="Nom d'utilisateur" |
|
|
|
name="username" |
|
|
|
color="warning" |
|
|
|
fullWidth |
|
|
|
value={formData.username} |
|
|
|
onChange={handleInputChange} |
|
|
|
required |
|
|
|
InputProps={{ |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaUser /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
borderColor: '#ff9800' // Set the border color on hover |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
{/* matieres Mecanique general */} |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
<TextField |
|
|
|
label="Mot de passe" |
|
|
|
name="passwordVerif" |
|
|
|
label="Email" |
|
|
|
name="email" |
|
|
|
fullWidth |
|
|
|
required |
|
|
|
color="warning" |
|
|
|
value={formData.passwordVerif} |
|
|
|
value={formData.email} |
|
|
|
onChange={handleInputChange} |
|
|
|
InputProps={{ |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaLock /> |
|
|
|
<FaEnvelope /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
inputRef={passwordRef} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
@ -448,26 +228,24 @@ const Setting = () => { |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
<span |
|
|
|
className="text-danger" |
|
|
|
ref={passwordError} |
|
|
|
style={{ fontSize: '13px' }} |
|
|
|
></span> |
|
|
|
</Grid> |
|
|
|
{/* Matieres Resistance Materiaux */} |
|
|
|
<Grid item xs={12} sm={6}> |
|
|
|
{/* matieres Mecanique general */} |
|
|
|
<Grid item xs={12} sm={12}> |
|
|
|
<TextField |
|
|
|
label="Changer le mot de passe ?" |
|
|
|
label="Mot de passe" |
|
|
|
name="password" |
|
|
|
fullWidth |
|
|
|
helperText="À laisser vide si vous ne voulez pas le modifier" |
|
|
|
color="warning" |
|
|
|
placeholder="Nouveau mot de passe" |
|
|
|
value={formData.password} |
|
|
|
onChange={handleInputChange} |
|
|
|
InputProps={{ |
|
|
|
startAdornment: <InputAdornment position="start"></InputAdornment> |
|
|
|
startAdornment: ( |
|
|
|
<InputAdornment position="start"> |
|
|
|
<FaLock /> |
|
|
|
</InputAdornment> |
|
|
|
) |
|
|
|
}} |
|
|
|
inputRef={passwordChangeRef} |
|
|
|
sx={{ |
|
|
|
'& .MuiOutlinedInput-root': { |
|
|
|
'&:hover fieldset': { |
|
|
|
@ -476,12 +254,8 @@ const Setting = () => { |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
<span |
|
|
|
className="text-danger" |
|
|
|
ref={passwordChangeError} |
|
|
|
style={{ fontSize: '13px' }} |
|
|
|
></span> |
|
|
|
</Grid> |
|
|
|
{/* Matieres Resistance Materiaux */} |
|
|
|
{/* Submit Button */} |
|
|
|
<Grid |
|
|
|
item |
|
|
|
|
fabriceBJHost
5 months ago