login view

frontend/src/router/index.js

@@ -5,6 +5,8 @@ import Profile from "../views/profile.vue";
 import missing from "../views/missing.vue";
 import Info from "../views/Info.vue";
 import TimeRecords from "../views/TimeRecords.vue";
+import About from "../views/About.vue";
+import Login from "../views/Login.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -18,6 +20,11 @@ const routes = [
     name: "TimeRecords",
     component: TimeRecords
   },
+  {
+    path: "/login",
+    name: "Login",
+    component: Login
+  },
   {
     path: "/profile/:id",
     name: "Profile",
@@ -38,11 +45,7 @@ const routes = [
   {
     path: "/about",
     name: "About",
-    // 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: "about" */ "../views/About.vue")
+    component: About
   },
   {
     path: '*',

frontend/src/views/Login.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="login">
+      <form @submit="login">
+        <p>Username:</p>
+        <input type="text" name="username" placeholder="Username" v-model="username">
+        <p>Password:</p>
+        <input type="password" name="password" placeholder="Password" v-model="password">
+        <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: "Login",
+  data() {
+    return {
+      username: '',
+      password: ''
+    }
+  },
+  methods: {
+    login(e) {
+      e.preventDefault();
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .login{
+    color: #EBE7D9;
+
+  }
+  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>