<template>
    <v-container fill-height fluid>
        <v-row align="center" justify="center" style="height: 90vh !important;">
            <v-col cols="12" sm="4" >
                <v-card elevation="10" rounded="lg">
                    <v-form id="form" v-model="valid" lazy-validation ref="form" method="post" action="/login">
                        <input type="hidden" name="_token" :value="this.$root.csrfToken" />
                        <v-container>
                            <v-row>
                                <v-col cols="12">
                                    <v-text-field 
                                    type="email" 
                                    prepend-inner-icon="mdi-account-outline" 
                                    name="email" 
                                    placeholder="" 
                                    persistent-placeholder
                                    v-model="email"
                                    :rules="emailRules"
                                    label="E-mail"
                                    required></v-text-field>
                                </v-col>
                            </v-row>
                            <v-row>
                                <v-col cols="12">
                                    <v-text-field 
                                    type="password" 
                                    prepend-inner-icon="mdi-lock" 
                                    name="password" 
                                    placeholder=" " 
                                    persistent-placeholder
                                    v-model="password"
                                    :rules="passwordRules"
                                    label="Passwprd"
                                    required></v-text-field>
                                </v-col>
                            </v-row>
                    
                            <v-row>
                                <v-col cols="12">
                                    <v-btn block elevation=0 :disabled="!valid" color="primary" class="mr-4" type="submit" @click="submit">
                                        Login
                                    </v-btn>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-form>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>



<style scoped>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

</style>

<script>
export default {
    data: () => ({
        valid: false,
        password: '',
        email: '',
        emailRules: [
            v => !!v || 'E-Mail is required',
            //v => /.+@.+/.test(v) || 'Wrong E-mail format',
        ],
        passwordRules: [
            v => !!v || 'Password is required',
        ],
    }),

    methods: {
        submit () {
            if (this.$refs.form.validate()) {
                form.submit();
            }
        },
    },
}
</script>

