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 @@ ...@@ -6,6 +6,7 @@
:id="information.id" :id="information.id"
:placeholder="information.placeholder" :placeholder="information.placeholder"
required> required>
<!-- :pattern="information.pattern" -->
</div> </div>
</template> </template>
......
frontend/src/main.js
View file @ ee3390db
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App'
import router from './router' import router from './router'
import BootstrapVue from 'bootstrap-vue' import BootstrapVue from 'bootstrap-vue'
import '@/assets/css/style.css' import '@/assets/css/style.css'
...@@ -9,6 +9,8 @@ import 'bootstrap-vue/dist/bootstrap-vue.css' ...@@ -9,6 +9,8 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
Vue.config.productionTip = false 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({ new Vue({
router, router,
......
frontend/src/router/index.js
View file @ ee3390db
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Index from '../views/Index.vue' 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 Signup from '../views/Signup.vue'
import Home from '../views/Home.vue'
import Rules from '../views/Rules.vue'
import GameCreate from '../views/GameCreate.vue' import GameCreate from '../views/GameCreate.vue'
import GameJoin from '../views/GameJoin.vue' import GameJoin from '../views/GameJoin.vue'
import Game from '../views/Game.vue' import Game from '../views/Game.vue'
...@@ -17,19 +17,19 @@ const routes = [ ...@@ -17,19 +17,19 @@ const routes = [
component: Index component: Index
}, },
{ {
path: '/rules', path: '/signup',
name: 'Rules', name: 'Signup',
component: Rules component: Signup
}, },
{ {
path: '/login', path: '/Home',
name: 'Login', name: 'Home',
component: Login component: Home
}, },
{ {
path: '/signup', path: '/rules',
name: 'Signup', name: 'Rules',
component: Signup component: Rules
}, },
{ {
path: '/gameCreate', path: '/gameCreate',
...@@ -52,4 +52,4 @@ const router = new VueRouter({ ...@@ -52,4 +52,4 @@ const router = new VueRouter({
routes 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> <template>
<div id="body"> <div id="body">
<Navbar/> <div class="container">
<div id="buttons"> <div class="row justify-content-center">
<router-link to="/Rules"><b-button variant="primary">Découvrir le mahjong</b-button></router-link> <div class="col-xl-10 col-lg-12 col-md-9">
<router-link to="/Login"><b-button variant="primary">Commercer à jouer</b-button></router-link> <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>
</div> </div>
</template> </template>
<script> <script>
import Navbar from '@/components/Navbar.vue' import Input from '@/components/Input'
import bcrypt from 'bcryptjs'
export default { export default {
name: 'Index', name: 'Login',
components: { components: {
Navbar Input
} },
} data() {
</script> 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> // Récupération de tous les utilisateurs
div #buttons { fetch(this.$apiUrl + '/user', {
display: flex; method: 'GET'
justify-content: space-around; })
} .then(response => {
b-button { if (response.status === 200) {
display: flex; 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> </script>
\ No newline at end of file \ 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 @@ ...@@ -19,7 +19,7 @@
</form> </form>
<hr> <hr>
<div class="text-center"> <div class="text-center">
<router-link to="/Login"> <router-link to="/Index">
<a class="small">Déjà inscrit ? Connectez-vous !</a> <a class="small">Déjà inscrit ? Connectez-vous !</a>
</router-link> </router-link>
</div> </div>
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
</template> </template>
<script> <script>
import { apiUrl, domain } from '../assets/js/variables'
import Input from '@/components/Input' import Input from '@/components/Input'
import bcrypt from 'bcryptjs' import bcrypt from 'bcryptjs'
...@@ -44,6 +43,7 @@ ...@@ -44,6 +43,7 @@
}, },
data() { data() {
return { return {
// Données pour créer les inputs du form
inputs: [ inputs: [
{ type: 'text', id: 'firstname', placeholder: 'Prénom' }, { type: 'text', id: 'firstname', placeholder: 'Prénom' },
{ type: 'text', id: 'lastname', placeholder: 'Nom' }, { type: 'text', id: 'lastname', placeholder: 'Nom' },
...@@ -60,25 +60,22 @@ ...@@ -60,25 +60,22 @@
const form = document.forms[0] const form = document.forms[0]
let body = { 'role': 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) { 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) => { 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', method: 'POST',
mode: 'cors',
body: JSON.stringify(body) body: JSON.stringify(body)
}) })
.then(response => { .then(response => {
if (response.status === 200) { if (response.status === 200) {
window.location.href = domain + "/#/Login" window.location.href = "/#/"
} }
else { else {
throw new Error('Something went wrong on api server!') throw new Error('Something went wrong on api server!')
...@@ -87,6 +84,7 @@ ...@@ -87,6 +84,7 @@
console.error(error); console.error(error);
}); });
} }
// Si les mots de passe sont différents
else { else {
document.querySelector('#message').innerHTML = "Les mots de passe sont différents" 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