From f0641ef3655bd7d2b89a0e4f77a564d121ea1f6a Mon Sep 17 00:00:00 2001
From: Sanjiban Sengupta <b518041@iiit-bh.ac.in>
Date: Sun, 27 Sep 2020 23:43:40 +0530
Subject: [PATCH] feat: Add Hide/show toggle for all password fields

---
 vms/authentication/templates/authentication/login.html   | 6 ++++--
 .../templates/registration/signup_administrator.html     | 9 ++++++---
 .../templates/registration/signup_volunteer.html         | 9 ++++++---
 vms/vms/static/vms/css/style.css                         | 3 +++
 vms/vms/static/vms/js/passwordtoggle.js                  | 9 +++++++++
 vms/vms/templates/vms/base.html                          | 9 +++++++--
 6 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 vms/vms/static/vms/js/passwordtoggle.js

diff --git a/vms/authentication/templates/authentication/login.html b/vms/authentication/templates/authentication/login.html
index 7d7512c..0317be6 100644
--- a/vms/authentication/templates/authentication/login.html
+++ b/vms/authentication/templates/authentication/login.html
@@ -42,6 +42,7 @@ <h2 class="header">{% trans "Please sign in" %}</h2>
                     {% trans "Password" %}<span class="asteriskField">*</span>
                 </label>
                 <div class="control">
+                    <i id="toggle_icon" class="fa fa-eye" style="position: relative; cursor: pointer; left:92%; top: 30px;  z-index: 2;"></i>
                     <input class="textinput textInput form-control" id="id_password" name="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" type="password">
                 </div>
                 <p class="help-block">
@@ -57,10 +58,11 @@ <h2 class="header">{% trans "Please sign in" %}</h2>
                 <label for="id_password" class="control-label" requiredField>
                     {% trans "Password" %}<span class="asteriskField">*</span>
                 </label>
-                <div class="control">
-                    <input class="textinput textInput form-control" id="id_password" name="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" type="password">
+                <div class="control"><i id="toggle_icon" class="fa fa-eye" style="position: relative; cursor: pointer; left:92%; top: 10px;  z-index: 2;"></i>
+                    <input class="textinput textInput form-control" id="id_password" name="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" type="password" style="margin-top: -19.9px;">
                 </div>
             </div>
+      
         {% endif %}
         {% if form.errors %}
         <div class="alert alert-danger">
diff --git a/vms/registration/templates/registration/signup_administrator.html b/vms/registration/templates/registration/signup_administrator.html
index be71df1..e47fd48 100644
--- a/vms/registration/templates/registration/signup_administrator.html
+++ b/vms/registration/templates/registration/signup_administrator.html
@@ -38,11 +38,12 @@ <h2 class="header">{% trans "Sign Up" %}</h2>
         {% endif %}
         {% if user_form.password.errors %}
             <div id="div_id_password" class="form-group has-error">
-                <label class="control-label requiredField" for="id_password">
+                <label class="control-label requiredField" style="margin-top: -20px;" for="id_password" >
                     {% trans "Password" %}<span class="asteriskField">*</span>
                 </label>
                 <div class="controls">
-                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password">
+                    <i id="toggle_icon" class="fa fa-eye" style="position: relative; cursor: pointer; left:92%; top: 10px;  z-index: 2;"></i>
+                    <input id="id_password" class="textinput textInput form-control"  type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password" style="margin-top: -20px;">
                     <p class="help-block">
                         <strong>
                             {% for error in user_form.password.errors %}
@@ -58,9 +59,11 @@ <h2 class="header">{% trans "Sign Up" %}</h2>
                     {% trans "Password" %}<span class="asteriskField">*</span>
                 </label>
                 <div class="controls">
-                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password">
+                    <i id="toggle_icon" class="fa fa-eye" style="position: relative; cursor: pointer; left:92%; top:10px;  z-index: 2;"></i>
+                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password" style="margin-top: -20px;">
                 </div>
             </div>
+           
         {% endif %}
         {% if user_form.confirm_password.errors %}
             <div id="div_id_confirm_password" class="form-group has-error">
diff --git a/vms/registration/templates/registration/signup_volunteer.html b/vms/registration/templates/registration/signup_volunteer.html
index 7459edf..db1e081 100644
--- a/vms/registration/templates/registration/signup_volunteer.html
+++ b/vms/registration/templates/registration/signup_volunteer.html
@@ -42,8 +42,9 @@ <h2 class="header">{% trans "Sign Up" %}</h2>
                     {% trans "Password" %}<span class="asteriskField">*</span>
                 </label>
                 <div class="controls">
-                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password" required>
-                    <p class="help-block">
+                    <i id="toggle_icon" class="fa fa-eye" style="position: relative; cursor: pointer; left:92%; top:10px; z-index: 2;"></i>
+                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password" required style="margin-top: -20px;">
+                        <p class="help-block">
                         <strong>
                             {% for error in user_form.password.errors %}
                                 {{ error }}
@@ -58,9 +59,11 @@ <h2 class="header">{% trans "Sign Up" %}</h2>
                     {% trans "Password" %}<span class="asteriskField">*</span>
                 </label>
                 <div class="controls">
-                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password" required>
+                    <i id="toggle_icon" class="fa fa-eye" style="position: relative; cursor: pointer; left:92%; top:10px; z-index: 2;"></i>
+                    <input id="id_password" class="textinput textInput form-control" type="password" placeholder="{% blocktrans %}Password{% endblocktrans %}" name="usr-password" required style="margin-top: -20px;">
                 </div>
             </div>
+           
         {% endif %}
         {% if user_form.confirm_password.errors %}
             <div id="div_id_confirm_password" class="form-group has-error">
diff --git a/vms/vms/static/vms/css/style.css b/vms/vms/static/vms/css/style.css
index a2c9316..67abc45 100644
--- a/vms/vms/static/vms/css/style.css
+++ b/vms/vms/static/vms/css/style.css
@@ -397,4 +397,7 @@ p.comment-alert {
 
 
 
+.fa.active{
+  color:dodgerblue;
+}
 
diff --git a/vms/vms/static/vms/js/passwordtoggle.js b/vms/vms/static/vms/js/passwordtoggle.js
new file mode 100644
index 0000000..9111ff3
--- /dev/null
+++ b/vms/vms/static/vms/js/passwordtoggle.js
@@ -0,0 +1,9 @@
+$(document).on('click', '#toggle_icon', function() {
+
+  $(this).toggleClass("active");
+  
+  var input = $("#id_password");
+  
+  input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
+  
+});
diff --git a/vms/vms/templates/vms/base.html b/vms/vms/templates/vms/base.html
index abc4e0f..6f28b9e 100644
--- a/vms/vms/templates/vms/base.html
+++ b/vms/vms/templates/vms/base.html
@@ -14,23 +14,28 @@
     <link href="{% static "vms/bootstrap-lumen-theme/css/bootstrap.min.css" %}" rel="stylesheet">
     <!-- Custom styling taken from Systers Portal -->
     <link href="{% static "vms/css/style.css" %}" rel="stylesheet">
+
     <link href="{% static "vms/jquery-ui-1.11.4.custom/jquery-ui.min.css" %}" rel="stylesheet">
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
     <link href="{% static "vms/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css" %}" rel="stylesheet">
     <link href="{% static "vms/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css" %}" rel="stylesheet">
     <link href="{% static "vms/datetimepicker/bootstrap-datetimepicker.min.css" %}" rel="stylesheet">
-    <link rel="icon" href="{% static 'vms/images/favicon.ico' %}">
+    <link rel="icon" href="{% static 'vms/images/favicon.ico' %}">   
 
     <script src="{% static "vms/jquery/jquery-1.11.1.min.js" %}"></script>
     <script src="{% static "vms/bootstrap-3.2.0-dist/js/bootstrap.min.js" %}"></script>
     <script src="{% static "vms/jquery-ui-1.11.4.custom/jquery-ui.min.js" %}"></script>
     <script src="{% static "vms/jquery-custom/activate-datepicker.js" %}"></script>
-    <script src="{% static "vms/datetimepicker/bootstrap-datetimepicker.min.js" %}"></script>
+    
+    <script  src="{% static "vms/datetimepicker/bootstrap-datetimepicker.min.js" %}"></script>
     <script>
     var CityUrl = "{% url 'registration:load_cities' %}"
     var StateUrl = "{% url 'registration:load_states' %}"
     var CheckState = "{% url 'registration:check_states' %}"
     </script> 
     <script src="{% static "vms/js/load_city.js" %}"></script>
+    {% load static %}
+    <script src="{% static "vms/js/passwordtoggle.js" %}" type="text/javascript"></script>
     <script src="{% static "vms/js/load_state.js" %}"></script>
     <script src="{% static "vms/js/hide_resume_textbox.js" %}"></script>
   </head>