<template>
    <v-row justify="center">
        <v-col cols="12" sm="12" md="6" lg="4" xl="2">
            <v-card shaped elevation="5" rounded>
                <v-toolbar class="rounded-t" color="indigo darken-2" tile dark>
                    <v-toolbar-title>Logowanie</v-toolbar-title>
                </v-toolbar>
                <v-container class="py-10 px-10 text-center">
                    <ValidationObserver
                        ref="obs"
                        v-slot="{ invalid, handleSubmit }"
                    >
                        <v-form @submit.prevent="handleSubmit(onSubmit)">
                            <ValidationProvider
                                name="Login"
                                rules="required"
                                v-slot="{ errors }"
                            >
                                <v-text-field
                                    v-model="username"
                                    :error-messages="errors"
                                    label="Login"
                                    color="indigo"
                                    outlined
                                    dense
                                    required
                                />
                            </ValidationProvider>
                            <ValidationProvider
                                name="Haslo"
                                rules="required"
                                v-slot="{ errors }"
                            >
                                <v-text-field
                                    v-model="password"
                                    :error-messages="errors"
                                    type="password"
                                    label="Hasło"
                                    color="indigo"
                                    outlined
                                    dense
                                    required
                                />
                            </ValidationProvider>
                            <v-btn
                                class="mt-15"
                                color="indigo darken-2"
                                dark
                                :disabled="invalid"
                            >
                                <font-awesome-icon icon="unlock" class="mr-2" />
                                Zaloguj
                            </v-btn>
                        </v-form>
                    </ValidationObserver>
                </v-container>
            </v-card>
        </v-col>
    </v-row>
</template>

<script>
import {
    ValidationObserver,
    ValidationProvider,
    setInteractionMode,
} from 'vee-validate'

setInteractionMode('edger')

export default {
    name: 'LoginPage',

    components: { ValidationProvider, ValidationObserver },

    data: () => ({
        username: '',
        password: '',
        loading: '',
    }),

    methods: {
        onSubmit() {
            this.loading = true
            let username = this.username
            let password = this.password
            this.$store
                .dispatch('login', { username, password })
                .then(() => this.$router.push('/'))
                .catch(err => console.log(err))
        },
    },
}
</script>

<style scoped></style>