faszom

src/views/About.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+  <b-container>
+    <div class="about">
+      <h1>This is an about page</h1>
+    </div>
+  </b-container>
 </template>

src/views/Home.vue

@@ -1,18 +1,17 @@
 <template>
+  <b-container>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>home</h1>
   </div>
+  </b-container>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+
   }
 }
 </script>

src/views/Login.vue

@@ -0,0 +1,75 @@
+<template>
+  <b-container>
+    <b-row>
+      <b-col class="mx-auto" cols="12" lg="4" sm="8">
+        <b-card class="mt-5">
+          <div class="my-4 text-center">
+            <b-img src="@/assets/musicbrainz.svg" id="provider-banner"/>
+          </div>
+          <div class="mt-4">
+
+            <b-form @submit.prevent="performLogin" v-if="true">
+              <b-form-group
+                  id="input-group-1"
+                  label="Username:"
+                  label-for="input-1"
+              >
+                <b-form-input
+                    id="input-1"
+                    v-model="form.username"
+                    required
+                    placeholder=""
+                    autocomplete="off"
+                ></b-form-input>
+              </b-form-group>
+
+              <b-form-group id="input-group-2" label="Password:" label-for="input-2"
+                            description="Yes, the same one you use on MusicBrainz"
+              >
+                <b-form-input
+                    id="input-2"
+                    v-model="form.password"
+                    required
+                    placeholder=""
+                    autocomplete="off"
+                    type="password"
+                ></b-form-input>
+              </b-form-group>
+
+              <div class="text-right">
+                <b-button type="submit" variant="primary">Login</b-button>
+              </div>
+            </b-form>
+
+
+          </div>
+        </b-card>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      form: {
+        username: "",
+        password: ""
+      }
+    }
+  },
+  methods: {
+    performLogin() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+#provider-banner {
+  width: 75%;
+}
+</style>