ayanova/src/views/login.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-container fluid>
+    <v-layout row wrap="">
+      <v-flex xs12 class="text-xs-center" mt-5 ml-5 pl-5>
+        <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
+      </v-flex>
+      <v-flex xs12 sm6 offset-sm3 mt-3>
+        <form>
+          <v-layout column>
+            <v-flex>
+              <v-text-field
+                name="username"
+                v-model="input.username"
+                prepend-icon="fa-user"
+                label="User"
+                required
+              ></v-text-field>
+            </v-flex>
+            <v-flex>
+              <v-text-field
+                name="password"
+                v-model="input.password"
+                prepend-icon="fa-key"
+                label="Password"
+                type="password"
+                required
+              ></v-text-field>
+            </v-flex>
+            <v-flex class="text-xs-center" mt-1>
+              <v-btn color="primary" v-on:click="login()">
+                <v-icon>fa-sign-in-alt</v-icon>
+              </v-btn>
+            </v-flex>
+          </v-layout>
+        </form>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+/*  xeslint-disable */
+import auth from "../api/auth";
+export default {
+  name: "Login",
+  data() {
+    return {
+      input: {
+        username: "manager",
+        password: "l3tm3in"
+      }
+    };
+  },
+  methods: {
+    login() {
+      if (this.input.username != "" && this.input.password != "") {
+        auth
+          .authenticate(this.input.username, this.input.password)
+          .then(() => {
+            this.$router.replace({ name: "home" });
+          })
+          .catch(function(error) {
+            /* xeslint-disable-next-line */
+            //console.log(error);
+            alert("login failed: " + error);
+          });
+      }
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    next(() => {
+      auth.logout();
+      next();
+    });
+  }
+};
+</script>
+
+<style scoped>
+#login {
+  width: 500px;
+  border: 1px solid #cccccc;
+  background-color: #ffffff;
+  margin: auto;
+  margin-top: 200px;
+  padding: 20px;
+}
+</style>