T1775 show password on login/signup forms (#45)

* feat: replace the input password and add fa-eye

* feat: replace the input confirm_password and add fa-eye

* feat: create and add js file

* feat: Finalize JavaScript file for password visibility toggle on sign up

* fix: fix indentation with pre-commit in show_password.js

* fix: fix indentation with pre-commit in signup.xml

* fix: fix pre-commit warnings by avoiding "replace" in XML

- Updated XML files to use safer `position` options.

---------

Co-authored-by: jordyBSK <dylan.bossoku@jobtrek.ch>

my_compassion/static/src/js/show_password.js

@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", function (event) {
+  odoo.define("my_compassion.show_password", function (require) {
+    "use strict";
+
+    function togglePasswordVisibility(inputId, icon) {
+      const input = document.getElementById(inputId);
+      if (input) {
+        if (input.type === "password") {
+          input.type = "text";
+          icon.classList.add("fa-eye-slash");
+          icon.classList.remove("fa-eye");
+        } else {
+          input.type = "password";
+          icon.classList.add("fa-eye");
+          icon.classList.remove("fa-eye-slash");
+        }
+      }
+    }
+
+    function addPasswordToggleListener(eyeId, inputId) {
+      const eyeIcon = document.getElementById(eyeId);
+      if (eyeIcon) {
+        eyeIcon.addEventListener("click", function () {
+          togglePasswordVisibility(inputId, eyeIcon);
+        });
+      }
+    }
+
+    addPasswordToggleListener("eye_password", "password");
+    addPasswordToggleListener("eye_confirm_password", "confirm_password");
+  });
+});

my_compassion/templates/signup.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
-
     <template id="signup_sponsor" inherit_id="auth_signup.fields">
         <xpath
       expr="//div[@class='form-group field-confirm_password']"
@@ -18,6 +17,30 @@
                         <t t-call="website_legal_page.acceptance_full" />
                     </label>
         </xpath>
+        <xpath expr="//input[@name='password']" position="after">
+            <div class="position-relative">
+                <i
+          class="fa fa-eye position-absolute"
+          id="eye_password"
+          style="right: 10px; transform: translateY(-140%); cursor: pointer;"
+        />
+            </div>
+        </xpath>
+        <xpath expr="//input[@name='confirm_password']" position="after">
+            <div class="position-relative">
+                <i
+          class="fa fa-eye position-absolute"
+          id="eye_confirm_password"
+          style="right: 10px; transform: translateY(-140%); cursor: pointer;"
+        />
+            </div>
+        </xpath>
+         <xpath expr="." position="inside">
+            <script
+        type="text/javascript"
+        src="/my_compassion/static/src/js/show_password.js"
+      />
+        </xpath>
     </template>
 
 </odoo>