Ajout api post + utilisation sur la page admin

server-api/api.js

@@ -4,10 +4,10 @@ const cors=require("cors");
 const bodyparser = require('body-parser');
 
 const db = mysql.createConnection({
-    host: 'sql11.freemysqlhosting.net',
+    host: 'lfbn-cle-1-568-58.w92-157.abo.wanadoo.fr',
-    user: 'sql11526710',
+    user: 'crmuser',
-    password: 'l5XbZ9Q6Ca',
+    password: 'Jeremy1234',
-    database: 'sql11526710'
+    database: 'crm-database'
 });
 
 db.connect((err) => {
@@ -33,9 +33,9 @@ const corsOptions = {
     console.log('Server started on port 8080');
 });
 
-app.get('/Client/All', (req, res) => {
+app.get('/Customer/All', (req, res) => {
 
-    let sql = 'SELECT * FROM clients ORDER BY idclient';
+    let sql = 'SELECT * FROM customers ORDER BY idcustomer';
 
     db.query(sql, (err, result) => {
         if (err) throw err;
@@ -45,10 +45,10 @@ app.get('/Client/All', (req, res) => {
     });
 });
 
-app.get('/Client/Id/:id', (req, res) => {
+app.get('/Customer/Id/:id', (req, res) => {
 
     const id = req.params.id;
-    let sql = 'SELECT * FROM clients WHERE idclient = ?';
+    let sql = 'SELECT * FROM customers WHERE idcustomer = ?';
 
     db.query(sql, [id], (err, result) => {
         if (err) throw err;
@@ -71,3 +71,17 @@ app.get('/User/Auth/:login/:pwd', (req, res) => {
         res.send(result);
     });
 });
+
+app.post('/User/Add', (req, res) => {
+    
+    let form = req.body;
+
+    console.log(form);
+
+    const sql = `INSERT INTO users(lastname, firstname, idrole, login, password, phone, mail) VALUES ('${form.lastname}', '${form.firstname}', '${form.idrole}', '${form.login}', '${form.password}', '${form.phone}', '${form.mail}')`;
+    db.query(sql , (err, result) => { 
+        if (err) throw err;
+        console.log(result);
+        res.send('Post added...' + result.insertId);
+    });
+});

src/pages/Admin.js

@@ -1,8 +1,29 @@
 import React from 'react';
+import axios from 'axios'
 import NavigationAdmin from '../components/NavigationAdmin.js';
 
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+  })
+
+function Admin() {
+
+    function checkAdd(event){
+        
+        event.preventDefault();
+
+        const formData = new FormData(event.currentTarget);
+        const values = Object.fromEntries(formData.entries());
+
+        console.log(values.firstname);
+
+        
+
+        api.post('/User/Add', values).then (function(response) {
+        console.log(response.data);
+        });
+    };
 
-const Admin = () => {
     return (
         <div className="page_admin">
             <NavigationAdmin />
@@ -10,7 +31,7 @@ const Admin = () => {
             <div className="Titre_Formulaire">
                 <p className="Titre">Admin</p>
                 <div className="Formulaire">
-                    <form className="form">
+                    <form className="form" onSubmit={checkAdd}>
                         <table className="Formulaire_de_connexion">
                             <tr>
                                 <div className="texte_côté">
@@ -22,19 +43,19 @@ const Admin = () => {
                                 </div>
                             </tr>
                             <tr>
-                                <input id="nom" className="texte_zone" type="text" placeholder="Nom..."/>
+                                <input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..."/>
-                                <input id="prénom" className="texte_zone" type="text" placeholder="Prénom..."/>
+                                <input id="prénom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..."/>
-                                <input id="rôle" className="texte_zone" type="text" placeholder="Rôle..."/>
+                                <input id="rôle" name='idrole' className="texte_zone" type="text" placeholder="Rôle..."/>
-                                <input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant..."/>
+                                <input id="identifiant" name='login' className="texte_zone" type="text" placeholder="Identifiant..."/>
-                                <input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)..."/>
+                                <input id="password" name='password' className="texte_zone" type="password" placeholder="Mot de passe (par default)..."/>
                             </tr>
                         </table>
+                        <div className="bouton_submit">
+                            <button className="bouton_val" type="submit">Valider</button>
+                            <button className="bouton_ann" type='reset'>Annuler</button>
+                        </div>
                     </form>
                 </div>
-                <tr className="bouton_submit">
-                    <button className="bouton_val" type="submit">Valider</button>
-                    <button className="bouton_ann" type="submit">Annuler</button>
-                </tr>
             </div>
         </div>
     );

src/pages/Connexion.js

@@ -1,7 +1,6 @@
 import axios from 'axios'
 import React, { useState } from 'react';
 import CryptoJS from 'crypto-js';
-import { NavLink } from 'react-router-dom';
 import Admin from './Admin.js'
 
 const api = axios.create({