From 5ad5fcc91fa0f38e1a2b79aa48b4320a57322483 Mon Sep 17 00:00:00 2001
From: Robin Franken <robin.franken@mendix.com>
Date: Tue, 5 Dec 2023 11:07:32 +0100
Subject: [PATCH] Extract password toggle logic

Moved the password toggle logic to a separate file. This way the Atlas template is CSP compliant. Additionally, it allows us to not have a duplicate of the same logic in multiple files.
---
 .../atlas/src/theme/web/js/toggle-password.js     | 15 +++++++++++++++
 .../theme/web/login-with-mendixsso-button.html    | 15 ++-------------
 packages/atlas/src/theme/web/login.html           | 15 ++-------------
 3 files changed, 19 insertions(+), 26 deletions(-)
 create mode 100644 packages/atlas/src/theme/web/js/toggle-password.js

diff --git a/packages/atlas/src/theme/web/js/toggle-password.js b/packages/atlas/src/theme/web/js/toggle-password.js
new file mode 100644
index 000000000..c52027125
--- /dev/null
+++ b/packages/atlas/src/theme/web/js/toggle-password.js
@@ -0,0 +1,15 @@
+(function() {
+    const passwordInput = document.getElementById("passwordInput");
+    const passwordToggle = document.getElementById("passwordToggle");
+
+    function togglePassword() {
+        if (passwordToggle.classList.contains("glyphicon-eye-close"))
+            passwordToggle.classList.replace("glyphicon-eye-close", "glyphicon-eye-open");
+        else passwordToggle.classList.replace("glyphicon-eye-open", "glyphicon-eye-close");
+
+        if (passwordInput.type === "password") passwordInput.type = "text";
+        else passwordInput.type = "password";
+    }
+
+    passwordToggle.addEventListener("click", togglePassword);
+})();
\ No newline at end of file
diff --git a/packages/atlas/src/theme/web/login-with-mendixsso-button.html b/packages/atlas/src/theme/web/login-with-mendixsso-button.html
index e58343b37..813622b99 100644
--- a/packages/atlas/src/theme/web/login-with-mendixsso-button.html
+++ b/packages/atlas/src/theme/web/login-with-mendixsso-button.html
@@ -47,7 +47,7 @@ <h2 id="loginHeader">Sign in</h2>
                                         autocapitalize="none"
                                         autocomplete="off"
                                     />
-                                    <span class="glyphicon glyphicon-eye-close" onClick="togglePassword()"></span>
+                                    <span class="glyphicon glyphicon-eye-close" id="passwordToggle"></span>
                                 </div>
                             </div>
                             <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
@@ -72,17 +72,6 @@ <h2 id="loginHeader">Sign in</h2>
 
         <script src="js/login_i18n.js?{{cachebust}}"></script>
         <script src="js/login.js?{{cachebust}}"></script>
-        <script>
-            function togglePassword() {
-                const icon = document.querySelector("[class*=glyphicon-eye]");
-                if (icon.classList.contains("glyphicon-eye-close"))
-                    icon.classList.replace("glyphicon-eye-close", "glyphicon-eye-open");
-                else icon.classList.replace("glyphicon-eye-open", "glyphicon-eye-close");
-
-                const input = document.querySelector("#passwordInput");
-                if (input.type === "password") input.type = "text";
-                else input.type = "password";
-            }
-        </script>
+        <script src="js/toggle-password.js?{{cachebust}}"></script>
     </body>
 </html>
diff --git a/packages/atlas/src/theme/web/login.html b/packages/atlas/src/theme/web/login.html
index 39be8094f..00f921866 100644
--- a/packages/atlas/src/theme/web/login.html
+++ b/packages/atlas/src/theme/web/login.html
@@ -47,7 +47,7 @@ <h2 id="loginHeader">Sign in</h2>
                                         autocapitalize="none"
                                         autocomplete="off"
                                     />
-                                    <span class="glyphicon glyphicon-eye-close" onClick="togglePassword()"></span>
+                                    <span class="glyphicon glyphicon-eye-close" id="passwordToggle"></span>
                                 </div>
                             </div>
                             <button id="loginButton" type="submit" class="btn btn-success btn-lg">Sign in</button>
@@ -62,17 +62,6 @@ <h2 id="loginHeader">Sign in</h2>
 
         <script src="js/login_i18n.js?{{cachebust}}"></script>
         <script src="js/login.js?{{cachebust}}"></script>
-        <script>
-            function togglePassword() {
-                const icon = document.querySelector("[class*=glyphicon-eye]");
-                if (icon.classList.contains("glyphicon-eye-close"))
-                    icon.classList.replace("glyphicon-eye-close", "glyphicon-eye-open");
-                else icon.classList.replace("glyphicon-eye-open", "glyphicon-eye-close");
-
-                const input = document.querySelector("#passwordInput");
-                if (input.type === "password") input.type = "text";
-                else input.type = "password";
-            }
-        </script>
+        <script src="js/toggle-password.js?{{cachebust}}"></script>
     </body>
 </html>