Add basic login and register functionality

src/components/Login.vue

@@ -1,7 +1,10 @@
 <template>
   <v-form v-model="valid">
     <v-container>
-      <v-col cols="12" class="mb-4">
+      <v-col
+        cols="12"
+        class="mb-4"
+      >
         <h1 class="display-2 font-weight-bold mb-3">
           Login
         </h1>
@@ -31,6 +34,13 @@
           required
         />
       </v-col>
+
+      <v-btn
+        class="mx-3 mb-5"
+        @click="login"
+      >
+        Login
+      </v-btn>
     </v-container>
   </v-form>
 </template>
@@ -47,6 +57,22 @@ export default {
     passwordRules: [
       v => !!v || 'Password is required'
     ]
-  })
+  }),
+  methods: {
+    login () {
+      this.$http.post('https://localhost:3000/login/password', {
+        username: this.username,
+        password: this.password
+      })
+        .then(response => {
+          if (response.status === 200) {
+            this.$router.push('/')
+          }
+        })
+        .catch(function (error) {
+          console.error(error.response)
+        })
+    }
+  }
 }
 </script>

src/components/Register.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-form v-model="valid">
+    <v-container>
+      <v-col
+        cols="12"
+        class="mb-4"
+      >
+        <h1 class="display-2 font-weight-bold mb-3">
+          Register
+        </h1>
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="4"
+      >
+        <v-text-field
+          v-model="name"
+          :rules="[rules.required]"
+          label="Name"
+          required
+        />
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="4"
+      >
+        <v-text-field
+          v-model="username"
+          :rules="[rules.required]"
+          label="Username"
+          required
+        />
+      </v-col>
+
+      <v-col
+        cols="12"
+        md="4"
+      >
+        <v-text-field
+          v-model="password"
+          type="password"
+          :rules="[rules.required]"
+          label="Password"
+          required
+        />
+      </v-col>
+
+      <v-btn
+        class="mx-3 mb-5"
+        @click="register"
+      >
+        Register
+      </v-btn>
+    </v-container>
+  </v-form>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    valid: false,
+    name: '',
+    username: '',
+    password: '',
+    rules: {
+      required: v => !!v || 'Required'
+    }
+  }),
+  methods: {
+    register () {
+      this.$http.post('https://localhost:3000/users', {
+        name: this.name,
+        username: this.username,
+        password: this.password
+      })
+        .then(response => {
+          if (response.status === 200) {
+            this.$router.push('/')
+          }
+        })
+        .catch(function (error) {
+          console.error(error.response)
+        })
+    }
+  }
+}
+</script>