easy-starter 1.2.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,667 @@
1
+ /* --- AUTH START --- */
2
+ @import "easy-user-auth/style.css";
3
+ /* --- AUTH END --- */
4
+
5
+ /* Premium Dark Theme */
6
+ :root {
7
+ --bg: #09090b;
8
+ --surface: #18181b;
9
+ --primary: #6366f1; /* Indigo */
10
+ --primary-hover: #818cf8;
11
+ --text: #f4f4f5;
12
+ --text-muted: #a1a1aa;
13
+ --border: #27272a;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Inter', system-ui, sans-serif;
18
+ background-color: var(--bg);
19
+ color: var(--text);
20
+ margin: 0;
21
+ padding: 0;
22
+ line-height: 1.6;
23
+ /* --- VIEWPORT START --- */
24
+ min-width: 600px;
25
+ /* --- VIEWPORT END --- */
26
+ }
27
+
28
+ a {
29
+ color: var(--primary);
30
+ text-decoration: none;
31
+ font-weight: bold;
32
+ transition: color 0.2s;
33
+
34
+ &:hover {
35
+ color: var(--primary-hover);
36
+ }
37
+ }
38
+
39
+ main {
40
+ max-width: 800px;
41
+ margin: 50px auto;
42
+ padding: 40px;
43
+ background: var(--surface);
44
+ border-radius: 16px;
45
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
46
+ border: 1px solid var(--border);
47
+ }
48
+
49
+ header {
50
+ text-align: center;
51
+ margin-bottom: 40px;
52
+
53
+ h1 {
54
+ color: var(--primary);
55
+ }
56
+
57
+ p {
58
+ color: var(--text-muted);
59
+ }
60
+
61
+ figure {
62
+ width: 140px;
63
+ height: 140px;
64
+ margin: 0 auto 20px;
65
+ background-image: url("/images/icon.png");
66
+ background-size: contain;
67
+ background-repeat: no-repeat;
68
+ background-position: center;
69
+ }
70
+ }
71
+
72
+ section {
73
+ margin-top: 40px;
74
+ padding: 30px;
75
+ background: rgba(255, 255, 255, 0.02);
76
+ border-radius: 12px;
77
+ border: 1px solid var(--border);
78
+
79
+ ul {
80
+ list-style: none;
81
+ padding: 0;
82
+
83
+ li {
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: space-between;
87
+ padding: 15px 20px;
88
+ background: var(--bg);
89
+ border-radius: 8px;
90
+ margin-bottom: 12px;
91
+ border: 1px solid var(--border);
92
+ transition: transform 0.2s, border-color 0.2s;
93
+
94
+ &:hover {
95
+ transform: translateY(-2px);
96
+ border-color: var(--primary);
97
+ }
98
+
99
+ nav {
100
+ display: flex;
101
+ gap: 8px;
102
+ }
103
+ }
104
+ }
105
+
106
+ article {
107
+ padding: 0px 20px 10px;
108
+ background: var(--bg);
109
+ border-radius: 8px;
110
+ border: 1px solid var(--primary);
111
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
112
+
113
+ h3 {
114
+ color: var(--primary);
115
+ }
116
+
117
+ p {
118
+ margin: 5px 0;
119
+ color: var(--text);
120
+ }
121
+ }
122
+
123
+ form {
124
+ display: flex;
125
+ gap: 12px;
126
+ flex-wrap: wrap;
127
+ }
128
+ }
129
+
130
+ /* Global Controls */
131
+ input {
132
+ padding: 12px 16px;
133
+ background: var(--bg);
134
+ border: 1px solid var(--border);
135
+ border-radius: 8px;
136
+ color: var(--text);
137
+ outline: none;
138
+ transition: border-color 0.2s;
139
+ flex: 1;
140
+ min-width: 150px;
141
+
142
+ &:focus {
143
+ border-color: var(--primary);
144
+ }
145
+ }
146
+
147
+ button {
148
+ padding: 12px 24px;
149
+ background: var(--primary);
150
+ color: #fff;
151
+ border: none;
152
+ border-radius: 8px;
153
+ cursor: pointer;
154
+ font-weight: bold;
155
+ transition: background 0.2s, transform 0.1s;
156
+
157
+ &:hover:not(:disabled) {
158
+ background: var(--primary-hover);
159
+ transform: scale(1.02);
160
+ }
161
+
162
+ &.btn-danger {
163
+ background: #ef4444;
164
+
165
+ &:hover:not(:disabled) {
166
+ background: #dc2626;
167
+ }
168
+ }
169
+ }
170
+
171
+ /* --- ADMIN START --- */
172
+ /* --- ADMIN DASHBOARD --- */
173
+ .admin-login {
174
+ padding: 40px;
175
+ max-width: 400px;
176
+ margin: 0 auto;
177
+ text-align: center;
178
+
179
+ h2 {
180
+ color: var(--text);
181
+ }
182
+
183
+ .back-link {
184
+ margin-bottom: 20px;
185
+ }
186
+
187
+ form {
188
+ display: flex;
189
+ flex-direction: column;
190
+ gap: 15px;
191
+ margin-top: 20px;
192
+ }
193
+ }
194
+
195
+ .admin-container {
196
+ padding: 40px;
197
+ max-width: 1200px;
198
+ margin: 0 auto;
199
+
200
+ .header {
201
+ display: flex;
202
+ justify-content: space-between;
203
+ align-items: center;
204
+ margin-bottom: 30px;
205
+
206
+ h2 {
207
+ margin: 0;
208
+ color: var(--text);
209
+ }
210
+
211
+ a {
212
+ color: var(--primary);
213
+ text-decoration: none;
214
+ font-weight: bold;
215
+ }
216
+ }
217
+
218
+ .controls {
219
+ display: flex;
220
+ gap: 15px;
221
+ align-items: center;
222
+ margin-bottom: 30px;
223
+ flex-wrap: wrap;
224
+
225
+ strong {
226
+ font-size: 1.1rem;
227
+ color: var(--text);
228
+ }
229
+
230
+ .btn-logout {
231
+ margin-left: auto;
232
+ background: #ef4444;
233
+
234
+ &:hover {
235
+ background: #dc2626;
236
+ }
237
+ }
238
+ }
239
+
240
+ .chart-container {
241
+ margin-bottom: 40px;
242
+ background: rgba(255, 255, 255, 0.02);
243
+ padding: 25px;
244
+ border-radius: 12px;
245
+ border: 1px solid var(--border);
246
+
247
+ h3 {
248
+ margin: 0 0 20px;
249
+ font-size: 1.1rem;
250
+ color: var(--text);
251
+ }
252
+
253
+ .chart {
254
+ display: flex;
255
+ align-items: flex-end;
256
+ height: 150px;
257
+ gap: 4px;
258
+
259
+ .bar-wrapper {
260
+ flex: 1;
261
+ display: flex;
262
+ flex-direction: column;
263
+ align-items: center;
264
+ justify-content: flex-end;
265
+ height: 100%;
266
+
267
+ .count {
268
+ font-size: 11px;
269
+ color: var(--text);
270
+ margin-bottom: 4px;
271
+ font-weight: bold;
272
+ }
273
+
274
+ .date {
275
+ font-size: 10px;
276
+ margin-top: 8px;
277
+ color: var(--text-muted);
278
+ }
279
+
280
+ .bar {
281
+ width: 100%;
282
+ max-width: 24px;
283
+ border-radius: 4px 4px 0 0;
284
+ transition: height 0.3s ease;
285
+ }
286
+
287
+ .bar.active {
288
+ background: var(--primary);
289
+ }
290
+ }
291
+ }
292
+ }
293
+
294
+ .grid {
295
+ display: grid;
296
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
297
+ gap: 20px;
298
+ }
299
+ }
300
+ /* --- ADMIN END --- */
301
+
302
+ /* --- AUTH START --- */
303
+ /* --- EASY-USER-AUTH STYLING OVERRIDES --- */
304
+ .easy-user-auth-overlay {
305
+ position: fixed;
306
+ top: 0;
307
+ left: 0;
308
+ width: 100%;
309
+ height: 100%;
310
+ background: rgba(9, 9, 11, 0.8);
311
+ backdrop-filter: blur(8px);
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ z-index: 1000;
316
+ }
317
+
318
+ .easy-user-auth-modal {
319
+ background: var(--surface);
320
+ border: 1px solid var(--border);
321
+ border-radius: 16px;
322
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
323
+ padding: 30px;
324
+ width: 100%;
325
+ max-width: 420px;
326
+ position: relative;
327
+ box-sizing: border-box;
328
+ }
329
+
330
+ .easy-user-auth-close-btn {
331
+ position: absolute;
332
+ top: 15px;
333
+ right: 20px;
334
+ background: transparent;
335
+ border: none;
336
+ font-size: 24px;
337
+ color: var(--text-muted);
338
+ cursor: pointer;
339
+ padding: 0;
340
+ transition: color 0.2s;
341
+
342
+ &:hover {
343
+ color: var(--text);
344
+ }
345
+ }
346
+
347
+ .easy-user-auth-tabs {
348
+ display: flex;
349
+ gap: 10px;
350
+ margin-bottom: 25px;
351
+ border-bottom: 1px solid var(--border);
352
+ padding-bottom: 10px;
353
+ }
354
+
355
+ .easy-user-auth-tab {
356
+ background: transparent;
357
+ border: none;
358
+ color: var(--text-muted);
359
+ font-size: 16px;
360
+ padding: 8px 12px;
361
+ cursor: pointer;
362
+ font-weight: 500;
363
+ transition: color 0.2s;
364
+
365
+ &:hover {
366
+ color: var(--text);
367
+ }
368
+
369
+ &.easy-user-auth-tab-active {
370
+ color: var(--primary);
371
+ border-bottom: 2px solid var(--primary);
372
+ font-weight: bold;
373
+ }
374
+ }
375
+
376
+ .easy-user-auth-form {
377
+ display: flex;
378
+ flex-direction: column;
379
+ gap: 20px;
380
+ }
381
+
382
+ .easy-user-auth-form-input {
383
+ display: flex;
384
+ flex-direction: column;
385
+ gap: 8px;
386
+ }
387
+
388
+ .easy-user-auth-label {
389
+ font-size: 14px;
390
+ color: var(--text-muted);
391
+ font-weight: 500;
392
+ }
393
+
394
+ .easy-user-auth-input {
395
+ width: 100%;
396
+ box-sizing: border-box;
397
+ }
398
+
399
+ .easy-user-auth-submit-btn {
400
+ width: 100%;
401
+ margin-top: 10px;
402
+ }
403
+
404
+ .easy-user-auth-back-btn {
405
+ width: 100%;
406
+ background: transparent;
407
+ border: 1px solid var(--border);
408
+ color: var(--text);
409
+
410
+ &:hover:not(:disabled) {
411
+ background: rgba(255, 255, 255, 0.05);
412
+ }
413
+ }
414
+
415
+ .easy-user-auth-forgot-link {
416
+ font-size: 14px;
417
+ color: var(--primary);
418
+ text-align: right;
419
+ align-self: flex-end;
420
+ cursor: pointer;
421
+ background: transparent;
422
+ border: none;
423
+ font-weight: bold;
424
+ padding: 0;
425
+
426
+ &:hover {
427
+ color: var(--primary-hover);
428
+ text-decoration: underline;
429
+ }
430
+ }
431
+
432
+ .easy-user-auth-title {
433
+ font-size: 20px;
434
+ font-weight: bold;
435
+ margin: 0 0 10px;
436
+ color: var(--text);
437
+ }
438
+
439
+ .easy-user-auth-text {
440
+ font-size: 14px;
441
+ color: var(--text-muted);
442
+ margin: 0 0 15px;
443
+ }
444
+
445
+ .easy-user-auth-alert {
446
+ padding: 12px;
447
+ border-radius: 8px;
448
+ font-size: 14px;
449
+ margin-bottom: 10px;
450
+ background: rgba(239, 68, 68, 0.1);
451
+ border: 1px solid rgba(239, 68, 68, 0.2);
452
+ color: #f87171;
453
+ }
454
+
455
+ .easy-user-auth-info {
456
+ font-size: 12px;
457
+ color: var(--text-muted);
458
+ margin-top: 4px;
459
+ }
460
+ /* --- AUTH END --- */
461
+
462
+ /* Helper & UI Utility Classes */
463
+ .auth-bar {
464
+ display: flex;
465
+ justify-content: flex-end;
466
+ padding: 10px 0;
467
+ border-bottom: 1px solid var(--border);
468
+ margin-bottom: 20px;
469
+ }
470
+
471
+ .auth-user-info {
472
+ display: flex;
473
+ align-items: center;
474
+ gap: 15px;
475
+ }
476
+
477
+ .admin-link-wrapper {
478
+ margin-top: 20px;
479
+ }
480
+
481
+ .not-found {
482
+ padding: 40px;
483
+ text-align: center;
484
+ }
485
+
486
+ .loading-fallback {
487
+ padding: 40px;
488
+ text-align: center;
489
+ color: var(--text-muted);
490
+ }
491
+
492
+ .text-error {
493
+ color: #ef4444;
494
+ }
495
+
496
+ .text-success {
497
+ color: #34d399;
498
+ }
499
+
500
+ .alert-success {
501
+ background: rgba(16, 185, 129, 0.1);
502
+ border: 1px solid rgba(16, 185, 129, 0.2);
503
+ color: #34d399;
504
+ }
505
+
506
+ .reset-password-main {
507
+ max-width: 450px;
508
+ margin: 60px auto;
509
+ }
510
+
511
+ .btn-group {
512
+ display: flex;
513
+ gap: 15px;
514
+ margin-top: 10px;
515
+
516
+ & > * {
517
+ flex: 1;
518
+ }
519
+ }
520
+
521
+ .btn-center-group {
522
+ display: flex;
523
+ gap: 15px;
524
+ justify-content: center;
525
+ margin-top: 20px;
526
+ }
527
+
528
+ .tip-box {
529
+ margin-top: 30px;
530
+ font-size: 0.85em;
531
+ color: var(--text-muted);
532
+ }
533
+
534
+ .admin-tabs {
535
+ display: flex;
536
+ gap: 10px;
537
+ margin: 20px 0;
538
+ border-bottom: 1px solid var(--border);
539
+ padding-bottom: 10px;
540
+ }
541
+
542
+ .tab-btn {
543
+ padding: 8px 16px;
544
+ background: transparent;
545
+ border: none;
546
+ color: var(--text-muted);
547
+ font-weight: 500;
548
+ cursor: pointer;
549
+ border-radius: 6px;
550
+ transition: background 0.2s, color 0.2s;
551
+
552
+ &:hover {
553
+ color: var(--text);
554
+ background: rgba(255, 255, 255, 0.05);
555
+ }
556
+
557
+ &.active {
558
+ background: var(--primary);
559
+ color: #fff;
560
+ }
561
+ }
562
+
563
+ .admin-card {
564
+ padding: 40px;
565
+ text-align: center;
566
+ border: 1px dashed var(--border);
567
+ border-radius: 8px;
568
+ }
569
+
570
+ .admin-login-form {
571
+ display: flex;
572
+ flex-direction: column;
573
+ gap: 10px;
574
+ max-width: 300px;
575
+ margin: 20px auto;
576
+
577
+ input {
578
+ padding: 10px;
579
+ }
580
+
581
+ button {
582
+ padding: 10px;
583
+ }
584
+ }
585
+
586
+ .error-list {
587
+ display: flex;
588
+ flex-direction: column;
589
+ gap: 15px;
590
+ }
591
+
592
+ .error-item {
593
+ padding: 15px;
594
+ background: var(--surface);
595
+ border: 1px solid var(--border);
596
+ border-radius: 6px;
597
+ }
598
+
599
+ .error-item-header {
600
+ display: flex;
601
+ justify-content: space-between;
602
+ margin-bottom: 10px;
603
+ font-size: 0.9em;
604
+ }
605
+
606
+ .error-name {
607
+ color: var(--primary);
608
+ font-weight: bold;
609
+ }
610
+
611
+ .error-message {
612
+ margin: 5px 0;
613
+ font-family: monospace;
614
+ white-space: pre-wrap;
615
+ word-break: break-all;
616
+ color: #f87171;
617
+ }
618
+
619
+ .error-details {
620
+ margin-top: 10px;
621
+
622
+ summary {
623
+ cursor: pointer;
624
+ color: var(--text-muted);
625
+ font-size: 0.85em;
626
+ }
627
+
628
+ pre {
629
+ margin-top: 5px;
630
+ padding: 10px;
631
+ background: #09090b;
632
+ overflow-x: auto;
633
+ font-size: 0.8em;
634
+ color: var(--text-muted);
635
+ }
636
+ }
637
+
638
+ .table-wrapper {
639
+ overflow-x: auto;
640
+ }
641
+
642
+ .role-badge {
643
+ padding: 2px 6px;
644
+ border-radius: 4px;
645
+ font-size: 0.85em;
646
+ background: rgba(255, 255, 255, 0.05);
647
+ color: var(--text-muted);
648
+
649
+ &.admin {
650
+ background: rgba(99, 102, 241, 0.2);
651
+ color: var(--primary-hover);
652
+ }
653
+ }
654
+
655
+ .admin-table {
656
+ width: 100%;
657
+ border-collapse: collapse;
658
+ text-align: left;
659
+
660
+ tr {
661
+ border-bottom: 1px solid var(--border);
662
+ }
663
+
664
+ th, td {
665
+ padding: 12px 16px;
666
+ }
667
+ }
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "target": "ES2022",
4
- "module": "CommonJS",
4
+ "module": "ESNext",
5
+ "moduleResolution": "Bundler",
5
6
  "lib": [
6
7
  "DOM",
7
8
  "DOM.Iterable",
@@ -13,7 +14,11 @@
13
14
  "strictNullChecks": true,
14
15
  "skipLibCheck": true,
15
16
  "forceConsistentCasingInFileNames": true,
16
- "resolveJsonModule": true
17
+ "resolveJsonModule": true,
18
+ "types": [
19
+ "node",
20
+ "vite/client"
21
+ ]
17
22
  },
18
23
  "include": [
19
24
  "src/**/*",