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 CryptoJS from 'crypto-js';
|
||||
import axios from 'axios'
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
function Connexion() {
|
||||
|
||||
const Connexion = () => {
|
||||
return (
|
||||
<div className="page_connexion">
|
||||
{/* Create a connexion page */}
|
||||
<img className="logo" srcSet="./LogoApp.svg"></img>
|
||||
<form>
|
||||
<table className="formulaire_de_connexion">
|
||||
<tr className="connexion_text">
|
||||
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 (
|
||||
<div className="page_connexion">
|
||||
<img className="logo" srcSet="./LogoApp.svg"></img>
|
||||
<form onSubmit={chechAuth} className="formulaire_de_connexion">
|
||||
<label className="connexion_text">
|
||||
Connexion
|
||||
</tr>
|
||||
<tr>
|
||||
<input id="pseudo" className="text_zone" type="text" placeholder="Pseudo" />
|
||||
</tr>
|
||||
<tr>
|
||||
<input id="password" className="text_zone" type="password" placeholder="Mot de passe" />
|
||||
</tr>
|
||||
<tr className="envoyer">
|
||||
</label>
|
||||
<label>
|
||||
<input id="pseudo" className="text_zone" type="text" value={login} onChange={changeLogin} placeholder="Pseudo"/>
|
||||
</label>
|
||||
<label>
|
||||
<input id="password" className="text_zone" type="text" value={password} onChange={changePassword} placeholder="Mot de passe"/>
|
||||
</label>
|
||||
<label className="envoyer">
|
||||
<div className="memory_me">
|
||||
<label htmlFor="checkbox">Se souvenir de moi</label>
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<button type="submit" onClick={sendPseudo}>Se connecter</button>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
|
||||
<a className="forgot_pw" href="http://localhost">Mot de passe oublié ?</a>
|
||||
</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);
|
||||
// }
|
||||
// }
|
||||
</label>
|
||||
<button type="submit">Se connecter</button>
|
||||
<p>{auth === ""?'':auth === "Failed"?'Authentification Failed':'User Unknown'}</p>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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 "./components/connexion.scss";
|
||||
@import "./components/admin.scss";
|
||||
@import "./components/admin.scss";
|
||||
@import "./components/compte.scss";
|
||||
Loading…
Reference in new issue