Invario/Inventarsystem
3
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 392 Wiki Activity

implementation of password visibility changing fuinction for the own password change

Browse Source
This commit is contained in:
AIIrondev
2026-09-24 17:26:25 +02:00
parent c2bfed710d
commit f3c7b6cd55
1 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/change_password.html
+37 -4
View File
@@ -26,18 +26,27 @@
<form method="POST" action="{{ url_for('change_password') }}"> <form method="POST" action="{{ url_for('change_password') }}">
<div class="form-group"> <div class="form-group">
<label for="current_password">Aktuelles Passwort:</label> <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>
<div class="form-group"> <div class="form-group">
<label for="new_password">Neues Passwort:</label> <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> <small class="form-text text-muted">Das Passwort sollte mindestens 6 Zeichen lang sein.</small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="confirm_password">Neues Passwort bestätigen:</label> <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>
<div class="form-actions"> <div class="form-actions">
@@ -48,6 +57,20 @@
</div> </div>
</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> <style>
.password-change-form { .password-change-form {
max-width: 500px; max-width: 500px;
@@ -74,7 +97,7 @@
font-weight: bold; font-weight: bold;
} }
input[type="password"] { .form-control {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid #ced4da; border: 1px solid #ced4da;
@@ -123,6 +146,16 @@
background-color: #5a6268; background-color: #5a6268;
} }
.btn-outline-secondary {
border: 1px solid #ced4da;
background-color: #f8f9fa;
color: #495057;
}
.btn-outline-secondary:hover {
background-color: #e2e6ea;
}
.alert { .alert {
padding: 12px; padding: 12px;
margin-bottom: 20px; margin-bottom: 20px;