118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 class="hidden-sm-and-down 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 class="hidden-md-and-up text-xs-center">
|
|
<v-img :src="require('../assets/logo.svg')" contain height="64"></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"
|
|
autofocus
|
|
required
|
|
clearable
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
:error="errorBadCreds"
|
|
></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
|
|
clearable
|
|
:error="errorBadCreds"
|
|
></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"
|
|
},
|
|
errorBadCreds: false
|
|
};
|
|
},
|
|
created() {
|
|
this.$gzevent.$emit("menu-change", {
|
|
isMain: true,
|
|
icon: "",
|
|
title: ""
|
|
});
|
|
},
|
|
methods: {
|
|
login() {
|
|
if (this.input.username != "" && this.input.password != "") {
|
|
this.errorBadCreds = false;
|
|
var that = this;
|
|
auth
|
|
.authenticate(this.input.username, this.input.password)
|
|
.then(() => {
|
|
this.$router.replace({ name: "home" });
|
|
})
|
|
.catch(function(error) {
|
|
/* xeslint-disable-next-line */
|
|
if (
|
|
error.message &&
|
|
error.message.includes("ErrorUserNotAuthenticated")
|
|
) {
|
|
that.errorBadCreds = true;
|
|
// alert("BAD CREDENTIALS - BOO!");
|
|
}
|
|
//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>
|