From 9b34838adbfe1875cc7a1d8fd63a9b0d55ceeb3b Mon Sep 17 00:00:00 2001
From: Joseph Adams <105917501+josephadamsdev@users.noreply.github.com>
Date: Wed, 21 Jan 2026 07:48:49 +0100
Subject: [PATCH] fix: RTL direction for login form inputs (#35782)

* fix: RTL direction for login form inputs

* Fix RTL overlap for login password field

* Fix login RTL alignment

* fix: refine RTL login input layout

---------

Co-authored-by: josephadamsdev <josephadamsdev@users.noreply.github.com>
---
 frappe/public/scss/login.bundle.scss |  8 ++++++++
 frappe/www/login.html                | 12 +++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frappe/public/scss/login.bundle.scss b/frappe/public/scss/login.bundle.scss
index 6e11610175..12b2439df7 100644
--- a/frappe/public/scss/login.bundle.scss
+++ b/frappe/public/scss/login.bundle.scss
@@ -76,6 +76,7 @@ body {
 			}
 
 			.forgot-password-message {
+				/* rtl:ignore */
 				text-align: right;
 				line-height: 1;
 
@@ -112,6 +113,13 @@ body {
 				}
 			}
 
+			.password-field {
+				input[dir="rtl"] {
+					/* rtl:ignore */
+					padding-left: 3.5rem;
+				}
+			}
+
 			.btn-login-option {
 				@include get_textstyle("base", "medium");
 				color: var(--text-gray-700);
diff --git a/frappe/www/login.html b/frappe/www/login.html
index 0759169b65..3fe29e14d3 100644
--- a/frappe/www/login.html
+++ b/frappe/www/login.html
@@ -1,13 +1,15 @@
 {% extends "templates/web.html" %}
 {% block navbar %}{% endblock %}
 
+{% set input_dir = "rtl" if is_rtl() else "ltr" %}
+
 {% macro email_login_body() -%}
 {% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
 <div class="page-card-body">
 	<div class="form-group">
 		<label class="form-label sr-only" for="login_email">{{ login_label or _("Email")}}</label>
 		<div class="email-field">
-			<input type="text" id="login_email" class="form-control"
+			<input type="text" id="login_email" class="form-control" dir="{{ input_dir }}"
 				placeholder="{% if login_name_placeholder %}{{ login_name_placeholder  }}{% else %}{{ _('jane@example.com') }}{% endif %}"
 				required autofocus autocomplete="username">
 
@@ -21,7 +23,7 @@
 	<div class="form-group">
 		<label class="form-label sr-only" for="login_password">{{ _("Password") }}</label>
 		<div class="password-field">
-			<input type="password" id="login_password" class="form-control" placeholder="•••••"
+			<input type="password" id="login_password" class="form-control" dir="{{ input_dir }}" placeholder="•••••"
 				autocomplete="current-password" required>
 
 			<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
@@ -34,7 +36,7 @@
 
 	{% if not disable_user_pass_login %}
 	<p class="forgot-password-message">
-		<a href="#forgot">{{ _("Forgot Password?") }}</a>
+		<a href="#forgot" dir="auto">{{ _("Forgot Password?") }}</a>
 	</p>
 	{% endif %}
 </div>
@@ -180,7 +182,7 @@
 			<form class="form-signin form-forgot hide" role="form">
 				<div class="page-card-body">
 					<div class="email-field">
-						<input type="email" id="forgot_email" class="form-control"
+						<input type="email" id="forgot_email" class="form-control" dir="{{ input_dir }}"
 							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
 						<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
 							xmlns="http://www.w3.org/2000/svg">
@@ -207,7 +209,7 @@
 			<form class="form-signin form-login-with-email-link hide" role="form">
 				<div class="page-card-body">
 					<div class="email-field">
-						<input type="email" id="login_with_email_link_email" class="form-control"
+						<input type="email" id="login_with_email_link_email" class="form-control" dir="{{ input_dir }}"
 							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
 						<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
 							xmlns="http://www.w3.org/2000/svg">