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

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

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