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>