forked from CRM_Production/JTT_CrM
Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM
commit
84ffd340f4
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
const Compte = () => {
|
||||||
|
return (
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||||
|
|
||||||
|
<div className="page_compte">
|
||||||
|
{/* Create an account page */}
|
||||||
|
<div className="haut_de_page">
|
||||||
|
<h2 className="titre">Mon Compte</h2>
|
||||||
|
<div className="rechLogo">
|
||||||
|
<div className="input_box">
|
||||||
|
<input type="text" placeholder="Rechercher..."/>
|
||||||
|
<span className="search">
|
||||||
|
<i class="uil uil-search search-icon"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<img className="logo" srcSet="./LogoApp.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bas_de_page">
|
||||||
|
<div className="nav_bar_verticale">
|
||||||
|
<img className="logo" srcSet="./logo_person.png"/>
|
||||||
|
<img className="logo" srcSet="./logo_stats.png"/>
|
||||||
|
<img className="logo" srcSet="./logo_graphique.png"/>
|
||||||
|
<img className="logo" srcSet="./logo_calendrier.png"/>
|
||||||
|
<img className="logo" srcSet="./logo_groupe.png"/>
|
||||||
|
<img className="logo" srcSet="./logo_parametre.png"/>
|
||||||
|
</div>
|
||||||
|
<div className="Compte">
|
||||||
|
<p>Compte</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Compte;
|
||||||
@ -1,63 +1,82 @@
|
|||||||
import React from 'react';
|
import axios from 'axios'
|
||||||
import CryptoJS from 'crypto-js';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: 'http://localhost:8080'
|
||||||
|
})
|
||||||
|
|
||||||
const Connexion = () => {
|
function Connexion() {
|
||||||
|
|
||||||
|
const [auth, setAuth] = useState("");
|
||||||
|
const [login, setLogin] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
|
||||||
|
function changeLogin(event) {
|
||||||
|
setLogin(event.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function changePassword(event) {
|
||||||
|
setPassword(event.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function chechAuth(event) {
|
||||||
|
|
||||||
|
// No refresh on Click
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (login === "") {
|
||||||
|
setAuth("Unknown");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password === "") {
|
||||||
|
setAuth("Failed");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const apiString = '/User/Auth/' + login + "/" + password;
|
||||||
|
api.get(apiString).then((response) => {
|
||||||
|
const users = response.data;
|
||||||
|
if (users.length > 0)
|
||||||
|
if (users[0].result === 1)
|
||||||
|
setAuth("Succeed");
|
||||||
|
else
|
||||||
|
setAuth("Failed");
|
||||||
|
else
|
||||||
|
setAuth("Unknown");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (auth === "Succeed") {
|
||||||
|
return(
|
||||||
|
<div>My CRM</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
return (
|
return (
|
||||||
<div className="page_connexion">
|
<div className="page_connexion">
|
||||||
{/* Create a connexion page */}
|
|
||||||
<img className="logo" srcSet="./LogoApp.svg"></img>
|
<img className="logo" srcSet="./LogoApp.svg"></img>
|
||||||
<form>
|
<form onSubmit={chechAuth} className="formulaire_de_connexion">
|
||||||
<table className="formulaire_de_connexion">
|
<label className="connexion_text">
|
||||||
<tr className="connexion_text">
|
|
||||||
Connexion
|
Connexion
|
||||||
</tr>
|
</label>
|
||||||
<tr>
|
<label>
|
||||||
<input id="pseudo" className="text_zone" type="text" placeholder="Pseudo" />
|
<input id="pseudo" className="text_zone" type="text" value={login} onChange={changeLogin} placeholder="Pseudo"/>
|
||||||
</tr>
|
</label>
|
||||||
<tr>
|
<label>
|
||||||
<input id="password" className="text_zone" type="password" placeholder="Mot de passe" />
|
<input id="password" className="text_zone" type="text" value={password} onChange={changePassword} placeholder="Mot de passe"/>
|
||||||
</tr>
|
</label>
|
||||||
<tr className="envoyer">
|
<label 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>
|
</label>
|
||||||
</tr>
|
<button type="submit">Se connecter</button>
|
||||||
</table>
|
<p>{auth === ""?'':auth === "Failed"?'Authentification Failed':'User Unknown'}</p>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
<a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
/* Envoyer le pseudo et le mot de passe */
|
|
||||||
function sendPseudo() {
|
|
||||||
var pseudo = document.getElementById("pseudo").value;
|
|
||||||
var password = document.getElementById("password").value;
|
|
||||||
// transforme le pseudo en son format sha256
|
|
||||||
console.log(password);
|
|
||||||
var password = CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
|
|
||||||
console.log(password);
|
|
||||||
var data = {
|
|
||||||
pseudo: pseudo,
|
|
||||||
password: password
|
|
||||||
};
|
|
||||||
console.log(data);
|
|
||||||
// var xhr = new XMLHttpRequest();
|
|
||||||
// xhr.open("POST", "http://localhost:3000/api/auth/login", true);
|
|
||||||
// xhr.setRequestHeader('Content-Type', 'application/json');
|
|
||||||
// xhr.send(JSON.stringify(data));
|
|
||||||
// xhr.onreadystatechange = function () {
|
|
||||||
// if (xhr.readyState === 4 && xhr.status === 200) {
|
|
||||||
// var json = JSON.parse(xhr.responseText);
|
|
||||||
// console.log(json);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default Connexion;
|
export default Connexion;
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
body {
|
||||||
|
background-image: url("../../../public/fond_page_connexion.png");
|
||||||
|
|
||||||
|
.page_compte {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: auto;
|
||||||
|
height: 100vh;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.haut_de_page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 50px;
|
||||||
|
width: auto;
|
||||||
|
height: 10%;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
|
||||||
|
.titre {
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rechLogo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.input_box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
height: 40px;
|
||||||
|
max-width: 350px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 30px 30px;
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||||
|
|
||||||
|
input {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 15px 0 65px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 60px;
|
||||||
|
border-radius: 25px 0 0 25px;
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
font-size: 30px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bas_de_page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: auto;
|
||||||
|
height: 86%;
|
||||||
|
|
||||||
|
.nav_bar_verticale {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 5%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Compte {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 94.3%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,3 +1,4 @@
|
|||||||
@import "./settings.scss";
|
@import "./settings.scss";
|
||||||
@import "./components/connexion.scss";
|
@import "./components/connexion.scss";
|
||||||
@import "./components/admin.scss";
|
@import "./components/admin.scss";
|
||||||
|
@import "./components/compte.scss";
|
||||||
Loading…
Reference in new issue