<template>
    <v-form>
        <v-text-field label="Email" v-model="form.email" type="email" required></v-text-field>
        <v-text-field label="Password" v-model="form.password" type="password" required></v-text-field>
        <template v-if="mode==='register'">
            <v-text-field label="Confirm Password" v-model="form.passConfirm" type="password" required></v-text-field>
            <v-img :src="`/api/user/captcha?${captchaIter}`" class="my-2" height="100px"></v-img>
            <v-text-field label="Enter Captcha" v-model="form.captcha" required></v-text-field>
        </template>
        <v-btn @click="login" :color="mode==='login' ? 'green' : 'grey'">Sign in</v-btn>
        <v-btn @click="register" :color="mode==='register' ? 'green' : 'grey'" class="float-right">Sign up</v-btn>
    </v-form>
</template>

<script>
export default {
    data() {
        return {
            form:{
                email: '',
                password: '',
                passConfirm: ''
            },
            mode:'login', // or 'register'
            captchaIter: Math.random()
        }
    },
    methods: {
        async login() {
            // Implement login logic here
            if (this.mode == 'login') {
                // Perform login
                await this.$api.user.signin(this.form);
                await this.loadUser();
            } else {
                this.mode = 'login';
            }
        },
        async register() {
            if (this.mode == 'register') {
                // Implement registration logic here
                await this.$api.user.signup(this.form);
                await this.loadUser();
            } else {
                this.mode = 'register';
            }
        }
    }
}
</script>