<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">
                        <input type="hidden" name="_token" :value="this.$root.csrfToken" />
                        <v-container>
                            <v-row>
                                <v-col cols="12">
                                    Login E-Mail: {{ userEmail }}
                                </v-col>
                            </v-row>
                            <v-row>
                                <v-col cols="6">
                                    <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-col cols="6">
                                    <v-text-field 
                                    type="password" 
                                    prepend-inner-icon="mdi-lock" 
                                    name="confirmPassword" 
                                    placeholder=" " 
                                    persistent-placeholder
                                    v-model="confirmPassword"
                                    :rules="repeatPasswordRules"
                                    label="Confirm 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">
                                        Activate Account
                                    </v-btn>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-form>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {
    props: [
      'userEmail'
    ],
    data: () => ({
        valid: false,
        password: '',
        confirmPassword:'',
        passwordRules: [
            v => !!v || 'Password is required',
            v => v && v.length >= 8 || 'Minimal password lenght 8 characters',
        ],
    }),
    computed: {
        repeatPasswordRules() {
            return [
            (v) => !!v || 'Confirm Password is required',
            (v) => (v === this.password) || 'Passwords doesn\'t match',
            ];
        },
    },
    methods: {
        submit () {
            if (this.$refs.form.validate()) {
                form.submit();
            }
        },
    },
}
</script>

