Update signup error messages (#10483)

* prints first error message only

* update signup error messages, missing password not working (wip)

* remove alerts, show notEmpty, first error only per param, update unit test

* move changes to client side

website/client/app.vue

@@ -331,9 +331,29 @@ export default {
         ];
         if (notificationNotFoundMessage.indexOf(errorMessage) !== -1) snackbarTimeout = true;
 
+        let errorsToShow = [];
+        let usernameCheck = false;
+        let emailCheck = false;
+        let passwordCheck = false;
+        // show only the first error for each param
+        for (let e of errorData.errors) {
+          if (!usernameCheck && e.param === 'username') {
+            errorsToShow.push(e.message);
+            usernameCheck = true;
+          }
+          if (!emailCheck && e.param === 'email') {
+            errorsToShow.push(e.message);
+            emailCheck = true;
+          }
+          if (!passwordCheck && e.param === 'password') {
+            errorsToShow.push(e.message);
+            passwordCheck = true;
+          }
+        }
+        // dispatch as one snackbar notification
         this.$store.dispatch('snackbars:add', {
           title: 'Habitica',
-          text: errorMessage,
+          text: errorsToShow.join(' '),
           type: 'error',
           timeout: snackbarTimeout,
         });

website/client/components/auth/registerLoginReset.vue

@@ -402,11 +402,6 @@ export default {
       window.location.href = redirectTo;
     },
     async login () {
-      if (!this.username) {
-        alert('Email is required');
-        return;
-      }
-
       await this.$store.dispatch('auth:login', {
         username: this.username,
         // email: this.email,

website/client/components/static/home.vue

@@ -616,11 +616,6 @@
       },
       // @TODO this is totally duplicate from the registerLogin component
       async register () {
-        if (this.password !== this.passwordConfirm) {
-          alert('Passwords must match');
-          return;
-        }
-
         let groupInvite = '';
         if (this.$route.query && this.$route.query.p) {
           groupInvite = this.$route.query.p;

website/server/controllers/api-v3/auth.js

@@ -101,21 +101,25 @@ api.registerLocal = {
     let existingUser = res.locals.user; // If adding local auth to social user
 
     req.checkBody({
-      email: {
-        notEmpty: {errorMessage: res.t('missingEmail')},
-        isEmail: {errorMessage: res.t('notAnEmail')},
-      },
       username: {
-        notEmpty: {errorMessage: res.t('missingUsername')},
-        isLength: {options: {min: USERNAME_LENGTH_MIN, max: USERNAME_LENGTH_MAX}, errorMessage: res.t('usernameWrongLength')},
+        notEmpty: true,
+        errorMessage: res.t('missingUsername'),
         // TODO use the constants in the error message above
+        isLength: {options: {min: USERNAME_LENGTH_MIN, max: USERNAME_LENGTH_MAX}, errorMessage: res.t('usernameWrongLength')},
         matches: {options: /^[-_a-zA-Z0-9]+$/, errorMessage: res.t('usernameBadCharacters')},
       },
+      email: {
+        notEmpty: true,
+        errorMessage: res.t('missingEmail'),
+        isEmail: {errorMessage: res.t('notAnEmail')},
+      },
       password: {
-        notEmpty: {errorMessage: res.t('missingPassword')},
+        notEmpty: true,
+        errorMessage: res.t('missingPassword'),
         equals: {options: [req.body.confirmPassword], errorMessage: res.t('passwordConfirmationMatch')},
       },
     });
+
     let validationErrors = req.validationErrors();
     if (validationErrors) throw validationErrors;
 
@@ -476,7 +480,7 @@ api.updateUsername = {
         notEmpty: {errorMessage: res.t('missingPassword')},
       },
       username: {
-        notEmpty: { errorMessage: res.t('missingUsername') },
+        notEmpty: {errorMessage: res.t('missingUsername')},
       },
     });