hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Add Signup validation and feedback

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-12 15:03:52 +02:00
parent 719a3a9f4f
commit c1abc028e1
1 changed files with 76 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
web/src/components/SignupForm.vue
View File

@ -1,50 +1,65 @@
<template> <template>
<div> <div>
<b-form @submit.prevent="handleSubmit"> <b-card class="mt-3" header="Signup">
<b-form-group <b-form @submit.prevent="handleSubmit">
id="email-group" <b-form-group
label="Email address:" id="email-group"
label-for="email" label="Email address:"
description="We'll never share your email with anyone else." label-for="email"
> description="We'll never share your email with anyone else."
<b-form-input >
id="email" <b-form-input
v-model="form.email" id="email"
type="email" v-model="form.email"
required type="email"
placeholder="Enter email" required
></b-form-input> placeholder="Enter email"
</b-form-group> ></b-form-input>
</b-form-group>
<b-form-group id="username-group" label="Username:" label-for="username"> <b-form-group id="username-group" label="Username:" label-for="username">
<b-form-input <b-form-input
id="username" id="username"
v-model="form.username" v-model="form.username"
required required
placeholder="Enter a username" placeholder="Enter a username"
></b-form-input> :state="validUsername"
</b-form-group> ></b-form-input>
<b-form-invalid-feedback :state="validUsername">
Your username must be at least 5 characters long.
</b-form-invalid-feedback>
</b-form-group>
<b-form-group id="password-group" label="Password:" label-for="password"> <b-form-group id="password-group" label="Password:" label-for="password">
<b-form-input <b-form-input
id="password" id="password"
v-model="form.password" v-model="form.password"
required required
placeholder="Enter a password" placeholder="Enter a password"
></b-form-input> :state="validPassword"
</b-form-group> ></b-form-input>
<b-form-invalid-feedback :state="validPassword">
Your password must be at least 6 characters long.
</b-form-invalid-feedback>
</b-form-group>
<b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm"> <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
<b-form-input <b-form-input
id="password-confirm" id="password-confirm"
v-model="form.passwordConfirm" v-model="form.passwordConfirm"
required required
placeholder="Confirm your password" placeholder="Confirm your password"
></b-form-input> :state="passwordEquals"
</b-form-group> ></b-form-input>
<b-form-invalid-feedback :state="passwordEquals">
Your password must be at least 6 characters long.
</b-form-invalid-feedback>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</b-card>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
<b-card class="mt-3" header="Form Data Result"> <b-card class="mt-3" header="Form Data Result">
<pre class="m-0">{{ form }}</pre> <pre class="m-0">{{ form }}</pre>
</b-card> </b-card>
@ -61,12 +76,29 @@
email: '', email: '',
password: '', password: '',
passwordConfirm: '' passwordConfirm: ''
} },
}
},
computed: {
passwordEquals: function () {
return this.form.password === this.form.passwordConfirm
},
validUsername: function () {
return this.form.username.length >= 5
},
validPassword: function () {
return this.form.password.length >= 6
},
validInput() {
return this.validUsername && this.passwordEquals && this.validPassword;
} }
}, },
methods: { methods: {
handleSubmit(){ handleSubmit() {
console.log("submitted")
if (this.validInput) {
console.log("Valid")
}
} }
} }
} }