vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #33150 from VishalSindham/feat-add-show_hide-toggle-option-password-reset-form

Browse source 
feat(password-reset-form): add show/hide toggle option to password reset form
This commit is contained in:
Ejaaz Khan 2025-06-29 20:57:09 +05:30 • committed by GitHub
commit 9097901f5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 55 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frappe/templates/styles/card_style.css
View file

@ -90,3 +90,26 @@ button#update {
max-width: 100%;
vertical-align: middle;
}
.field-icon {
left: 9px;
top: 5px;
position: absolute;
z-index: 2;
fill: var(--text-light);
}
.password-field {
position: relative;
input {
padding-left: 35px;
}
.toggle-password {
right: 9px;
top: 5px;
position: absolute;
z-index: 2;
cursor: pointer;
font-size: 12px;
}
}

40
frappe/www/update-password.html
View file

@ -35,17 +35,30 @@
<form id="reset-password" style="width: 100%">
<div class="form-group">
<input id="old_password" type="password"
class="form-control mb-4" placeholder="{{ _('Old Password') }}" autocomplete="current-password">
class="form-control mb-4" placeholder="{{ _('Old Password') }}" autocomplete="current-password" required>
</div>
<div class="form-group">
<input id="new_password" type="password"
class="form-control mb-4" placeholder="{{ _('New Password') }}" autocomplete="new-password">
<span class="password-strength-indicator indicator"></span>
<div class="password-field">
<input type="password" id="new_password"
class="form-control mb-4" placeholder="{{ _('New Password') }}" autocomplete="new-password" required>
<span class="password-strength-indicator indicator"></span>
<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use class="es-lock" href="#es-line-lock"></use>
</svg>
<span toggle="#new_password" class="toggle-password text-muted">{{ _('Show') }}</span>
</div>
</div>
<div class="form-group">
<input id="confirm_password" type="password"
class="form-control mb-4" placeholder="{{ _('Confirm Password') }}" autocomplete="new-password">
<div class="password-field">
<input id="confirm_password" type="password"
class="form-control mb-4" placeholder="{{ _('Confirm Password') }}" autocomplete="new-password" required>
<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use class="es-lock" href="#es-line-lock"></use>
</svg>
<span toggle="#confirm_password" class="toggle-password text-muted">{{ _('Show') }}</span>
</div>
</div>
<p class="password-mismatch-message text-muted small hidden mt-2"></p>
<p class='password-strength-message text-muted small mt-2 hidden'></p>
@ -96,6 +109,18 @@ frappe.ready(function() {
if(e.which===13) update_button.click();
})
$(".toggle-password").click(function() {
let input = $($(this).attr("toggle"))
if(input.attr("type") == "password") {
input.attr("type", "text")
$(this).text({{ _("Hide") | tojson }});
} else {
input.attr("type", "password")
$(this).text({{ _("Show") | tojson }});
}
});
update_button.click(function() {
var args = {
key: key || "",
@ -300,7 +325,6 @@ frappe.ready(function() {
}
};
});
</script>
{% endblock %}