Registering view (tears and suffering)

frontend/src/components/form/ErrorMessage.vue

+<template v-if="this.condition">
+    <p class="error-message" :id="this.id">{{errormessage}}</p>
+</template>
+
+<script>
+export default {
+    props: {
+        errormessage: {type: [String, Boolean], default: false},
+        id: {type: String},
+        condition: {type: String, default: 'false'}
+    }
+}
+</script>
+
+<style>
+.error-message{
+    color: red;
+    font-weight: bold;
+    text-align: center;
+    font-size: 24px;
+}
+</style>
\ No newline at end of file

frontend/src/components/form/PwdInput.vue

 <template>
     <div class="form-group row">
                 <label class="col-md-4 col-form-label text-md-right" :for="this.id">{{label}}</label>
-                <input class="col-md-6 form-control " type="password" :id="this.id" :name="this.id">
+                <input class="col-md-6 form-control " type="password" :id="this.id" :name="this.id" :onchange="this.toogle">
             
             </div>
 </template>
@@ -10,7 +10,8 @@
 export default {
     props: {
         id: { type: String, default: ''},
-        label: { type: String, default: 'label' }
+        label: { type: String, default: 'label' },
+        toogle: { type: String, default: '' }
     }
 }
 </script>

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',
@@ -18,6 +13,15 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
+  {
+    path: '/home',
+    name: 'Home',
+    component: () => import('../views/Home.vue')
+  },{
+    path: '/register',
+    name: 'Register',
+    component: () => import('../views/Register.vue')
+  },
   {
     path: '/login',
     name: 'Login',

frontend/src/views/Login.vue

@@ -37,13 +37,15 @@ export default {
     position: relative;
 }
 
-form{
+.login-page > form{
     flex-direction: column;
     display: flex;
     width: 900px;
     background-color: rgba(196, 196, 196, 0.6);
     margin: 0 auto;
-    padding: 50px;
+    padding-top: 50px;
+    padding-bottom: 40px;
+    
 }
 
 

frontend/src/views/Register.vue

+<template>
+    <div class="register-page">
+        <page-title pagetitle="S'Inscrire"/>
+        <form action="#" @submit.prevent="onSubmit">
+            <div class="form-content">
+                <text-input id="mail" label="Email"/>
+                <text-input id="pseudo" label="Pseudo"/>
+                <pwd-input id="password1" label="Mot de passe"/>
+                <pwd-input id="password2" label="Confirmer"/>
+                <error-message id="error-password" errormessage="Les mots de passe ne correspondent pas." v-show="this.showPwdError"/>
+                <error-message id="error-back"  errormessage="Cet email ou ce pseudo est déjà pris." v-show="this.showBackError"/>
+                
+                
+            </div>
+            <svg-button svg="/icons/back.svg"/>
+            <svg-button svg="/icons/validate.svg"/>
+        </form>
+    </div>
+</template>
+
+<script>
+import PageTitle from '@/components/PageTitle.vue'
+import SvgButton from '@/components/SvgButton.vue'
+import TextInput from '@/components/form/TextInput.vue'
+import PwdInput from '@/components/form/PwdInput.vue'
+import ErrorMessage from '@/components/form/ErrorMessage.vue'
+export default {
+    name: 'Register',
+    components: {
+        PageTitle,
+        SvgButton,
+        TextInput,
+        PwdInput,
+        ErrorMessage
+    },
+    data() {
+        return {
+            showPwdError : false,
+            showBackError : false,
+            
+        }
+    },
+    methods: {
+        updateShowPwdError: function(){
+            this.showPwdError = (document.getElementById('password1').value !== document.getElementById('password2').value);
+        },
+        updateShowBackError: function(){
+            this.showBackError = false; //TODO
+        },
+        onSubmit: function(){
+            this.showPwdError = (document.getElementById('password1').value !== document.getElementById('password2').value);
+            if (this.showPwdError) {
+                return;
+            }
+            this.showBackError = false; //TODO
+            if (this.showBackError) {
+                return;
+            }
+            this.$router.push('home');
+        }
+    }
+}
+</script>
+
+<style>
+
+.register-page .form-content{
+    flex-direction: column;
+    display: flex;
+    width: 900px;
+    background-color: rgba(196, 196, 196, 0.6);
+    margin: 0 auto;
+    padding-top: 50px;
+}
+
+
+*, ::before, ::after {
+    box-sizing: border-box;
+}
+</style>
\ No newline at end of file