<template>
    <v-card flat>
        <v-form ref="form" v-model="valid" lazy-validation>
            <v-card-text>
                <v-text-field
                    v-model="form.username"
                    :rules="usernameRules"
                    label="Username"
                    required
                    :prepend-icon="mdiAccount"
                ></v-text-field>

                <v-text-field
                    v-model="form.password"
                    :rules="passwordRules"
                    label="Password"
                    required
                    :prepend-icon="mdiLock"
                    type="password"
                ></v-text-field>
            </v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn
                    :disabled="!valid"
                    color="success"
                    type="submit"
                    @click.prevent="userLogin"
                >
                    Login
                </v-btn>
            </v-card-actions>
        </v-form>
    </v-card>
</template>

<script>
import { mdiLock, mdiAccount } from '@mdi/js'

export default {
    name: 'LoginForm',
    data: () => ({
        mdiLock,
        mdiAccount,
        valid: false,
        form: {
            username: '',
            password: '',
        },
        usernameRules: [(v) => !!v || 'Name is required'],
        passwordRules: [(v) => !!v || 'Password is required'],
    }),
    methods: {
        userLogin() {
            this.$auth.loginWith('local', {
                data: this.form,
            })
        },
    },
}
</script>
