add functions to the auth page
This commit is contained in:
parent
8b89b0bf20
commit
e700a20ee6
|
@ -1,22 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<base-card>
|
<base-card>
|
||||||
<form @submit.prevent="">
|
<form @submit.prevent="submitForm">
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label for="email">E-Mail</label>
|
<label for="email">E-Mail</label>
|
||||||
<input type="email" id="email" />
|
<input type="email" id="email" v-model.trim="email" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input type="password" id="password" />
|
<input type="password" id="password" v-model.trim="password" />
|
||||||
</div>
|
</div>
|
||||||
<base-button>Login</base-button>
|
<p v-if="!formIsValid">
|
||||||
<base-button type="button" mode="flat">Signup instead</base-button>
|
Please enter a valid email and password (min. 6 characters).
|
||||||
|
</p>
|
||||||
|
<base-button>{{ submitButtonCaption }}</base-button>
|
||||||
|
<base-button type="button" mode="flat" @click="switchAuthMode">{{
|
||||||
|
switchModeButtonCaption
|
||||||
|
}}</base-button>
|
||||||
</form>
|
</form>
|
||||||
</base-card>
|
</base-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
formIsValid: true,
|
||||||
|
mode: 'login'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
submitButtonCaption() {
|
||||||
|
if (this.mode === 'login') {
|
||||||
|
return 'Login';
|
||||||
|
} else {
|
||||||
|
return 'Signup';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
switchModeButtonCaption() {
|
||||||
|
if (this.mode === 'login') {
|
||||||
|
return 'Signup instead';
|
||||||
|
} else {
|
||||||
|
return 'Login instead';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitForm() {
|
||||||
|
this.formIsValid = true;
|
||||||
|
if (
|
||||||
|
this.email === '' ||
|
||||||
|
!this.email.includes('@') ||
|
||||||
|
this.password.length < 6
|
||||||
|
) {
|
||||||
|
this.formIsValid = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
switchAuthMode() {
|
||||||
|
if (this.mode === 'login') {
|
||||||
|
this.mode = 'signup';
|
||||||
|
} else {
|
||||||
|
this.mode = 'login';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Reference in New Issue