Fix #1216, #1217, #1236: Replace the Show Password checkboxes (#1240)

Changes proposed: 1. Moves JS code to show/hide password to `password_widget.js`. 2. Add a show/hide glyphicon toggle to the right of password widget. 3. Add a border around the glyphicon when form submission returns errors.
Cadasta · Mar 10, 2017 · cd3865a · cd3865a
1 parent bfc59d2
commit cd3865a
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 25 deletions.
diff --git a/cadasta/core/static/css/forms.scss b/cadasta/core/static/css/forms.scss
@@ -129,6 +129,17 @@ label.required:after { // show asterisk
   padding-right: 36px;
 }
 
+.input-group-btn:last-child > .btn {
+border: 1px solid $input-border;
+}
+
+.has-error .input-group-btn .btn,
+.has-warning .input-group-btn .btn {
+  color: $state-danger-text;
+  border-color: $state-danger-text;
+  background-color: $state-danger-bg;
+}
+
 .has-success select,
 .has-error select {
   background-position: calc(100% - 20px) 50%;

diff --git a/cadasta/core/static/js/password_widget.js b/cadasta/core/static/js/password_widget.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $("input[type='password'] + span > button").click(function() {
+    var glyph = $(this).children(".glyphicon");
+    if(glyph.hasClass("glyphicon-eye-close")) {
+      $(this).parent().prev("input").attr("type", "text");
+      glyph.removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open");
+    }
+    else {
+      $(this).parent().prev("input").attr("type", "password");
+      glyph.removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
+    }
+  });
+});
diff --git a/cadasta/templates/allauth/account/login.html b/cadasta/templates/allauth/account/login.html
@@ -1,6 +1,7 @@
 {% extends "account/base.html" %}
 
 {% load widget_tweaks %}
+{% load staticfiles %}
 {% load i18n %}
 {% load account socialaccount %}
 
@@ -9,6 +10,10 @@
 
 {% block title %} | {% trans "Sign In" %}{% endblock %}
 
+{% block extra_script %}
+<script src="{% static 'js/password_widget.js' %}"></script>
+{% endblock %}
+
 {% block content %}
 
 {% if form.non_field_errors %}
@@ -52,7 +57,14 @@ <h1>{% trans "Sign in to your account" %}</h1>
 
       <div class="form-group{% if form.password.errors %} has-error{% endif %}">
         <label class="control-label" for="id_password">{% trans "Password" %}</label>
-        {% render_field form.password class+="form-control input-lg" placeholder="" data-parsley-required="true" %}
+        <div class="input-group input-group-lg">
+          {% render_field form.password class+="form-control" placeholder="" data-parsley-required="true" %}
+          <span class="input-group-btn">
+            <button class="btn" type="button">
+              <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+            </button>
+          </span>
+        </div>
         <div class="error-block">{{ form.password.errors }}</div>
       </div>
 

diff --git a/cadasta/templates/allauth/account/password_change.html b/cadasta/templates/allauth/account/password_change.html
@@ -7,6 +7,7 @@
 {% block title %} | {% trans "Change Password" %}{% endblock %}
 
 {% block extra_script %}
+<script src="{% static 'js/password_widget.js' %}"></script>
 <script src="{% static 'js/parsleyAddValidator.js' %}"></script>
 {% endblock %}
 
@@ -23,20 +24,41 @@ <h1>{% trans "Change your password" %}</h1>
 
   <div class="form-group{% if form.oldpassword.errors %} has-error{% endif %}">
     <label class="control-label" for="id_oldpassword">{% trans "Current password" %}</label>
-    {% render_field form.oldpassword class+="form-control input-lg" placeholder="" data-parsley-required="true" %}
+    <div class="input-group input-group-lg">
+      {% render_field form.oldpassword class+="form-control" placeholder="" data-parsley-required="true" %}
+      <span class="input-group-btn">
+        <button class="btn" type="button">
+          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+        </button>
+      </span>
+    </div>
      <div class="error-block">{{ form.oldpassword.errors }}</div>
   </div>
 
   <div class="form-group{% if form.password1.errors %} has-error{% endif %}">
     <label class="control-label" for="id_password1">{% trans "Enter a new password" %}</label>
-    {% render_field form.password1 class+="form-control input-lg" placeholder="" data-parsley-required="true" data-parsley-minlength="10" data-parsley-character="3" data-parsley-userfield="1" data-parsley-emailfield="1" %}
+    <div class="input-group input-group-lg">
+      {% render_field form.password1 class+="form-control" placeholder="" data-parsley-required="true" data-parsley-minlength="10" data-parsley-character="3" data-parsley-userfield="1" data-parsley-emailfield="1" %}
+      <span class="input-group-btn">
+        <button class="btn" type="button">
+          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+        </button>
+      </span>
+    </div>
     <p class="help-block small">{% trans "Passwords must have a minimum of 10 characters and contain at least 3 of the following: lowercase characters, uppercase characters, special characters, and/or numerical characters.  Passwords cannot contain the username or email address." %}</p>
     <div class="error-block">{{ form.password1.errors }}</div>
   </div>
 
   <div class="form-group{% if form.password2.errors %} has-error{% endif %}">
     <label class="control-label" for="id_password2">{% trans "Confirm the new password" %}</label>
-    {% render_field form.password2 class+="form-control input-lg" placeholder="" data-parsley-required="true" data-parsley-equalto="#id_password1" %}
+    <div class="input-group input-group-lg">
+      {% render_field form.password2 class+="form-control" placeholder="" data-parsley-required="true" data-parsley-equalto="#id_password1" %}
+      <span class="input-group-btn">
+        <button class="btn" type="button">
+          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+        </button>
+      </span>
+    </div>
     <div class="error-block">{{ form.password2.errors }}</div>
   </div>
 

diff --git a/cadasta/templates/allauth/account/password_reset_from_key.html b/cadasta/templates/allauth/account/password_reset_from_key.html
@@ -5,6 +5,10 @@
 {% load i18n %}
 {% block head_title %}{% trans "Change Password" %}{% endblock %}
 
+{% block extra_script %}
+<script src="{% static 'js/password_widget.js' %}"></script>
+{% endblock %}
+
 {% block content %}
 
 <div class="narrow">
@@ -20,14 +24,28 @@ <h1>{% if token_fail %}{% trans "Bad token" %}{% else %}{% trans "Change your pa
 
                 <div class="form-group{% if form.password1.errors %} has-error{% endif %}">
                     <label class="control-label" for="id_password1">{% trans "Enter a new password" %}</label>
-                    {% render_field form.password1 class+="form-control input-lg" placeholder="" data-parsley-required="true" data-parsley-minlength="10" data-parsley-character="3" data-parsley-userfield="1" data-parsley-emailfield="1" %}
+                    <div class="input-group input-group-lg">
+                        {% render_field form.password1 class+="form-control" placeholder="" data-parsley-required="true" data-parsley-minlength="10" data-parsley-character="3" data-parsley-userfield="1" data-parsley-emailfield="1" %}
+                        <span class="input-group-btn">
+                            <button class="btn" type="button">
+                                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+                            </button>
+                        </span>
+                    </div>
                     <p class="help-block small">{% trans "Passwords must have a minimum of 10 characters and contain at least 3 of the following: lowercase characters, uppercase characters, special characters, and/or numerical characters.  Passwords cannot contain the username or email address." %}</p>
                     <div class="error-block">{{ form.password1.errors }}</div>
                 </div>
 
                 <div class="form-group{% if form.password2.errors %} has-error{% endif %}">
                     <label class="control-label" for="id_password2">{% trans "Confirm the new password" %}</label>
-                    {% render_field form.password2 class+="form-control input-lg" placeholder="" data-parsley-required="true" data-parsley-equalto="#id_password1" %}
+                    <div class="input-group input-group-lg">
+                        {% render_field form.password2 class+="form-control" placeholder="" data-parsley-required="true" data-parsley-equalto="#id_password1" %}
+                        <span class="input-group-btn">
+                            <button class="btn" type="button">
+                                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+                            </button>
+                        </span>
+                    </div>
                     <div class="error-block">{{ form.password2.errors }}</div>
                 </div>
 

diff --git a/cadasta/templates/allauth/account/signup.html b/cadasta/templates/allauth/account/signup.html
@@ -13,24 +13,11 @@
 <script type="text/javascript">
   $(document).ready(function() {
     $("input[name='password1']").on('focus', function() {
-      $(this).next(".help-block").removeClass("hidden");
+      $(this).parent().next(".help-block").removeClass("hidden");
     });
   });
 </script>
-<script type="text/javascript">
-  $(document).ready(function () {
-     $('input[type="checkbox"]').click(function() {
-         if($(this).prop("checked")) {
-           $("#id_password1").attr("type", "text");
-           $("#id_password2").attr("type", "text");
-         }
-         else {
-          $("#id_password1").attr("type", "password");
-          $("#id_password2").attr("type", "password");
-         }
-    });
- });
-</script>
+<script src="{% static 'js/password_widget.js' %}"></script>
 <script src="{% static 'js/parsleyAddValidator.js' %}"></script>
 {% endblock %}
 
@@ -71,16 +58,28 @@ <h1>{% trans "Register for a free account" %}</h1>
 
   <div class="form-group{% if form.password1.errors %} has-error{% endif %}">
     <label class="control-label" for="id_password1">{% trans "Password" %}</label>
-    {% render_field form.password1 class+="form-control input-lg" data-parsley-minlength="10" data-parsley-character="3" data-parsley-userfield="1" data-parsley-emailfield="1" %}
-    <br>
-    <input type="checkbox" id="showHide"><label for="showHide">&nbsp;Show Password</label>
+    <div class="input-group input-group-lg">
+      {% render_field form.password1 class+="form-control" data-parsley-minlength="10" data-parsley-character="3" data-parsley-userfield="1" data-parsley-emailfield="1" %}
+      <span class="input-group-btn">
+        <button class="btn" type="button">
+          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+        </button>
+      </span>
+    </div>
     <p class="help-block small hidden">{% trans "Passwords must have a minimum of 10 characters and contain at least 3 of the following: lowercase characters, uppercase characters, special characters, and/or numerical characters.  Passwords cannot contain the username or email address." %}</p>
     <div class="error-block">{{ form.password1.errors }}</div>
   </div>
 
   <div class="form-group{% if form.password2.errors %} has-error{% endif %}">
     <label class="control-label" for="id_password2">{% trans "Confirm password" %}</label>
-    {% render_field form.password2 class+="form-control input-lg" data-parsley-equalto="#id_password1" %}
+    <div class="input-group input-group-lg">
+      {% render_field form.password2 class+="form-control" data-parsley-equalto="#id_password1" %}
+      <span class="input-group-btn">
+        <button class="btn" type="button">
+          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+        </button>
+      </span>
+    </div>
     <div class="error-block">{{ form.password2.errors }}</div>
   </div>