Minimum password length + Static Pages fixes (#11474)

* password min length: server + client side registering

* tweak text, add tests

* misc

* use red border for invalid inputs

* fix auth form for groups

* remove default firefox box shadown on invalid elements

* fix css in authForm

* fix margings

* misc fixes to forms and buttons

* fix typo

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 {
-      width: 100%;
-      height: 48px;
-      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;
+    .sign-up {
+      padding-top: 11px;
+      padding-bottom: 11px;
     }
 
     ::-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 () {