implementation of password visibility changing fuinction for the own password change

Web/templates/admin_school_settings.html

@@ -78,11 +78,11 @@
                     <div class="form-row">
                         <div class="form-group">
                             <label for="filter_name_1">Name Filter 1</label>
-                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
+                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Fachgebiet') }}" placeholder="z. B. Fachgebiet">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_2">Name Filter 2</label>
-                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Fach') }}" placeholder="z. B. Fach">
+                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_3">Name Filter 3</label>

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 %}

Web/templates/edit_library.html

@@ -278,8 +278,8 @@
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
-                        <label for="filter1-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
-                        <select id="filter1-{{ idx + 1 }}" name="filter" class="filter-dropdown-select" data-selected="{{ item.Filter[idx] if item.Filter and item.Filter|length > idx else '' }}">
+                        <label for="filter2-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <select id="filter2-{{ idx + 1 }}" name="filter" class="filter-dropdown-select" data-selected="{{ item.Filter[idx] if item.Filter and item.Filter|length > idx else '' }}">
                             <option value="">-- Optional --</option>
                         </select>
                     </div>
@@ -290,8 +290,8 @@
                 <div class="multi-filter">
                     {% for idx in range(4) %}
                     <div class="form-group">
-                        <label for="filter2-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
-                        <select id="filter2-{{ idx + 1 }}" name="filter2" class="filter-dropdown-select" data-selected="{{ item.Filter2[idx] if item.Filter2 and item.Filter2|length > idx else '' }}">
+                        <label for="filter1-{{ idx + 1 }}">Wert {{ idx + 1 }}:</label>
+                        <select id="filter1-{{ idx + 1 }}" name="filter2" class="filter-dropdown-select" data-selected="{{ item.Filter2[idx] if item.Filter2 and item.Filter2|length > idx else '' }}">
                             <option value="">-- Optional --</option>
                         </select>
                     </div>

Web/templates/main_admin.html

@@ -2343,7 +2343,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>{{ filter_names.get('2', 'Fach') }}</label>
+                    <label>{{ filter_names.get('1', 'Fach') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
                 </div>
@@ -2357,7 +2357,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>{{ filter_names.get('1', 'Klassenstufe') }}</label>
+                    <label>{{ filter_names.get('2', 'Klassenstufe') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
                 </div>
@@ -4112,17 +4112,17 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 </div>
 
                 <div class="detail-group">
-                    <div class="detail-label">Unterrichtsfach:</div>
+                    <div class="detail-label">{{ filter_names.get('1', 'Unterrichtsfach') }}:</div>
                     <div class="detail-value">${escapeHtml(filter1Array.join(', ') || '-')}</div>
                 </div>
 
                 <div class="detail-group">
-                    <div class="detail-label">Jahrgangsstufe:</div>
+                    <div class="detail-label">{{ filter_names.get('2', 'Jahrgangsstufe') }}:</div>
                     <div class="detail-value">${escapeHtml(filter2Array.join(', ') || '-')}</div>
                 </div>
 
                 <div class="detail-group">
-                    <div class="detail-label">Schlagwort:</div>
+                    <div class="detail-label">{{ filter_names.get('3', 'Schlagwort') }}:</div>
                     <div class="detail-value">${escapeHtml(filter3Array.join(', ') || '-')}</div>
                 </div>
 

Web/templates/upload_admin.html

@@ -865,38 +865,6 @@
             <!-- Normal Item Mode: Standard Filters -->
             <div class="filter-inputs">
                 <h3>{{ filter_names.get('1', 'Jahrgangsstufe') }}</h3>
-                <div class="multi-filter">
-                    <div class="form-group">
-                        <label for="filter1-1">Wert 1:</label>
-                        <select id="filter1-1" name="filter" class="filter-dropdown-select" required>
-                            <option value="">-- Bitte auswählen --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="filter1-2">Wert 2:</label>
-                        <select id="filter1-2" name="filter" class="filter-dropdown-select">
-                            <option value="">-- Optional --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="filter1-3">Wert 3:</label>
-                        <select id="filter1-3" name="filter" class="filter-dropdown-select">
-                            <option value="">-- Optional --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="filter1-4">Wert 4:</label>
-                        <select id="filter1-4" name="filter" class="filter-dropdown-select">
-                            <option value="">-- Optional --</option>
-                            <!-- Options will be loaded by JavaScript -->
-                        </select>
-                    </div>
-                </div>
-                
-                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">
                         <label for="filter2-1">Wert 1:</label>
@@ -928,6 +896,38 @@
                     </div>
                 </div>
                 
+                <h3>{{ filter_names.get('2', 'Fachgebiet') }}</h3>
+                <div class="multi-filter">
+                    <div class="form-group">
+                        <label for="filter1-1">Wert 1:</label>
+                        <select id="filter1-1" name="filter" class="filter-dropdown-select" required>
+                            <option value="">-- Bitte auswählen --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="filter1-2">Wert 2:</label>
+                        <select id="filter1-2" name="filter" class="filter-dropdown-select">
+                            <option value="">-- Optional --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="filter1-3">Wert 3:</label>
+                        <select id="filter1-3" name="filter" class="filter-dropdown-select">
+                            <option value="">-- Optional --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="filter1-4">Wert 4:</label>
+                        <select id="filter1-4" name="filter" class="filter-dropdown-select">
+                            <option value="">-- Optional --</option>
+                            <!-- Options will be loaded by JavaScript -->
+                        </select>
+                    </div>
+                </div>
+                
                 <h3>{{ filter_names.get('3', 'Schlagwort') }}</h3>
                 <div class="multi-filter">
                     <div class="form-group">