Skip to content

P
projet-cdaw
Commit ee3390db authored by raphael.peim's avatar raphael.peim
Browse files
Options

Add login feature

parent 4d3d97ba
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 131 deletions
frontend/src/assets/js/variables.js deleted 100644 → 0
View file @ 4d3d97ba
export default {
}
export const domain = 'http://localhost:8080'
export const apiUrl = 'http://localhost:8888/IMT/CDAW/cdaw/frontend/public/api/api.php/user'
\ No newline at end of file
frontend/src/components/Input.vue
View file @ ee3390db
......@@ -6,6 +6,7 @@
:id="information.id"
:placeholder="information.placeholder"
required>
<!-- :pattern="information.pattern" -->
</div>
</template>
......
frontend/src/main.js
View file @ ee3390db
import Vue from 'vue'
import App from './App.vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import '@/assets/css/style.css'
......@@ -9,6 +9,8 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
Vue.prototype.$hostname = Vue.config.productionTip ? 'https://hostname' : 'http://localhost:8080'
Vue.prototype.$apiUrl = 'http://localhost:8888/IMT/CDAW/cdaw/frontend/public/api/api.php'
new Vue({
router,
......
frontend/src/router/index.js
View file @ ee3390db
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import Rules from '../views/Rules.vue'
import Login from '../views/Login.vue'
import Signup from '../views/Signup.vue'
import Home from '../views/Home.vue'
import Rules from '../views/Rules.vue'
import GameCreate from '../views/GameCreate.vue'
import GameJoin from '../views/GameJoin.vue'
import Game from '../views/Game.vue'
......@@ -17,19 +17,19 @@ const routes = [
component: Index
},
{
path: '/rules',
name: 'Rules',
component: Rules
path: '/signup',
name: 'Signup',
component: Signup
},
{
path: '/login',
name: 'Login',
component: Login
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/signup',
name: 'Signup',
component: Signup
path: '/rules',
name: 'Rules',
component: Rules
},
{
path: '/gameCreate',
......@@ -52,4 +52,4 @@ const router = new VueRouter({
routes
})
export default router
export default router
\ No newline at end of file
frontend/src/views/Home.vue 0 → 100644
View file @ ee3390db
<template>
<div id="body">
<Navbar/>
<div id="buttons">
<router-link to="/Rules"><b-button variant="primary">Découvrir le mahjong</b-button></router-link>
<router-link to="/Index"><b-button variant="primary">Commercer à jouer</b-button></router-link>
</div>
</div>
</template>
<script>
import Navbar from '@/components/Navbar.vue'
export default {
name: 'Home',
components: {
Navbar
}
}
</script>
<style>
div #buttons {
display: flex;
justify-content: space-around;
}
b-button {
display: flex;
}
</style>
\ No newline at end of file
frontend/src/views/Index.vue
View file @ ee3390db
<template>
<div id="body">
<Navbar/>
<div id="buttons">
<router-link to="/Rules"><b-button variant="primary">Découvrir le mahjong</b-button></router-link>
<router-link to="/Login"><b-button variant="primary">Commercer à jouer</b-button></router-link>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image">
<img src="../assets/img/log.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Connectez-vous !</h1>
</div>
<form class="user" @submit="onSubmit">
<p id="message" style="color: red"></p>
<Input v-for="input in inputs" :key="input.id" :information="input"/>
<button type="submit" class="btn btn-primary btn-user btn-block">Connexion</button>
</form>
<hr>
<div class="text-center">
<router-link to="/Signup">
<a class="small">Créer un compte</a>
</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Navbar from '@/components/Navbar.vue'
import Input from '@/components/Input'
import bcrypt from 'bcryptjs'
export default {
name: 'Index',
name: 'Login',
components: {
Navbar
}
}
</script>
Input
},
data() {
return {
// Données pour créer les inputs du form
inputs: [
{ type: 'text', id: 'login', placeholder: 'Login' },
{ type: 'password', id: 'password', placeholder: 'Mot de passe' }
]
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
const form = document.forms[0]
<style>
div #buttons {
display: flex;
justify-content: space-around;
}
b-button {
display: flex;
// Récupération de tous les utilisateurs
fetch(this.$apiUrl + '/user', {
method: 'GET'
})
.then(response => {
if (response.status === 200) {
return response.json()
} else {
throw new Error('Something went wrong on api server!')
}
})
.then(data => {
// Données de l'utilisateur {{ Login }}, undefined s'il n'existe pas
const row = data[data.findIndex((e) => e.login == form.elements.login.value)]
if (row !== undefined) {
// Comparaison des mots de passe
let areEqual = bcrypt.compareSync(form.elements.password.value, row.password)
if (areEqual) {
window.location.href = "/#/Home"
}
else {
document.querySelector('#message').innerHTML = "Mauvais mot de passe"
}
}
else {
document.querySelector('#message').innerHTML = "Login introuvable"
}
}).catch(error => {
console.error(error)
});
}
// getoken(login, password) {
// fetch(this.$apiUrl + '/login', {
// method: 'POST'
// })
// .then(response => {
// if (response.status === 200) {
// return response.json()
// } else {
// throw new Error('Something went wrong on api server!')
// }
// })
// .then(data => {
// console.log(isEqual)
// }).catch(error => {
// console.error(error)
// });
// }
}
}
</style>
\ No newline at end of file
</script>
\ No newline at end of file
frontend/src/views/Login.vue deleted 100644 → 0
View file @ 4d3d97ba
<template>
<div id="body">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image">
<img src="../assets/img/log.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Connectez-vous !</h1>
</div>
<form class="user" @submit="onSubmit">
<Input v-for="input in inputs" :key="input.id" :information="input"/>
<button type="submit" class="btn btn-primary btn-user btn-block">Connexion</button>
</form>
<hr>
<div class="text-center">
<router-link to="/Signup">
<a class="small">Créer un compte</a>
</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { apiUrl } from '../assets/js/variables'
import Input from '@/components/Input'
import bcrypt from 'bcryptjs'
export default {
name: 'Login',
components: {
Input
},
data() {
return {
inputs: [
{ type: 'text', id: 'login', placeholder: 'Login'},
{ type: 'password', id: 'password', placeholder: 'Mot de passe'}
]
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
const form = document.forms[0]
fetch(apiUrl, {
method: 'GET'
})
.then(response => {
if (response.status === 200) {
return response.json()
} else {
throw new Error('Something went wrong on api server!')
}
})
.then(data => {
const row = data[data.findIndex((e) => e.login == form.elements.login.value)]
let hash = bcrypt.hashSync(form.elements.password.value, 10)
let isEqual = bcrypt.compareSync(row.password, hash)
console.log(isEqual)
}).catch(error => {
console.error(error)
});
}
}
}
</script>
\ No newline at end of file
frontend/src/views/Signup.vue
View file @ ee3390db
......@@ -19,7 +19,7 @@
</form>
<hr>
<div class="text-center">
<router-link to="/Login">
<router-link to="/Index">
<a class="small">Déjà inscrit ? Connectez-vous !</a>
</router-link>
</div>
......@@ -33,7 +33,6 @@
</template>
<script>
import { apiUrl, domain } from '../assets/js/variables'
import Input from '@/components/Input'
import bcrypt from 'bcryptjs'
......@@ -44,6 +43,7 @@
},
data() {
return {
// Données pour créer les inputs du form
inputs: [
{ type: 'text', id: 'firstname', placeholder: 'Prénom' },
{ type: 'text', id: 'lastname', placeholder: 'Nom' },
......@@ -60,25 +60,22 @@
const form = document.forms[0]
let body = { 'role': 0 }
document.querySelector('#message').value = "Les mots de passe sont différents"
// Si les mots de passe sont bien les mêmes
if (form.elements.password.value == form.elements.passwordRepeat.value) {
document.querySelector('#message').innerHTML = ""
// Création du body de la requête
Object.entries(form.elements).forEach((key) => {
body[key[1].id] = key[1].id == "password" ? bcrypt.hashSync(key[1].value, 10) : key[1].value
body[key[1].id] = key[1].id == "password" ? bcrypt.hashSync(key[1].value, bcrypt.genSaltSync(10)) : key[1].value
})
console.log(body)
fetch(apiUrl, {
// Création d'un nouvel utilisateur
fetch(this.$apiUrl + '/user', {
method: 'POST',
mode: 'cors',
body: JSON.stringify(body)
})
.then(response => {
if (response.status === 200) {
window.location.href = domain + "/#/Login"
window.location.href = "/#/"
}
else {
throw new Error('Something went wrong on api server!')
......@@ -87,6 +84,7 @@
console.error(error);
});
}
// Si les mots de passe sont différents
else {
document.querySelector('#message').innerHTML = "Les mots de passe sont différents"
}
......
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