96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<TitleBar/>
|
||
|
|
<v-content>
|
||
|
|
<v-container
|
||
|
|
class="fill-height"
|
||
|
|
fluid
|
||
|
|
>
|
||
|
|
<v-row
|
||
|
|
align="center"
|
||
|
|
justify="center"
|
||
|
|
>
|
||
|
|
<v-col
|
||
|
|
cols="12"
|
||
|
|
sm="8"
|
||
|
|
md="4"
|
||
|
|
>
|
||
|
|
<v-card class="elevation-12">
|
||
|
|
<v-toolbar
|
||
|
|
color="blue accent-4"
|
||
|
|
dark
|
||
|
|
flat
|
||
|
|
>
|
||
|
|
<v-toolbar-title>Login form</v-toolbar-title>
|
||
|
|
<v-spacer />
|
||
|
|
</v-toolbar>
|
||
|
|
<v-card-text>
|
||
|
|
<v-form >
|
||
|
|
<v-text-field
|
||
|
|
label="Login"
|
||
|
|
name="login"
|
||
|
|
prepend-icon="person"
|
||
|
|
type="text"
|
||
|
|
v-model="username"
|
||
|
|
ref="first"
|
||
|
|
@keyup.enter="login"
|
||
|
|
@change="resetError"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<v-text-field
|
||
|
|
id="password"
|
||
|
|
label="Password"
|
||
|
|
name="password"
|
||
|
|
prepend-icon="lock"
|
||
|
|
type="password"
|
||
|
|
v-model="password"
|
||
|
|
@keyup.enter="login"
|
||
|
|
@change="resetError"
|
||
|
|
/>
|
||
|
|
</v-form>
|
||
|
|
</v-card-text>
|
||
|
|
<v-alert v-if="loginFail" dense type="error">{{ loginFail }}</v-alert>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-spacer />
|
||
|
|
<v-btn @click="login" @submit.prevent="login" color="primary">Login</v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-container>
|
||
|
|
</v-content>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TitleBar from "@/components/TitleBar";
|
||
|
|
export default {
|
||
|
|
name: "Login",
|
||
|
|
components: {TitleBar},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
username: null,
|
||
|
|
password: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
login() {
|
||
|
|
let o = {username: this.username, password: this.password}
|
||
|
|
this.$store.dispatch("doLogin", o)
|
||
|
|
},
|
||
|
|
resetError() {
|
||
|
|
this.$store.dispatch("resetLoginError")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
loginFail() {
|
||
|
|
return this.$store.state.loginError
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|