Merge branch 'master' of https://gvipers.imt-lille-douai.fr/thibaut.felten/projet-cdaw

.gitmodules

+[submodule "frontend/src/assets/img/mahjong-tiles"]
+	path = frontend/src/assets/img/mahjong-tiles
+	url = https://github.com/FluffyStuff/riichi-mahjong-tiles.git

frontend/package-lock.json

@@ -10914,6 +10914,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-awesome": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.1.0.tgz",
+      "integrity": "sha512-4n+hg8KIMrwjXV6sRHcRZd18Somih5j4Yk2ZOv95pnvDpzbBkIYW4ktfivhqgNt50m0zDjmeEWiy1iVLtcccfw==",
+      "requires": {
+        "core-js": "^3.4.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-awesome": "^4.1.0",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

frontend/src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+      <router-link to="/about">About</router-link> |
+      <router-link to="/accueil">Acceuil</router-link>
+    </div> -->
     <router-view/>
   </div>
 </template>
@@ -14,7 +15,27 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  background-image: linear-gradient(to bottom, #fff1eb 0%, #ace0f9 100%);
+  height: 100vh;
+}
+
+*{
+
+  box-sizing: border-box;
+}
+
+.column {
+  flex-basis: 100%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+body{
+  margin:0
 }
 
 #nav {
@@ -23,10 +44,10 @@
 
 #nav a {
   font-weight: bold;
-  color: #2c3e50;
 }
 
-#nav a.router-link-exact-active {
-  color: #42b983;
+a{
+  text-decoration: none;
 }
+
 </style>

mahjong-tiles @ 9e2eba21

+Subproject commit 9e2eba21ca69d6cd5cdd9a309d5754ac9517c481

frontend/src/components/LoginNavbar.vue

+<template>
+    <nav class="row btn-bar">
+        
+        <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>
+
+
+<script>
+export default {
+  name: 'LoginNavbar',
+//   components: {
+//     'v-icon': 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{
+    background-color: transparent;
+	border-radius:10px;
+	border:4px solid #403d39;
+	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/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',
@@ -17,7 +11,25 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+  },
+  {
+    path: '/',
+    name: 'Accueil',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "accueil" */ '../views/Accueil.vue')
+  },
+  {
+    path: '/inscription',
+    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/About.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <v-icon name="beer"/>
   </div>
 </template>
+
+<script>
+
+export default {
+  name: 'About',
+  components: {
+    'v-icon': Icon
+  }
+}
+
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+</script>
+

frontend/src/views/Accueil.vue

+<template>
+    <div class="accueil">
+        <LoginNavbar></LoginNavbar>
+        <div class="row">
+            <div class="column">
+                <button class="btn-login play">Jouer</button>
+            </div>
+        </div>
+    </div>
+    
+</template>
+
+<style scoped>
+    .btn-login{
+    background-color: transparent;
+	border-radius:10px;
+	border:4px solid #403d39;
+	cursor:pointer;
+	color:#403d39;
+	font-family:Arial;
+	font-size:28px;
+	padding:16px 31px;
+    font-weight: bold;
+    margin: 1%;
+    }
+
+    .play{
+        margin: 25%;
+    }    
+
+    .accueil{
+        height: 100%;
+        margin: 0 auto;
+        max-width: 1200px;
+    }
+
+</style>
+
+<script>
+export default {
+  name: 'Accueil',
+  components: {
+    LoginNavbar
+  }
+}
+
+import LoginNavbar from '../components/LoginNavbar.vue'
+</script>

frontend/src/views/Home.vue

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <v-icon name="beer"/>
+    <HelloWorld msg="Yo brozo !"/>
   </div>
 </template>
 
@@ -9,10 +10,14 @@
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+    HelloWorld,
+    'v-icon': Icon
   }
 }
 </script>

frontend/src/views/Inscription.vue

+<template>
+    <div class="inscription">
+        <div class="row _centered">
+            <div class="column _600">
+                <h1>Inscription</h1>
+                <form action="post" class="form">
+                    <div class="row lmargin">
+                        <label for="FirstName"> Prénom </label>
+                        <input type="text" name="FirstName" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="LastName"> Nom </label>
+                        <input type="text" name="LastName" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Login"> Login </label>
+                        <input type="text" name="Login" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Email"> Email </label>
+                        <input type="email" name="Email" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="Password"> Mot de passe </label>
+                        <input type="password" name="Password" required>
+                    </div>
+                    <div class="row lmargin">
+                        <label for="ConfirmPassword"> Confirmer MdP </label>
+                        <input 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;
+    }
+
+    .inscription{
+        height: 100%;
+        margin: 0 auto;
+        max-width: 1200px;
+    }
+
+</style>
+
+<script>
+export default {
+  name: 'Inscription'
+}
+
+</script>

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 lpad">
+                        <label for="Login"> Login </label>
+                        <input type="text" name="Login" required>
+                    </div>
+                    <div class="row lpad">
+                        <label for="Password"> Mot de passe </label>
+                        <input type="password" name="Password" required>
+                    </div>
+                    <div class="row lpad">
+                        <button type="submit" class="btn"> Valider </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ._600{
+        max-width: 600px;
+    }
+
+    .lpad{
+        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>