<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>
