add confirmation password in sign up page, modify text in sign up page

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',
+    'Username cannot be empty': 'Username cannot be empty',
-    'Please input nickname': 'Please input nickname',
+    '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',

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': '请输入电子邮箱',
+    'Username cannot be empty': '用户名不能为空',
-    'Please input nickname': '请输入昵称',
+    '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': '验证码',

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)
+}
 </style>

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"
             ></f7-list-input>
 
+            <f7-list-input
+                type="password"
+                clear-button
+                :label="$t('Confirmation Password')"
+                :placeholder="$t('Re-enter the password')"
+                :value="confirmPassword"
+                @input="confirmPassword = $event.target.value"
+            ></f7-list-input>
+
             <f7-list-input
                 type="email"
                 clear-button
                 :label="$t('E-mail')"
-                :placeholder="$t('Your email')"
+                :placeholder="$t('Your email address')"
                 :value="email"
                 @input="email = $event.target.value"
             ></f7-list-input>
@@ -37,6 +46,8 @@
                 :value="nickname"
                 @input="nickname = $event.target.value"
             ></f7-list-input>
+
+            <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
         </f7-list>
 
         <f7-button large fill :class="{ 'disabled': inputIsEmpty }" :text="$t('Sign Up')" @click="signup"></f7-button>
@@ -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) {
+            let problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
-                self.$alert('Please input username');
-                return;
-            }
 
-            if (!this.password) {
+            if (problemMessage) {
-                self.$alert('Please input password');
+                self.$alert(problemMessage);
-                return;
-            }
-
-            if (!this.email) {
-                self.$alert('Please input email');
-                return;
-            }
-
-            if (!this.nickname) {
-                self.$alert('Please input nickname');
                 return;
             }