<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.email"
                    :rules="emailRules"
                    label="Email"
                    required
                    prepend-icon="mdi-at"
                ></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-text-field
                    v-model="confirm"
                    :rules="confirmRules"
                    label="Confirm your password"
                    required
                    prepend-icon="mdi-lock"
                    type="password"
                ></v-text-field>
            </v-form>
        </v-card-text>
        <v-divider />
        <v-card-actions>
            <v-spacer />
            <v-btn :disabled="!valid" color="success" @click="registerUser">
                Register
            </v-btn>
        </v-card-actions>
    </v-card>
</template>

<script>
export default {
    name: 'RegisterForm',
    data: () => ({
        valid: false,
        form: {
            username: '',
            email: '',
            password: '',
        },
        usernameRules: [(v) => !!v || 'Name is required'],
        emailRules: [
            (v) => !!v || 'Email is required',
            (v) => /.+@.+/.test(v) || 'E-mail must be valid',
        ],
        passwordRules: [
            (v) => !!v || 'Password is required',
            (v) => v.length >= 6 || 'Password must be longer than 6 characters',
        ],
        confirm: '',
        confirmRules: [
            (v) => !!v || 'Password is required',
            // v => confirmEquals() || 'Both passwords must be equals',
        ],
    }),
    methods: {
        async registerUser() {
            const data = await this.$axios.post('/user', this.form)
            console.log(data)
        },
    },
}
</script>
