register view

frontend/src/router/index.js

@@ -7,6 +7,7 @@ import Info from "../views/Info.vue";
 import TimeRecords from "../views/TimeRecords.vue";
 import About from "../views/About.vue";
 import Login from "../views/Login.vue";
+import Register from "../views/Register.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -25,6 +26,11 @@ const routes = [
     name: "Login",
     component: Login
   },
+  {
+    path: "/register",
+    name: "Register",
+    component: Register
+  },
   {
     path: "/profile/:id",
     name: "Profile",

frontend/src/views/Login.vue

@@ -2,9 +2,9 @@
     <div class="login">
       <form @submit="login">
         <p>Username:</p>
-        <input type="text" name="username" placeholder="Username" v-model="username">
+        <input type="text" name="username" placeholder="Username" v-model="username"  required="required" oninvalid="this.setCustomValidity('Username cannot be empty.')" >
         <p>Password:</p>
-        <input type="password" name="password" placeholder="Password" v-model="password">
+        <input type="password" name="password" placeholder="Password" v-model="password"  required="required" oninvalid="this.setCustomValidity('Password cannot be empty.')">
         <br>
         <input type="submit" value="Submit">
         <p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>

frontend/src/views/Register.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="register">
+      <form @submit="login">
+        <p>Firstname:</p>
+        <input type="text" name="firstname" placeholder="Firstname" v-model="firstname"  required oninvalid="this.setCustomValidity('Firstname cannot be empty.')" oninput="this.setCustomValidity('')">
+        <p>Lastname:</p>
+        <input type="text" name="lastname" placeholder="Lastname" v-model="lastname"  required oninvalid="this.setCustomValidity('Lastname cannot be empty.')" oninput="this.setCustomValidity('')">
+        <p>Username:</p>
+        <input type="text" name="username" placeholder="Username" v-model="username"  required oninvalid="this.setCustomValidity('Username cannot be empty.')" oninput="this.setCustomValidity('')">
+        <p>Password:</p>
+        <input type="password" name="password" placeholder="Password" v-model="password"  required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
+        <p>Confirm Password:</p>
+        <input type="password" name="passwordC" placeholder="Password" v-model="passwordC"  required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
+        <br>
+        <input type="submit" value="Submit">
+        <p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>
+      </form>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "Register",
+  data() {
+    return {
+      firstname: '',
+      lastname: '',
+      username: '',
+      password: '',
+      passwordC: ''
+
+    }
+  },
+  methods: {
+    login(e) {
+      e.preventDefault();
+        if (this.password == this.passwordC) {
+          //register
+        }else {
+          alert("The password confirmation does not match the password");
+        }
+    }
+  }
+}
+
+// var password1 = document.getElementsByName('password');
+// var password2 = document.getElementsByName('passwordC');
+//
+// var checkPasswordValidity = function() {
+//     if (password1.value != password2.value) {
+//         password2.setCustomValidity('Passwörter müssen übereinstimmen!');
+//     } else {
+//         password2.setCustomValidity('');
+//     }
+// };
+//
+// password1.addEventListener('change', checkPasswordValidity);
+// password2.addEventListener('change', checkPasswordValidity);
+
+</script>
+
+<style scoped>
+  .register{
+    color: #EBE7D9;
+    font-size: 10px;
+
+  }
+  form {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  input[type="text"], input[type=password]  {
+    justify-content: center;
+    width: 40vw;
+    height: 20px;
+    background-color: #131313;
+    border: 2px solid  #0096ff;
+    color: #EBE7D9;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 12px;
+    box-sizing: content-box;
+  }
+  input[type="submit"] {
+    justify-content: center;
+    width: 40vw;
+    height: 20px;
+    border: 2px solid #0096ff ;
+    color: #EBE7D9;
+    background-color: #131313;
+    border-radius: 3px;
+    box-sizing: content-box;
+    padding: 0px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 12px;
+  }input[type="submit"]:hover {
+    justify-content: center;
+    width: 40vw;
+    height: 20px;
+    border: 2px solid #0096ff ;
+    color: #EBE7D9;
+    background-color:  #272727;
+    border-radius: 3px;
+    box-sizing: content-box;
+    padding: 0px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 12px;
+  }
+
+</style>