Added login background

frontend/src/App.vue

@@ -64,7 +64,8 @@ export default {
   }
 
   #app{
-    margin: 2em 1em;
+    margin: 0 1em;
+    padding-top: 1.5em;
   }
 
   .menu-avatar{

frontend/src/components/Login.vue

@@ -1,38 +1,41 @@
 <template>
-  <div class="ui middle aligned center aligned grid">
-    <div class="column">
-      <h2 class="ui blue image header">
-        <div class="content">
-          Login
-        </div>
-      </h2>
-      <form class="ui large form" id="loginform">
-        <div class="ui stacked segment">
-          <div class="field">
-            <div class="ui left icon input">
-              <i class="user icon"></i>
-              <input v-focus type="text" name="username" placeholder="Username" v-model="credentials.username">
-            </div>
+  <div class="login-wrapper">
+    <div class="ui middle aligned center aligned grid">
+      <div class="column">
+        <h2 class="ui blue image header">
+          <div class="content">
+            Login
           </div>
-          <div class="field">
-            <div class="ui left icon input">
-              <i class="lock icon"></i>
-              <input type="password" name="password" placeholder="Password" v-model="credentials.password" @keyup.enter="submit">
+        </h2>
+        <form class="ui large form" id="loginform">
+          <div class="ui stacked segment">
+            <div class="field">
+              <div class="ui left icon input">
+                <i class="user icon"></i>
+                <input v-focus type="text" name="username" placeholder="Username" v-model="credentials.username">
+              </div>
             </div>
+            <div class="field">
+              <div class="ui left icon input">
+                <i class="lock icon"></i>
+                <input type="password" name="password" placeholder="Password" v-model="credentials.password"
+                       @keyup.enter="submit">
+              </div>
+            </div>
+            <div class="ui fluid large blue submit button" @click="submit()">Login</div>
           </div>
-          <div class="ui fluid large blue submit button" @click="submit()">Login</div>
-        </div>
 
-        <div class="ui info message" v-if="loading">
-          <icon name="refresh" spin></icon>&nbsp;&nbsp;
-          Loggig you in...
-        </div>
+          <div class="ui info message" v-if="loading">
+            <icon name="refresh" spin></icon>&nbsp;&nbsp;
+            Loggig you in...
+          </div>
 
-        <div class="ui error message" v-if="error" style="display: block;">
-          {{ error }}
-        </div>
+          <div class="ui error message" v-if="error" style="display: block;">
+            {{ error }}
+          </div>
 
-      </form>
+        </form>
+      </div>
     </div>
   </div>
 </template>
@@ -56,7 +59,7 @@
     beforeMount () {
       // Check if the user is already logged in, if so, redirect him to the homepage
       if (auth.user.authenticated) {
-        router.push({ name: 'home' })
+        router.push({name: 'home'})
       }
     },
 
@@ -76,21 +79,26 @@
 </script>
 
 <style scoped>
-  body {
-    background-color: #efefef;
-    margin-top: -1em;
-  }
-  body > .grid {
-    height: 100%;
-  }
   .image {
     margin-top: -100px;
   }
+
   .column {
     max-width: 450px;
   }
 
-  .error.message{
+  .error.message {
     display: block;
   }
+
+  .login-wrapper {
+    background: url("../../static/bg.jpg") no-repeat center;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding-top: 5em;
+  }
 </style>