Skip to content

GitLab

Commit c4e9f50b authored by benjamin.sitbon's avatar benjamin.sitbon
Browse files

login/register

parent 86db390b
Expand all Hide whitespace changes
Inline Side-by-side
backend/data.js 0 → 100644
View file @ c4e9f50b
const userDB = [];
const pokemons = [];
const cart = [];
module.exports = { userDB,pokemons,cart };
backend/package-lock.json
View file @ c4e9f50b
This diff is collapsed.
backend/package.json
View file @ c4e9f50b
......@@ -4,6 +4,7 @@
"description": "Server for Check Norris' jokes",
"main": "server.js",
"dependencies": {
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"ejs": "^3.1.6",
"express": "^4.17.1",
......
backend/server.js
View file @ c4e9f50b
......@@ -5,9 +5,16 @@ const express = require('express');
const app = express();
const config = require('./config');
const fetch = require("node-fetch");
const bcrypt = require('bcrypt');
const http = require('http');
const server = http.createServer(app);
const users = require('./data').userDB;
const pokemons = require('./data').pokemons;
const cart = require('./data').cart;
function Pokemons(){
return fetch("https://pokeapi.co/api/v2/pokemon/?limit=900")
......@@ -25,16 +32,8 @@ function get(that) {
}
const pokemons = [
]
const cart = [
]
let api = Pokemons();
......@@ -67,14 +66,12 @@ api.then(pok =>{
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.urlencoded({ extended: false}));
app.use(express.static('../frontend'));
/*app.get('*',function(err,res,next){
app.get(function(res){
res.status(404).sendFile(__dirname +'/html/error404.html');
})*/
})
app.get(config.rootApi + "pokemons/:id",function (req,res){
......@@ -92,9 +89,70 @@ app.get(config.rootApi + "pokemons",function (req,res){
})
app.post('/register', async (req, res) => {
try{
let foundUser = users.find((data) => req.body.email === data.email);
if (!foundUser) {
let hashPassword = await bcrypt.hash(req.body.password, 10);
let newUser = {
id: Date.now(),
username: req.body.username,
email: req.body.email,
password: hashPassword,
};
users.push(newUser);
console.log('User list', users);
res.writeHead(301,{Location: 'http://localhost:8081/login.html'});
res.end();
} else {
res.writeHead(301,{Location: 'http://localhost:8081/registration.html'});
res.end();
}
} catch{
res.send("Internal server error");
}
});
app.post('/login', async (req, res) => {
try{
let foundUser = users.find((data) => req.body.email === data.email);
if (foundUser) {
let submittedPass = req.body.password;
let storedPass = foundUser.password;
const passwordMatch = await bcrypt.compare(submittedPass, storedPass);
if (passwordMatch) {
let usrname = foundUser.username;
localStorage.setItem("status","logged");
res.writeHead(301,{Location: 'http://localhost:8081/index.html'});
res.end();
} else {
res.writeHead(301,{Location: 'http://localhost:8081/login.html'});
res.end();
}
}
else {
let fakePass = `$2b$$10$ifgfgfgfgfgfgfggfgfgfggggfgfgfga`;
await bcrypt.compare(req.body.password, fakePass);
res.writeHead(301,{Location: 'http://localhost:8081/login.html'});
res.end();
}
} catch{
res.send("Internal server error");
}
});
//app.use(config.rootAPI + "pokemons", PokemonsRouter);
app.listen(config.port, ()=> console.log('Attrapez les tous !'))
server.listen(config.port, ()=> console.log('Attrapez les tous !'))
function getIndex(id){
......
frontend/css/register.css 0 → 100644
View file @ c4e9f50b
body{
margin:0;
padding:0;
font-family: sans-serif;
background: url(../img/Dym19R.jpg);
background-size: cover;
width: 100%;
height: 100%;
}
main{
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.597);
backdrop-filter: blur(20px);
}
.login-box{
width:25%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
}
.login-box h1{
font-size: 40px;
border-bottom: 6px solid #ffffff;
margin-bottom: 25px;
padding: 13px 0;
}
form, fieldset{
border: none;
}
.arrow{
font-size: 30px;
text-decoration: none;
color: white;
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%,-50%);
}
.textbox{
width:100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
}
.textbox i{
width: 26px;
float: left;
text-align: center;
}
a{
text-decoration: none;
}
.login {
background-color: rgb(255, 255, 255);
mix-blend-mode: screen;
font-size: 2vw;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 5px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 90%;
float: left;
margin: 0 10px;
border-bottom: 1px solid #ffffff;
transition: 2s ease;
}
.textbox input:focus {
outline: none;
border-color: rgb(122, 122, 219);
}
.textbox input:valid {
outline: none;
border-color: rgb(202, 248, 133);
}
::-webkit-input-placeholder{
color: black;
outline: none;
}
.btn{
width: 100%;
background: none;
border: 2px solid #ffffff;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
transition: 1s ease;
}
.btn:hover {
border-color: rgb(202, 248, 133);
}
\ No newline at end of file
frontend/js/index.js
View file @ c4e9f50b
......@@ -65,101 +65,51 @@
}
//Génère toutes les boxs de la page du shop, prend un intervalle de valeur car la page génère au fur et à mesure les pokemons (presque 900) pour ne pas trop charger la page
function boxGenerator(init,number){
for(let i = init; i<init+number; i++){
var tab = document.getElementsByClassName("tab");
var box = document.createElement("div");
box.className = "box";
var img = document.createElement("img");
img.id = "pokemon" + i;
img.className = "canvas";
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + (i+1) + ".png";
function boxGenerator(init,number,api){
api.then(pok =>{
for(let i = init; i<init+number; i++){
var button = createStyleButton();
button.id = i;
//Lorsqu'on clique on enregistre la séléction et les éléments important du pokemon
button.onclick = function(){
let pokemon = document.getElementById(i).children;
let name = pokemon[1].innerHTML;
let type = document.getElementById(i).parentNode.children[1].children;
let data = [name,type[0].src,type[1].src,i+1]
localStorage.setItem("oui",data);
window.location.href = "select.html";
var tab = document.getElementsByClassName("tab");
var box = document.createElement("div");
box.className = "box";
var img = document.createElement("img");
img.id = "pokemon" + i;
img.className = "canvas";
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + pok.result[i].id + ".png";
var button = createStyleButton();
button.id = i;
//Lorsqu'on clique on enregistre la séléction et les éléments important du pokemon
button.onclick = function(){
let pokemon = document.getElementById(i).children;
let name = pokemon[1].innerHTML;
let type = document.getElementById(i).parentNode.children[1].children;
let data = [name,type[0].src,type[1].src,pok.result[i].id]
localStorage.setItem("oui",data);
window.location.href = "select.html";
}
box.appendChild(img);
box.appendChild(typeBox(poke))
box.appendChild(button);
tab[0].appendChild(box);
}
box.appendChild(img);
box.appendChild(typeBox(poke))
box.appendChild(button);
tab[0].appendChild(box);
}
}
//Prend une intervalle pour les mêmes raison que box generator et récupère les pokemons de l'intervalle pour les ajouter au box de la page
function pokedex(init,number){
let pokemons = Pokemons();
})
boxGenerator(init,number);
pokemons.then(Poks => {
//classe contenant le noms des pokemons
let names = document.getElementsByClassName("css-button-text");
let types = document.getElementsByClassName("type");
for(let i = init; i<init+number; i++){
names[i].innerHTML = Poks.results[i].name;
//Ajout d'un élément before pour donner le numéro pokedex du pokemon
let before = document.createElement("p");
before.innerHTML = i+1;
before.className ="before";
names[i].before(before);
//On va récupérer depuis l'API l'url menant aux informations précise du pokemon afin d'avoir accès à ses types
let stats = get(Poks.results[i].url);
stats.then(stat => {
//Parcours 2 par 2 des types
if(stat.types.length > 1){
types[2*i].src = "img/types/" + stat.types[0].type.name + ".png";
types[(2*i)+1].src = "img/types/" + stat.types[1].type.name + ".png";
}
else{
types[2*i].src = "img/types/" + stat.types[0].type.name + ".png";
types[(2*i)+1].style.display = "none";
}
})
}
});
}
//Fonction qui permet la recherche du pokemon
function search() {
......@@ -185,14 +135,10 @@
}
//Génération au fur et à mesure des pokemons pour ne pas rendre le chargement de la page trop long
function loadEffect(){
/*function loadEffect(){
let main = document.getElementsByTagName("main")[0].scrollTop;
for(let i = 1; i<45; i++){
if(i==44){
pokedex(i*20,18);
}
......@@ -200,12 +146,44 @@
pokedex(i*20,20);
}
}
}
}*/
//let pokemons = Pokemons();
let api = get("http://localhost:8081/api/v1/pokemons");
boxGenerator(0,809,api);
//classe contenant le noms des pokemons
let names = document.getElementsByClassName("css-button-text");
let types = document.getElementsByClassName("type");
api.then(Poks => {
for(let i = 0; i<Poks.result.length; i++){
names[i].innerHTML = Poks.result[i].name;
pokedex(0,20);
//Ajout d'un élément before pour donner le numéro pokedex du pokemon
let before = document.createElement("p");
before.innerHTML = Poks.result[i].id;
before.className ="before";
names[i].before(before);
//Parcours 2 par 2 des types
if(Poks.result[i].type[1] != "none"){
types[2*i].src = "img/types/" + Poks.result[i].type[0] + ".png";
types[(2*i)+1].src = "img/types/" + Poks.result[i].type[1] + ".png";
}
else{
types[2*i].src = "img/types/" + Poks.result[i].type[0] + ".png";
types[(2*i)+1].style.display = "none";
}
}
});
......
frontend/login.html 0 → 100644
View file @ c4e9f50b
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> Login </title>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<main>
<form action="/login" method="POST" class="login-box">
<h1>Login</h1>
<label>Email ID</label>
<div class="textbox">
<i class="fa fa-user" aria-hidden="true"></i>
<input type ="email" id = 'email' name="email" placeholder="abc@example.com" required="">
</div>
<label>Password</label>
<div class="textbox">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" id = "password" name="password" placeholder="password123" required="">
</div>
<input class = "btn" type="submit" placeholder="envoyer" >
</form>
<a class="arrow" href="shop.html"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a class= "login" href="registration.html">Register</a>
</main>
<script src="https://use.fontawesome.com/cf5b8545b3.js"></script>
</body>
</html>
frontend/registration.html 0 → 100644
View file @ c4e9f50b
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/register.css">
<title>Register</title>
</head>
<body>
<main>
<form action="/register" method="POST" class="login-box">
<h1>Register</h1>
<label for="email"> Adresse mail </label>
<div class="textbox">
<i class="fa fa-envelope" aria-hidden="true"></i>
<input type="email" name="email" placeholder="JPSartre@gmail.com" required="@">
</div>
<label for="username"> username </label>
<div class="textbox">
<i class="fa fa-user" aria-hidden="true"></i>
<input type="text" name="username" placeholder="jpdu75" required="">
</div>
<label for="street"> Password </label>
<div class="textbox">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" name="password" placeholder="password123" required="">
</div>
<input class = "btn" type="submit" placeholder="envoyer" >
</form>
<a class="arrow" href="shop.html"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a class= "login" href="login.html">Login</a>
</main>
<script src="https://use.fontawesome.com/cf5b8545b3.js"></script>
</body>
</html>
frontend/shop.html
View file @ c4e9f50b
......@@ -10,7 +10,7 @@
<link rel="stylesheet" href="css/button.css">
<title>Pokeshop</title>
</head>
<body onload="loadEffect()" >
<body >
<nav>
<div class="shop">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment