Login Menu

frontend/src/App.vue

@@ -19,6 +19,11 @@
   height: 100vh;
 }
 
+*{
+
+  box-sizing: border-box;
+}
+
 .column {
   flex-basis: 100%;
 }
@@ -39,10 +44,10 @@ body{
 
 #nav a {
   font-weight: bold;
-  color: #2c3e50;
 }
 
-#nav a.router-link-exact-active {
-  color: #42b983;
+a{
+  text-decoration: none;
 }
+
 </style>

frontend/src/components/LoginNavbar.vue

 <template>
     <nav class="row btn-bar">
-        <button class="btn-login"><v-icon scale="2" name="plus"/> S'inscrire</button>
-        <button class="btn-login"><v-icon scale="2" name="sign-in-alt"/> Se connecter</button>
+        
+        <button class="btn-login">
+            <router-link to="/inscription">Sign Up </router-link>
+        </button>
+        <button class="btn-login">
+            <router-link to="/login">Log In</router-link>
+        </button>
+        
     </nav>
 </template>
 
@@ -9,18 +15,24 @@
 <script>
 export default {
   name: 'LoginNavbar',
-  components: {
-    'v-icon': Icon
-  }
+//   components: {
+//     'v-icon': Icon
+//   }
 }
 
-import 'vue-awesome/icons'
-import Icon from 'vue-awesome/components/Icon'
+// import 'vue-awesome/icons'
+// import Icon from 'vue-awesome/components/Icon'
 </script>
 
 <style scoped>
     .btn-bar{
         justify-content: flex-end;
+        padding: 0.5%;
+    }
+
+    a{
+        text-decoration: none;
+        color: #403d39;
     }
 
    .btn-login{
@@ -32,6 +44,7 @@ import Icon from 'vue-awesome/components/Icon'
 	font-size:28px;
 	padding:16px 31px;
     font-weight: bold;
-    margin: 1%;
+    white-space: nowrap;
+    margin-left: 1%;
     }
 </style>
\ No newline at end of file

frontend/src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
   {
     path: '/about',
     name: 'About',
@@ -19,7 +13,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   {
-    path: '/accueil',
+    path: '/',
     name: 'Accueil',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
@@ -31,6 +25,11 @@ const routes = [
     name: 'Inscription',
     component: () => import(/* webpackChunkName: "inscription" */ '../views/Inscription.vue')
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
+  },
 ]
 
 const router = new VueRouter({

frontend/src/views/Accueil.vue

@@ -25,7 +25,7 @@
     }
 
     .play{
-        margin: 20%;
+        margin: 25%;
     }    
 
     .accueil{

frontend/src/views/Inscription.vue

@@ -28,7 +28,6 @@
                         <label for="ConfirmPassword"> Confirmer MdP </label>
                         <input type="password" name="ConfirmPassword">
                     </div>
-
                     <div class="row lmargin">
                         <button type="submit" class="btn"> Valider </button>
                     </div>
@@ -36,7 +35,6 @@
             </div>
         </div>
     </div>
-    
 </template>
 
 <style scoped>

frontend/src/views/Login.vue

+<template>
+    <div class="login">
+        <div class="row _centered">
+            <div class="column _600">
+                <h1>Login</h1>
+                <form action="/" method="post" class="form">
+                    <div class="row lmargin">
+                        <label for="Login"> Login </label>
+                        <input type="text" name="Login">
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Password"> Mot de passe </label>
+                        <input type="password" name="Password">
+                    </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;
+    }
+
+    .inscription{
+        height: 100%;
+        margin: 0 auto;
+        max-width: 1200px;
+    }
+
+</style>
+
+<script>
+export default {
+  name: 'Login'
+}
+
+</script>