Skip to content

Commit 9c9a6f9

Browse files
razzasidrazzasid
authored
Fix: Adjust Font Sizes and Spacing for Consistent Styling Across Login and Sign Up Pages (OWASP-BLT#3896)
* Fix: Signup and login page layout visibility issue (OWASP-BLT#3895) * Fix: Signup and login page layout visibility issue (OWASP-BLT#3895)
1 parent e430161 commit 9c9a6f9

File tree

2 files changed

+50
-51
lines changed

2 files changed

+50
-51
lines changed

‎website/templates/account/login.html

+42-43
Original file line numberDiff line numberDiff line change
@@ -22,27 +22,33 @@
2222
{% include "includes/sidenav.html" %}
2323
{% get_providers as socialaccount_providers %}
2424
<div class="flex items-center min-h-screen p-4 bg-gray-100 lg:justify-center">
25-
<div class="flex flex-col lg:scale-150 overflow-hidden bg-white rounded-md shadow-lg max md:flex-row md:flex-1 lg:max-w-screen-sm">
25+
<div class="flex flex-col overflow-hidden bg-white rounded-md shadow-lg max md:flex-row md:flex-1 lg:max-w-screen-sm">
26+
<!-- Left Side (Branding and Info) -->
2627
<div class="p-4 py-6 text-white bg-red-500 md:w-80 md:flex-shrink-0 md:flex md:flex-col md:items-center md:justify-evenly">
27-
<div class="my-3 text-4xl font-bold tracking-wider text-center">
28+
<div class="my-2 text-4xl font-bold tracking-wider text-center">
29+
<!-- Reduced margin-y -->
2830
<a href="{% url 'home' %}"
2931
class="hover:no-underline text-white hover:text-white">{% env 'PROJECT_NAME' %}</a>
3032
</div>
31-
<p class="mt-6 font-normal text-center text-white text-xl md:mt-0">
33+
<p class="mt-4 font-normal text-center text-white text-xl md:mt-0">
34+
<!-- Reduced margin-top -->
3235
{% env 'PROJECT_NAME' %} {% trans "is a bug logging tool to report issues and get points, Organizations are held accountable" %}.
3336
</p>
34-
<p class="flex flex-col items-center justify-center text-sm mt-10 text-center">
37+
<p class="flex flex-col items-center justify-center text-sm mt-6 text-center">
38+
<!-- Reduced margin-top -->
3539
<span>{% trans "Don't have an account" %}?</span>
3640
<a href="{% url 'account_signup' %}{% if redirect_field_value %}?{{ redirect_field_name }}={{ redirect_field_value }}{% endif %}"
3741
class="underline text-white">{% trans "Get Started" %}!</a>
3842
</p>
39-
<p class="mt-6 text-sm text-center text-white">
43+
<p class="mt-4 text-sm text-center text-white">
44+
<!-- Reduced margin-top -->
4045
{% trans "Read our" %} <a href="{% url 'terms' %}" class="underline text-white">{% trans "terms" %}</a> {% trans "and" %} <a href="{% url 'terms' %}" class="underline text-white">{% trans "conditions" %}</a>
4146
</p>
4247
</div>
48+
<!-- Right Side (Login Form) -->
4349
<div class="p-5 bg-white md:flex-1">
4450
<h3 class="text-2xl font-semibold text-gray-700">{% trans "Account Login" %}</h3>
45-
<form class="flex flex-col space-y-5 login"
51+
<form class="flex flex-col space-y-4 login"
4652
method="post"
4753
action="{% url 'account_login' %}">
4854
{% csrf_token %}
@@ -51,87 +57,81 @@ <h3 class="text-2xl font-semibold text-gray-700">{% trans "Account Login" %}</h3
5157
name="{{ redirect_field_name }}"
5258
value="{{ redirect_field_value }}" />
5359
{% endif %}
60+
<!-- Username Field -->
5461
<div class="flex flex-col space-y-1">
55-
<label for="email" class="text-sm m-0 font-semibold text-gray-500">Username</label>
62+
<label for="id_login" class="text-sm font-semibold text-gray-500">Username</label>
5663
<input autofocus
5764
id="id_login"
5865
name="login"
5966
value="{{ form.login.value|default:'' }}"
60-
class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
61-
<span class="help-block">{{ form.login.errors }}</span>
67+
class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
68+
<span class="help-block text-sm text-red-500">{{ form.login.errors }}</span>
6269
</div>
70+
<!-- Password Field -->
6371
<div class="flex flex-col space-y-1">
6472
<div class="flex items-center justify-between">
65-
<label for="password" class="text-sm m-0 font-semibold text-gray-500">Password</label>
73+
<label for="id_password" class="text-sm font-semibold text-gray-500">Password</label>
6674
<a href="{% url 'account_reset_password' %}"
67-
class="text-sm text-red-600 hover:underline focus:text-red-800">{% trans "Forgot Password?" %}</a>
75+
class="text-sm text-red-600 hover:underline">{% trans "Forgot Password?" %}</a>
6876
</div>
6977
<div class="relative">
7078
<input type="password"
7179
id="id_password"
7280
name="password"
7381
value="{{ form.password.value|default:'' }}"
74-
class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
82+
class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
7583
<button type="button"
7684
id="togglePassword"
77-
class=" password-toggle absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-800 focus:outline-none"
85+
class="password-toggle absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-800 focus:outline-none"
7886
data-target="id_password">
7987
<svg xmlns="http://www.w3.org/2000/svg"
8088
viewBox="0 0 24 24"
8189
fill="currentColor"
82-
class="size-6"
83-
id="svg-eye">
90+
class="size-6">
8491
<path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
8592
<path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
8693
<path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
8794
</svg>
8895
</button>
8996
</div>
90-
<span class="help-block">{{ form.password.errors }}</span>
97+
<span class="help-block text-sm text-red-500">{{ form.password.errors }}</span>
9198
</div>
99+
<!-- Remember Me Checkbox -->
92100
<div class="flex items-center space-x-2">
93101
<input type="checkbox"
94102
id="id_remember"
95103
name="remember"
96-
class="w-4 h-4 transition duration-300 rounded focus:ring-2 focus:ring-offset-0 focus:outline-none focus:ring-red-200" />
104+
class="w-4 h-4 transition duration-300 rounded focus:ring-2 focus:ring-offset-0 focus:outline-none focus:ring-red-200 " />
97105
<label for="id_remember"
98-
class="text-sm font-semibold m-0 text-gray-500 select-none">Remember me</label>
106+
class="mb-0 text-sm font-semibold text-gray-500 select-none">Remember me</label>
99107
</div>
108+
<!-- Login Button -->
100109
<div>
101110
<button type="submit"
102111
name="login_button"
103-
class="px-0 py-0 w-[100%] h-[28px] text-lg font-semibold text-white transition-colors duration-300 bg-red-500 rounded-md shadow hover:bg-red-600 focus:outline-none focus:ring-red-200 focus:ring-4">
112+
class="w-full px-4 py-2 text-lg font-semibold text-white transition-colors duration-300 bg-red-500 rounded-md shadow hover:bg-red-600 focus:outline-none focus:ring-red-200 focus:ring-4">
104113
{% trans "Log in" %}
105114
</button>
106115
</div>
107-
{% if form.errors %}
108-
<div>
109-
{% for _, error in form.errors.items %}
110-
<strong class="text-red-500 text-center text-xl">{{ error }}</strong>
111-
{% endfor %}
112-
</div>
113-
{% endif %}
114-
<div class="flex flex-col space-y-5">
116+
<!-- Social Login Buttons -->
117+
<div class="flex flex-col space-y-4">
115118
<span class="flex items-center justify-center space-x-2">
116119
<span class="h-px bg-gray-400 w-14"></span>
117120
<span class="font-normal text-gray-500">{% trans "or login with" %}</span>
118121
<span class="h-px bg-gray-400 w-14"></span>
119122
</span>
120-
<div class="flex flex-col space-y-4">
121-
<a href="{% url 'github_login' %}"
122-
class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline">
123-
<span>
124-
<svg class="w-5 h-5 text-gray-800 fill-current group-hover:text-white"
125-
viewBox="0 0 16 16"
126-
version="1.1"
127-
aria-hidden="true">
128-
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
129-
</path>
130-
</svg>
131-
</span>
132-
<span class="text-sm font-medium text-gray-800 group-hover:text-white">Github</span>
133-
</a>
134-
<!-- <a href="{% url 'google_login' %}" class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline">
123+
<a href="{% url 'github_login' %}"
124+
class="flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none">
125+
<svg class="w-5 h-5 text-gray-800 fill-current group-hover:text-white"
126+
viewBox="0 0 16 16"
127+
version="1.1"
128+
aria-hidden="true">
129+
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
130+
</path>
131+
</svg>
132+
<span class="text-sm font-medium text-gray-800 group-hover:text-white">Github</span>
133+
</a>
134+
<!-- <a href="{% url 'google_login' %}" class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline">
135135
<span>
136136
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-800 fill-current group-hover:text-white" viewBox="0 0 24 24">
137137
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.5h-1.75v1.75h-1.167v-1.75h-1.75v-1.166h1.75v-1.75h1.167v1.75h1.75v1.166z" />
@@ -147,7 +147,6 @@ <h3 class="text-2xl font-semibold text-gray-700">{% trans "Account Login" %}</h3
147147
</span>
148148
<span class="text-sm font-medium text-gray-800 group-hover:text-white">Facebook</span>
149149
</a> -->
150-
</div>
151150
</div>
152151
</form>
153152
</div>

‎website/templates/account/signup.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@
3838
}
3939
</style>
4040
{% include "includes/sidenav.html" %}
41-
<div class="flex items-center w-[100%] h-[60vh] min-h-screen p-4 bg-gray-100 lg:justify-center">
42-
<div class="flex flex-col lg:scale-150 overflow-hidden bg-white rounded-md shadow-lg max md:flex-row md:flex-1 lg:max-w-screen-sm">
43-
<div class="p-4 py-6 text-white bg-red-500 md:w-80 md:flex-shrink-0 md:flex md:flex-col md:items-center md:justify-evenly">
41+
<div class="flex items-center justify-center w-full min-h-screen p-4 bg-gray-100 h-full">
42+
<div class="flex flex-col w-full max-w-md bg-white rounded-md shadow-lg md:flex-row md:max-w-2xl lg:max-w-4xl">
43+
<div class="p-4 py-6 text-white bg-red-500 md:w-96 md:flex-shrink-0 md:flex md:flex-col md:items-center md:justify-evenly">
4444
<div class="my-3 text-4xl font-bold tracking-wider text-center">
4545
<a href="{% url 'home' %}"
4646
class="hover:no-underline text-white hover:text-white">{% env 'PROJECT_NAME' %}</a>
@@ -69,7 +69,7 @@ <h3 class="my-4 text-2xl font-semibold text-gray-700">{% trans "Account SignUp"
6969
id="id_username"
7070
name="username"
7171
value="{{ form.username.value|default:'' }}"
72-
class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
72+
class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
7373
<span class="help-block">{{ form.username.errors }}</span>
7474
</div>
7575
<div class="flex flex-col space-y-1">
@@ -78,7 +78,7 @@ <h3 class="my-4 text-2xl font-semibold text-gray-700">{% trans "Account SignUp"
7878
id="id_email"
7979
name="email"
8080
value="{{ form.email.value|default:'' }}"
81-
class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
81+
class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
8282
<span class="help-block">{{ form.email.errors }}</span>
8383
</div>
8484
<div class="flex flex-col space-y-1">
@@ -90,7 +90,7 @@ <h3 class="my-4 text-2xl font-semibold text-gray-700">{% trans "Account SignUp"
9090
id="id_password"
9191
name="password1"
9292
value="{{ form.password1.value|default:'' }}"
93-
class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
93+
class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
9494
<button type="button"
9595
id="togglePassword"
9696
class="password-toggle absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-800 focus:outline-none"
@@ -117,7 +117,7 @@ <h3 class="my-4 text-2xl font-semibold text-gray-700">{% trans "Account SignUp"
117117
id="id_password2"
118118
name="password2"
119119
value="{{ form.password2.value|default:'' }}"
120-
class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
120+
class="px-4 py-2 w-full transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200" />
121121
<button type="button"
122122
id="togglePassword"
123123
class="password-toggle absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-800 focus:outline-none"
@@ -173,7 +173,7 @@ <h3 class="my-4 text-2xl font-semibold text-gray-700">{% trans "Account SignUp"
173173
<div>
174174
<button type="submit"
175175
name="signup_button"
176-
class=" w-[30%] h-[28px] text-lg font-semibold text-white transition-colors duration-300 bg-red-500 rounded-md shadow hover:bg-red-600 focus:outline-none focus:ring-red-200 focus:ring-4">
176+
class="w-full md:w-auto px-4 py-2 text-lg font-semibold text-white transition-colors duration-300 bg-red-500 rounded-md shadow hover:bg-red-600 focus:outline-none focus:ring-red-200 focus:ring-4">
177177
{% trans "Sign Up" %}
178178
</button>
179179
</div>

0 commit comments

Comments
 (0)