Skip to content

Commit d25d4ed

Browse files
makingclaude
making
and
claude
committed
Update login form design to match TODO UI
- Redesigned login form to match the TODO UI style - Added consistent styling for inputs and buttons - Improved responsive layout and user experience - Added consistent height to form elements - Positioned the form higher on the page 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 709a2c8 commit d25d4ed

File tree

1 file changed

+176
-48
lines changed

1 file changed

+176
-48
lines changed

‎authorization/src/main/resources/templates/login.mustache‎

Lines changed: 176 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,206 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Login</title>
77
<style>
8-
/* Container */
8+
/* Global styles */
9+
* {
10+
box-sizing: border-box;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body {
16+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
17+
background-color: rgb(249, 250, 251); /* bg-gray-50 */
18+
color: rgb(17, 24, 39); /* text-gray-900 */
19+
min-height: 100vh;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: flex-start;
24+
padding-top: 3rem; /* pt-12 */
25+
}
26+
27+
/* Container styles */
928
.container {
10-
max-width: 600px;
11-
margin: 50px auto;
12-
font-family: Arial, sans-serif;
13-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
14-
padding: 20px;
15-
border-radius: 8px;
16-
background-color: #fff;
29+
max-width: 4xl;
30+
width: 90%;
31+
margin: 0 auto;
32+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1733
}
18-
34+
35+
@keyframes fadeIn {
36+
0% { opacity: 0; }
37+
100% { opacity: 1; }
38+
}
39+
1940
/* Header */
2041
.header {
42+
font-size: 2.25rem; /* text-4xl */
43+
font-weight: 700; /* font-bold */
2144
text-align: center;
22-
color: #333;
23-
font-size: 24px;
24-
margin-bottom: 20px;
45+
margin-bottom: 1.5rem; /* mb-6 */
46+
background-image: linear-gradient(to right, #1971c2, #228be6, #4dabf7); /* from-primary-dark via-primary to-primary-light */
47+
background-clip: text;
48+
color: transparent;
49+
-webkit-background-clip: text;
50+
-webkit-text-fill-color: transparent;
51+
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); /* drop-shadow-sm */
52+
padding: 0.5rem 0; /* py-2 */
2553
}
26-
54+
55+
/* Welcome Message */
56+
.welcome-message {
57+
text-align: center;
58+
font-size: 1.125rem; /* text-lg */
59+
color: rgb(75, 85, 99); /* text-gray-600 */
60+
margin-bottom: 1.5rem; /* mb-6 */
61+
}
62+
63+
/* Form Container */
64+
.form-container {
65+
margin-bottom: 2rem; /* mb-8 */
66+
background-color: white;
67+
padding: 1.5rem; /* p-6 */
68+
border-radius: 0.5rem; /* rounded-lg */
69+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
70+
animation: fadeIn 0.3s ease-in-out;
71+
}
72+
73+
/* Form */
74+
.login-form {
75+
display: flex;
76+
flex-direction: column;
77+
gap: 0.75rem; /* gap-3 */
78+
}
79+
80+
/* Input Container */
81+
.input-container {
82+
width: 100%;
83+
margin-bottom: 0.5rem; /* mb-2 */
84+
}
85+
2786
/* Input Field */
2887
.input-field {
88+
display: block;
2989
width: 100%;
30-
padding: 10px;
31-
font-size: 16px;
32-
border: 1px solid #ddd;
33-
border-radius: 4px;
34-
margin-bottom: 15px;
90+
padding: 0.5rem 1rem; /* px-4 py-2 */
91+
font-size: 1rem;
92+
border: 1px solid rgb(209, 213, 219); /* border-gray-300 */
93+
border-radius: 0.375rem; /* rounded-md */
94+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
95+
transition: all 0.2s;
96+
height: 2.5rem; /* h-10 */
97+
line-height: 1.5rem; /* leading-6 */
3598
}
36-
37-
/* Styled Button */
99+
100+
.input-field:focus {
101+
outline: none;
102+
border-color: transparent;
103+
box-shadow: 0 0 0 2px rgb(34, 139, 230); /* focus:ring-2 focus:ring-primary */
104+
}
105+
106+
/* Button */
38107
.styled-button {
39-
width: 100%;
40-
padding: 10px;
41-
font-size: 16px;
42-
background-color: #28a745;
43-
color: #fff;
108+
display: inline-flex;
109+
align-items: center;
110+
justify-content: center;
111+
gap: 0.5rem; /* gap-2 */
112+
padding: 0.5rem 1rem; /* px-4 py-2 */
113+
font-size: 1rem;
114+
font-weight: 500; /* font-medium */
44115
border: none;
45-
border-radius: 4px;
116+
border-radius: 0.375rem; /* rounded-md */
117+
background-color: #228be6; /* bg-primary */
118+
color: white; /* text-white */
46119
cursor: pointer;
47-
transition: background-color 0.3s;
120+
transition: all 0.2s;
121+
white-space: nowrap;
122+
margin-top: 0.5rem; /* mt-2 */
123+
height: 2.5rem; /* h-10 */
124+
line-height: 1.5rem; /* leading-6 */
48125
}
49-
126+
50127
.styled-button:hover {
51-
background-color: #218838;
128+
background-color: #1971c2; /* hover:bg-primary-dark */
52129
}
53-
54-
/* Message */
130+
131+
.styled-button:focus {
132+
outline: none;
133+
box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px #228be6; /* focus:ring-2 focus:ring-offset-2 focus:ring-primary */
134+
}
135+
136+
/* Error message */
55137
.error-message {
138+
background-color: #ff8787; /* bg-danger-light */
139+
color: #e03131; /* text-danger-dark */
140+
padding: 0.75rem; /* p-3 */
141+
border-radius: 0.375rem; /* rounded-md */
142+
margin-bottom: 1rem; /* mb-4 */
56143
text-align: center;
57-
color: red;
144+
animation: fadeIn 0.3s ease-in-out;
145+
}
146+
147+
/* Label */
148+
.form-label {
149+
display: block;
150+
margin-bottom: 0.5rem; /* mb-2 */
151+
font-weight: 500; /* font-medium */
152+
color: rgb(75, 85, 99); /* text-gray-600 */
153+
font-size: 0.875rem; /* text-sm */
154+
}
155+
156+
/* For small screens, stack form elements */
157+
@media (min-width: 640px) {
158+
.login-form {
159+
flex-direction: column;
160+
}
58161
}
59162
</style>
60163
</head>
61164
<body>
62165

63166
<div class="container">
64-
<div class="header">Login</div>
65-
{{#springMacroRequestContext.request.parameterMap.error}}
66-
<div class="error-message">{{SPRING_SECURITY_LAST_EXCEPTION}}</div>
67-
{{/springMacroRequestContext.request.parameterMap.error}}
68-
<form action="/login" method="post">
69-
<label>
70-
<input type="text" name="username" placeholder="Username" class="input-field" required>
71-
</label>
72-
<label>
73-
<input type="password" name="password" placeholder="Password" class="input-field" required>
74-
</label>
75-
{{#_csrf}}
76-
<input type="hidden" name="_csrf" value="{{_csrf.token}}"/>
77-
{{/_csrf}}
78-
<button type="submit" class="styled-button">Login</button>
79-
</form>
167+
<h1 class="header">Authentication Service</h1>
168+
169+
<p class="welcome-message">Please sign in to continue</p>
170+
171+
<div class="form-container">
172+
{{#springMacroRequestContext.request.parameterMap.error}}
173+
<div class="error-message">{{SPRING_SECURITY_LAST_EXCEPTION}}</div>
174+
{{/springMacroRequestContext.request.parameterMap.error}}
175+
176+
<form action="/login" method="post" class="login-form">
177+
<div class="input-container">
178+
<input
179+
type="text"
180+
id="username"
181+
name="username"
182+
placeholder="Username"
183+
class="input-field"
184+
required
185+
>
186+
</div>
187+
188+
<div class="input-container">
189+
<input
190+
type="password"
191+
id="password"
192+
name="password"
193+
placeholder="Password"
194+
class="input-field"
195+
required
196+
>
197+
</div>
198+
199+
{{#_csrf}}
200+
<input type="hidden" name="_csrf" value="{{_csrf.token}}"/>
201+
{{/_csrf}}
202+
203+
<button type="submit" class="styled-button">
204+
Login
205+
</button>
206+
</form>
207+
</div>
80208
</div>
81209

82210
</body>

0 commit comments

Comments
 (0)