Minimum password length + Static Pages fixes (was #11474) (#11506)

* Revert "Revert "Minimum password length + Static Pages fixes (#11474)""

This reverts commit d1afbf4b92.

* add min length for reset password

test/api/v3/integration/user/auth/POST-auth_reset-password-set-new-one.js

@@ -189,6 +189,28 @@ describe('POST /user/auth/reset-password-set-new-one', () => {
     });
   });
 
+  it('renders the error page if the password is too short', async () => {
+    const user = await generateUser();
+
+    const code = encrypt(JSON.stringify({
+      userId: user._id,
+      expiresAt: moment().add({ days: 1 }),
+    }));
+    await user.update({
+      'auth.local.passwordResetCode': code,
+    });
+
+    await expect(api.post(`${endpoint}`, {
+      newPassword: 'short',
+      confirmPassword: 'short',
+      code,
+    })).to.eventually.be.rejected.and.eql({
+      code: 400,
+      error: 'BadRequest',
+      message: t('invalidReqParams'),
+    });
+  });
+
   it('renders the success page and save the user', async () => {
     const user = await generateUser();
 

test/api/v3/integration/user/auth/POST-register_local.test.js

@@ -326,6 +326,24 @@ describe('POST /user/auth/local/register', () => {
       });
     });
 
+    it('requires minimum length for the password', async () => {
+      const username = generateRandomUserName();
+      const email = `${username}@example.com`;
+      const password = '1234567';
+      const confirmPassword = '1234567';
+
+      await expect(api.post('/user/auth/local/register', {
+        username,
+        email,
+        password,
+        confirmPassword,
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('invalidReqParams'),
+      });
+    });
+
     it('requires a username', async () => {
       const email = `${generateRandomUserName()}@example.com`;
       const password = 'password';

test/api/v3/integration/user/auth/PUT-user_update_password.test.js

@@ -82,6 +82,20 @@ describe('PUT /user/auth/update-password', async () => {
     });
   });
 
+  it('returns an error when newPassword is too short', async () => {
+    const body = {
+      password,
+      newPassword: '1234567',
+      confirmPassword: '1234567',
+    };
+
+    await expect(user.put(ENDPOINT, body)).to.eventually.be.rejected.and.eql({
+      code: 400,
+      error: 'BadRequest',
+      message: t('invalidReqParams'),
+    });
+  });
+
   it('returns an error when confirmPassword is missing', async () => {
     const body = {
       password,

website/client/src/assets/scss/button.scss

@@ -20,7 +20,7 @@
     @include btn-focus-hover-shadow();
   }
 
-  &:hover:not(.btn-flat):not(.disabled) {
+  &:hover:not(.btn-flat):not(.disabled):not(:disabled) {
     @include btn-focus-hover-shadow();
     border-color: transparent;
   }
@@ -49,7 +49,7 @@
     background: $purple-200;
   }
 
-  &:hover:not(:disabled), &:active, &.active, &:focus {
+  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
     background: #5d3b9c !important;
     color: $white;
   }
@@ -59,7 +59,7 @@
   color: $gray-50;
   background: $white !important;
 
-  &:hover:not(:disabled):not(.disabled), &:active, &.active, &:focus {
+  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
     color: $purple-200 !important;
   }
 
@@ -80,7 +80,7 @@
     background: $green-100;
   }
 
-  &:hover:not(:disabled), &:active, &.active {
+  &:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
     background: $green-50;
   }
 }
@@ -96,8 +96,12 @@
     background: $blue-50;
   }
 
-  &:hover:not(:disabled), &:active, &.active {
+  &:hover:not(:disabled):not(.disabled) {
-    background: $blue-100;
+    background-color: $blue-100;
+  }
+
+  &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
+    background: $blue-50;
   }
 }
 
@@ -108,7 +112,11 @@
     background: $red-50;
   }
 
-  &:hover:not(:disabled), &:active, &.active {
+  &:hover:not(:disabled):not(.disabled) {
+    background: $red-100;
+  }
+
+  &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
     background: $red-100;
   }
 }

website/client/src/assets/scss/form.scss

@@ -65,6 +65,7 @@ input, textarea, input.form-control, textarea.form-control {
     padding-right: 40px;
     background-image: url(~@/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
+    border-color: $red-100 !important;
   }
 }
 
@@ -276,3 +277,19 @@ $bg-disabled-control: #34303a;
 .toggle-switch-container.no-margin {
   margin-top: 0 !important;
 }
+
+
+
+// Disable default style Firefox for invalid elements.
+// Selectors taken from view-source:resource://gre-resources/forms.css on Firefox
+:not(output):-moz-ui-invalid {
+  box-shadow: none;
+}
+
+:not(output):-moz-ui-invalid:-moz-focusring {
+  box-shadow: none;
+}
+
+output:-moz-ui-invalid {
+  color: inherit;
+}

website/client/src/components/auth/authForm.vue

@@ -46,6 +46,13 @@
         :placeholder="$t('usernamePlaceholder')"
         :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
       >
+      <div
+        v-for="issue in usernameIssues"
+        :key="issue"
+        class="input-error"
+      >
+        {{ issue }}
+      </div>
     </div>
     <div
       v-if="!registering"
@@ -97,7 +104,17 @@
         class="form-control"
         type="password"
         :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
+        :class="{
+          'input-valid': registering ? passwordValid : false,
+          'input-invalid': registering ? passwordInvalid: false,
+        }"
       >
+      <div
+        v-if="passwordInvalid && registering"
+        class="input-error"
+      >
+        {{ $t('minPasswordLength') }}
+      </div>
     </div>
     <div
       v-if="registering"
@@ -115,6 +132,12 @@
         :placeholder="$t('confirmPasswordPlaceholder')"
         :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
       >
+      <div
+        v-if="passwordConfirmInvalid"
+        class="input-error"
+      >
+        {{ $t('passwordConfirmationMatch') }}
+      </div>
       <small
         v-once
         class="form-text"
@@ -183,8 +206,11 @@
       text-align: center;
     }
 
-    .input-valid {
+    .input-error {
-      color: #fff;
+      margin-top: 0.25em;
+      font-weight: normal;
+      font-size: 90%;
+      width: 100%;
     }
   }
 </style>
@@ -194,7 +220,7 @@ import hello from 'hellojs';
 import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
 import { setUpAxios } from '@/libs/auth';
-
+import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
 import googleIcon from '@/assets/svg/google.svg';
 
@@ -223,6 +249,7 @@ export default {
       return isEmail(this.email);
     },
     emailInvalid () {
+      if (this.email.length <= 3) return false;
       return !this.emailValid;
     },
     usernameValid () {
@@ -230,13 +257,23 @@ export default {
       return this.usernameIssues.length === 0;
     },
     usernameInvalid () {
+      if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
+    passwordValid () {
+      if (this.password.length <= 0) return false;
+      return this.password.length >= MINIMUM_PASSWORD_LENGTH;
+    },
+    passwordInvalid () {
+      if (this.password.length <= 0) return false;
+      return this.password.length < MINIMUM_PASSWORD_LENGTH;
+    },
     passwordConfirmValid () {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm === this.password;
     },
     passwordConfirmInvalid () {
+      if (this.passwordConfirm.length <= 3) return false;
       return !this.passwordConfirmValid;
     },
   },

website/client/src/components/auth/registerLoginReset.vue

@@ -6,8 +6,7 @@
     <form
       v-if="!forgotPassword && !resetPasswordSetNewOne"
       id="login-form"
-      @submit.prevent="handleSubmit"
+      @submit.prevent.stop="handleSubmit"
-      @keyup.enter="handleSubmit"
     >
       <div class="text-center">
         <div>
@@ -69,7 +68,7 @@
         <input
           id="usernameInput"
           v-model="username"
-          class="form-control"
+          class="form-control input-with-error"
           type="text"
           :placeholder="$t('usernamePlaceholder')"
           :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
@@ -132,7 +131,17 @@
           class="form-control"
           type="password"
           :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
+          :class="{
+            'input-invalid input-with-error': registering && passwordInvalid,
+            'input-valid': registering && passwordValid
+          }"
         >
+        <div
+          v-if="passwordInvalid && registering"
+          class="input-error"
+        >
+          {{ $t('minPasswordLength') }}
+        </div>
       </div>
       <div
         v-if="registering"
@@ -145,11 +154,17 @@
         <input
           id="confirmPasswordInput"
           v-model="passwordConfirm"
-          class="form-control"
+          class="form-control input-with-error"
           type="password"
           :placeholder="$t('confirmPasswordPlaceholder')"
           :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
         >
+        <div
+          v-if="passwordConfirmInvalid"
+          class="input-error"
+        >
+          {{ $t('passwordConfirmationMatch') }}
+        </div>
         <small
           v-once
           class="form-text"
@@ -157,22 +172,22 @@
         ></small>
       </div>
       <div class="text-center">
-        <div
+        <button
           v-if="registering"
-          v-once
+          type="submit"
           class="btn btn-info"
-          @click="register()"
+          :disabled="signupFormInvalid"
         >
           {{ $t('joinHabitica') }}
-        </div>
+        </button>
-        <div
+        <button
           v-if="!registering"
           v-once
+          type="submit"
           class="btn btn-info"
-          @click="login()"
         >
           {{ $t('login') }}
-        </div>
+        </button>
         <div class="toggle-links">
           <router-link
             v-if="registering"
@@ -275,10 +290,17 @@
         <input
           id="passwordInput"
           v-model="password"
-          class="form-control"
+          class="form-control input-with-error"
           type="password"
           :placeholder="$t('password')"
+          :class="{'input-invalid': passwordInvalid, 'input-valid': passwordValid}"
         >
+        <div
+          v-if="passwordInvalid"
+          class="input-error"
+        >
+          {{ $t('minPasswordLength') }}
+        </div>
       </div>
       <div class="form-group">
         <label
@@ -288,10 +310,17 @@
         <input
           id="confirmPasswordInput"
           v-model="passwordConfirm"
-          class="form-control"
+          class="form-control input-with-error"
           type="password"
           :placeholder="$t('confirmPasswordPlaceholder')"
+          :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
         >
+        <div
+          v-if="passwordConfirmInvalid"
+          class="input-error"
+        >
+          {{ $t('passwordConfirmationMatch') }}
+        </div>
       </div>
       <div class="text-center">
         <div
@@ -426,10 +455,14 @@
       color: $white;
     }
 
-    #usernameInput.input-invalid {
+    .input-with-error.input-invalid {
       margin-bottom: 0.5em;
     }
 
+    #confirmPasswordInput + .input-error {
+      margin-bottom: 2em;
+    }
+
     .form-text {
       font-size: 14px;
       color: $white;
@@ -480,7 +513,7 @@
       background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
       background-repeat: repeat-x;
       width: 100%;
-      height: 500px;
+      height: 300px;
       position: absolute;
       z-index: 0;
       bottom: 0;
@@ -512,7 +545,6 @@
     color: #fff;
     font-size: 90%;
     width: 100%;
-    text-align: center;
   }
 </style>
 
@@ -522,6 +554,7 @@ import hello from 'hellojs';
 import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
 
+import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import gryphon from '@/assets/svg/gryphon.svg';
 import habiticaIcon from '@/assets/svg/habitica-logo.svg';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
@@ -580,6 +613,14 @@ export default {
       if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
+    passwordValid () {
+      if (this.password.length <= 0) return false;
+      return this.password.length >= MINIMUM_PASSWORD_LENGTH;
+    },
+    passwordInvalid () {
+      if (this.password.length <= 0) return false;
+      return this.password.length < MINIMUM_PASSWORD_LENGTH;
+    },
     passwordConfirmValid () {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm === this.password;
@@ -588,6 +629,12 @@ export default {
       if (this.passwordConfirm.length <= 3) return false;
       return !this.passwordConfirmValid;
     },
+    signupFormInvalid () {
+      return this.usernameInvalid
+        || this.emailInvalid
+        || this.passwordInvalid
+        || this.passwordConfirmInvalid;
+    },
   },
   watch: {
     $route: {

website/client/src/components/static/home.vue

@@ -53,9 +53,9 @@
             <div class="strike">
               <span>{{ $t('or') }}</span>
             </div>
-            <div
+            <form
               class="form"
-              @keyup.enter="register()"
+              @submit.prevent.stop="register()"
             >
               <p class="form-text">
                 {{ $t('usernameLimitations') }}
@@ -63,7 +63,7 @@
               <input
                 id="usernameInput"
                 v-model="username"
-                class="form-control"
+                class="form-control input-with-error"
                 type="text"
                 :placeholder="$t('username')"
                 :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
@@ -85,32 +85,49 @@
               >
               <input
                 v-model="password"
-                class="form-control"
+                class="form-control input-with-error"
                 type="password"
                 :placeholder="$t('password')"
-                :class="{'input-valid': password.length > 3}"
+                :class="{
+                  'input-valid': passwordValid,
+                  'input-invalid': passwordInvalid,
+                }"
               >
+              <div
+                v-if="passwordInvalid"
+                class="input-error"
+              >
+                {{ $t('minPasswordLength') }}
+              </div>
               <input
                 v-model="passwordConfirm"
-                class="form-control"
+                class="form-control input-with-error"
                 type="password"
                 :placeholder="$t('confirmPassword')"
                 :class="{
                   'input-invalid': passwordConfirmInvalid,
                   'input-valid': passwordConfirmValid}"
               >
+              <div
+                v-if="passwordConfirmInvalid"
+                class="input-error"
+              >
+                {{ $t('passwordConfirmationMatch') }}
+              </div>
               <p
                 v-once
                 class="form-text"
                 v-html="$t('termsAndAgreement')"
               ></p>
               <button
-                class="sign-up"
+                class="btn btn-block btn-info sign-up"
+                :disabled="signupFormInvalid"
+                type="submit"
                 @click="register()"
               >
                 {{ $t('signup') }}
               </button>
-            </div>
+            </form>
           </div>
           <div class="col-12">
             <div
@@ -519,7 +536,7 @@
       transition: border .5s, color .5s;
     }
 
-    #usernameInput.input-invalid {
+    .input-invalid.input-with-error {
       margin-bottom: 0.5em;
     }
 
@@ -537,21 +554,9 @@
       background-color: #36205d;
     }
 
-    button.sign-up {
+    .sign-up {
-      width: 100%;
+      padding-top: 11px;
-      height: 48px;
+      padding-bottom: 11px;
-      color: #fff;
-      border: none;
-      border-radius: 2px;
-      background-color: #2995cd;
-      font-size: 16px;
-      transition: all .5s ease;
-    }
-
-    .sign-up:hover {
-      background-color: #50b5e9;
-      box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
-      cursor: pointer;
     }
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
@@ -769,7 +774,6 @@
     color: #fff;
     font-size: 90%;
     width: 100%;
-    text-align: center;
     margin-bottom: 1em;
   }
 </style>
@@ -796,6 +800,7 @@ import lifehacker from '@/assets/images/home/lifehacker.svg';
 import makeuseof from '@/assets/images/home/make-use-of.svg';
 import thenewyorktimes from '@/assets/images/home/the-new-york-times.svg';
 import * as Analytics from '@/libs/analytics';
+import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 
 export default {
   data () {
@@ -844,6 +849,14 @@ export default {
       if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
+    passwordValid () {
+      if (this.password.length <= 0) return false;
+      return this.password.length >= MINIMUM_PASSWORD_LENGTH;
+    },
+    passwordInvalid () {
+      if (this.password.length <= 0) return false;
+      return this.password.length < MINIMUM_PASSWORD_LENGTH;
+    },
     passwordConfirmValid () {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm === this.password;
@@ -852,6 +865,12 @@ export default {
       if (this.passwordConfirm.length <= 3) return false;
       return this.passwordConfirm !== this.password;
     },
+    signupFormInvalid () {
+      return this.usernameInvalid
+        || this.emailInvalid
+        || this.passwordInvalid
+        || this.passwordConfirmInvalid;
+    },
   },
   watch: {
     username () {

website/client/src/components/static/staticWrapper.vue

@@ -85,10 +85,6 @@
     }
   }
 
-  #bottom-wrap.purple-4 {
-    background-color: #271b3d;
-  }
-
   #purple-footer {
     background-color: #271b3d;
 
@@ -115,33 +111,6 @@
     }
   }
 
-  #bottom-wrap {
-    padding-top: 10em;
-  }
-
-  #bottom-background {
-    position: relative;
-
-    .seamless_mountains_demo_repeat {
-      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
-      background-repeat: repeat-x;
-      width: 100%;
-      height: 300px;
-      position: absolute;
-      z-index: 0;
-      bottom: 0;
-    }
-
-    .midground_foreground_extended2 {
-      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
-      position: relative;
-      width: 1500px;
-      max-width: 100%;
-      height: 150px;
-      margin: 0 auto;
-    }
-  }
-
   .static-wrapper {
     .container-fluid {
       margin: 5em 2em 2em 2em;
@@ -171,6 +140,39 @@
   }
 </style>
 
+<style lang="scss" scoped>
+  #bottom-wrap.purple-4 {
+    background-color: #271b3d;
+  }
+
+  #bottom-wrap {
+    padding-top: 10em;
+  }
+
+  #bottom-background {
+    position: relative;
+
+    .seamless_mountains_demo_repeat {
+      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
+      background-repeat: repeat-x;
+      width: 100%;
+      height: 300px;
+      position: absolute;
+      z-index: 0;
+      bottom: 0;
+    }
+
+    .midground_foreground_extended2 {
+      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
+      position: relative;
+      width: 1500px;
+      max-width: 100%;
+      height: 150px;
+      margin: 0 auto;
+    }
+  }
+</style>
+
 <script>
 import AppFooter from '@/components/appFooter';
 import StaticHeader from './header.vue';

website/common/locales/en/front.json

@@ -274,6 +274,7 @@
   "usernameTOSRequirements": "Usernames must conform to our <a href='/static/terms' target='_blank'>Terms of Service</a> and <a href='/static/community-guidelines' target='_blank'>Community Guidelines</a>. If you didn’t previously set a login name, your username was auto-generated.",
   "usernameTaken": "Username already taken.",
   "passwordConfirmationMatch": "Password confirmation doesn't match password.",
+  "minPasswordLength": "Password must be 8 characters or more.",
   "passwordResetPage": "Reset Password",
   "passwordReset": "If we have your email on file, instructions for setting a new password have been sent to your email.",
   "invalidLoginCredentialsLong": "Uh-oh - your email address / username or password is incorrect.\n- Make sure they are typed correctly. Your username and password are case-sensitive.\n- You may have signed up with Facebook or Google-sign-in, not email so double-check by trying them.\n- If you forgot your password, click \"Forgot Password\".",

website/common/script/constants.js

@@ -25,6 +25,7 @@ export const GUILDS_PER_PAGE = 30; // number of guilds to return per page when u
 
 export const PARTY_LIMIT_MEMBERS = 30;
 
+export const MINIMUM_PASSWORD_LENGTH = 8;
 export const TRANSFORMATION_DEBUFFS_LIST = {
   snowball: 'salt',
   spookySparkles: 'opaquePotion',

website/common/script/index.js

@@ -15,6 +15,7 @@ import {
   MAX_SUMMARY_SIZE_FOR_GUILDS,
   MIN_SHORTNAME_SIZE_FOR_CHALLENGES,
   PARTY_LIMIT_MEMBERS,
+  MINIMUM_PASSWORD_LENGTH,
   SUPPORTED_SOCIAL_NETWORKS,
   TAVERN_ID,
 } from './constants';
@@ -106,6 +107,7 @@ api.constants = {
   CHAT_FLAG_LIMIT_FOR_HIDING,
   CHAT_FLAG_FROM_MOD,
   CHAT_FLAG_FROM_SHADOW_MUTE,
+  MINIMUM_PASSWORD_LENGTH,
 };
 // TODO Move these under api.constants
 api.maxLevel = MAX_LEVEL;

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

@@ -245,6 +245,10 @@ api.updatePassword = {
       },
       newPassword: {
         notEmpty: { errorMessage: res.t('missingNewPassword') },
+        isLength: {
+          options: { min: common.constants.MINIMUM_PASSWORD_LENGTH },
+          errorMessage: res.t('minPasswordLength'),
+        },
       },
       confirmPassword: {
         notEmpty: { errorMessage: res.t('missingNewPassword') },
@@ -387,13 +391,23 @@ api.resetPasswordSetNewOne = {
 
     if (!isValidCode) throw new NotAuthorized(res.t('invalidPasswordResetCode'));
 
-    req.checkBody('newPassword', res.t('missingNewPassword')).notEmpty();
+    req.checkBody({
-    req.checkBody('confirmPassword', res.t('missingNewPassword')).notEmpty();
+      newPassword: {
+        notEmpty: { errorMessage: res.t('missingNewPassword') },
+        isLength: {
+          options: { min: common.constants.MINIMUM_PASSWORD_LENGTH },
+          errorMessage: res.t('minPasswordLength'),
+        },
+      },
+      confirmPassword: {
+        notEmpty: { errorMessage: res.t('missingNewPassword') },
+      },
+    });
+
     const validationErrors = req.validationErrors();
     if (validationErrors) throw validationErrors;
 
-    const { newPassword } = req.body;
+    const { newPassword, confirmPassword } = req.body;
-    const { confirmPassword } = req.body;
 
     if (newPassword !== confirmPassword) {
       throw new BadRequest(res.t('passwordConfirmationMatch'));

website/server/libs/auth/index.js

@@ -93,8 +93,13 @@ async function registerLocal (req, res, { isV3 = false }) {
     },
     password: {
       notEmpty: true,
+
       errorMessage: res.t('missingPassword'),
       equals: { options: [req.body.confirmPassword], errorMessage: res.t('passwordConfirmationMatch') },
+      isLength: {
+        options: { min: common.constants.MINIMUM_PASSWORD_LENGTH },
+        errorMessage: res.t('minPasswordLength'),
+      },
     },
   });