<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",
        methods: {
            async userLogin() {
                try {
                    const response = await this.$auth.loginWith('local', {data: this.form})

                } catch (err) {
                    console.log(err)
                }
            }
        },
        data: () => ({
            valid: false,
            form: {
                username: '',
                password: ''
            },
            usernameRules: [
                v => !!v || 'Name is required',
            ],
            passwordRules: [
                v => !!v || 'Password is required',
            ]
        }),
    }
</script>
