50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<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> |