Merge pull request #23 from PedroHenriqueDevBR/dev

feat: toggle password visibility
PedroHenriqueDevBR · Aug 8, 2023 · 7c19221 · 7c19221
2 parents b6d8eb8 + d6ae36a
commit 7c19221
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 12 deletions.
diff --git a/ldap_password/apps/core/static/css/custom.css b/ldap_password/apps/core/static/css/custom.css
@@ -211,6 +211,11 @@ form>label {
     margin: 0 !important;
 }
 
+.password-eye-icon {
+    margin-left: -30px;
+    cursor: pointer;
+}
+
 @media only screen and (max-width: 500px) {
     .password_form_content {
         height: auto;

diff --git a/ldap_password/apps/core/templates/base.html b/ldap_password/apps/core/templates/base.html
@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
     <link rel="stylesheet" href="{% static '/css/font-awesome-all.min.css' %}" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
     <link rel="stylesheet" href="{% static '/css/custom.css' %}">
     <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/logo.png' %}">
     <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/logo.png' %}">

diff --git a/ldap_password/apps/core/templates/password.html b/ldap_password/apps/core/templates/password.html
@@ -28,25 +28,35 @@ <h4>{{ enterprise_name }}</h4>
                 </div>
                 <div class="mb-3">
                     <label for="current_password" class="form-label">{% trans "CurrentPassword" %}</label>
-                    <input type="password" class="form-control" id="current_password" name="current_password" aria-describedby="current_password" value="{{ current_password }}" required>
+                    <div class="d-flex align-items-center">
+                        <input type="password" class="form-control" id="current_password" name="current_password" aria-describedby="current_password" value="{{ current_password }}" required>
+                        <i class="bi bi-eye-slash password-eye-icon" id="toggleCurrentPassword"></i>
+                    </div>
                 </div>
                 <div class="mb-3">
                     <label for="new_password" class="form-label">{% trans "NewPassword" %}</label>
-                    <input 
-                        type="password" 
-                        class="form-control" 
-                        id="new_password" 
-                        name="new_password" 
-                        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                        aria-describedby="new_password" 
-                        value="{{ new_password }}" 
-                        required
-                    >
+                    <div class="d-flex align-items-center">
+                        <input 
+                            type="password"
+                            class="form-control"
+                            id="new_password"
+                            name="new_password" 
+                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                            aria-describedby="new_password" 
+                            value="{{ new_password }}"
+                            required
+                        >
+                        <i class="bi bi-eye-slash password-eye-icon" id="toggleNewPassword"></i>
+                    </div>
+
                     <div class="form-text">{% trans 'password_rules' %}</div>
                 </div>
                 <div class="mb-3">
                     <label for="repeate_password" class="form-label">{% trans "RepeatPassword" %}</label>
-                    <input type="password" class="form-control" id="repeate_password" name="repeate_password" aria-describedby="repeate_password" value="{{ repeate_password }}" required>
+                    <div class="d-flex align-items-center">
+                        <input type="password" class="form-control" id="repeate_password" name="repeate_password" aria-describedby="repeate_password" value="{{ repeate_password }}" required>
+                        <i class="bi bi-eye-slash password-eye-icon" id="toggleRepeatPassword"></i>
+                    </div>
                 </div>
             </div>
 
@@ -72,4 +82,57 @@ <h4>{{ enterprise_name }}</h4>
         {% endif %}
     </section>
 </div>
+
+<script>
+    const toggleCurrentPassword = document.getElementById('toggleCurrentPassword');
+    const currentPassword = document.getElementById('current_password');
+
+    const toggleNewPassword = document.getElementById('toggleNewPassword');
+    const newPassword = document.getElementById('new_password');
+
+    const toggleRepeatPassword = document.getElementById('toggleRepeatPassword');
+    const repeatPassword = document.getElementById('repeate_password');
+
+    toggleCurrentPassword.addEventListener('click', () => {
+        const type = currentPassword.getAttribute('type') === 'password' 
+            ? 'text' 
+            : 'password';
+        currentPassword.setAttribute('type', type);
+        if (toggleCurrentPassword.classList.contains('bi-eye')) {
+            toggleCurrentPassword.classList.remove('bi-eye');
+            toggleCurrentPassword.classList.add('bi-eye-slash');
+        } else {
+            toggleCurrentPassword.classList.add('bi-eye');
+            toggleCurrentPassword.classList.remove('bi-eye-slash');
+        }
+    });
+
+    toggleNewPassword.addEventListener('click', () => {
+        const type = newPassword.getAttribute('type') === 'password' 
+            ? 'text' 
+            : 'password';
+        newPassword.setAttribute('type', type);
+        if (toggleNewPassword.classList.contains('bi-eye')) {
+            toggleNewPassword.classList.remove('bi-eye');
+            toggleNewPassword.classList.add('bi-eye-slash');
+        } else {
+            toggleNewPassword.classList.add('bi-eye');
+            toggleNewPassword.classList.remove('bi-eye-slash');
+        }
+    });
+
+    toggleRepeatPassword.addEventListener('click', () => {
+        const type = repeatPassword.getAttribute('type') === 'password' 
+            ? 'text' 
+            : 'password';
+        repeatPassword.setAttribute('type', type);
+        if (toggleRepeatPassword.classList.contains('bi-eye')) {
+            toggleRepeatPassword.classList.remove('bi-eye');
+            toggleRepeatPassword.classList.add('bi-eye-slash');
+        } else {
+            toggleRepeatPassword.classList.add('bi-eye');
+            toggleRepeatPassword.classList.remove('bi-eye-slash');
+        }
+    });
+</script>
 {% endblock body %}