92 lines
2.2 KiB
Vue
92 lines
2.2 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"
|
|
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>
|