Refactor

As all points from the epic refactor issue are closed #47 (closed) I am merging this in to master in order to unblock development.

frontend/src/components/Login.vue

 <template>
-  <div class="mx-auto col-md-4 col-xl-2" id="login">
-    <img src="../assets/brand.png"/>
-    <h2>Log in</h2>
-    <p>Log in to your account to grade stuff!</p>
-    <div class="aler alert-danger" v-if="error">
-      <p>{{ error }}</p>
-    </div>
-    <div class="form-group">
-      <input
-        type="text"
-        class="form-control"
-        placeholder="Enter your username"
-        v-model="credentials.username"
-      />
-    </div>
-    <div class="form-group" @keyup.enter="submit()">
-      <input
-        type="password"
-        class="form-control"
-        placeholder="Enter your password"
-        v-model="credentials.password"
-      />
-    </div>
-    <button class="btn btn-primary" @click="submit()">Access</button>
-  </div>
+      <v-container fill-height>
+        <v-layout align-center justify-center>
+          <v-flex text-xs-center md4 lg2>
+            <img src="../assets/brand.png"/>
+            <h3 class="pt-3">Log in</h3>
+            <p>But I corrected them, sir.</p>
+
+            <v-form>
+              <v-text-field
+                label="Username"
+                v-model="credentials.username"
+                required></v-text-field>
+              <v-text-field
+                label="Password"
+                v-model="credentials.password"
+                type="password"
+                required></v-text-field>
+            </v-form>
+            <v-btn color="primary" @click="submit()">Access</v-btn>
+          </v-flex>
+        </v-layout>
+      </v-container>
 </template>
 
 
@@ -55,8 +52,4 @@
 
 
 <style scoped>
-  #login {
-    text-align: center;
-    margin-top: 10%;
-  }
 </style>