Hugging Face's logo

Spaces:
Alsmwal
/
UniversityAI
Runtime error

App Files
Alsmwal commited on
Commit
2fcdb07
·
verified ·
1 Parent(s): b11b81f

Update register.html

Browse files
Files changed (1) hide show
  1. register.html +568 -567
register.html CHANGED
@@ -1,568 +1,569 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Create Account - University AI</title>
7
- <style>
8
- * {
9
- margin: 0;
10
- padding: 0;
11
- box-sizing: border-box;
12
- }
13
-
14
- :root {
15
- --olive-light: #3A662A;
16
- --olive-dark: #5C6E4A;
17
- --bg-light: #FFFFFF;
18
- --bg-dark: #1A1A1A;
19
- --text-light: #2C2C2C;
20
- --text-dark: #F5F5F5;
21
- --card-light: #F8F9FA;
22
- --card-dark: #2D2D2D;
23
- }
24
-
25
- body {
26
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
- min-height: 100vh;
28
- display: flex;
29
- align-items: center;
30
- justify-content: center;
31
- transition: all 0.3s ease;
32
- padding: 20px;
33
- }
34
-
35
- body.light-mode {
36
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
37
- color: var(--text-light);
38
- }
39
-
40
- body.dark-mode {
41
- background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
42
- color: var(--text-dark);
43
- }
44
-
45
- .container {
46
- width: 100%;
47
- max-width: 450px;
48
- }
49
-
50
- .card {
51
- padding: 40px;
52
- border-radius: 15px;
53
- box-shadow: 0 10px 40px rgba(0,0,0,0.1);
54
- transition: all 0.3s ease;
55
- }
56
-
57
- .light-mode .card {
58
- background: var(--bg-light);
59
- }
60
-
61
- .dark-mode .card {
62
- background: var(--card-dark);
63
- }
64
-
65
- .header {
66
- text-align: center;
67
- margin-bottom: 30px;
68
- }
69
-
70
- .logo {
71
- font-size: 48px;
72
- margin-bottom: 10px;
73
- }
74
-
75
- h1 {
76
- font-size: 28px;
77
- margin-bottom: 10px;
78
- color: var(--olive-light);
79
- }
80
-
81
- .subtitle {
82
- opacity: 0.7;
83
- font-size: 14px;
84
- }
85
-
86
- .form-group {
87
- margin-bottom: 20px;
88
- }
89
-
90
- label {
91
- display: block;
92
- margin-bottom: 8px;
93
- font-weight: 500;
94
- }
95
-
96
- input {
97
- width: 100%;
98
- padding: 12px 15px;
99
- border-radius: 8px;
100
- border: 2px solid transparent;
101
- font-size: 16px;
102
- transition: all 0.3s ease;
103
- }
104
-
105
- .light-mode input {
106
- background: var(--card-light);
107
- color: var(--text-light);
108
- border-color: #e0e0e0;
109
- }
110
-
111
- .dark-mode input {
112
- background: var(--bg-dark);
113
- color: var(--text-dark);
114
- border-color: #444;
115
- }
116
-
117
- input:focus {
118
- outline: none;
119
- border-color: var(--olive-light);
120
- }
121
-
122
- .btn {
123
- width: 100%;
124
- padding: 14px;
125
- border: none;
126
- border-radius: 8px;
127
- font-size: 16px;
128
- font-weight: 600;
129
- cursor: pointer;
130
- transition: all 0.3s ease;
131
- background: var(--olive-light);
132
- color: white;
133
- }
134
-
135
- .btn:hover {
136
- transform: translateY(-2px);
137
- box-shadow: 0 5px 15px rgba(58, 102, 42, 0.4);
138
- }
139
-
140
- .btn:disabled {
141
- opacity: 0.6;
142
- cursor: not-allowed;
143
- transform: none;
144
- }
145
-
146
- .links {
147
- text-align: center;
148
- margin-top: 20px;
149
- font-size: 14px;
150
- }
151
-
152
- .links a {
153
- color: var(--olive-light);
154
- text-decoration: none;
155
- font-weight: 500;
156
- }
157
-
158
- .links a:hover {
159
- text-decoration: underline;
160
- }
161
-
162
- .divider {
163
- margin: 20px 0;
164
- text-align: center;
165
- opacity: 0.5;
166
- }
167
-
168
- .alert {
169
- padding: 12px;
170
- border-radius: 8px;
171
- margin-bottom: 20px;
172
- display: none;
173
- }
174
-
175
- .alert.error {
176
- background: #fee;
177
- color: #c33;
178
- border: 1px solid #fcc;
179
- }
180
-
181
- .alert.success {
182
- background: #efe;
183
- color: #3c3;
184
- border: 1px solid #cfc;
185
- }
186
-
187
- .alert.show {
188
- display: block;
189
- }
190
-
191
- .top-bar {
192
- position: fixed;
193
- top: 0;
194
- left: 0;
195
- right: 0;
196
- padding: 15px 20px;
197
- display: flex;
198
- justify-content: space-between;
199
- align-items: center;
200
- z-index: 1000;
201
- }
202
-
203
- .light-mode .top-bar {
204
- background: rgba(255,255,255,0.9);
205
- }
206
-
207
- .dark-mode .top-bar {
208
- background: rgba(45,45,45,0.9);
209
- }
210
-
211
- .theme-toggle {
212
- width: 50px;
213
- height: 26px;
214
- background: var(--olive-light);
215
- border-radius: 13px;
216
- position: relative;
217
- cursor: pointer;
218
- transition: all 0.3s ease;
219
- }
220
-
221
- .theme-toggle::after {
222
- content: '☀️';
223
- position: absolute;
224
- top: 3px;
225
- left: 3px;
226
- width: 20px;
227
- height: 20px;
228
- background: white;
229
- border-radius: 50%;
230
- transition: all 0.3s ease;
231
- display: flex;
232
- align-items: center;
233
- justify-content: center;
234
- font-size: 12px;
235
- }
236
-
237
- .dark-mode .theme-toggle::after {
238
- content: '🌙';
239
- left: 27px;
240
- }
241
-
242
- .back-home {
243
- padding: 10px 20px;
244
- background: var(--olive-light);
245
- color: white;
246
- text-decoration: none;
247
- border-radius: 8px;
248
- font-size: 14px;
249
- transition: all 0.3s ease;
250
- }
251
-
252
- .back-home:hover {
253
- transform: translateY(-2px);
254
- box-shadow: 0 5px 15px rgba(58, 102, 42, 0.4);
255
- }
256
-
257
- .loading {
258
- display: none;
259
- text-align: center;
260
- margin-top: 10px;
261
- }
262
-
263
- .loading.show {
264
- display: block;
265
- }
266
-
267
- .password-strength {
268
- margin-top: 5px;
269
- font-size: 12px;
270
- }
271
-
272
- .strength-weak { color: #c33; }
273
- .strength-medium { color: #f90; }
274
- .strength-strong { color: #3c3; }
275
-
276
- .success-message {
277
- text-align: center;
278
- animation: slideUp 0.5s ease-out;
279
- padding: 20px 0;
280
- }
281
-
282
- .success-icon {
283
- font-size: 60px;
284
- margin-bottom: 20px;
285
- display: inline-block;
286
- animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
287
- }
288
-
289
- .countdown {
290
- margin-top: 15px;
291
- font-size: 14px;
292
- opacity: 0.7;
293
- }
294
-
295
- @keyframes slideUp {
296
- from { opacity: 0; transform: translateY(20px); }
297
- to { opacity: 1; transform: translateY(0); }
298
- }
299
-
300
- @keyframes popIn {
301
- 0% { transform: scale(0); }
302
- 80% { transform: scale(1.1); }
303
- 100% { transform: scale(1); }
304
- }
305
-
306
- @media (max-width: 768px) {
307
- body {
308
- padding-top: 80px;
309
- }
310
-
311
- .card {
312
- padding: 25px;
313
- }
314
-
315
- .top-bar {
316
- padding: 10px 15px;
317
- }
318
-
319
- .back-home {
320
- padding: 8px 15px;
321
- font-size: 12px;
322
- }
323
- }
324
- </style>
325
- </head>
326
- <body class="light-mode">
327
- <div class="top-bar">
328
- <a href="index.html" class="back-home">🏠 Home</a>
329
- <div class="theme-toggle" onclick="toggleTheme()"></div>
330
- </div>
331
-
332
- <div class="container">
333
- <div class="card">
334
- <div class="header">
335
- <div class="logo">🎓</div>
336
- <h1>Create Account</h1>
337
- <p class="subtitle">Join us and start your learning journey</p>
338
- </div>
339
-
340
- <div id="alert" class="alert"></div>
341
-
342
- <div id="registerForm">
343
- <div class="form-group">
344
- <label for="email">University Email</label>
345
- <input
346
- type="email"
347
- id="email"
348
- name="email"
349
- required
350
- placeholder="example@university.edu"
351
- >
352
- </div>
353
-
354
- <div class="form-group">
355
- <label for="password">Password</label>
356
- <input
357
- type="password"
358
- id="password"
359
- name="password"
360
- required
361
- placeholder="••••••••"
362
- minlength="6"
363
- >
364
- <div id="passwordStrength" class="password-strength"></div>
365
- </div>
366
-
367
- <div class="form-group">
368
- <label for="confirmPassword">Confirm Password</label>
369
- <input
370
- type="password"
371
- id="confirmPassword"
372
- name="confirmPassword"
373
- required
374
- placeholder="••••••••"
375
- >
376
- </div>
377
-
378
- <button type="button" class="btn" id="registerBtn" onclick="handleRegister()">
379
- Create Account
380
- </button>
381
-
382
- <div class="loading" id="loading">
383
- <p>Creating account...</p>
384
- </div>
385
- </div>
386
-
387
- <div class="divider">───────</div>
388
-
389
- <div class="links">
390
- <p>Already have an account? <a href="login.html">Login</a></p>
391
- </div>
392
- </div>
393
- </div>
394
-
395
- <script>
396
- const API_URL = '';
397
-
398
- function toggleTheme() {
399
- const body = document.body;
400
- if (body.classList.contains('light-mode')) {
401
- body.classList.remove('light-mode');
402
- body.classList.add('dark-mode');
403
- localStorage.setItem('theme', 'dark');
404
- } else {
405
- body.classList.remove('dark-mode');
406
- body.classList.add('light-mode');
407
- localStorage.setItem('theme', 'light');
408
- }
409
- }
410
-
411
- document.addEventListener("DOMContentLoaded", async () => {
412
- const savedTheme = localStorage.getItem('theme') || 'light';
413
- document.body.classList.remove("light-mode", "dark-mode");
414
- document.body.classList.add(savedTheme + "-mode");
415
-
416
- const token = localStorage.getItem('token');
417
- const role = localStorage.getItem('role');
418
-
419
- if (token && role) {
420
- try {
421
- const response = await fetch(`${API_URL}/user/me`, {
422
- headers: {
423
- 'Authorization': `Bearer ${token}`
424
- }
425
- });
426
-
427
- if (response.ok) {
428
- console.log('✅ User already logged in, redirecting...');
429
- if (role === 'admin') {
430
- window.location.href = 'admin-dashboard.html';
431
- } else {
432
- window.location.href = 'chat.html';
433
- }
434
- } else {
435
- localStorage.clear();
436
- }
437
- } catch (error) {
438
- console.error('Token validation error:', error);
439
- localStorage.clear();
440
- }
441
- }
442
- });
443
-
444
- function showAlert(message, type = 'error') {
445
- const alert = document.getElementById('alert');
446
- alert.textContent = message;
447
- alert.className = `alert ${type} show`;
448
-
449
- setTimeout(() => {
450
- alert.classList.remove('show');
451
- }, 1000);
452
- }
453
-
454
- document.getElementById('password').addEventListener('input', (e) => {
455
- const password = e.target.value;
456
- const strengthDiv = document.getElementById('passwordStrength');
457
-
458
- let strength = 0;
459
- if (password.length >= 8) strength++;
460
- if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
461
- if (/\d/.test(password)) strength++;
462
- if (/[^a-zA-Z\d]/.test(password)) strength++;
463
-
464
- if (password.length === 0) {
465
- strengthDiv.textContent = '';
466
- } else if (strength <= 1) {
467
- strengthDiv.textContent = '⚠️ Weak password';
468
- strengthDiv.className = 'password-strength strength-weak';
469
- } else if (strength === 2) {
470
- strengthDiv.textContent = '⚡ Medium password';
471
- strengthDiv.className = 'password-strength strength-medium';
472
- } else {
473
- strengthDiv.textContent = '✅ Strong password';
474
- strengthDiv.className = 'password-strength strength-strong';
475
- }
476
- });
477
-
478
- async function handleRegister() {
479
- const emailInput = document.getElementById('email');
480
- const passwordInput = document.getElementById('password');
481
- const confirmInput = document.getElementById('confirmPassword');
482
- const registerBtn = document.getElementById('registerBtn');
483
- const loading = document.getElementById('loading');
484
-
485
- if (!emailInput.reportValidity() || !passwordInput.reportValidity() || !confirmInput.reportValidity()) {
486
- return;
487
- }
488
-
489
- const email = emailInput.value.trim();
490
- const password = passwordInput.value;
491
- const confirmPassword = confirmInput.value;
492
-
493
- if (password !== confirmPassword) {
494
- showAlert('Passwords do not match!');
495
- return;
496
- }
497
-
498
- if (password.length < 6) {
499
- showAlert('Password must be at least 6 characters');
500
- return;
501
- }
502
-
503
- registerBtn.disabled = true;
504
- loading.classList.add('show');
505
-
506
- try {
507
- const formData = new URLSearchParams();
508
- formData.append('email', email);
509
- formData.append('password', password);
510
-
511
- const response = await fetch(`${API_URL}/auth/register`, {
512
- method: 'POST',
513
- headers: {
514
- 'Content-Type': 'application/x-www-form-urlencoded',
515
- },
516
- body: formData
517
- });
518
-
519
- let data = null;
520
- const contentType = response.headers.get('content-type');
521
-
522
- if (contentType && contentType.includes('application/json')) {
523
- try {
524
- data = await response.json();
525
- } catch (e) {
526
- console.log('No JSON response body');
527
- }
528
- }
529
-
530
- if (response.ok) {
531
- document.getElementById('registerForm').style.display = 'none';
532
- document.querySelector('.divider').style.display = 'none';
533
- document.querySelector('.links').style.display = 'none';
534
- loading.classList.remove('show');
535
-
536
- const successDiv = document.createElement('div');
537
- successDiv.style.textAlign = 'center';
538
- successDiv.style.marginTop = '30px';
539
- successDiv.innerHTML = `
540
- <div class="success-icon">🎉</div>
541
- <h3 style="color: var(--olive-light); margin-bottom: 10px;">Account Created!</h3>
542
- <p>Welcome to University AI.</p>
543
- <p class="countdown">Redirecting to login...</p>
544
- `;
545
-
546
- document.querySelector('.card').appendChild(successDiv);
547
-
548
- setTimeout(() => {
549
- console.log('✅ Registration successful,now you can login');
550
- window.location.replace('login.html');
551
- }, 3000);
552
- } else {
553
- const errorMessage = data?.detail || data?.message || 'Registration failed. Please try again.';
554
- showAlert(errorMessage);
555
- console.error('Registration failed:', errorMessage);
556
- }
557
-
558
- } catch (error) {
559
- console.error('Register error:', error);
560
- showAlert('Connection error. Please make sure the API is running on ' + API_URL);
561
- } finally {
562
- registerBtn.disabled = false;
563
- loading.classList.remove('show');
564
- }
565
- }
566
- </script>
567
- </body>
 
568
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Create Account - University AI</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ :root {
15
+ --olive-light: #3A662A;
16
+ --olive-dark: #5C6E4A;
17
+ --bg-light: #FFFFFF;
18
+ --bg-dark: #1A1A1A;
19
+ --text-light: #2C2C2C;
20
+ --text-dark: #F5F5F5;
21
+ --card-light: #F8F9FA;
22
+ --card-dark: #2D2D2D;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ min-height: 100vh;
28
+ min-height: 100dvh;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ transition: all 0.3s ease;
33
+ padding: 20px;
34
+ }
35
+
36
+ body.light-mode {
37
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
38
+ color: var(--text-light);
39
+ }
40
+
41
+ body.dark-mode {
42
+ background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
43
+ color: var(--text-dark);
44
+ }
45
+
46
+ .container {
47
+ width: 100%;
48
+ max-width: 450px;
49
+ }
50
+
51
+ .card {
52
+ padding: 40px;
53
+ border-radius: 15px;
54
+ box-shadow: 0 10px 40px rgba(0,0,0,0.1);
55
+ transition: all 0.3s ease;
56
+ }
57
+
58
+ .light-mode .card {
59
+ background: var(--bg-light);
60
+ }
61
+
62
+ .dark-mode .card {
63
+ background: var(--card-dark);
64
+ }
65
+
66
+ .header {
67
+ text-align: center;
68
+ margin-bottom: 30px;
69
+ }
70
+
71
+ .logo {
72
+ font-size: 48px;
73
+ margin-bottom: 10px;
74
+ }
75
+
76
+ h1 {
77
+ font-size: 28px;
78
+ margin-bottom: 10px;
79
+ color: var(--olive-light);
80
+ }
81
+
82
+ .subtitle {
83
+ opacity: 0.7;
84
+ font-size: 14px;
85
+ }
86
+
87
+ .form-group {
88
+ margin-bottom: 20px;
89
+ }
90
+
91
+ label {
92
+ display: block;
93
+ margin-bottom: 8px;
94
+ font-weight: 500;
95
+ }
96
+
97
+ input {
98
+ width: 100%;
99
+ padding: 12px 15px;
100
+ border-radius: 8px;
101
+ border: 2px solid transparent;
102
+ font-size: 16px;
103
+ transition: all 0.3s ease;
104
+ }
105
+
106
+ .light-mode input {
107
+ background: var(--card-light);
108
+ color: var(--text-light);
109
+ border-color: #e0e0e0;
110
+ }
111
+
112
+ .dark-mode input {
113
+ background: var(--bg-dark);
114
+ color: var(--text-dark);
115
+ border-color: #444;
116
+ }
117
+
118
+ input:focus {
119
+ outline: none;
120
+ border-color: var(--olive-light);
121
+ }
122
+
123
+ .btn {
124
+ width: 100%;
125
+ padding: 14px;
126
+ border: none;
127
+ border-radius: 8px;
128
+ font-size: 16px;
129
+ font-weight: 600;
130
+ cursor: pointer;
131
+ transition: all 0.3s ease;
132
+ background: var(--olive-light);
133
+ color: white;
134
+ }
135
+
136
+ .btn:hover {
137
+ transform: translateY(-2px);
138
+ box-shadow: 0 5px 15px rgba(58, 102, 42, 0.4);
139
+ }
140
+
141
+ .btn:disabled {
142
+ opacity: 0.6;
143
+ cursor: not-allowed;
144
+ transform: none;
145
+ }
146
+
147
+ .links {
148
+ text-align: center;
149
+ margin-top: 20px;
150
+ font-size: 14px;
151
+ }
152
+
153
+ .links a {
154
+ color: var(--olive-light);
155
+ text-decoration: none;
156
+ font-weight: 500;
157
+ }
158
+
159
+ .links a:hover {
160
+ text-decoration: underline;
161
+ }
162
+
163
+ .divider {
164
+ margin: 20px 0;
165
+ text-align: center;
166
+ opacity: 0.5;
167
+ }
168
+
169
+ .alert {
170
+ padding: 12px;
171
+ border-radius: 8px;
172
+ margin-bottom: 20px;
173
+ display: none;
174
+ }
175
+
176
+ .alert.error {
177
+ background: #fee;
178
+ color: #c33;
179
+ border: 1px solid #fcc;
180
+ }
181
+
182
+ .alert.success {
183
+ background: #efe;
184
+ color: #3c3;
185
+ border: 1px solid #cfc;
186
+ }
187
+
188
+ .alert.show {
189
+ display: block;
190
+ }
191
+
192
+ .top-bar {
193
+ position: fixed;
194
+ top: 0;
195
+ left: 0;
196
+ right: 0;
197
+ padding: 15px 20px;
198
+ display: flex;
199
+ justify-content: space-between;
200
+ align-items: center;
201
+ z-index: 1000;
202
+ }
203
+
204
+ .light-mode .top-bar {
205
+ background: rgba(255,255,255,0.9);
206
+ }
207
+
208
+ .dark-mode .top-bar {
209
+ background: rgba(45,45,45,0.9);
210
+ }
211
+
212
+ .theme-toggle {
213
+ width: 50px;
214
+ height: 26px;
215
+ background: var(--olive-light);
216
+ border-radius: 13px;
217
+ position: relative;
218
+ cursor: pointer;
219
+ transition: all 0.3s ease;
220
+ }
221
+
222
+ .theme-toggle::after {
223
+ content: '☀️';
224
+ position: absolute;
225
+ top: 3px;
226
+ left: 3px;
227
+ width: 20px;
228
+ height: 20px;
229
+ background: white;
230
+ border-radius: 50%;
231
+ transition: all 0.3s ease;
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: center;
235
+ font-size: 12px;
236
+ }
237
+
238
+ .dark-mode .theme-toggle::after {
239
+ content: '🌙';
240
+ left: 27px;
241
+ }
242
+
243
+ .back-home {
244
+ padding: 10px 20px;
245
+ background: var(--olive-light);
246
+ color: white;
247
+ text-decoration: none;
248
+ border-radius: 8px;
249
+ font-size: 14px;
250
+ transition: all 0.3s ease;
251
+ }
252
+
253
+ .back-home:hover {
254
+ transform: translateY(-2px);
255
+ box-shadow: 0 5px 15px rgba(58, 102, 42, 0.4);
256
+ }
257
+
258
+ .loading {
259
+ display: none;
260
+ text-align: center;
261
+ margin-top: 10px;
262
+ }
263
+
264
+ .loading.show {
265
+ display: block;
266
+ }
267
+
268
+ .password-strength {
269
+ margin-top: 5px;
270
+ font-size: 12px;
271
+ }
272
+
273
+ .strength-weak { color: #c33; }
274
+ .strength-medium { color: #f90; }
275
+ .strength-strong { color: #3c3; }
276
+
277
+ .success-message {
278
+ text-align: center;
279
+ animation: slideUp 0.5s ease-out;
280
+ padding: 20px 0;
281
+ }
282
+
283
+ .success-icon {
284
+ font-size: 60px;
285
+ margin-bottom: 20px;
286
+ display: inline-block;
287
+ animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
288
+ }
289
+
290
+ .countdown {
291
+ margin-top: 15px;
292
+ font-size: 14px;
293
+ opacity: 0.7;
294
+ }
295
+
296
+ @keyframes slideUp {
297
+ from { opacity: 0; transform: translateY(20px); }
298
+ to { opacity: 1; transform: translateY(0); }
299
+ }
300
+
301
+ @keyframes popIn {
302
+ 0% { transform: scale(0); }
303
+ 80% { transform: scale(1.1); }
304
+ 100% { transform: scale(1); }
305
+ }
306
+
307
+ @media (max-width: 768px) {
308
+ body {
309
+ padding-top: 80px;
310
+ }
311
+
312
+ .card {
313
+ padding: 25px;
314
+ }
315
+
316
+ .top-bar {
317
+ padding: 10px 15px;
318
+ }
319
+
320
+ .back-home {
321
+ padding: 8px 15px;
322
+ font-size: 12px;
323
+ }
324
+ }
325
+ </style>
326
+ </head>
327
+ <body class="light-mode">
328
+ <div class="top-bar">
329
+ <a href="index.html" class="back-home">🏠 Home</a>
330
+ <div class="theme-toggle" onclick="toggleTheme()"></div>
331
+ </div>
332
+
333
+ <div class="container">
334
+ <div class="card">
335
+ <div class="header">
336
+ <div class="logo">🎓</div>
337
+ <h1>Create Account</h1>
338
+ <p class="subtitle">Join us and start your learning journey</p>
339
+ </div>
340
+
341
+ <div id="alert" class="alert"></div>
342
+
343
+ <div id="registerForm">
344
+ <div class="form-group">
345
+ <label for="email">University Email</label>
346
+ <input
347
+ type="email"
348
+ id="email"
349
+ name="email"
350
+ required
351
+ placeholder="example@university.edu"
352
+ >
353
+ </div>
354
+
355
+ <div class="form-group">
356
+ <label for="password">Password</label>
357
+ <input
358
+ type="password"
359
+ id="password"
360
+ name="password"
361
+ required
362
+ placeholder="••••••••"
363
+ minlength="6"
364
+ >
365
+ <div id="passwordStrength" class="password-strength"></div>
366
+ </div>
367
+
368
+ <div class="form-group">
369
+ <label for="confirmPassword">Confirm Password</label>
370
+ <input
371
+ type="password"
372
+ id="confirmPassword"
373
+ name="confirmPassword"
374
+ required
375
+ placeholder="••••••••"
376
+ >
377
+ </div>
378
+
379
+ <button type="button" class="btn" id="registerBtn" onclick="handleRegister()">
380
+ Create Account
381
+ </button>
382
+
383
+ <div class="loading" id="loading">
384
+ <p>Creating account...</p>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="divider">───────</div>
389
+
390
+ <div class="links">
391
+ <p>Already have an account? <a href="login.html">Login</a></p>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <script>
397
+ const API_URL = '';
398
+
399
+ function toggleTheme() {
400
+ const body = document.body;
401
+ if (body.classList.contains('light-mode')) {
402
+ body.classList.remove('light-mode');
403
+ body.classList.add('dark-mode');
404
+ localStorage.setItem('theme', 'dark');
405
+ } else {
406
+ body.classList.remove('dark-mode');
407
+ body.classList.add('light-mode');
408
+ localStorage.setItem('theme', 'light');
409
+ }
410
+ }
411
+
412
+ document.addEventListener("DOMContentLoaded", async () => {
413
+ const savedTheme = localStorage.getItem('theme') || 'light';
414
+ document.body.classList.remove("light-mode", "dark-mode");
415
+ document.body.classList.add(savedTheme + "-mode");
416
+
417
+ const token = localStorage.getItem('token');
418
+ const role = localStorage.getItem('role');
419
+
420
+ if (token && role) {
421
+ try {
422
+ const response = await fetch(`${API_URL}/user/me`, {
423
+ headers: {
424
+ 'Authorization': `Bearer ${token}`
425
+ }
426
+ });
427
+
428
+ if (response.ok) {
429
+ console.log('✅ User already logged in, redirecting...');
430
+ if (role === 'admin') {
431
+ window.location.href = 'admin-dashboard.html';
432
+ } else {
433
+ window.location.href = 'chat.html';
434
+ }
435
+ } else {
436
+ localStorage.clear();
437
+ }
438
+ } catch (error) {
439
+ console.error('Token validation error:', error);
440
+ localStorage.clear();
441
+ }
442
+ }
443
+ });
444
+
445
+ function showAlert(message, type = 'error') {
446
+ const alert = document.getElementById('alert');
447
+ alert.textContent = message;
448
+ alert.className = `alert ${type} show`;
449
+
450
+ setTimeout(() => {
451
+ alert.classList.remove('show');
452
+ }, 1000);
453
+ }
454
+
455
+ document.getElementById('password').addEventListener('input', (e) => {
456
+ const password = e.target.value;
457
+ const strengthDiv = document.getElementById('passwordStrength');
458
+
459
+ let strength = 0;
460
+ if (password.length >= 8) strength++;
461
+ if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
462
+ if (/\d/.test(password)) strength++;
463
+ if (/[^a-zA-Z\d]/.test(password)) strength++;
464
+
465
+ if (password.length === 0) {
466
+ strengthDiv.textContent = '';
467
+ } else if (strength <= 1) {
468
+ strengthDiv.textContent = '⚠️ Weak password';
469
+ strengthDiv.className = 'password-strength strength-weak';
470
+ } else if (strength === 2) {
471
+ strengthDiv.textContent = '⚡ Medium password';
472
+ strengthDiv.className = 'password-strength strength-medium';
473
+ } else {
474
+ strengthDiv.textContent = '✅ Strong password';
475
+ strengthDiv.className = 'password-strength strength-strong';
476
+ }
477
+ });
478
+
479
+ async function handleRegister() {
480
+ const emailInput = document.getElementById('email');
481
+ const passwordInput = document.getElementById('password');
482
+ const confirmInput = document.getElementById('confirmPassword');
483
+ const registerBtn = document.getElementById('registerBtn');
484
+ const loading = document.getElementById('loading');
485
+
486
+ if (!emailInput.reportValidity() || !passwordInput.reportValidity() || !confirmInput.reportValidity()) {
487
+ return;
488
+ }
489
+
490
+ const email = emailInput.value.trim();
491
+ const password = passwordInput.value;
492
+ const confirmPassword = confirmInput.value;
493
+
494
+ if (password !== confirmPassword) {
495
+ showAlert('Passwords do not match!');
496
+ return;
497
+ }
498
+
499
+ if (password.length < 6) {
500
+ showAlert('Password must be at least 6 characters');
501
+ return;
502
+ }
503
+
504
+ registerBtn.disabled = true;
505
+ loading.classList.add('show');
506
+
507
+ try {
508
+ const formData = new URLSearchParams();
509
+ formData.append('email', email);
510
+ formData.append('password', password);
511
+
512
+ const response = await fetch(`${API_URL}/auth/register`, {
513
+ method: 'POST',
514
+ headers: {
515
+ 'Content-Type': 'application/x-www-form-urlencoded',
516
+ },
517
+ body: formData
518
+ });
519
+
520
+ let data = null;
521
+ const contentType = response.headers.get('content-type');
522
+
523
+ if (contentType && contentType.includes('application/json')) {
524
+ try {
525
+ data = await response.json();
526
+ } catch (e) {
527
+ console.log('No JSON response body');
528
+ }
529
+ }
530
+
531
+ if (response.ok) {
532
+ document.getElementById('registerForm').style.display = 'none';
533
+ document.querySelector('.divider').style.display = 'none';
534
+ document.querySelector('.links').style.display = 'none';
535
+ loading.classList.remove('show');
536
+
537
+ const successDiv = document.createElement('div');
538
+ successDiv.style.textAlign = 'center';
539
+ successDiv.style.marginTop = '30px';
540
+ successDiv.innerHTML = `
541
+ <div class="success-icon">🎉</div>
542
+ <h3 style="color: var(--olive-light); margin-bottom: 10px;">Account Created!</h3>
543
+ <p>Welcome to University AI.</p>
544
+ <p class="countdown">Redirecting to login...</p>
545
+ `;
546
+
547
+ document.querySelector('.card').appendChild(successDiv);
548
+
549
+ setTimeout(() => {
550
+ console.log('✅ Registration successful,now you can login');
551
+ window.location.replace('login.html');
552
+ }, 3000);
553
+ } else {
554
+ const errorMessage = data?.detail || data?.message || 'Registration failed. Please try again.';
555
+ showAlert(errorMessage);
556
+ console.error('Registration failed:', errorMessage);
557
+ }
558
+
559
+ } catch (error) {
560
+ console.error('Register error:', error);
561
+ showAlert('Connection error. Please make sure the API is running on ' + API_URL);
562
+ } finally {
563
+ registerBtn.disabled = false;
564
+ loading.classList.remove('show');
565
+ }
566
+ }
567
+ </script>
568
+ </body>
569
  </html>