implementation of password visibility changing fuinction for the own password change

Web/templates/change_password.html

@@ -26,18 +26,27 @@
         <form method="POST" action="{{ url_for('change_password') }}">
             <div class="form-group">
                 <label for="current_password">Aktuelles Passwort:</label>
-                <input type="password" id="current_password" name="current_password" required>
+                <div class="input-group">
+                    <input type="password" class="form-control" id="current_password" name="current_password" required>
+                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('current_password', this)">Anzeigen</button>
+                </div>
             </div>
             
             <div class="form-group">
                 <label for="new_password">Neues Passwort:</label>
-                <input type="password" id="new_password" name="new_password" required>
+                <div class="input-group">
+                    <input type="password" class="form-control" id="new_password" name="new_password" required>
+                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('new_password', this)">Anzeigen</button>
+                </div>
                 <small class="form-text text-muted">Das Passwort sollte mindestens 6 Zeichen lang sein.</small>
             </div>
             
             <div class="form-group">
                 <label for="confirm_password">Neues Passwort bestätigen:</label>
-                <input type="password" id="confirm_password" name="confirm_password" required>
+                <div class="input-group">
+                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
+                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('confirm_password', this)">Anzeigen</button>
+                </div>
             </div>
             
             <div class="form-actions">
@@ -48,6 +57,20 @@
     </div>
 </div>
 
+<script>
+    function togglePasswordVisibility(fieldId, button) {
+        var passwordInput = document.getElementById(fieldId);
+
+        if (passwordInput.type === 'password') {
+            passwordInput.type = 'text';
+            button.textContent = 'Verbergen';
+        } else {
+            passwordInput.type = 'password';
+            button.textContent = 'Anzeigen';
+        }
+    }
+</script>
+
 <style>
     .password-change-form {
         max-width: 500px;
@@ -74,7 +97,7 @@
         font-weight: bold;
     }
     
-    input[type="password"] {
+    .form-control {
         width: 100%;
         padding: 10px;
         border: 1px solid #ced4da;
@@ -122,6 +145,16 @@
     .btn-secondary:hover {
         background-color: #5a6268;
     }
+
+    .btn-outline-secondary {
+        border: 1px solid #ced4da;
+        background-color: #f8f9fa;
+        color: #495057;
+    }
+
+    .btn-outline-secondary:hover {
+        background-color: #e2e6ea;
+    }
     
     .alert {
         padding: 12px;
@@ -141,4 +174,4 @@
         border: 1px solid #c3e6cb;
     }
 </style>
-{% endblock %}
+{% endblock %}