From e1217282acc6f35b2a5ecc55387b001a96105097 Mon Sep 17 00:00:00 2001
From: Vishal Sindham <vishalsindhamwork@gmail.com>
Date: Sat, 28 Jun 2025 17:11:47 +0530
Subject: [PATCH] feat(password-reset-form): Add show/hide toggle option to
 password reset form

---
 frappe/templates/styles/card_style.css | 23 +++++++++++++++
 frappe/www/update-password.html        | 40 ++++++++++++++++++++------
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frappe/templates/styles/card_style.css b/frappe/templates/styles/card_style.css
index d400347e6d..7e843cc0de 100644
--- a/frappe/templates/styles/card_style.css
+++ b/frappe/templates/styles/card_style.css
@@ -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;
+	}
+}
diff --git a/frappe/www/update-password.html b/frappe/www/update-password.html
index bd13302bca..604c111bbc 100644
--- a/frappe/www/update-password.html
+++ b/frappe/www/update-password.html
@@ -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 %}