Merge pull request #239 from CSSAInformationDepartment/Clare-regform-…

…debug Registration password validation
CSSAInformationDepartment · Aug 23, 2023 · 0ed9305 · 0ed9305
2 parents 881413a + eee149c
commit 0ed9305
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 1 deletion.
diff --git a/src/myCSSAhub/static/myCSSAhub/img/icon-invalid.png b/src/myCSSAhub/static/myCSSAhub/img/icon-invalid.png
diff --git a/src/myCSSAhub/static/myCSSAhub/img/icon-valid.png b/src/myCSSAhub/static/myCSSAhub/img/icon-valid.png
diff --git a/src/myCSSAhub/templates/myCSSAhub/easy_registration.html b/src/myCSSAhub/templates/myCSSAhub/easy_registration.html
@@ -18,6 +18,54 @@
           background-color: rgba(255, 255, 255, 0.4);
           background-blend-mode: lighten;
       }
+
+      #pswd_info {
+          position: absolute;
+          bottom: -180px;
+          left: 18%;
+          width: 220px;
+          padding: 15px;
+          background: #fefefe;
+          font-size: .875em;
+          border-radius: 5px;
+          box-shadow: 0 1px 3px #ccc;
+          border: 1px solid #ddd;
+          z-index: 1;
+          display: none;
+      }
+
+      #pswd_info h4 {
+          margin: 0 0 10px 0;
+          padding: 0;
+          font-weight: normal;
+          font-size: 12px;
+      }
+
+      #pswd_info::before {
+          content: "\25B2";
+          position: absolute;
+          top: -12px;
+          left: 45%;
+          font-size: 14px;
+          line-height: 14px;
+          color: #ddd;
+          text-shadow: none;
+          display: block;
+      }
+
+      .invalid {
+          background:url("{% static 'myCSSAhub/img/icon-invalid.png' %}") no-repeat 0 50%;
+          padding-left: 22px;
+          line-height: 24px;
+          color: #ec3f41;
+      }
+
+      .valid {
+          background:url("{% static 'myCSSAhub/img/icon-valid.png' %}") no-repeat 0 50%;
+          padding-left: 22px;
+          line-height: 24px;
+          color: #3a7d34;
+      }
   </style>
   <div class="bloc none l-bloc" id="bloc-1">
     <div class="container bloc-fill-screen">
@@ -121,7 +169,24 @@ <h5 class="fs-title">请填写你的基本信息</h5>
                          type="password"
                          data-parsley-group="step1"
                          autocomplete="off" />
-                  <div id="progress-container" style="padding-top:10px"></div>
+                  <div id="pswd_info">
+                    <h4>Password must meet the following requirements:</h4>
+                    <ul>
+                      <li id="letter" class="invalid">
+                        At least <strong>one letter</strong>
+                      </li>
+                      <li id="capital" class="invalid">
+                        At least <strong>one capital letter</strong>
+                      </li>
+                      <li id="number" class="invalid">
+                        At least <strong>one number</strong>
+                      </li>
+                      <li id="length" class="invalid">
+                        Be at least <strong>8 characters</strong>
+                      </li>
+                    </ul>
+                  </div>
+                  {% comment %} <div id="progress-container" style="padding-top:10px"></div> {% endcomment %}
                 </div>
               </div>
               <div id="password2" class="form-label-group required">
@@ -277,6 +342,10 @@ <h5 class="fs-title">请填写你的基本信息</h5>
           src="{% static 'myCSSAhub/js/Password/password-score-options.js' %}"></script>
   <script src="{% static 'myCSSAhub/vendors/jquery-ui/jquery-ui.min.js'%}"></script>
   <script type="text/javascript">
+    var isEnoughLen = false;
+    var hasLetter = false;
+    var hasNumber = false;
+    var hasCapital = false;
     //Password Strength Indicator
     $(document).ready(function() {
       $('#id_password').strengthMeter('progressBar', {
@@ -292,6 +361,62 @@ <h5 class="fs-title">请填写你的基本信息</h5>
           append: true
         }
       });
+
+      $('#id_password').keyup(function (){
+        //console.log("Entering password");
+        var pswd = $(this).val();
+        //validate the length
+        if (pswd.length < 8) {
+          $('#length').removeClass('valid').addClass('invalid');
+          isEnoughLen = false;
+        } else {
+          $('#length').removeClass('invalid').addClass('valid');
+          isEnoughLen = true;
+        }
+
+        //validate letter
+        if (pswd.match(/[A-z]/)) {
+          $('#letter').removeClass('invalid').addClass('valid');
+          hasLetter = true ;
+        } else {
+          $('#letter').removeClass('valid').addClass('invalid');
+          hasLetter = false ;
+        }
+
+        //validate capital letter
+        if (pswd.match(/[A-Z]/)) {
+          $('#capital').removeClass('invalid').addClass('valid');
+          hasCapital = true ;
+        } else {
+          $('#capital').removeClass('valid').addClass('invalid');
+          hasCapital = false ;
+        }
+
+        //validate number
+        if (pswd.match(/\d/)) {
+          $('#number').removeClass('invalid').addClass('valid');
+          hasNumber = true ;
+        } else {
+          $('#number').removeClass('valid').addClass('invalid');
+          hasNumber = false ;
+        }
+
+        if (isEnoughLen && hasCapital && hasLetter && hasNumber) {
+          $('#id_password').addClass('is-valid').removeClass('is-invalid');
+        } else {
+          $('#id_password').addClass('is-invalid').removeClass('is-valid');
+        }
+      });
+
+      $('#id_password').focus(function (){
+        $('#pswd_info').show();
+      });
+
+      $('#id_password').blur(function (){
+        $('#pswd_info').hide();
+
+      });
+
     });
 
     {% comment %} //Major dropdown Handler