From 8522aaf5258e0800ed30e46ebdd98f66444a0698 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Wed, 28 Oct 2020 00:25:58 +0800 Subject: [PATCH] add confirmation password in sign up page, modify text in sign up page --- src/locales/en.js | 13 ++++++-- src/locales/zh_Hans.js | 13 ++++++-- src/views/mobile/Main.vue | 4 +++ src/views/mobile/Signup.vue | 62 +++++++++++++++++++++++++------------ 4 files changed, 67 insertions(+), 25 deletions(-) diff --git a/src/locales/en.js b/src/locales/en.js index 849e9dd5..a6524390 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -69,8 +69,11 @@ export default { 'Your username or Email': 'Your username or Email', 'Password': 'Password', 'Your password': 'Your password', + 'Your password, at least 6 characters': 'Your password, at least 6 characters', + 'Confirmation Password': 'Confirmation Password', + 'Re-enter the password': 'Re-enter the password', 'E-mail': 'E-mail', - 'Your email': 'Your email', + 'Your email address': 'Your email address', 'Nickname': 'Nickname', 'Your nickname': 'Your nickname', 'Log In': 'Log In', @@ -79,8 +82,12 @@ export default { 'Forget Password?': 'Forget Password?', 'Please input username': 'Please input username', 'Please input password': 'Please input password', - 'Please input email': 'Please input email', - 'Please input nickname': 'Please input nickname', + 'Username cannot be empty': 'Username cannot be empty', + 'Password cannot be empty': 'Password cannot be empty', + 'Confirmation password cannot be empty': 'Confirmation password cannot be empty', + 'Password and confirmation password do not match': 'Password and confirmation password do not match', + 'Email address cannot be empty': 'Email address cannot be empty', + 'Nickname cannot be empty': 'Nickname cannot be empty', 'Unable to login': 'Unable to login', 'Two-Factor Authentication': 'Two-Factor Authentication', 'Passcode': 'Passcode', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index 5eb3c909..6e74fa07 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -69,8 +69,11 @@ export default { 'Your username or Email': '你的用户名或注册邮箱', 'Password': '密码', 'Your password': '你的密码', + 'Your password, at least 6 characters': '你的密码，至少6个字符', + 'Confirmation Password': '确认密码', + 'Re-enter the password': '再次输入密码', 'E-mail': '电子邮箱', - 'Your email': '你的电子邮箱', + 'Your email address': '你的电子邮箱地址', 'Nickname': '昵称', 'Your nickname': '你的昵称', 'Log In': '登录', @@ -79,8 +82,12 @@ export default { 'Forget Password?': '找回密码?', 'Please input username': '请输入用户名', 'Please input password': '请输入密码', - 'Please input email': '请输入电子邮箱', - 'Please input nickname': '请输入昵称', + 'Username cannot be empty': '用户名不能为空', + 'Password cannot be empty': '密码不能为空', + 'Confirmation password cannot be empty': '确认密码不能为空', + 'Password and confirmation password do not match': '密码和确认密码不匹配', + 'Email address cannot be empty': '电子邮箱地址不能为空', + 'Nickname cannot be empty': '昵称不能为空', 'Unable to login': '无法登录', 'Two-Factor Authentication': '两步验证', 'Passcode': '验证码', diff --git a/src/views/mobile/Main.vue b/src/views/mobile/Main.vue index 631a72b4..1cb06f78 100644 --- a/src/views/mobile/Main.vue +++ b/src/views/mobile/Main.vue @@ -32,4 +32,8 @@ export default {} margin-top: 3px; margin-left: 0; } + +.lab-list-item-error-info div.item-footer { + color: var(--f7-input-error-text-color) +} diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue index feda1691..b477f981 100644 --- a/src/views/mobile/Signup.vue +++ b/src/views/mobile/Signup.vue @@ -15,16 +15,25 @@ type="password" clear-button :label="$t('Password')" - :placeholder="$t('Your password')" + :placeholder="$t('Your password, at least 6 characters')" :value="password" @input="password = $event.target.value" > + + @@ -37,6 +46,8 @@ :value="nickname" @input="nickname = $event.target.value" > + + @@ -49,13 +60,39 @@ export default { return { username: '', password: '', + confirmPassword: '', email: '', nickname: '' }; }, computed: { inputIsEmpty() { - return !this.username || !this.password || !this.email || !this.nickname; + return !!this.inputEmptyProblemMessage; + }, + inputIsInvalid() { + return !!this.inputInvalidProblemMessage; + }, + inputEmptyProblemMessage() { + if (!this.username) { + return 'Username cannot be empty'; + } else if (!this.password) { + return 'Password cannot be empty'; + } else if (!this.confirmPassword) { + return 'Confirmation password cannot be empty'; + } else if (!this.email) { + return 'Email address cannot be empty'; + } else if (!this.nickname) { + return 'Nickname cannot be empty'; + } else { + return null; + } + }, + inputInvalidProblemMessage() { + if (this.password && this.confirmPassword && this.password !== this.confirmPassword) { + return 'Password and confirmation password do not match'; + } else { + return null; + } } }, methods: { @@ -64,23 +101,10 @@ export default { const app = self.$f7; const router = self.$f7router; - if (!this.username) { - self.$alert('Please input username'); - return; - } + let problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage; - if (!this.password) { - self.$alert('Please input password'); - return; - } - - if (!this.email) { - self.$alert('Please input email'); - return; - } - - if (!this.nickname) { - self.$alert('Please input nickname'); + if (problemMessage) { + self.$alert(problemMessage); return; }