React:Utilisateur Connexion

folder Projet: VentesReactNodeJS (FullStack :backEndProject et front_end_project)
Dans cette partie on va créer un formulaire de connexion pour les utilisateurs
Utilisateur(id,nom,email,password,photo,active)
BackEnd :Nodejs+ExpressJs+mysql:pour créer les RestApis
FrontEnd :React+Axios+react-autocomplete pour consommer les apis

Formulaire de connexion

Aprés la connexion

BackEnd Créer les Apis :backEndProject

  1. 1 la méthode connexion dans src/models/Utilisateurs : permettant d'exécuter la requête SQL :select * from utilisateur where login=? and password=?
  2. 2Créer la méthode connexion() dans src/controllers/UtilisateurController:permettant d'appeler la méthode connexion() du modèle Utilisateur et envoyer le résultat au projet FontEnd de React
  3. 3Ajouter la route :http://localhost:8081/utilisateurs/Search/Nom mappé avec la fonction connexion() du controller UtilisateurController

1.Model:créer la fonction connexion() dans src/models/Utilisateur.js

/**Connexion**/
Utilisateur.connexion = (email,password,result) =>{
connexion.query('SELECT id,email,nom,photo,active FROM utilisateurs where email=? and password=?',[email,password] ,(err, res)=>{
if(err){
result(err,null);
}else{
/*Retourne l'utilisateur et l'envoyer à React*/
result(null,res);
}
})
}

2.Controller: Créer la fonction connexion dans src/controllers/UtilisateurController.js

exports.connexion = (req, res) =>{
if(req.body.email=='' && req.body.password==''){
res.send({success: false, message: 'Erreur tous les champs sont obligatoires'});
}
else{
const email=req.body.email;
const password=req.body.password;

UtilisateurModel.connexion(email,password, (err, utilisateur)=>{
if(err)
/*Si erreur */
res.send({status: false, message: 'Erreur '});

/*Si Ok*/
res.send({status: true, message: '',userConnecter:utilisateur});
/*
React va recevoir
data:
message: ""
success: true
userConnecter: Array(1)
0: {id: 9, email: 'abc@fix', nom: 'le nom', photo: 'photo_Utilisateurs/imgUser.png', active: 0}
.....
*/

})
}
}

3.Routes: ajouter la ligne de routage dans src/routes/UtilisateurRoutes.js

routerUtilisateurs.post('/connexion', utilisateurController.connexion);

2.FrontEnd créer la vue recherche.js dans le projet :front_end_project

  1. 1Créer la components src/components/Utilisateurs/connexion permettant d'afficher à utilisateur de saisir son login et password puis envoyer ces données à la partie FrontEnd pour consomer l'api connexion du controller UtilisateurController

React: Créer la component connexion.js

npx crcf components/Utilisateurs/connexion
import React, { useState,useEffect } from 'react';
import axios from "axios";
export default function Connexion() {


/*les données de connexion à envoyer au backEnd*/
const [userInfo,setUserInfo]=useState({email:"",password:""});


/*pour stocker la reponse du backend*/
const [message,setMessage]=useState("");
const [statusResponse,setStatusResponse]=useState(false);




/*Stocker les valeur saisie de l'utilisateur*/
const inputChange = e => {
/*Récupérer l'input changé*/
const { name, value } = e.target;
/*Modifier dans le state l'attirb utUtilisateur changé*/
setUserInfo(prevUserInfo => ({
...prevUserInfo,/*Récupérer l'ancien objet*/
[name]: value
}));
};



const connexion = async e => {
/*pour ne pas actualiser la page lorsque on clique sur submit*/
e.preventDefault();
await axios.post('http://localhost:8081/apis/utilisateurs/connexion', userInfo)
.then(response => {
/*recevoir la réponse du backend*/
setStatusResponse(response.data.status);
setMessage(response.data.message);


if(response.data.status==true)
{
/*Sauvegarder les informations de l'utilsateur connecté dans local storage */
sessionStorage.setItem('utilisateurConnecter', JSON.stringify(response.data.userConnecter));
console.log("connected");
/*redirection vers Home*/
window.location.replace("/");
}

});
}


useEffect(() => {
console.log("effe " +statusResponse);
/*Vérifier si l'utisateur est déja connecté dans ce cas on charge les info from localStorage*/
const userStorage = sessionStorage.getItem('utilisateurConnecter');
if(userStorage!=null)
{
/*redirection vers Home*/
window.location.replace("/");
}
},[]);


return(
<div className="container">
<br/>
<div className="row">
<fieldset className="border p-2">
<legend className="w-auto">Connexion</legend>
<form>
{/*Afficher le message si on a reçu une reponse serveur*/}
{message.length > 0 &&
<div className="alert alert-danger" role="alert">
{message}
</div>
}
<div className="form-group mb-3">
<input type="text" name="email"
className="form-control"
placeholder="Enter votre Email"
required
value={userInfo.email}
onChange={e => inputChange(e)} />
</div>
<div className="form-group mb-3">
<input type="password" name="password"
className="form-control"
placeholder="Enter votre Password"
required
value={userInfo.password}
onChange={e => inputChange(e)} />
</div>
<div className="form-group mb-3">
<button type="submit" className="form-control" onClick={connexion}>Submit</button>
</div>
</form>
</fieldset>
</div>
</div>
)
}

React: Modifier App.js en ajoutant la route utilisateurs/connexion

import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React, { useState,useEffect } from 'react';

/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
/*Importer les components*/
import Ajouter from './components/Produits/ajouter/ajouter.js'
import ListeProduitAvecDatatable from './components/Produits/ListeProduitAvecDatatable/ListeProduitAvecDatatable.js'
import ListePagination from './components/Produits/listePagination/listePagination.js'
import Liste from './components/Produits/liste/liste.js'
import Details from './components/Produits/details/details.js'
import Navigation from './components/navigation/navigation.js'
import Rechercher from './components/Produits/rechercher/rechercher.js'
import ListeLoadMore from './components/Produits/listeLoadMore/listeLoadMore.js'
import Inscription from './components/Utilisateurs/inscription/inscription.js'
import Connexion from './components/Utilisateurs/connexion/connexion.js'

function App() {
/*Stocker le info de l'utilisateur connecté*/
const [utilisateurConnecter,setUtilisateurConnecter]=useState({
id:"",
email:"",
photo:"",
nom:"",
active:1
});



return (
<div>
{/*Définir un router */}

<Router>
<Navigation/>
<Routes>
<Route exact path="/produits/" element={<Liste/>}/>
<Route exact path="/produits/ajouter" element={<Ajouter/>}/>
<Route exact path="/produits/:id" element={<Details/>}/>
<Route exact path="/produitsListe" element={<ListePagination/>}/>
<Route exact path="/produitsDatatable" element={<ListeProduitAvecDatatable/>}/>
<Route exact path="/Rechercher" element={<Rechercher/>}/>
<Route exact path="/ListeLoadMore" element={<ListeLoadMore/>}/>
<Route exact path="/utilisateurs/inscription" element={<Inscription/>}/>
<Route exact path="/utilisateurs/connexion" element={<Connexion/>}/>
</Routes>
</Router>
</div>
);
}

export default App;

navigation.js

import React, { useEffect,useState } from "react";
import {Button,Nav,Navbar,Form,Container,FormControl,NavDropdown} from 'react-bootstrap';

/*Importer le context */
import { useUserConnecterContext } from '../../dataContext/UtilisateurConnecterContext.js';

function Navigation() {
  

const [estConnecter,setEstConnecter]=useState(false);

/*Stocker le info de l'utilisateur connecté*/
const [utilisateurConnecter,setUtilisateurConnecter]=useState({
       id:"",
       email:"",
       photo:"",
       nom:"",
       active:0
     
});

  useEffect(() => {
const userStorage = sessionStorage.getItem('utilisateurConnecter');
if(userStorage!=null)
{
  setEstConnecter(true);
  const userObject = JSON.parse(userStorage);
 setUtilisateurConnecter(userObject[0]);
}
},[]);


  const deconnexion = async e => {
   sessionStorage.removeItem("utilisateurConnecter");
   console.log(utilisateurConnecter)
  setUtilisateurConnecter({});
  setEstConnecter(false);

  }



    return (<Navbar bg="light" expand="lg">
  <Container fluid>
    <Navbar.Brand href="#">Gestion Ventes</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
      >
 
        <NavDropdown title="Produits" id="produits">
          <NavDropdown.Item href="/produits/ajouter">Ajouter</NavDropdown.Item>
          <NavDropdown.Item href="/produits/">Liste Produits</NavDropdown.Item>
          <NavDropdown.Item href="/produitsListe/">Liste Pagination</NavDropdown.Item>
          <NavDropdown.Item href="/ListeLoadMore/">ListeLoadMore</NavDropdown.Item>
        </NavDropdown>
    
    <NavDropdown title="Utilisateurs" id="utilisateur">
          <NavDropdown.Item href="utilisateurs/ajouter">Ajouter</NavDropdown.Item>
          <NavDropdown.Item href="utilisateurs/">Liste Utilisateurs</NavDropdown.Item>
        </NavDropdown>
    
        
    <NavDropdown title="Ventes" id="utilisateur">
          <NavDropdown.Item href="/ventes/vendre">Vendre</NavDropdown.Item>
          <NavDropdown.Item href="/ventes/">Liste Ventes</NavDropdown.Item>
       <NavDropdown.Item href="/ventes/facture">Facture</NavDropdown.Item>
       <NavDropdown.Item href="/ventes/Statistiques">Statistiques</NavDropdown.Item>
        </NavDropdown>
    
     
      </Nav>
      <Nav>
    {/*si l'utilisateur est connecté*/}
    {estConnecter &&

    <Nav.Link href="#" >
    <img src={'http://127.0.0.1:8081/public/'+utilisateurConnecter.photo} 
    className="img-fluid img-thumbnail"
      style={{height:"35px"}}   /> 
    Welcome: {utilisateurConnecter.nom} 
    <button type="submit"   onClick={deconnexion}>Déconnexion</button>
  </Nav.Link>

      }
    
    {!estConnecter &&
    
      <Nav.Link href="/utilisateurs/connexion">Connexion</Nav.Link>
    
      }
    
    </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>);
  
}

export default Navigation;



Demarer le backEndProject

backEndProject>node Serveur.js

Demarer le front_end_project

font_end_project>npm start