update user front

backend/MVC/controller/LoginController.class.php

@@ -40,7 +40,8 @@ class LoginController extends Controller {
             "id" => $user->USER_ID,
             "firstname" => $user->USER_FIRSTNAME,
             "lastname" => $user->USER_LASTNAME,
-            "email" => $user->USER_EMAIL
+            "email" => $user->USER_EMAIL,
+            "name" => $user->USER_LOGIN
          )
       );
 

frontend/src/components/LoginNavbar.vue

@@ -9,6 +9,9 @@
         <button class="btn-login" v-if="user.id==0">
             <router-link to="/login">Connection</router-link>
         </button>
+        <button class="btn-user" v-if="user.id!==0">
+            <router-link to="/updateUser">{{user.name}}</router-link>
+        </button>
         
     </nav>
 </template>
@@ -55,4 +58,16 @@ console.log(user.id);
     white-space: nowrap;
     margin-left: 1%;
     }
+
+    .btn-user{
+    background-color: transparent;
+    border: none;
+	cursor:pointer;
+	color:#403d39;
+	font-size:28px;
+	padding:16px 31px;
+    font-weight: bold;
+    white-space: nowrap;
+    margin-left: 1%;
+    }
 </style>
\ No newline at end of file

frontend/src/model/user.js

 let user = {
     token: "",
-    id: 0
+    id: 0,
+    name: ""
 }
 module.exports  = user
\ No newline at end of file

frontend/src/router/index.js

@@ -39,6 +39,11 @@ const routes = [
     path: "/adminPrivate",
     name: "AdminPrivate",
     component: () => import(/* webpackChunkName: "login" */ '../views/AdminPrivate.vue')
+  },
+  {
+    path: "/updateUser",
+    name: "UpdateUser",
+    component: () => import(/* webpackChunkName: "login" */ '../views/UpdateUser.vue')
   }
 ]
 

frontend/src/views/Inscription.vue

@@ -151,6 +151,7 @@ export default {
             .then(response=> {
                 user.token = response.jwt_token
                 user.id = response.id
+                user.name = response.login
                 })
             .then(this.$router.push('/'))
             

frontend/src/views/Login.vue

@@ -116,6 +116,7 @@ export default {
             .then(response => {
                 user.token = response.jwt_token
                 user.id = response.data.id
+                user.name = response.data.name
             })
             .then(this.$router.push("/"))
         }

frontend/src/views/UpdateUser.vue

+<template>
+    <div class="updateUser">
+        <LoginNavbar></LoginNavbar>
+        <div class="row _centered">
+            <div class="column _600">
+                <h1>Mise à jour du profil</h1>
+                <form action="post" class="form" v-on:submit.prevent="check">
+                    <div class="row lmargin">
+                        <label for="FirstName"> Prénom </label>
+                        <input v-model="firstname" type="text" name="FirstName" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="LastName"> Nom </label>
+                        <input v-model="lastname" type="text" name="LastName" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Login"> Login </label>
+                        <input v-model="login" type="text" name="Login" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Email"> Email </label>
+                        <input v-model="email" type="email" name="Email" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Password"> Mot de passe </label>
+                        <input v-model="password" type="password" name="Password" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="ConfirmPassword"> Confirmer MdP </label>
+                        <input v-model="confirmpassword" type="password" name="ConfirmPassword" required>
+                    </div>
+                    <div class="row lmargin">
+                        <button type="submit" class="btn"> Valider </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ._600{
+        max-width: 600px;
+    }
+
+    .lmargin{
+        padding: 1%;
+        justify-content: center ;
+    }
+
+    label{
+        margin-right: 1%;
+    }
+
+    .btn{
+        background-color: transparent;
+        border-radius:10px;
+        border:4px solid #403d39;
+        color:#403d39;
+        font-family:Arial;
+        font-size:28px;
+        padding:16px 31px;
+        font-weight: bold;
+        margin: 1%;
+    }
+
+    .form{
+        background-color: transparent;
+        border-radius:10px;
+        border:4px solid #403d39;
+        color:#403d39;
+        font-family:Arial;
+        font-size:28px;
+        padding:16px 31px;
+        font-weight: bold;
+        margin: 1%;
+        justify-content: center;
+    }
+
+    ._centered{
+        justify-content: center;
+    }
+
+    .updateUser{
+        height: 100%;
+        margin: 0 auto;
+        max-width: 1200px;
+    }
+
+</style>
+
+<script>
+const user = require("../model/user.js")
+
+export default {
+    name: 'UpdateUser',
+    components: {
+        LoginNavbar
+    },
+    data(){ // the data, declared as function
+        return{ // we return all the properties that should be react on.
+            firstname:"",
+            lastname:"",
+            login:"",
+            email:"",
+            password:"",
+            confirmpassword:""
+        }
+    },
+    methods: {
+        check: function(){
+            let firstname = this.firstname
+            let lastname = this.lastname
+            let login = this.login
+            let email = this.email
+            let password = this.password
+            let confirm = this.confirmpassword
+
+            if(confirm !== password){
+                window.alert("Les mots de passe ne correspondent pas")
+                return false
+            }else{
+                var bcrypt = require('bcryptjs');
+                var salt = "$2a$08$c0GzKSB8g6.rZLF98GJvQu"
+                var hash = bcrypt.hashSync(password, salt)
+                let data = {
+                    "USER_FIRSTNAME": firstname,
+                    "USER_LASTNAME":lastname,
+                    "USER_LOGIN":login,
+                    "USER_EMAIL":email,
+                    "USER_PASSWORD":hash,
+                    "USER_ROLE":1
+                }
+                this.call(data)
+            }
+
+            
+        },
+
+        call: function(data){
+            const url = "http://localhost/projet-cdaw/backend/MVC/api.php/user"
+
+            var params = {
+                method: 'POST',
+                body : JSON.stringify(data) };
+            
+            console.log(params.body.lastname)
+            
+            fetch(url, params)
+            .then(response=>response.json())
+            .then(response=> {
+                user.token = response.jwt_token
+                user.id = response.id
+                })
+            .then(this.$router.push('/'))
+            
+
+        }
+        },
+        
+}
+
+
+
+import LoginNavbar from '../components/LoginNavbar.vue'
+</script>