Skip to content

Commit de128f7

Browse files
gbowne1gbowne1
authored
Merge pull request #91 from abdul-wahab619/feature/express-validation
Fix auth form validation and login redirect issue
2 parents cfb1594 + da25293 commit de128f7

13 files changed

Lines changed: 1989 additions & 116 deletions

File tree

‎.env.example‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ <h1 class="h4 mb-0">DevStream</h1>
7575

7676
<nav aria-label="Main navigation">
7777
<ul class="nav align-items-center gap-3">
78+
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
79+
<li class="nav-item"><a href="#" class="nav-link">Browse</a></li>
80+
<li class="nav-item"><a href="#" class="nav-link">Schedule</a></li>
7881
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
7982
<li class="nav-item"><a href="#" class="nav-link">Browse</a></li>
8083
<li class="nav-item"><a href="#" class="nav-link">Schedule</a></li>
@@ -94,6 +97,17 @@ <h1 class="h4 mb-0">DevStream</h1>
9497
<i class="fas fa-bars"></i>
9598
</button>
9699
</li>
100+
101+
<li class="nav-item" id="authNavLogin">
102+
<a href="/login.html" class="btn btn-sm btn-primary" id="loginLink">
103+
<i class="fas fa-sign-in-alt me-1"></i>Login
104+
</a>
105+
</li>
106+
<li class="nav-item d-none" id="authNavLogout">
107+
<button id="logoutBtn" class="btn btn-sm btn-outline-danger" type="button">
108+
<i class="fas fa-sign-out-alt me-1"></i>Logout
109+
</button>
110+
</li>
97111
</ul>
98112
</nav>
99113
</div>

‎login.html‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,279 @@
1717
object-src 'none';
1818
base-uri 'self';
1919
frame-ancestors 'none';
20+
" />
21+
22+
<title>Login | DevStream</title>
23+
<meta name="description" content="Login to DevStream" />
24+
<link rel="manifest" href="/manifest.json" />
25+
<link rel="icon" href="/favicon.ico" />
26+
27+
<link rel="preconnect" href="https://fonts.googleapis.com" />
28+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
29+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
30+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
31+
crossorigin="anonymous" />
32+
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet" />
33+
<link rel="stylesheet" href="/src/css/style.css" />
34+
35+
<style>
36+
body {
37+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
38+
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
39+
min-height: 100vh;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
padding: 20px;
44+
}
45+
46+
body.dark {
47+
background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
48+
}
49+
50+
.login-wrapper {
51+
width: 100%;
52+
max-width: 440px;
53+
}
54+
55+
.login-header {
56+
text-align: center;
57+
margin-bottom: 2rem;
58+
}
59+
60+
.login-header .brand {
61+
display: inline-flex;
62+
align-items: center;
63+
gap: 0.75rem;
64+
color: #fff;
65+
font-size: 2rem;
66+
font-weight: 700;
67+
text-decoration: none;
68+
margin-bottom: 0.5rem;
69+
}
70+
71+
.login-header .brand i {
72+
font-size: 2.5rem;
73+
}
74+
75+
.login-header p {
76+
color: rgba(255, 255, 255, 0.9);
77+
font-size: 1.1rem;
78+
margin: 0;
79+
}
80+
81+
.login-card {
82+
background: #fff;
83+
border-radius: 16px;
84+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
85+
padding: 2.5rem;
86+
}
87+
88+
body.dark .login-card {
89+
background: #1e1e2e;
90+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
91+
}
92+
93+
.login-card h2 {
94+
font-size: 1.75rem;
95+
font-weight: 700;
96+
margin-bottom: 0.5rem;
97+
color: #1a1a2e;
98+
}
99+
100+
body.dark .login-card h2 {
101+
color: #fff;
102+
}
103+
104+
.login-card .subtitle {
105+
color: #6b7280;
106+
margin-bottom: 2rem;
107+
}
108+
109+
body.dark .login-card .subtitle {
110+
color: #9ca3af;
111+
}
112+
113+
.form-label {
114+
font-weight: 600;
115+
color: #374151;
116+
margin-bottom: 0.5rem;
117+
}
118+
119+
body.dark .form-label {
120+
color: #d1d5db;
121+
}
122+
123+
.form-control {
124+
padding: 0.875rem 1rem;
125+
border: 2px solid #e5e7eb;
126+
color: #9ca3af;
127+
border-radius: 10px;
128+
font-size: 1rem;
129+
transition: all 0.2s;
130+
}
131+
132+
.custom-input {
133+
color: #111827;
134+
/* text color when user types */
135+
}
136+
137+
/* Placeholder color */
138+
.custom-input::placeholder {
139+
color: #9ca3af;
140+
/* placeholder color */
141+
opacity: 1;
142+
/* important for Firefox */
143+
}
144+
145+
body.dark .form-control {
146+
background: #2d2d3d;
147+
border-color: #3d3d4d;
148+
color: #fff;
149+
}
150+
151+
.form-control:focus {
152+
border-color: #667eea;
153+
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
154+
}
155+
156+
body.dark .form-control:focus {
157+
border-color: #667eea;
158+
background: #2d2d3d;
159+
}
160+
161+
.btn-login {
162+
padding: 0.875rem;
163+
font-size: 1.05rem;
164+
font-weight: 600;
165+
border-radius: 10px;
166+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
167+
border: none;
168+
transition: transform 0.2s, box-shadow 0.2s;
169+
}
170+
171+
.btn-login:hover {
172+
transform: translateY(-2px);
173+
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
174+
}
175+
176+
.btn-login:active {
177+
transform: translateY(0);
178+
}
179+
180+
.login-footer {
181+
text-align: center;
182+
margin-top: 1.5rem;
183+
padding-top: 1.5rem;
184+
border-top: 1px solid #e5e7eb;
185+
}
186+
187+
body.dark .login-footer {
188+
border-top-color: #3d3d4d;
189+
}
190+
191+
.login-footer p {
192+
color: #6b7280;
193+
margin: 0;
194+
}
195+
196+
body.dark .login-footer p {
197+
color: #9ca3af;
198+
}
199+
200+
.login-footer a {
201+
color: #667eea;
202+
font-weight: 600;
203+
text-decoration: none;
204+
}
205+
206+
.login-footer a:hover {
207+
text-decoration: underline;
208+
}
209+
210+
.back-link {
211+
display: inline-flex;
212+
align-items: center;
213+
gap: 0.5rem;
214+
color: #fff;
215+
text-decoration: none;
216+
font-weight: 500;
217+
margin-bottom: 2rem;
218+
transition: gap 0.2s;
219+
}
220+
221+
.back-link:hover {
222+
gap: 0.75rem;
223+
color: #fff;
224+
}
225+
226+
.theme-toggle {
227+
position: fixed;
228+
top: 1.5rem;
229+
right: 1.5rem;
230+
width: 45px;
231+
height: 45px;
232+
border-radius: 50%;
233+
background: rgba(255, 255, 255, 0.2);
234+
border: 2px solid rgba(255, 255, 255, 0.3);
235+
color: #fff;
236+
display: flex;
237+
align-items: center;
238+
justify-content: center;
239+
cursor: pointer;
240+
transition: all 0.2s;
241+
backdrop-filter: blur(10px);
242+
}
243+
244+
.theme-toggle:hover {
245+
background: rgba(255, 255, 255, 0.3);
246+
transform: scale(1.05);
247+
}
248+
249+
.alert {
250+
border-radius: 10px;
251+
border: none;
252+
padding: 1rem;
253+
margin-bottom: 1.5rem;
254+
}
255+
256+
.alert-danger {
257+
background: #fee2e2;
258+
color: #991b1b;
259+
}
260+
261+
body.dark .alert-danger {
262+
background: #7f1d1d;
263+
color: #fecaca;
264+
}
265+
266+
.alert-success {
267+
background: #d1fae5;
268+
color: #065f46;
269+
}
270+
271+
body.dark .alert-success {
272+
background: #064e3b;
273+
color: #a7f3d0;
274+
}
275+
</style>
276+
</head>
277+
278+
<body>
279+
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
280+
<i class="fas fa-moon"></i>
281+
</button>
282+
283+
<div class="login-wrapper">
284+
<a href="/" class="back-link">
285+
<i class="fas fa-arrow-left"></i>
286+
<span>Back to Home</span>
287+
</a>
288+
289+
<div class="login-header">
290+
<div class="brand">
291+
<i class="fas fa-stream"></i>
292+
<span>DevStream</span>
20293
"
21294
/>
22295

@@ -301,6 +574,22 @@
301574
<h2>Sign In</h2>
302575
<p class="subtitle">Enter your credentials to access your account</p>
303576

577+
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
578+
<i class="fas fa-exclamation-circle me-2"></i>
579+
<span id="errorMessage"></span>
580+
</div>
581+
582+
<form id="loginForm">
583+
<div class="mb-3">
584+
<label for="email" class="form-label">Email</label>
585+
<input type="email" class="form-control custom-input" id="email" placeholder="you@example.com" required
586+
autocomplete="email" />
587+
</div>
588+
589+
<div class="mb-4">
590+
<label for="password" class="form-label">Password</label>
591+
<input type="password" class="form-control custom-input" id="password" placeholder="Enter your password" required
592+
autocomplete="current-password" />
304593
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
305594
<i class="fas fa-exclamation-circle me-2"></i>
306595
<span id="errorMessage"></span>

0 commit comments

Comments
 (0)