|
@@ -7,8 +7,14 @@
|
|
|
</p>
|
|
|
<div>
|
|
|
<fancy-input v-model='username' :error='errors.username' width='100%' placeholder='Username'></fancy-input>
|
|
|
- <fancy-input v-model='password' width='100%' placeholder='Password' type='password'></fancy-input>
|
|
|
- <fancy-input v-model='confirmPassword' width='100%' placeholder='Confirm password' type='password'></fancy-input>
|
|
|
+ <fancy-input v-model='password' :error='errors.password' width='100%' placeholder='Password' type='password'></fancy-input>
|
|
|
+ <fancy-input
|
|
|
+ v-model='confirmPassword'
|
|
|
+ :error='errors.confirmPassword'
|
|
|
+ width='100%'
|
|
|
+ placeholder='Confirm password'
|
|
|
+ type='password'
|
|
|
+ ></fancy-input>
|
|
|
<button style='width: 100%;' class='button button--green' @click='createAccount'>Create account</button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -46,9 +52,9 @@
|
|
|
panel: 1,
|
|
|
|
|
|
errors: {
|
|
|
- username: {
|
|
|
- message: 'Error message here!'
|
|
|
- }
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ confirmPassword: ''
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -58,8 +64,19 @@
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
+ clearErrors () {
|
|
|
+ this.errors.username = ''
|
|
|
+ this.errors.password = ''
|
|
|
+ this.errors.confirmPassword = ''
|
|
|
+ },
|
|
|
createAccount () {
|
|
|
- this.panel = 2
|
|
|
+ this.clearErrors()
|
|
|
+
|
|
|
+ if(this.password !== this.confirmPassword) {
|
|
|
+ this.errors.confirmPassword = 'Passwords must match!'
|
|
|
+ } else {
|
|
|
+ this.panel = 2
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|