ajoue composant menu

master
Maxence LANONE 3 years ago
parent 55938ca006
commit aceb59f6ec

@ -11,7 +11,7 @@
/> />
<title>JTT CrM</title> <title>JTT CrM</title>
</head> </head>
<body style="background-image:url(./fond_page_connexion.png); background-size: cover;"> <body>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Connexion from './pages/Connexion'; // import Connexion from './pages/Connexion';
/*import Admin from './pages/Admin.js';*/ import Admin from './pages/Admin.js';
const App = () => { const App = () => {
return ( return (
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="*" element={<Connexion/>} /> <Route path="*" element={<Admin/>} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
); );

@ -0,0 +1,11 @@
import React from 'react';
const Menu = () => {
return (
<div>
</div>
);
};
export default Menu;

@ -5,8 +5,9 @@ const Admin = () => {
return ( return (
<div className="page_admin"> <div className="page_admin">
{/* Create a admin page */} {/* Create a admin page */}
<div className="nav_bar_verticale"></div> <div className="nav_bar_verticale">
<img className="logo" srcSet="./LogoApp.svg"></img> <img className="logo" srcSet="./LogoApp.svg"></img>
</div>
<div className="create_user"></div> <div className="create_user"></div>
</div> </div>
); );

@ -1,63 +1,63 @@
import React from 'react'; // import React from 'react';
import CryptoJS from 'crypto-js'; // import CryptoJS from 'crypto-js';
const Connexion = () => { // const Connexion = () => {
return ( // return (
<div className="page_connexion"> // <div className="page_connexion">
{/* Create a connexion page */} // {/* Create a connexion page */}
<img className="logo" srcSet="./LogoApp.svg"></img> // <img className="logo" srcSet="./LogoApp.svg"></img>
<form> // <form>
<table className="formulaire_de_connexion"> // <table className="formulaire_de_connexion">
<tr className="connexion_text"> // <tr className="connexion_text">
Connexion // Connexion
</tr> // </tr>
<tr> // <tr>
<input id="pseudo" className="text_zone" type="text" placeholder="Pseudo" /> // <input id="pseudo" className="text_zone" type="text" placeholder="Pseudo" />
</tr> // </tr>
<tr> // <tr>
<input id="password" className="text_zone" type="password" placeholder="Mot de passe" /> // <input id="password" className="text_zone" type="password" placeholder="Mot de passe" />
</tr> // </tr>
<tr className="envoyer"> // <tr className="envoyer">
<div className="memory_me"> // <div className="memory_me">
<label htmlFor="checkbox">Se souvenir de moi</label> // <label htmlFor="checkbox">Se souvenir de moi</label>
<input type="checkbox" /> // <input type="checkbox" />
</div> // </div>
<button type="submit" onClick={sendPseudo}>Se connecter</button> // <button type="submit" onClick={sendPseudo}>Se connecter</button>
</tr> // </tr>
</table> // </table>
</form> // </form>
<a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a> // <a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
</div> // </div>
); // );
}; // };
/* Envoyer le pseudo et le mot de passe */ // /* Envoyer le pseudo et le mot de passe */
function sendPseudo() { // function sendPseudo() {
var pseudo = document.getElementById("pseudo").value; // var pseudo = document.getElementById("pseudo").value;
var password = document.getElementById("password").value; // var password = document.getElementById("password").value;
// transforme le pseudo en son format sha256 // // transforme le pseudo en son format sha256
console.log(password); // console.log(password);
var password = CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex); // var password = CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
console.log(password); // console.log(password);
var data = { // var data = {
pseudo: pseudo, // pseudo: pseudo,
password: password // password: password
}; // };
console.log(data); // console.log(data);
// var xhr = new XMLHttpRequest(); // // var xhr = new XMLHttpRequest();
// xhr.open("POST", "http://localhost:3000/api/auth/login", true); // // xhr.open("POST", "http://localhost:3000/api/auth/login", true);
// xhr.setRequestHeader('Content-Type', 'application/json'); // // xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send(JSON.stringify(data)); // // xhr.send(JSON.stringify(data));
// xhr.onreadystatechange = function () { // // xhr.onreadystatechange = function () {
// if (xhr.readyState === 4 && xhr.status === 200) { // // if (xhr.readyState === 4 && xhr.status === 200) {
// var json = JSON.parse(xhr.responseText); // // var json = JSON.parse(xhr.responseText);
// console.log(json); // // console.log(json);
// // }
// // }
// } // }
// }
}
export default Connexion; // export default Connexion;
Loading…
Cancel
Save