@seaverse/auth-sdk 0.4.2 โ 0.4.4
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.
- package/README.md +35 -2
- package/dist/auth-modal.css +1 -1
- package/dist/index.cjs +301 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +18 -6
- package/dist/index.js +280 -22
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -482,9 +482,29 @@ The SDK provides beautiful login modal components with dark and light themes:
|
|
|
482
482
|
|
|
483
483
|
| Theme | Design Style | Use Cases |
|
|
484
484
|
|------|---------|---------|
|
|
485
|
-
| **Dark** ๐ |
|
|
485
|
+
| **Dark** ๐ | Modern glassmorphism with brand color (#00E599) | Tech products, gaming platforms, dark interface apps |
|
|
486
486
|
| **Light** โ๏ธ | Elevated card design + soft shadows | Business apps, content platforms, light interface apps |
|
|
487
487
|
|
|
488
|
+
#### Login Flow Design
|
|
489
|
+
|
|
490
|
+
The dark theme login interface features a **dual-view system** with progressive disclosure:
|
|
491
|
+
|
|
492
|
+
**New Style View (Default)**:
|
|
493
|
+
1. **Initial View**: Shows OAuth login buttons (Google primary, GitHub/Discord secondary) with brand green (#00E599) for the primary action
|
|
494
|
+
2. **Email Option**: A "Sign in with Email" button allows users to switch to traditional email/password login
|
|
495
|
+
3. **Smart View Reset**: When navigating from signup or other forms back to login, automatically resets to this modern OAuth-first view
|
|
496
|
+
|
|
497
|
+
**Old Style View (On-Demand)**:
|
|
498
|
+
1. **Traditional Form**: Activated by clicking "Sign in with Email", displays the classic email and password input fields
|
|
499
|
+
2. **Complete Experience**: Includes "Welcome back." title, signup link, and all familiar login elements
|
|
500
|
+
3. **Back Navigation**: Users can easily return to the OAuth options view with "Back to other options" button
|
|
501
|
+
|
|
502
|
+
This dual-view design:
|
|
503
|
+
- โจ Prioritizes OAuth login for better conversion rates
|
|
504
|
+
- ๐ Keeps traditional email login accessible when needed
|
|
505
|
+
- ๐ฏ Reduces cognitive load with clear, focused interfaces
|
|
506
|
+
- ๐ฑ Provides smooth transitions between authentication methods
|
|
507
|
+
|
|
488
508
|
#### Basic Usage
|
|
489
509
|
|
|
490
510
|
```typescript
|
|
@@ -1797,7 +1817,20 @@ MIT ยฉ [SeaVerse Team](mailto:support@seaverse.com)
|
|
|
1797
1817
|
|
|
1798
1818
|
## Changelog
|
|
1799
1819
|
|
|
1800
|
-
### v0.
|
|
1820
|
+
### v0.4.4 (Current Version)
|
|
1821
|
+
- ๐จ **Login UI Redesign**: Dual-view login system with progressive disclosure
|
|
1822
|
+
- **New Style View (Default)**: Modern OAuth-first interface with brand color #00E599
|
|
1823
|
+
- Google as primary button, GitHub/Discord as secondary options
|
|
1824
|
+
- "Sign in with Email" toggle for traditional login
|
|
1825
|
+
- Automatically shown when returning to login from other views
|
|
1826
|
+
- **Old Style View (On-Demand)**: Classic email/password form
|
|
1827
|
+
- Activated by clicking "Sign in with Email"
|
|
1828
|
+
- Complete traditional login experience with "Welcome back." title
|
|
1829
|
+
- "Back to other options" button to return to OAuth view
|
|
1830
|
+
- Enhanced visual design: improved input fields, button states, and typography
|
|
1831
|
+
- Smooth view transitions with CSS-scoped styling for each mode
|
|
1832
|
+
|
|
1833
|
+
### v0.3.6
|
|
1801
1834
|
- ๐งน **Code Cleanup**: Remove desktop application OAuth callback related functionality
|
|
1802
1835
|
- Remove `oauthDesktopURL` configuration option
|
|
1803
1836
|
- Simplify OAuth flow, unified use of `returnUrl` parameter
|
package/dist/auth-modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--font-display:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;--color-neon-green:#10b981;--color-text-primary:#ffffff;--color-text-secondary:#a1a1aa;--color-text-tertiary:#71717a;--gradient-neon:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);}.auth-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:modalFadeIn 0.3s ease-out;overflow:hidden;}.auth-modal.hidden{display:none;}@keyframes modalFadeIn{from{opacity:0;}to{opacity:1;}}.auth-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}.auth-modal-content{position:relative;z-index:10;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:900px;max-height:90vh;background:#0d0d0d;border:1px solid rgba(255,255,255,0.08);border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,0.8);overflow:hidden;animation:modalSlideUp 0.4s cubic-bezier(0.4,0,0.2,1);transition:max-width 0.3s ease;}.auth-modal-content:has(#loginForm:not(.hidden)){grid-template-columns:1fr auto;max-width:none;width:auto;}.auth-modal-content:has(#loginForm:not(.hidden)) .auth-modal-right{width:auto;min-width:0;}.auth-modal-content:has(#authMessage:not(.hidden)){grid-template-columns:1fr;max-width:480px;}.auth-modal-content:has(#authMessage:not(.hidden)) .auth-modal-left{display:none;}@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}.auth-modal-left{position:relative;display:flex;flex-direction:column;padding:32px;background:#000;overflow:hidden;border-right:1px solid rgba(255,255,255,0.05);}.auth-modal-left::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:radial-gradient(at 0% 0%,rgba(99,102,241,0.3) 0px,transparent 50%),radial-gradient(at 50% 0%,rgba(139,92,246,0.3) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(236,72,153,0.3) 0px,transparent 50%),radial-gradient(at 0% 50%,rgba(16,185,129,0.3) 0px,transparent 50%),radial-gradient(at 100% 50%,rgba(244,63,94,0.3) 0px,transparent 50%),radial-gradient(at 0% 100%,rgba(236,72,153,0.3) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,0.3) 0px,transparent 50%);filter:blur(80px);animation:meshRotate 20s linear infinite;opacity:0.6;}@keyframes meshRotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.auth-modal-left::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");opacity:0.4;mix-blend-mode:overlay;pointer-events:none;}.auth-modal-logo{display:flex;align-items:center;gap:10px;z-index:10;position:relative;}.auth-modal-logo .logo-icon{width:28px;height:28px;filter:drop-shadow(0 0 10px rgba(16,185,129,0.3));}.auth-modal-logo .logo-text{font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(0,0,0,0.5);}.auth-modal-decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none;}.auth-modal-decoration .glow-orb-1{position:absolute;width:400px;height:400px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);border-radius:50%;filter:blur(60px);animation:breathe 8s ease-in-out infinite;pointer-events:none;}@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.5;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0.8;}}.auth-modal-decoration .glow-orb-2{position:absolute;width:300px;height:300px;top:20%;right:-10%;background:radial-gradient(circle,rgba(139,92,246,0.08) 0%,transparent 70%);border-radius:50%;filter:blur(50px);animation:breathe 10s ease-in-out infinite;animation-delay:2s;pointer-events:none;}.auth-modal-branding{margin-top:auto;margin-bottom:48px;z-index:10;position:relative;}.auth-modal-branding .branding-title{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1.15;margin-bottom:12px;color:#ffffff;letter-spacing:-0.02em;text-shadow:0 2px 10px rgba(0,0,0,0.3);}.auth-modal-branding .branding-subtitle{font-size:14px;color:rgba(255,255,255,0.8);max-width:260px;line-height:1.6;}.auth-modal-right{position:relative;display:flex;flex-direction:column;padding:56px 48px 42px 48px;background:#121212;overflow-y:auto;max-height:90vh;}.auth-modal-right::-webkit-scrollbar{width:6px;}.auth-modal-right::-webkit-scrollbar-track{background:transparent;}.auth-modal-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px;}.auth-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.2s ease;z-index:20;border-radius:8px;}.auth-modal-close:hover{background:rgba(255,255,255,0.1);color:#ffffff;}.auth-form-view{animation:formFadeIn 0.3s ease-out;}#loginForm .form-input{width:360px;}@keyframes formFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.auth-form-view.hidden{display:none;}.auth-form-header{margin-bottom:28px;text-align:center;}.auth-form-title{font-family:var(--font-display);font-size:26px;font-weight:700;margin-bottom:8px;color:#ffffff;letter-spacing:-0.02em;}.auth-form-subtitle{font-size:14px;color:var(--color-text-secondary);}.auth-form{display:flex;flex-direction:column;gap:16px;}.form-group{display:flex;flex-direction:column;gap:6px;}.form-label{font-size:12px;font-weight:500;color:var(--color-text-primary);letter-spacing:0.02em;text-transform:uppercase;opacity:0.9;}.form-input{width:100%;height:40px;padding:0 14px;font-family:var(--font-sans);font-size:14px;color:var(--color-text-primary);background:rgba(30,30,30,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:8px;outline:none;transition:all 0.2s ease;}.form-input::placeholder{color:rgba(255,255,255,0.35);}.form-input:hover{border-color:rgba(255,255,255,0.15);}.form-input:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,0.15);background:rgba(30,30,30,0.9);}.form-input:invalid:not(:placeholder-shown){border-color:#ff006e;}.form-input[type="textarea"],textarea.form-input{min-height:100px;resize:vertical;font-family:inherit;line-height:1.5;padding:12px 14px;}.char-count{font-size:12px;color:rgba(255,255,255,0.5);text-align:right;margin-top:4px;}.auth-modal-light .char-count{color:rgba(0,0,0,0.4);}.icon-mail{position:relative;z-index:2;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,0.4));animation:floatIcon 4s ease-in-out infinite;}.forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient( circle,rgba(16,185,129,0.25) 0%,rgba(6,182,212,0.15) 40%,transparent 70% );}#applyInviteReason{position:relative;min-height:120px;padding:14px 16px;background:rgba(20,20,20,0.6);transition:all 0.3s ease;}#applyInviteReason:focus{background:rgba(20,20,20,0.8);border-color:rgba(16,185,129,0.5);box-shadow:0 0 0 3px rgba(16,185,129,0.15),0 0 20px rgba(16,185,129,0.15),inset 0 1px 0 rgba(255,255,255,0.05);}.form-group:has(#applyInviteReason) .char-count{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(161,161,170,0.7);text-align:right;margin-top:8px;padding:4px 0;display:block;float:right;position:relative;transition:all 0.3s ease;letter-spacing:0.02em;}.form-group:has(#applyInviteReason) .char-count::before{content:'';position:absolute;bottom:0;left:0;height:2px;width:var(--progress-width,0%);background:linear-gradient(90deg,#10b981,#06b6d4);transition:width 0.3s ease,box-shadow 0.3s ease,background 0.3s ease;box-shadow:0 0 8px rgba(16,185,129,0.5);}.form-group:has(#applyInviteReason) .char-count[data-progress="low"]{color:rgba(251,191,36,0.9);}.form-group:has(#applyInviteReason) .char-count[data-progress="low"]::before{background:linear-gradient(90deg,rgba(251,191,36,0.8),rgba(251,191,36,0.6));box-shadow:0 0 8px rgba(251,191,36,0.5);}.form-group:has(#applyInviteReason) .char-count[data-progress="medium"]{color:rgba(16,185,129,0.9);}.form-group:has(#applyInviteReason) .char-count[data-progress="medium"]::before{background:linear-gradient(90deg,#10b981,#06b6d4);box-shadow:0 0 10px rgba(16,185,129,0.6);}.form-group:has(#applyInviteReason) .char-count[data-progress="high"]{color:rgba(239,68,68,0.9);}.form-group:has(#applyInviteReason) .char-count[data-progress="high"]::before{background:linear-gradient(90deg,rgba(239,68,68,0.8),rgba(239,68,68,0.6));box-shadow:0 0 10px rgba(239,68,68,0.6);}.auth-modal-light .icon-mail{color:#059669;filter:drop-shadow(0 0 8px rgba(5,150,105,0.3));}.auth-modal-light .forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient( circle,rgba(16,185,129,0.15) 0%,rgba(6,182,212,0.1) 40%,transparent 70% );}.auth-modal-light #applyInviteReason{background:rgba(255,255,255,0.8);border-color:rgba(16,185,129,0.2);color:#0a0a0a;}.auth-modal-light #applyInviteReason:focus{background:rgba(255,255,255,0.95);border-color:rgba(16,185,129,0.5);box-shadow:0 0 0 3px rgba(16,185,129,0.12),0 0 20px rgba(16,185,129,0.1),inset 0 1px 0 rgba(255,255,255,0.8);}.auth-modal-light .form-group:has(#applyInviteReason) .char-count{color:rgba(82,82,91,0.8);}.input-with-icon{position:relative;display:flex;align-items:center;}.input-with-icon .form-input{padding-right:40px;}.input-icon-btn{position:absolute;right:8px;background:transparent;border:none;color:rgba(255,255,255,0.4);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color 0.2s ease;border-radius:4px;}.input-icon-btn:hover{color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.05);}.input-icon-btn .hidden{display:none;}.strength-text{font-size:12px;color:var(--color-text-tertiary);font-weight:500;display:flex;align-items:center;gap:6px;margin-top:4px;}.form-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}.form-group-header .form-label{margin-bottom:0;}.forgot-password-link{font-size:13px;font-weight:500;color:rgba(255,255,255,0.5);text-decoration:none;transition:all 0.25s ease;position:relative;}.forgot-password-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#10b981;transition:width 0.3s ease;}.forgot-password-link:hover{color:#10b981;}.forgot-password-link:hover::after{width:100%;}.link-primary{color:var(--color-neon-green);text-decoration:none;font-weight:600;transition:all 0.2s ease;position:relative;text-shadow:0 0 10px rgba(0,255,136,0.3);}.link-primary::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:var(--color-neon-green);transform:scaleX(0);transform-origin:right;transition:transform 0.3s ease;}.link-primary:hover{color:#00ff88;text-shadow:0 0 20px rgba(0,255,136,0.5);}.link-primary:hover::after{transform:scaleX(1);transform-origin:left;}.btn-auth-primary{width:100%;height:44px;padding:0 24px;font-family:var(--font-sans);font-size:14px;font-weight:600;color:#000;background:var(--gradient-neon);border:none;border-radius:10px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(16,185,129,0.25);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;}.btn-auth-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.2) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-auth-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,0.35);}.btn-auth-primary:hover::before{opacity:1;}.btn-auth-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(16,185,129,0.25);}.btn-auth-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none;}.btn-auth-primary .btn-text{position:relative;z-index:2;}.btn-auth-primary .btn-loader{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}.btn-auth-primary .btn-loader.hidden{display:none;}.spinner{width:20px;height:20px;fill:none;stroke-width:3;animation:spin 0.8s linear infinite;}@keyframes spin{to{transform:rotate(360deg);}}.spinner-track{stroke:rgba(0,0,0,0.2);}.spinner-circle{stroke:#000;stroke-dasharray:50;stroke-dashoffset:50;animation:spinDash 1.2s ease-in-out infinite;}@keyframes spinDash{0%{stroke-dashoffset:50;}50%{stroke-dashoffset:12.5;}100%{stroke-dashoffset:50;}}.invite-code-icon{position:relative;width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;background:rgba(52,211,153,0.1);border-radius:12px;}.invite-code-icon .icon-glow{position:absolute;inset:-10px;background:radial-gradient(circle,rgba(52,211,153,0.2) 0%,transparent 70%);border-radius:50%;animation:pulseGlow 3s ease-in-out infinite;filter:blur(15px);}.invite-code-icon .icon-star{position:relative;z-index:2;color:#34d399;filter:drop-shadow(0 0 10px rgba(52,211,153,0.4));animation:floatIcon 4s ease-in-out infinite;}.forgot-password-icon{position:relative;width:100px;height:100px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;}.forgot-password-icon .icon-glow{position:absolute;inset:-10px;background:radial-gradient(circle,rgba(16,185,129,0.25) 0%,transparent 70%);border-radius:50%;animation:pulseGlow 3s ease-in-out infinite;filter:blur(15px);}@keyframes pulseGlow{0%,100%{opacity:0.5;transform:scale(0.95);}50%{opacity:0.8;transform:scale(1.05);}}.forgot-password-icon .icon-lock{position:relative;z-index:2;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,0.4));animation:floatIcon 4s ease-in-out infinite;}@keyframes floatIcon{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}.btn-forgot-password{display:flex;align-items:center;justify-content:center;gap:8px;}.btn-forgot-password .btn-arrow{transition:transform 0.3s ease;}.btn-forgot-password:hover .btn-arrow{transform:translateX(4px);}.auth-footer{margin-top:24px;text-align:center;}.forgot-footer{display:flex;justify-content:center;}.back-to-login{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:all 0.2s ease;padding:8px 12px;border-radius:6px;}.back-to-login:hover{color:var(--color-neon-green);background:rgba(16,185,129,0.05);}.back-to-login svg{transition:transform 0.3s ease;}.back-to-login:hover svg{transform:translateX(-4px);}.invite-code-divider{position:relative;text-align:center;margin:32px 0 20px 0;font-size:11px;font-weight:600;color:var(--color-text-tertiary);letter-spacing:0.08em;display:flex;align-items:center;gap:12px;}.invite-code-divider::before,.invite-code-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);}.btn-apply-invite{width:100%;height:44px;padding:0 24px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--color-text-secondary);background:rgba(30,30,30,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}.btn-apply-invite::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.05) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-apply-invite:hover{border-color:rgba(255,255,255,0.2);background:rgba(40,40,40,0.9);color:var(--color-text-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3);}.btn-apply-invite:hover::before{opacity:1;}.btn-apply-invite:active{transform:translateY(0);}.auth-modal-light .invite-code-icon{background:rgba(52,211,153,0.08);}.auth-modal-light .invite-code-icon .icon-star{color:#059669;filter:drop-shadow(0 2px 8px rgba(5,150,105,0.3));}.auth-modal-light .btn-apply-invite{background:rgba(255,255,255,0.9);border:1.5px solid rgba(0,0,0,0.08);color:rgba(0,0,0,0.6);box-shadow:0 2px 4px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.8) inset;}.auth-modal-light .btn-apply-invite:hover{background:#ffffff;border-color:rgba(16,185,129,0.2);color:#0a0a0a;box-shadow:0 4px 8px rgba(0,0,0,0.06),0 0 0 1px rgba(16,185,129,0.1) inset;transform:translateY(-1px);}.auth-modal-light .invite-code-divider{color:rgba(0,0,0,0.35);}.auth-modal-light .invite-code-divider::before,.auth-modal-light .invite-code-divider::after{background:linear-gradient(to right,transparent,rgba(0,0,0,0.1),transparent);}.auth-footer-divider{margin-top:32px;padding:28px 20px 0 20px;position:relative;text-align:center;isolation:isolate;}.auth-footer-divider::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:85%;height:2px;background:linear-gradient( 90deg,transparent 0%,rgba(16,185,129,0.15) 15%,rgba(16,185,129,0.5) 30%,rgba(6,182,212,0.6) 50%,rgba(16,185,129,0.5) 70%,rgba(16,185,129,0.15) 85%,transparent 100% );filter:blur(0.5px);animation:energyFlow 4s ease-in-out infinite;}.auth-footer-divider::after{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:70%;height:8px;background:radial-gradient( ellipse at center,rgba(16,185,129,0.25) 0%,rgba(6,182,212,0.15) 40%,transparent 70% );filter:blur(6px);animation:glowPulse 3s ease-in-out infinite;opacity:0.6;}@keyframes energyFlow{0%,100%{opacity:0.7;transform:translateX(-50%) scaleX(1);}50%{opacity:1;transform:translateX(-50%) scaleX(1.02);}}@keyframes glowPulse{0%,100%{opacity:0.4;transform:translateX(-50%) scaleY(0.8);}50%{opacity:0.8;transform:translateX(-50%) scaleY(1.2);}}.auth-footer-text{font-size:13.5px;font-weight:400;color:rgba(161,161,170,0.85);letter-spacing:0.02em;line-height:1.6;margin:0;position:relative;z-index:1;}.auth-link{color:#10b981;font-weight:600;text-decoration:none;position:relative;display:inline-block;padding:6px 14px;border-radius:6px;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);background:rgba(16,185,129,0.05);border:1px solid rgba(16,185,129,0.2);margin-left:6px;letter-spacing:0.01em;isolation:isolate;}.auth-link::before{content:'';position:absolute;inset:-1px;border-radius:6px;padding:1px;background:linear-gradient( 135deg,transparent 0%,rgba(16,185,129,0.4) 25%,rgba(6,182,212,0.5) 50%,rgba(16,185,129,0.4) 75%,transparent 100% );-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity 0.4s ease;animation:shimmerRotate 3s linear infinite paused;}@keyframes shimmerRotate{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}.auth-link::after{content:'';position:absolute;bottom:3px;left:14px;right:14px;height:2px;background:linear-gradient( 90deg,rgba(16,185,129,0.8),rgba(6,182,212,0.9),rgba(16,185,129,0.8) );border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);filter:blur(0.5px);box-shadow:0 0 8px rgba(16,185,129,0.6),0 0 12px rgba(6,182,212,0.4);}.auth-link:hover{color:#00ffaa;background:rgba(16,185,129,0.12);border-color:rgba(6,182,212,0.5);transform:translateY(-2px) scale(1.02);text-shadow:0 0 10px rgba(16,185,129,0.6),0 0 20px rgba(6,182,212,0.4),0 0 30px rgba(16,185,129,0.2);box-shadow:0 4px 20px rgba(16,185,129,0.3),0 0 40px rgba(6,182,212,0.15),inset 0 1px 0 rgba(255,255,255,0.1);}.auth-link:hover::before{opacity:1;animation-play-state:running;}.auth-link:hover::after{transform:scaleX(1);}.auth-link:active{transform:translateY(0) scale(0.98);background:rgba(16,185,129,0.18);border-color:rgba(16,185,129,0.6);box-shadow:0 2px 12px rgba(16,185,129,0.4),inset 0 2px 8px rgba(0,0,0,0.2);}.auth-link:focus-visible{outline:none;border-color:rgba(16,185,129,0.8);box-shadow:0 0 0 3px rgba(16,185,129,0.3),0 0 20px rgba(16,185,129,0.4),inset 0 1px 0 rgba(255,255,255,0.15);}@media (max-width:768px){.auth-footer-divider{margin-top:28px;padding-top:24px;}.auth-footer-divider::before{width:90%;}.auth-footer-text{font-size:13px;}.auth-link{padding:8px 16px;margin-left:4px;}.auth-link::after{left:16px;right:16px;}}.auth-modal-light .auth-footer-divider::before{background:linear-gradient( 90deg,transparent 0%,rgba(16,185,129,0.2) 15%,rgba(16,185,129,0.35) 30%,rgba(6,182,212,0.4) 50%,rgba(16,185,129,0.35) 70%,rgba(16,185,129,0.2) 85%,transparent 100% );}.auth-modal-light .auth-footer-divider::after{background:radial-gradient( ellipse at center,rgba(16,185,129,0.15) 0%,rgba(6,182,212,0.1) 40%,transparent 70% );}.auth-modal-light .auth-footer-text{color:rgba(82,82,91,0.9);}.auth-modal-light .auth-link{color:#059669;background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.25);}.auth-modal-light .auth-link::before{background:linear-gradient( 135deg,transparent 0%,rgba(16,185,129,0.5) 25%,rgba(6,182,212,0.6) 50%,rgba(16,185,129,0.5) 75%,transparent 100% );}.auth-modal-light .auth-link:hover{color:#047857;background:rgba(16,185,129,0.15);border-color:rgba(6,182,212,0.4);text-shadow:0 0 8px rgba(16,185,129,0.4),0 0 16px rgba(6,182,212,0.3);box-shadow:0 4px 16px rgba(16,185,129,0.25),0 0 30px rgba(6,182,212,0.1),inset 0 1px 0 rgba(255,255,255,0.6);}.auth-modal-light .auth-link:active{background:rgba(16,185,129,0.22);box-shadow:0 2px 10px rgba(16,185,129,0.3),inset 0 2px 6px rgba(0,0,0,0.1);}.auth-message-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;}.message-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border-radius:50%;background:rgba(16,185,129,0.1);color:#10b981;}.message-icon svg{filter:drop-shadow(0 0 10px rgba(16,185,129,0.3));animation:successPulse 2s ease-in-out infinite;}@keyframes successPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}.message-title{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:12px;color:#ffffff;}.message-text{font-size:14px;color:var(--color-text-secondary);margin-bottom:24px;line-height:1.6;}.divider{position:relative;text-align:center;margin:24px 0 20px 0;font-size:11px;font-weight:600;color:var(--color-text-tertiary);letter-spacing:0.08em;display:flex;align-items:center;gap:12px;}.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);}.social-buttons-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}.btn-social{height:44px;padding:0 16px;margin:0;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--color-text-primary);background:rgba(30,30,30,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;}.btn-social::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.05) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-social:hover{border-color:rgba(255,255,255,0.2);background:rgba(40,40,40,0.9);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3);}.btn-social:hover::before{opacity:1;}.btn-social:active{transform:translateY(0);}.btn-social svg{width:20px;height:20px;flex-shrink:0;}.btn-social span{position:relative;z-index:2;white-space:nowrap;}.btn-social-full{width:100%;height:44px;padding:0 16px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--color-text-primary);background:rgba(30,30,30,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;}.btn-social-full::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.05) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-social-full:hover{border-color:rgba(255,255,255,0.2);background:rgba(40,40,40,0.9);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3);}.btn-social-full:hover::before{opacity:1;}.btn-social-full:active{transform:translateY(0);}.btn-social-full svg{width:20px;height:20px;flex-shrink:0;}.btn-social-full span{position:relative;z-index:2;}@media (max-width:768px){.auth-modal-content{grid-template-columns:1fr;max-width:100%;max-height:100vh;border-radius:0;}.auth-modal-left{display:none;}.auth-modal-right{max-height:100vh;padding:24px;}.auth-form-title{font-size:22px;}#loginForm .form-input{width:100%;}.btn-auth-primary{height:48px;font-size:15px;}.social-buttons-grid{grid-template-columns:1fr;gap:10px;}.btn-social,.btn-social-full{height:48px;}}@media (max-width:480px){.auth-modal{padding:0;}.auth-modal-content{border-radius:0;max-height:100vh;}.auth-modal-right{padding:20px 16px;}.auth-form-header{margin-bottom:20px;}}.auth-modal-light{}.auth-modal-light .auth-modal-backdrop{background:rgba(255,255,255,0.75);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);}.auth-modal-light .auth-modal-content{background:linear-gradient(135deg,#fdfbf7 0%,#f8f6f2 100%);border:1px solid rgba(16,185,129,0.1);box-shadow:0 50px 100px rgba(0,0,0,0.12),0 20px 40px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.9) inset;}.auth-modal-light .auth-modal-left{background:linear-gradient(135deg,#ffffff 0%,#faf9f7 100%);border-right:1px solid rgba(16,185,129,0.08);box-shadow:2px 0 20px rgba(0,0,0,0.03),0 0 0 1px rgba(16,185,129,0.05) inset;}.auth-modal-light .auth-modal-left::before{background:radial-gradient(at 0% 0%,rgba(16,185,129,0.08) 0px,transparent 50%),radial-gradient(at 50% 0%,rgba(6,182,212,0.06) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(16,185,129,0.08) 0px,transparent 50%),radial-gradient(at 0% 50%,rgba(52,211,153,0.05) 0px,transparent 50%),radial-gradient(at 100% 50%,rgba(6,182,212,0.06) 0px,transparent 50%),radial-gradient(at 0% 100%,rgba(16,185,129,0.07) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(52,211,153,0.06) 0px,transparent 50%);filter:blur(60px);opacity:0.9;}.auth-modal-light .auth-modal-left::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");opacity:0.6;mix-blend-mode:multiply;}.auth-modal-light .auth-modal-logo .logo-icon{filter:drop-shadow(0 2px 8px rgba(16,185,129,0.25));}.auth-modal-light .auth-modal-logo .logo-text{color:#0a0a0a;text-shadow:0 1px 2px rgba(16,185,129,0.1);}.auth-modal-light .auth-modal-decoration .glow-orb-1{background:radial-gradient(circle,rgba(16,185,129,0.08) 0%,transparent 70%);filter:blur(80px);}.auth-modal-light .auth-modal-decoration .glow-orb-2{background:radial-gradient(circle,rgba(6,182,212,0.06) 0%,transparent 70%);filter:blur(70px);}.auth-modal-light .auth-modal-branding .branding-title{color:#0a0a0a;text-shadow:0 2px 12px rgba(16,185,129,0.12);background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-modal-light .auth-modal-branding .branding-subtitle{color:rgba(0,0,0,0.6);}.auth-modal-light .auth-modal-right{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:-2px 0 20px rgba(0,0,0,0.03);}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb{background:rgba(16,185,129,0.2);}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,0.3);}.auth-modal-light .auth-modal-close{color:rgba(0,0,0,0.4);}.auth-modal-light .auth-modal-close:hover{background:rgba(16,185,129,0.08);color:#0a0a0a;}.auth-modal-light .auth-form-title{color:#0a0a0a;background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-modal-light .auth-form-subtitle{color:rgba(0,0,0,0.5);}.auth-modal-light .form-label{color:#0a0a0a;opacity:0.7;}.auth-modal-light .form-input{color:#0a0a0a;background:rgba(255,255,255,0.9);border:1.5px solid rgba(0,0,0,0.08);box-shadow:0 1px 2px rgba(0,0,0,0.02),0 0 0 1px rgba(255,255,255,0.8) inset;}.auth-modal-light .form-input::placeholder{color:rgba(0,0,0,0.3);}.auth-modal-light .form-input:hover{border-color:rgba(16,185,129,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.03),0 0 0 1px rgba(16,185,129,0.05) inset;}.auth-modal-light .form-input:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,0.12),0 2px 8px rgba(16,185,129,0.08);background:#ffffff;}.auth-modal-light .form-input:invalid:not(:placeholder-shown){border-color:#ff006e;box-shadow:0 0 0 3px rgba(255,0,110,0.1);}.auth-modal-light .input-icon-btn{color:rgba(0,0,0,0.4);}.auth-modal-light .input-icon-btn:hover{color:rgba(0,0,0,0.7);}.auth-modal-light .forgot-password-link{color:#10b981;}.auth-modal-light .forgot-password-link:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,0.2);}.auth-modal-light .strength-text{color:rgba(0,0,0,0.45);}.auth-modal-light .btn-auth-primary{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#ffffff;border:none;box-shadow:0 4px 12px rgba(16,185,129,0.25),0 2px 4px rgba(16,185,129,0.15),0 0 0 1px rgba(255,255,255,0.3) inset;}.auth-modal-light .btn-auth-primary:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);box-shadow:0 6px 16px rgba(16,185,129,0.3),0 3px 6px rgba(16,185,129,0.2),0 0 0 1px rgba(255,255,255,0.4) inset;transform:translateY(-1px);}.auth-modal-light .btn-auth-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(16,185,129,0.2),0 1px 3px rgba(16,185,129,0.15);}.auth-modal-light .btn-auth-primary:disabled{background:linear-gradient(135deg,rgba(16,185,129,0.4) 0%,rgba(5,150,105,0.4) 100%);box-shadow:none;}.auth-modal-light .btn-forgot-password{background:linear-gradient(135deg,#10b981 0%,#059669 100%);}.auth-modal-light .btn-forgot-password:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);}.auth-modal-light .btn-forgot-password .btn-arrow{filter:drop-shadow(0 0 4px rgba(255,255,255,0.5));}.auth-modal-light .divider{color:rgba(0,0,0,0.35);}.auth-modal-light .divider::before,.auth-modal-light .divider::after{background:linear-gradient(to right,transparent,rgba(0,0,0,0.1),transparent);}.auth-modal-light .btn-social,.auth-modal-light .btn-social-full{background:rgba(255,255,255,0.9);border:1.5px solid rgba(0,0,0,0.08);color:#1a1a1a;box-shadow:0 2px 4px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.8) inset;}.auth-modal-light .btn-social:hover,.auth-modal-light .btn-social-full:hover{background:#ffffff;border-color:rgba(16,185,129,0.2);box-shadow:0 4px 8px rgba(0,0,0,0.06),0 0 0 1px rgba(16,185,129,0.1) inset;transform:translateY(-1px);}.auth-modal-light .btn-social:active,.auth-modal-light .btn-social-full:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.05) inset;}.auth-modal-light .link-primary{color:#10b981;}.auth-modal-light .link-primary:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,0.2);}.auth-modal-light .forgot-password-icon{background:linear-gradient(135deg,rgba(16,185,129,0.08) 0%,rgba(6,182,212,0.06) 100%);box-shadow:0 8px 24px rgba(16,185,129,0.12),0 0 0 1px rgba(16,185,129,0.1) inset;}.auth-modal-light .forgot-password-icon .icon-glow{background:radial-gradient(circle,rgba(16,185,129,0.15) 0%,transparent 70%);}.auth-modal-light .forgot-password-icon .icon-lock{color:#10b981;filter:drop-shadow(0 2px 8px rgba(16,185,129,0.2));}.auth-modal-light .forgot-password-icon .lock-shackle{animation:shakeLock 2s ease-in-out infinite;}.auth-modal-light .back-to-login{color:rgba(0,0,0,0.6);}.auth-modal-light .back-to-login:hover{color:#10b981;}.auth-modal-light .back-to-login svg{color:rgba(0,0,0,0.4);}.auth-modal-light .back-to-login:hover svg{color:#10b981;}.auth-modal-light .auth-message-content{background:linear-gradient(135deg,rgba(16,185,129,0.05) 0%,rgba(6,182,212,0.03) 100%);box-shadow:0 8px 32px rgba(16,185,129,0.12),0 0 0 1px rgba(16,185,129,0.1) inset;}.auth-modal-light .message-icon{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 8px 24px rgba(16,185,129,0.3),0 0 0 4px rgba(16,185,129,0.1);}.auth-modal-light .message-icon svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}.auth-modal-light .message-title{color:#0a0a0a;background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-modal-light .message-text{color:rgba(0,0,0,0.6);}
|
|
1
|
+
:root{--font-display:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;--color-neon-green:#10b981;--color-text-primary:#ffffff;--color-text-secondary:#a1a1aa;--color-text-tertiary:#71717a;--gradient-neon:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);}.auth-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:modalFadeIn 0.3s ease-out;overflow:hidden;}.auth-modal.hidden{display:none;}@keyframes modalFadeIn{from{opacity:0;}to{opacity:1;}}.auth-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}.auth-modal-content{position:relative;z-index:10;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:900px;max-height:90vh;background:#0d0d0d;border:1px solid rgba(255,255,255,0.08);border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,0.8);overflow:hidden;animation:modalSlideUp 0.4s cubic-bezier(0.4,0,0.2,1);transition:max-width 0.3s ease;}.auth-modal-content:has(#loginForm:not(.hidden)){grid-template-columns:1fr auto;max-width:none;width:auto;}.auth-modal-content:has(#loginForm:not(.hidden)) .auth-modal-right{width:auto;min-width:0;}.auth-modal-content:has(#newStyleLoginView:not(.hidden)) .auth-modal-right{width:auto;}.auth-modal-content:has(#oldStyleLoginView:not(.hidden)) .auth-modal-right{width:auto;}.auth-modal-content:has(#authMessage:not(.hidden)){grid-template-columns:1fr;max-width:480px;}.auth-modal-content:has(#authMessage:not(.hidden)) .auth-modal-left{display:none;}@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}.auth-modal-left{position:relative;display:flex;flex-direction:column;padding:32px;background:#000;overflow:hidden;border-right:1px solid rgba(255,255,255,0.05);}.auth-modal-left::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:radial-gradient(at 0% 0%,rgba(99,102,241,0.3) 0px,transparent 50%),radial-gradient(at 50% 0%,rgba(139,92,246,0.3) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(236,72,153,0.3) 0px,transparent 50%),radial-gradient(at 0% 50%,rgba(16,185,129,0.3) 0px,transparent 50%),radial-gradient(at 100% 50%,rgba(244,63,94,0.3) 0px,transparent 50%),radial-gradient(at 0% 100%,rgba(236,72,153,0.3) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,0.3) 0px,transparent 50%);filter:blur(80px);animation:meshRotate 20s linear infinite;opacity:0.6;}@keyframes meshRotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.auth-modal-left::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");opacity:0.4;mix-blend-mode:overlay;pointer-events:none;}.auth-modal-logo{display:flex;align-items:center;gap:10px;z-index:10;position:relative;}.auth-modal-logo .logo-icon{width:28px;height:28px;filter:drop-shadow(0 0 10px rgba(16,185,129,0.3));}.auth-modal-logo .logo-text{font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(0,0,0,0.5);}.auth-modal-decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none;}.auth-modal-decoration .glow-orb-1{position:absolute;width:400px;height:400px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);border-radius:50%;filter:blur(60px);animation:breathe 8s ease-in-out infinite;pointer-events:none;}@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.5;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0.8;}}.auth-modal-decoration .glow-orb-2{position:absolute;width:300px;height:300px;top:20%;right:-10%;background:radial-gradient(circle,rgba(139,92,246,0.08) 0%,transparent 70%);border-radius:50%;filter:blur(50px);animation:breathe 10s ease-in-out infinite;animation-delay:2s;pointer-events:none;}.auth-modal-branding{margin-top:auto;margin-bottom:48px;z-index:10;position:relative;}.auth-modal-branding .branding-title{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1.15;margin-bottom:12px;color:#ffffff;letter-spacing:-0.02em;text-shadow:0 2px 10px rgba(0,0,0,0.3);}.auth-modal-branding .branding-subtitle{font-size:14px;color:rgba(255,255,255,0.8);max-width:260px;line-height:1.6;}.auth-modal-right{position:relative;display:flex;flex-direction:column;padding:56px 48px 42px 48px;background:#1e1e1e;overflow-y:auto;max-height:90vh;}.auth-modal-right::-webkit-scrollbar{width:6px;}.auth-modal-right::-webkit-scrollbar-track{background:transparent;}.auth-modal-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px;}.auth-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.2s ease;z-index:20;border-radius:8px;}.auth-modal-close:hover{background:rgba(255,255,255,0.1);color:#ffffff;}.auth-form-view{animation:formFadeIn 0.3s ease-out;}#loginForm .form-input{width:360px;}@keyframes formFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.auth-form-view.hidden{display:none;}.new-style-login-view{max-width:400px;margin:0 auto;animation:formFadeIn 0.3s ease-out;}.new-style-login-view.hidden{display:none;}.new-style-login-view .auth-form-header{margin-bottom:32px;text-align:center;}.new-style-login-view .auth-form-title{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:8px;color:#ffffff;letter-spacing:-0.02em;}.new-style-login-view .auth-form-subtitle{font-size:14px;color:rgba(161,161,170,1);}.new-style-login-view .auth-form{display:flex;flex-direction:column;gap:12px;}.new-style-login-view .btn-auth-primary{width:100%;height:56px;padding:0 24px;font-size:16px;font-weight:700;color:#000;background:#00E599;border:none;border-radius:12px;box-shadow:0 0 20px rgba(0,229,153,0.2);display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;}.new-style-login-view .btn-auth-primary:hover{background:#00cc88;transform:scale(1.02);}.new-style-login-view .btn-auth-primary:active{transform:scale(0.95);}.new-style-login-view .btn-auth-primary svg{width:20px;height:20px;}.new-style-login-view .social-buttons-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}.new-style-login-view .btn-social{height:48px;background:rgba(43,45,49,1);border:1px solid rgba(113,113,122,1);border-radius:12px;color:rgba(161,161,170,1);}.new-style-login-view .btn-social:hover{background:rgba(53,55,60,1);border-color:rgba(161,161,170,1);color:#ffffff;}.new-style-login-view .divider{font-size:12px;color:rgba(113,113,122,1);margin:24px 0 20px 0;}.new-style-login-view .divider::before,.new-style-login-view .divider::after{height:1px;background:rgba(82,82,91,1);}.btn-email-toggle{width:100%;height:48px;padding:0 16px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:rgba(209,213,219,1);background:transparent;border:1px solid rgba(107,114,128,1);border-radius:12px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;}.btn-email-toggle:hover{border-color:rgba(156,163,175,1);color:#ffffff;}.btn-email-toggle svg{color:rgba(156,163,175,1);}.terms-text{font-size:12px;color:rgba(113,113,122,1);text-align:center;line-height:1.5;}.terms-link{color:rgba(113,113,122,1);text-decoration:underline;transition:color 0.2s ease;}.terms-link:hover{color:rgba(156,163,175,1);}.old-style-login-view{animation:formFadeIn 0.3s ease-out;}.old-style-login-view.hidden{display:none;}.old-style-login-view .auth-form-header{margin-bottom:28px;text-align:center;}.old-style-login-view .auth-form-title{font-family:var(--font-display);font-size:26px;font-weight:700;margin-bottom:8px;color:#ffffff;letter-spacing:-0.02em;}.old-style-login-view .auth-form-subtitle{font-size:14px;color:var(--color-text-secondary);}.old-style-login-view .form-input{width:360px;}.btn-back{width:100%;height:32px;padding:0 12px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:rgba(156,163,175,1);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;}.btn-back:hover{color:#ffffff;}.btn-back svg{transition:transform 0.3s ease;}.btn-back:hover svg{transform:translateX(-4px);}.auth-form-header{margin-bottom:28px;text-align:center;}.auth-form-title{font-family:var(--font-display);font-size:26px;font-weight:700;margin-bottom:8px;color:#ffffff;letter-spacing:-0.02em;}.auth-form-subtitle{font-size:14px;color:var(--color-text-secondary);}.auth-form{display:flex;flex-direction:column;gap:16px;}.form-group{display:flex;flex-direction:column;gap:6px;}.form-label{font-size:12px;font-weight:500;color:var(--color-text-primary);letter-spacing:0.02em;text-transform:uppercase;opacity:0.9;}.form-input{width:100%;height:40px;padding:0 14px;font-family:var(--font-sans);font-size:14px;color:var(--color-text-primary);background:rgba(30,30,30,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:8px;outline:none;transition:all 0.2s ease;}.form-input::placeholder{color:rgba(255,255,255,0.35);}.form-input:hover{border-color:rgba(255,255,255,0.15);}.form-input:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,0.15);background:rgba(30,30,30,0.9);}.form-input:invalid:not(:placeholder-shown){border-color:#ff006e;}.form-input[type="textarea"],textarea.form-input{min-height:100px;resize:vertical;font-family:inherit;line-height:1.5;padding:12px 14px;}.char-count{font-size:12px;color:rgba(255,255,255,0.5);text-align:right;margin-top:4px;}.auth-modal-light .char-count{color:rgba(0,0,0,0.4);}.icon-mail{position:relative;z-index:2;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,0.4));animation:floatIcon 4s ease-in-out infinite;}.forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient( circle,rgba(16,185,129,0.25) 0%,rgba(6,182,212,0.15) 40%,transparent 70% );}#applyInviteReason{position:relative;min-height:120px;padding:14px 16px;background:rgba(20,20,20,0.6);transition:all 0.3s ease;}#applyInviteReason:focus{background:rgba(20,20,20,0.8);border-color:rgba(16,185,129,0.5);box-shadow:0 0 0 3px rgba(16,185,129,0.15),0 0 20px rgba(16,185,129,0.15),inset 0 1px 0 rgba(255,255,255,0.05);}.form-group:has(#applyInviteReason) .char-count{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(161,161,170,0.7);text-align:right;margin-top:8px;padding:4px 0;display:block;float:right;position:relative;transition:all 0.3s ease;letter-spacing:0.02em;}.form-group:has(#applyInviteReason) .char-count::before{content:'';position:absolute;bottom:0;left:0;height:2px;width:var(--progress-width,0%);background:linear-gradient(90deg,#10b981,#06b6d4);transition:width 0.3s ease,box-shadow 0.3s ease,background 0.3s ease;box-shadow:0 0 8px rgba(16,185,129,0.5);}.form-group:has(#applyInviteReason) .char-count[data-progress="low"]{color:rgba(251,191,36,0.9);}.form-group:has(#applyInviteReason) .char-count[data-progress="low"]::before{background:linear-gradient(90deg,rgba(251,191,36,0.8),rgba(251,191,36,0.6));box-shadow:0 0 8px rgba(251,191,36,0.5);}.form-group:has(#applyInviteReason) .char-count[data-progress="medium"]{color:rgba(16,185,129,0.9);}.form-group:has(#applyInviteReason) .char-count[data-progress="medium"]::before{background:linear-gradient(90deg,#10b981,#06b6d4);box-shadow:0 0 10px rgba(16,185,129,0.6);}.form-group:has(#applyInviteReason) .char-count[data-progress="high"]{color:rgba(239,68,68,0.9);}.form-group:has(#applyInviteReason) .char-count[data-progress="high"]::before{background:linear-gradient(90deg,rgba(239,68,68,0.8),rgba(239,68,68,0.6));box-shadow:0 0 10px rgba(239,68,68,0.6);}.auth-modal-light .icon-mail{color:#059669;filter:drop-shadow(0 0 8px rgba(5,150,105,0.3));}.auth-modal-light .forgot-password-icon:has(.icon-mail) .icon-glow{background:radial-gradient( circle,rgba(16,185,129,0.15) 0%,rgba(6,182,212,0.1) 40%,transparent 70% );}.auth-modal-light #applyInviteReason{background:rgba(255,255,255,0.8);border-color:rgba(16,185,129,0.2);color:#0a0a0a;}.auth-modal-light #applyInviteReason:focus{background:rgba(255,255,255,0.95);border-color:rgba(16,185,129,0.5);box-shadow:0 0 0 3px rgba(16,185,129,0.12),0 0 20px rgba(16,185,129,0.1),inset 0 1px 0 rgba(255,255,255,0.8);}.auth-modal-light .form-group:has(#applyInviteReason) .char-count{color:rgba(82,82,91,0.8);}.input-with-icon{position:relative;display:flex;align-items:center;}.input-with-icon .form-input{padding-right:40px;}.input-icon-btn{position:absolute;right:8px;background:transparent;border:none;color:rgba(255,255,255,0.4);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color 0.2s ease;border-radius:4px;}.input-icon-btn:hover{color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.05);}.input-icon-btn .hidden{display:none;}.strength-text{font-size:12px;color:var(--color-text-tertiary);font-weight:500;display:flex;align-items:center;gap:6px;margin-top:4px;}.form-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}.form-group-header .form-label{margin-bottom:0;}.forgot-password-link{font-size:12px;font-weight:500;color:#00E599;text-decoration:none;transition:all 0.2s ease;position:relative;}.forgot-password-link:hover{color:#00cc88;}.link-primary{color:var(--color-neon-green);text-decoration:none;font-weight:600;transition:all 0.2s ease;position:relative;text-shadow:0 0 10px rgba(0,255,136,0.3);}.link-primary::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:var(--color-neon-green);transform:scaleX(0);transform-origin:right;transition:transform 0.3s ease;}.link-primary:hover{color:#00ff88;text-shadow:0 0 20px rgba(0,255,136,0.5);}.link-primary:hover::after{transform:scaleX(1);transform-origin:left;}.btn-auth-primary{width:100%;height:56px;padding:0 24px;font-family:var(--font-sans);font-size:16px;font-weight:700;color:#000;background:#00E599;border:none;border-radius:12px;cursor:pointer;transition:all 0.2s ease;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(0,229,153,0.2);display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;}.btn-auth-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.2) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-auth-primary:hover{background:#00cc88;transform:scale(1.02);}.btn-auth-primary:hover::before{opacity:1;}.btn-auth-primary:active{transform:scale(0.95);}.btn-auth-primary svg{width:20px;height:20px;flex-shrink:0;}.btn-auth-primary svg path{fill:rgba(0,0,0,0.8);}.btn-auth-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none;}.btn-auth-primary .btn-text{position:relative;z-index:2;}.btn-auth-primary .btn-loader{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}.btn-auth-primary .btn-loader.hidden{display:none;}.spinner{width:20px;height:20px;fill:none;stroke-width:3;animation:spin 0.8s linear infinite;}@keyframes spin{to{transform:rotate(360deg);}}.spinner-track{stroke:rgba(0,0,0,0.2);}.spinner-circle{stroke:#000;stroke-dasharray:50;stroke-dashoffset:50;animation:spinDash 1.2s ease-in-out infinite;}@keyframes spinDash{0%{stroke-dashoffset:50;}50%{stroke-dashoffset:12.5;}100%{stroke-dashoffset:50;}}.invite-code-icon{position:relative;width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;background:rgba(52,211,153,0.1);border-radius:12px;}.invite-code-icon .icon-glow{position:absolute;inset:-10px;background:radial-gradient(circle,rgba(52,211,153,0.2) 0%,transparent 70%);border-radius:50%;animation:pulseGlow 3s ease-in-out infinite;filter:blur(15px);}.invite-code-icon .icon-star{position:relative;z-index:2;color:#34d399;filter:drop-shadow(0 0 10px rgba(52,211,153,0.4));animation:floatIcon 4s ease-in-out infinite;}.forgot-password-icon{position:relative;width:100px;height:100px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;}.forgot-password-icon .icon-glow{position:absolute;inset:-10px;background:radial-gradient(circle,rgba(16,185,129,0.25) 0%,transparent 70%);border-radius:50%;animation:pulseGlow 3s ease-in-out infinite;filter:blur(15px);}@keyframes pulseGlow{0%,100%{opacity:0.5;transform:scale(0.95);}50%{opacity:0.8;transform:scale(1.05);}}.forgot-password-icon .icon-lock{position:relative;z-index:2;color:#10b981;filter:drop-shadow(0 0 10px rgba(16,185,129,0.4));animation:floatIcon 4s ease-in-out infinite;}@keyframes floatIcon{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}.btn-forgot-password{display:flex;align-items:center;justify-content:center;gap:8px;}.btn-forgot-password .btn-arrow{transition:transform 0.3s ease;}.btn-forgot-password:hover .btn-arrow{transform:translateX(4px);}.auth-footer{margin-top:24px;text-align:center;}.forgot-footer{display:flex;justify-content:center;}.back-to-login{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:all 0.2s ease;padding:8px 12px;border-radius:6px;}.back-to-login:hover{color:var(--color-neon-green);background:rgba(16,185,129,0.05);}.back-to-login svg{transition:transform 0.3s ease;}.back-to-login:hover svg{transform:translateX(-4px);}.invite-code-divider{position:relative;text-align:center;margin:32px 0 20px 0;font-size:11px;font-weight:600;color:var(--color-text-tertiary);letter-spacing:0.08em;display:flex;align-items:center;gap:12px;}.invite-code-divider::before,.invite-code-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);}.btn-apply-invite{width:100%;height:44px;padding:0 24px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--color-text-secondary);background:rgba(30,30,30,0.8);border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}.btn-apply-invite::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.05) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-apply-invite:hover{border-color:rgba(255,255,255,0.2);background:rgba(40,40,40,0.9);color:var(--color-text-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3);}.btn-apply-invite:hover::before{opacity:1;}.btn-apply-invite:active{transform:translateY(0);}.auth-modal-light .invite-code-icon{background:rgba(52,211,153,0.08);}.auth-modal-light .invite-code-icon .icon-star{color:#059669;filter:drop-shadow(0 2px 8px rgba(5,150,105,0.3));}.auth-modal-light .btn-apply-invite{background:rgba(255,255,255,0.9);border:1.5px solid rgba(0,0,0,0.08);color:rgba(0,0,0,0.6);box-shadow:0 2px 4px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.8) inset;}.auth-modal-light .btn-apply-invite:hover{background:#ffffff;border-color:rgba(16,185,129,0.2);color:#0a0a0a;box-shadow:0 4px 8px rgba(0,0,0,0.06),0 0 0 1px rgba(16,185,129,0.1) inset;transform:translateY(-1px);}.auth-modal-light .invite-code-divider{color:rgba(0,0,0,0.35);}.auth-modal-light .invite-code-divider::before,.auth-modal-light .invite-code-divider::after{background:linear-gradient(to right,transparent,rgba(0,0,0,0.1),transparent);}.auth-footer-divider{margin-top:32px;padding:28px 20px 0 20px;position:relative;text-align:center;isolation:isolate;}.auth-footer-divider::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:85%;height:2px;background:linear-gradient( 90deg,transparent 0%,rgba(16,185,129,0.15) 15%,rgba(16,185,129,0.5) 30%,rgba(6,182,212,0.6) 50%,rgba(16,185,129,0.5) 70%,rgba(16,185,129,0.15) 85%,transparent 100% );filter:blur(0.5px);animation:energyFlow 4s ease-in-out infinite;}.auth-footer-divider::after{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:70%;height:8px;background:radial-gradient( ellipse at center,rgba(16,185,129,0.25) 0%,rgba(6,182,212,0.15) 40%,transparent 70% );filter:blur(6px);animation:glowPulse 3s ease-in-out infinite;opacity:0.6;}@keyframes energyFlow{0%,100%{opacity:0.7;transform:translateX(-50%) scaleX(1);}50%{opacity:1;transform:translateX(-50%) scaleX(1.02);}}@keyframes glowPulse{0%,100%{opacity:0.4;transform:translateX(-50%) scaleY(0.8);}50%{opacity:0.8;transform:translateX(-50%) scaleY(1.2);}}.auth-footer-text{font-size:13.5px;font-weight:400;color:rgba(161,161,170,0.85);letter-spacing:0.02em;line-height:1.6;margin:0;position:relative;z-index:1;}.auth-link{color:#10b981;font-weight:600;text-decoration:none;position:relative;display:inline-block;padding:6px 14px;border-radius:6px;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);background:rgba(16,185,129,0.05);border:1px solid rgba(16,185,129,0.2);margin-left:6px;letter-spacing:0.01em;isolation:isolate;}.auth-link::before{content:'';position:absolute;inset:-1px;border-radius:6px;padding:1px;background:linear-gradient( 135deg,transparent 0%,rgba(16,185,129,0.4) 25%,rgba(6,182,212,0.5) 50%,rgba(16,185,129,0.4) 75%,transparent 100% );-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity 0.4s ease;animation:shimmerRotate 3s linear infinite paused;}@keyframes shimmerRotate{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}.auth-link::after{content:'';position:absolute;bottom:3px;left:14px;right:14px;height:2px;background:linear-gradient( 90deg,rgba(16,185,129,0.8),rgba(6,182,212,0.9),rgba(16,185,129,0.8) );border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);filter:blur(0.5px);box-shadow:0 0 8px rgba(16,185,129,0.6),0 0 12px rgba(6,182,212,0.4);}.auth-link:hover{color:#00ffaa;background:rgba(16,185,129,0.12);border-color:rgba(6,182,212,0.5);transform:translateY(-2px) scale(1.02);text-shadow:0 0 10px rgba(16,185,129,0.6),0 0 20px rgba(6,182,212,0.4),0 0 30px rgba(16,185,129,0.2);box-shadow:0 4px 20px rgba(16,185,129,0.3),0 0 40px rgba(6,182,212,0.15),inset 0 1px 0 rgba(255,255,255,0.1);}.auth-link:hover::before{opacity:1;animation-play-state:running;}.auth-link:hover::after{transform:scaleX(1);}.auth-link:active{transform:translateY(0) scale(0.98);background:rgba(16,185,129,0.18);border-color:rgba(16,185,129,0.6);box-shadow:0 2px 12px rgba(16,185,129,0.4),inset 0 2px 8px rgba(0,0,0,0.2);}.auth-link:focus-visible{outline:none;border-color:rgba(16,185,129,0.8);box-shadow:0 0 0 3px rgba(16,185,129,0.3),0 0 20px rgba(16,185,129,0.4),inset 0 1px 0 rgba(255,255,255,0.15);}@media (max-width:768px){.auth-footer-divider{margin-top:28px;padding-top:24px;}.auth-footer-divider::before{width:90%;}.auth-footer-text{font-size:13px;}.auth-link{padding:8px 16px;margin-left:4px;}.auth-link::after{left:16px;right:16px;}}.auth-modal-light .auth-footer-divider::before{background:linear-gradient( 90deg,transparent 0%,rgba(16,185,129,0.2) 15%,rgba(16,185,129,0.35) 30%,rgba(6,182,212,0.4) 50%,rgba(16,185,129,0.35) 70%,rgba(16,185,129,0.2) 85%,transparent 100% );}.auth-modal-light .auth-footer-divider::after{background:radial-gradient( ellipse at center,rgba(16,185,129,0.15) 0%,rgba(6,182,212,0.1) 40%,transparent 70% );}.auth-modal-light .auth-footer-text{color:rgba(82,82,91,0.9);}.auth-modal-light .auth-link{color:#059669;background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.25);}.auth-modal-light .auth-link::before{background:linear-gradient( 135deg,transparent 0%,rgba(16,185,129,0.5) 25%,rgba(6,182,212,0.6) 50%,rgba(16,185,129,0.5) 75%,transparent 100% );}.auth-modal-light .auth-link:hover{color:#047857;background:rgba(16,185,129,0.15);border-color:rgba(6,182,212,0.4);text-shadow:0 0 8px rgba(16,185,129,0.4),0 0 16px rgba(6,182,212,0.3);box-shadow:0 4px 16px rgba(16,185,129,0.25),0 0 30px rgba(6,182,212,0.1),inset 0 1px 0 rgba(255,255,255,0.6);}.auth-modal-light .auth-link:active{background:rgba(16,185,129,0.22);box-shadow:0 2px 10px rgba(16,185,129,0.3),inset 0 2px 6px rgba(0,0,0,0.1);}.auth-message-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;}.message-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border-radius:50%;background:rgba(16,185,129,0.1);color:#10b981;}.message-icon svg{filter:drop-shadow(0 0 10px rgba(16,185,129,0.3));animation:successPulse 2s ease-in-out infinite;}@keyframes successPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}.message-title{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:12px;color:#ffffff;}.message-text{font-size:14px;color:var(--color-text-secondary);margin-bottom:24px;line-height:1.6;}.divider{position:relative;text-align:center;margin:24px 0 20px 0;font-size:12px;font-weight:600;color:rgba(113,113,122,1);letter-spacing:0.08em;display:flex;align-items:center;gap:16px;}.divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(82,82,91,1);}.social-buttons-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}.btn-social{height:48px;padding:0 16px;margin:0;font-family:var(--font-sans);font-size:14px;font-weight:500;color:rgba(161,161,170,1);background:rgba(43,45,49,1);border:1px solid rgba(113,113,122,1);border-radius:12px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}.btn-social::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.05) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-social:hover{border-color:rgba(161,161,170,1);background:rgba(53,55,60,1);color:#ffffff;}.btn-social:hover::before{opacity:1;}.btn-social:active{transform:scale(0.95);}.btn-social svg{width:20px;height:20px;flex-shrink:0;}.btn-social span{position:relative;z-index:2;white-space:nowrap;}.btn-social-full{width:100%;height:48px;padding:0 16px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:rgba(161,161,170,1);background:rgba(43,45,49,1);border:1px solid rgba(113,113,122,1);border-radius:12px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}.btn-social-full::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.05) 50%,transparent 100%);opacity:0;transition:opacity 0.3s ease;}.btn-social-full:hover{border-color:rgba(161,161,170,1);background:rgba(53,55,60,1);color:#ffffff;}.btn-social-full:hover::before{opacity:1;}.btn-social-full:active{transform:scale(0.95);}.btn-social-full svg{width:20px;height:20px;flex-shrink:0;}.btn-social-full span{position:relative;z-index:2;}@media (max-width:768px){.auth-modal-content{grid-template-columns:1fr;max-width:100%;max-height:100vh;border-radius:0;}.auth-modal-left{display:none;}.auth-modal-right{max-height:100vh;padding:24px;}.auth-form-title{font-size:22px;}#loginForm .form-input{width:100%;}.btn-auth-primary{height:48px;font-size:15px;}.social-buttons-grid{grid-template-columns:1fr;gap:10px;}.btn-social,.btn-social-full{height:48px;}.new-style-login-view,.old-style-login-view{max-width:100%;}.new-style-login-view .social-buttons-grid{grid-template-columns:1fr;}.new-style-login-view .btn-email-toggle{height:48px;}.old-style-login-view .form-input{width:100%;}}@media (max-width:480px){.auth-modal{padding:0;}.auth-modal-content{border-radius:0;max-height:100vh;}.auth-modal-right{padding:20px 16px;}.auth-form-header{margin-bottom:20px;}.auth-form-title{font-size:20px;}.new-style-login-view .btn-email-toggle{height:44px;}}.auth-modal-light{}.auth-modal-light .auth-modal-backdrop{background:rgba(255,255,255,0.75);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);}.auth-modal-light .auth-modal-content{background:linear-gradient(135deg,#fdfbf7 0%,#f8f6f2 100%);border:1px solid rgba(16,185,129,0.1);box-shadow:0 50px 100px rgba(0,0,0,0.12),0 20px 40px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.9) inset;}.auth-modal-light .auth-modal-left{background:linear-gradient(135deg,#ffffff 0%,#faf9f7 100%);border-right:1px solid rgba(16,185,129,0.08);box-shadow:2px 0 20px rgba(0,0,0,0.03),0 0 0 1px rgba(16,185,129,0.05) inset;}.auth-modal-light .auth-modal-left::before{background:radial-gradient(at 0% 0%,rgba(16,185,129,0.08) 0px,transparent 50%),radial-gradient(at 50% 0%,rgba(6,182,212,0.06) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(16,185,129,0.08) 0px,transparent 50%),radial-gradient(at 0% 50%,rgba(52,211,153,0.05) 0px,transparent 50%),radial-gradient(at 100% 50%,rgba(6,182,212,0.06) 0px,transparent 50%),radial-gradient(at 0% 100%,rgba(16,185,129,0.07) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(52,211,153,0.06) 0px,transparent 50%);filter:blur(60px);opacity:0.9;}.auth-modal-light .auth-modal-left::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");opacity:0.6;mix-blend-mode:multiply;}.auth-modal-light .auth-modal-logo .logo-icon{filter:drop-shadow(0 2px 8px rgba(16,185,129,0.25));}.auth-modal-light .auth-modal-logo .logo-text{color:#0a0a0a;text-shadow:0 1px 2px rgba(16,185,129,0.1);}.auth-modal-light .auth-modal-decoration .glow-orb-1{background:radial-gradient(circle,rgba(16,185,129,0.08) 0%,transparent 70%);filter:blur(80px);}.auth-modal-light .auth-modal-decoration .glow-orb-2{background:radial-gradient(circle,rgba(6,182,212,0.06) 0%,transparent 70%);filter:blur(70px);}.auth-modal-light .auth-modal-branding .branding-title{color:#0a0a0a;text-shadow:0 2px 12px rgba(16,185,129,0.12);background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-modal-light .auth-modal-branding .branding-subtitle{color:rgba(0,0,0,0.6);}.auth-modal-light .auth-modal-right{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:-2px 0 20px rgba(0,0,0,0.03);}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb{background:rgba(16,185,129,0.2);}.auth-modal-light .auth-modal-right::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,0.3);}.auth-modal-light .auth-modal-close{color:rgba(0,0,0,0.4);}.auth-modal-light .auth-modal-close:hover{background:rgba(16,185,129,0.08);color:#0a0a0a;}.auth-modal-light .auth-form-title{color:#0a0a0a;background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-modal-light .auth-form-subtitle{color:rgba(0,0,0,0.5);}.auth-modal-light .form-label{color:#0a0a0a;opacity:0.7;}.auth-modal-light .form-input{color:#0a0a0a;background:rgba(255,255,255,0.9);border:1.5px solid rgba(0,0,0,0.08);box-shadow:0 1px 2px rgba(0,0,0,0.02),0 0 0 1px rgba(255,255,255,0.8) inset;}.auth-modal-light .form-input::placeholder{color:rgba(0,0,0,0.3);}.auth-modal-light .form-input:hover{border-color:rgba(16,185,129,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.03),0 0 0 1px rgba(16,185,129,0.05) inset;}.auth-modal-light .form-input:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,0.12),0 2px 8px rgba(16,185,129,0.08);background:#ffffff;}.auth-modal-light .form-input:invalid:not(:placeholder-shown){border-color:#ff006e;box-shadow:0 0 0 3px rgba(255,0,110,0.1);}.auth-modal-light .input-icon-btn{color:rgba(0,0,0,0.4);}.auth-modal-light .input-icon-btn:hover{color:rgba(0,0,0,0.7);}.auth-modal-light .forgot-password-link{color:#10b981;}.auth-modal-light .forgot-password-link:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,0.2);}.auth-modal-light .strength-text{color:rgba(0,0,0,0.45);}.auth-modal-light .btn-auth-primary{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#ffffff;border:none;box-shadow:0 4px 12px rgba(16,185,129,0.25),0 2px 4px rgba(16,185,129,0.15),0 0 0 1px rgba(255,255,255,0.3) inset;}.auth-modal-light .btn-auth-primary:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);box-shadow:0 6px 16px rgba(16,185,129,0.3),0 3px 6px rgba(16,185,129,0.2),0 0 0 1px rgba(255,255,255,0.4) inset;transform:translateY(-1px);}.auth-modal-light .btn-auth-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(16,185,129,0.2),0 1px 3px rgba(16,185,129,0.15);}.auth-modal-light .btn-auth-primary:disabled{background:linear-gradient(135deg,rgba(16,185,129,0.4) 0%,rgba(5,150,105,0.4) 100%);box-shadow:none;}.auth-modal-light .btn-forgot-password{background:linear-gradient(135deg,#10b981 0%,#059669 100%);}.auth-modal-light .btn-forgot-password:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);}.auth-modal-light .btn-forgot-password .btn-arrow{filter:drop-shadow(0 0 4px rgba(255,255,255,0.5));}.auth-modal-light .divider{color:rgba(0,0,0,0.35);}.auth-modal-light .divider::before,.auth-modal-light .divider::after{background:linear-gradient(to right,transparent,rgba(0,0,0,0.1),transparent);}.auth-modal-light .btn-social,.auth-modal-light .btn-social-full{background:rgba(255,255,255,0.9);border:1.5px solid rgba(0,0,0,0.08);color:#1a1a1a;box-shadow:0 2px 4px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.8) inset;}.auth-modal-light .btn-social:hover,.auth-modal-light .btn-social-full:hover{background:#ffffff;border-color:rgba(16,185,129,0.2);box-shadow:0 4px 8px rgba(0,0,0,0.06),0 0 0 1px rgba(16,185,129,0.1) inset;transform:translateY(-1px);}.auth-modal-light .btn-social:active,.auth-modal-light .btn-social-full:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.05) inset;}.auth-modal-light .link-primary{color:#10b981;}.auth-modal-light .link-primary:hover{color:#059669;text-shadow:0 0 8px rgba(16,185,129,0.2);}.auth-modal-light .forgot-password-icon{background:linear-gradient(135deg,rgba(16,185,129,0.08) 0%,rgba(6,182,212,0.06) 100%);box-shadow:0 8px 24px rgba(16,185,129,0.12),0 0 0 1px rgba(16,185,129,0.1) inset;}.auth-modal-light .forgot-password-icon .icon-glow{background:radial-gradient(circle,rgba(16,185,129,0.15) 0%,transparent 70%);}.auth-modal-light .forgot-password-icon .icon-lock{color:#10b981;filter:drop-shadow(0 2px 8px rgba(16,185,129,0.2));}.auth-modal-light .forgot-password-icon .lock-shackle{animation:shakeLock 2s ease-in-out infinite;}.auth-modal-light .back-to-login{color:rgba(0,0,0,0.6);}.auth-modal-light .back-to-login:hover{color:#10b981;}.auth-modal-light .back-to-login svg{color:rgba(0,0,0,0.4);}.auth-modal-light .back-to-login:hover svg{color:#10b981;}.auth-modal-light .auth-message-content{background:linear-gradient(135deg,rgba(16,185,129,0.05) 0%,rgba(6,182,212,0.03) 100%);box-shadow:0 8px 32px rgba(16,185,129,0.12),0 0 0 1px rgba(16,185,129,0.1) inset;}.auth-modal-light .message-icon{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 8px 24px rgba(16,185,129,0.3),0 0 0 4px rgba(16,185,129,0.1);}.auth-modal-light .message-icon svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}.auth-modal-light .message-title{color:#0a0a0a;background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-modal-light .message-text{color:rgba(0,0,0,0.6);}
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var axios = require('axios');
|
|
4
|
+
var fs = require('fs/promises');
|
|
5
|
+
var path = require('path');
|
|
6
|
+
var os = require('os');
|
|
7
|
+
|
|
8
|
+
function _interopNamespaceDefault(e) {
|
|
9
|
+
var n = Object.create(null);
|
|
10
|
+
if (e) {
|
|
11
|
+
Object.keys(e).forEach(function (k) {
|
|
12
|
+
if (k !== 'default') {
|
|
13
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return e[k]; }
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
|
|
26
|
+
var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
|
|
27
|
+
var os__namespace = /*#__PURE__*/_interopNamespaceDefault(os);
|
|
4
28
|
|
|
5
29
|
/**
|
|
6
30
|
* ็ๆUUID็่ทจๅนณๅฐๅฝๆฐ
|
|
@@ -747,6 +771,113 @@ class CustomAuthProvider extends AuthProvider {
|
|
|
747
771
|
}
|
|
748
772
|
}
|
|
749
773
|
|
|
774
|
+
/**
|
|
775
|
+
* ้
็ฝฎ็ฎก็ๅจ
|
|
776
|
+
*/
|
|
777
|
+
class ConfigManager {
|
|
778
|
+
constructor(configDir) {
|
|
779
|
+
this.configDir = configDir || path__namespace.join(os__namespace.homedir(), '.openapi-sdk');
|
|
780
|
+
this.configPath = path__namespace.join(this.configDir, 'config.json');
|
|
781
|
+
}
|
|
782
|
+
/**
|
|
783
|
+
* ไฟๅญ่ฎค่ฏ้
็ฝฎ
|
|
784
|
+
*/
|
|
785
|
+
async saveAuth(profileName, authConfig) {
|
|
786
|
+
await this.ensureConfigDir();
|
|
787
|
+
const config = await this.loadConfig();
|
|
788
|
+
config.profiles[profileName] = authConfig;
|
|
789
|
+
await fs__namespace.writeFile(this.configPath, JSON.stringify(config, null, 2), 'utf-8');
|
|
790
|
+
}
|
|
791
|
+
/**
|
|
792
|
+
* ๅ ่ฝฝ่ฎค่ฏ้
็ฝฎ
|
|
793
|
+
*/
|
|
794
|
+
async loadAuth(profileName) {
|
|
795
|
+
const config = await this.loadConfig();
|
|
796
|
+
const authConfig = config.profiles[profileName];
|
|
797
|
+
if (!authConfig) {
|
|
798
|
+
throw new Error(`Profile '${profileName}' not found`);
|
|
799
|
+
}
|
|
800
|
+
return authConfig;
|
|
801
|
+
}
|
|
802
|
+
/**
|
|
803
|
+
* ๅๅบๆๆprofile
|
|
804
|
+
*/
|
|
805
|
+
async listProfiles() {
|
|
806
|
+
const config = await this.loadConfig();
|
|
807
|
+
return Object.keys(config.profiles);
|
|
808
|
+
}
|
|
809
|
+
/**
|
|
810
|
+
* ๅ ้คprofile
|
|
811
|
+
*/
|
|
812
|
+
async removeProfile(profileName) {
|
|
813
|
+
const config = await this.loadConfig();
|
|
814
|
+
delete config.profiles[profileName];
|
|
815
|
+
await fs__namespace.writeFile(this.configPath, JSON.stringify(config, null, 2), 'utf-8');
|
|
816
|
+
}
|
|
817
|
+
/**
|
|
818
|
+
* ไปๆไปถๅ ่ฝฝ้
็ฝฎ
|
|
819
|
+
*/
|
|
820
|
+
async loadFromFile(filePath) {
|
|
821
|
+
try {
|
|
822
|
+
const content = await fs__namespace.readFile(filePath, 'utf-8');
|
|
823
|
+
return JSON.parse(content);
|
|
824
|
+
}
|
|
825
|
+
catch (error) {
|
|
826
|
+
throw new Error(`Failed to load config from ${filePath}: ${error}`);
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
/**
|
|
830
|
+
* ไฟๅญ้
็ฝฎๅฐๆไปถ
|
|
831
|
+
*/
|
|
832
|
+
async saveToFile(filePath, authConfig) {
|
|
833
|
+
try {
|
|
834
|
+
await fs__namespace.writeFile(filePath, JSON.stringify(authConfig, null, 2), 'utf-8');
|
|
835
|
+
}
|
|
836
|
+
catch (error) {
|
|
837
|
+
throw new Error(`Failed to save config to ${filePath}: ${error}`);
|
|
838
|
+
}
|
|
839
|
+
}
|
|
840
|
+
/**
|
|
841
|
+
* ๅ ่ฝฝๅฎๆด้
็ฝฎๆไปถ
|
|
842
|
+
*/
|
|
843
|
+
async loadConfig() {
|
|
844
|
+
try {
|
|
845
|
+
const content = await fs__namespace.readFile(this.configPath, 'utf-8');
|
|
846
|
+
return JSON.parse(content);
|
|
847
|
+
}
|
|
848
|
+
catch (error) {
|
|
849
|
+
if (error.code === 'ENOENT') {
|
|
850
|
+
// ๆไปถไธๅญๅจ๏ผ่ฟๅ้ป่ฎค้
็ฝฎ
|
|
851
|
+
return { profiles: {} };
|
|
852
|
+
}
|
|
853
|
+
throw error;
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
/**
|
|
857
|
+
* ็กฎไฟ้
็ฝฎ็ฎๅฝๅญๅจ
|
|
858
|
+
*/
|
|
859
|
+
async ensureConfigDir() {
|
|
860
|
+
try {
|
|
861
|
+
await fs__namespace.mkdir(this.configDir, { recursive: true });
|
|
862
|
+
}
|
|
863
|
+
catch (error) {
|
|
864
|
+
// ๅฟฝ็ฅ้่ฏฏ๏ผๅฏ่ฝ็ฎๅฝๅทฒๅญๅจ
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
/**
|
|
868
|
+
* ่ทๅ้
็ฝฎ็ฎๅฝ่ทฏๅพ
|
|
869
|
+
*/
|
|
870
|
+
getConfigDir() {
|
|
871
|
+
return this.configDir;
|
|
872
|
+
}
|
|
873
|
+
/**
|
|
874
|
+
* ่ทๅ้
็ฝฎๆไปถ่ทฏๅพ
|
|
875
|
+
*/
|
|
876
|
+
getConfigPath() {
|
|
877
|
+
return this.configPath;
|
|
878
|
+
}
|
|
879
|
+
}
|
|
880
|
+
|
|
750
881
|
/**
|
|
751
882
|
* ่ทจๅนณๅฐ็ฏๅข้
็ฝฎๅทฅๅ
ท
|
|
752
883
|
* ๆฏๆ Node.js ๅๆต่งๅจ็ฏๅข
|
|
@@ -879,19 +1010,19 @@ class AuthFactory {
|
|
|
879
1010
|
}
|
|
880
1011
|
/**
|
|
881
1012
|
* ไป้
็ฝฎๆไปถๅๅปบ่ฎค่ฏๆไพ่
|
|
882
|
-
* @deprecated This method requires Node.js fs module and should not be used in browser environments.
|
|
883
|
-
* Use AuthFactory.create() with a config object instead.
|
|
884
1013
|
*/
|
|
885
|
-
static async fromFile(
|
|
886
|
-
|
|
1014
|
+
static async fromFile(path) {
|
|
1015
|
+
const configManager = new ConfigManager();
|
|
1016
|
+
const config = await configManager.loadFromFile(path);
|
|
1017
|
+
return this.create(config);
|
|
887
1018
|
}
|
|
888
1019
|
/**
|
|
889
1020
|
* ไปprofileๅๅปบ่ฎค่ฏๆไพ่
|
|
890
|
-
* @deprecated This method requires Node.js fs module and should not be used in browser environments.
|
|
891
|
-
* Use AuthFactory.create() with a config object instead.
|
|
892
1021
|
*/
|
|
893
|
-
static async fromProfile(
|
|
894
|
-
|
|
1022
|
+
static async fromProfile(profileName = 'default') {
|
|
1023
|
+
const configManager = new ConfigManager();
|
|
1024
|
+
const config = await configManager.loadAuth(profileName);
|
|
1025
|
+
return this.create(config);
|
|
895
1026
|
}
|
|
896
1027
|
}
|
|
897
1028
|
|
|
@@ -923,8 +1054,8 @@ const ENVIRONMENT_CONFIGS = {
|
|
|
923
1054
|
},
|
|
924
1055
|
development: {
|
|
925
1056
|
name: 'development',
|
|
926
|
-
baseURL: 'https://
|
|
927
|
-
wsURL: 'wss://
|
|
1057
|
+
baseURL: 'https://account-hub.sg.seaverse.dev',
|
|
1058
|
+
wsURL: 'wss://account-hub.sg.seaverse.dev',
|
|
928
1059
|
isProduction: false,
|
|
929
1060
|
},
|
|
930
1061
|
local: {
|
|
@@ -2806,6 +2937,97 @@ class AuthModal {
|
|
|
2806
2937
|
const container = document.createElement('div');
|
|
2807
2938
|
container.id = 'loginForm';
|
|
2808
2939
|
container.className = 'auth-form-view';
|
|
2940
|
+
// NEW STYLE VIEW (OAuth-first, shown by default)
|
|
2941
|
+
const newStyleView = this.createNewStyleLoginView();
|
|
2942
|
+
container.appendChild(newStyleView);
|
|
2943
|
+
// OLD STYLE VIEW (Traditional email/password, hidden by default)
|
|
2944
|
+
const oldStyleView = this.createOldStyleLoginView();
|
|
2945
|
+
container.appendChild(oldStyleView);
|
|
2946
|
+
return container;
|
|
2947
|
+
}
|
|
2948
|
+
/**
|
|
2949
|
+
* Create new style login view (OAuth-first)
|
|
2950
|
+
*/
|
|
2951
|
+
createNewStyleLoginView() {
|
|
2952
|
+
const view = document.createElement('div');
|
|
2953
|
+
view.id = 'newStyleLoginView';
|
|
2954
|
+
view.className = 'new-style-login-view';
|
|
2955
|
+
// Header
|
|
2956
|
+
const header = document.createElement('div');
|
|
2957
|
+
header.className = 'auth-form-header';
|
|
2958
|
+
const title = document.createElement('h2');
|
|
2959
|
+
title.className = 'auth-form-title';
|
|
2960
|
+
title.textContent = 'Welcome back';
|
|
2961
|
+
const subtitle = document.createElement('p');
|
|
2962
|
+
subtitle.className = 'auth-form-subtitle';
|
|
2963
|
+
subtitle.textContent = 'Please choose a login method to continue';
|
|
2964
|
+
header.appendChild(title);
|
|
2965
|
+
header.appendChild(subtitle);
|
|
2966
|
+
view.appendChild(header);
|
|
2967
|
+
// Form container
|
|
2968
|
+
const form = document.createElement('div');
|
|
2969
|
+
form.className = 'auth-form';
|
|
2970
|
+
// OAuth buttons - only show if enabled
|
|
2971
|
+
const hasOAuth = this.options.enableOAuth &&
|
|
2972
|
+
(this.options.enableOAuth.google || this.options.enableOAuth.discord || this.options.enableOAuth.github);
|
|
2973
|
+
if (hasOAuth) {
|
|
2974
|
+
// Google button (full width, primary style)
|
|
2975
|
+
if (this.options.enableOAuth?.google) {
|
|
2976
|
+
const googleBtn = this.createSocialButton('google', 'Continue with Google', 'login', true);
|
|
2977
|
+
googleBtn.className = 'btn-auth-primary';
|
|
2978
|
+
form.appendChild(googleBtn);
|
|
2979
|
+
}
|
|
2980
|
+
// Social buttons grid (GitHub + Discord)
|
|
2981
|
+
const socialGrid = document.createElement('div');
|
|
2982
|
+
socialGrid.className = 'social-buttons-grid';
|
|
2983
|
+
if (this.options.enableOAuth?.github) {
|
|
2984
|
+
const githubBtn = this.createSocialButton('github', 'GitHub', 'login');
|
|
2985
|
+
socialGrid.appendChild(githubBtn);
|
|
2986
|
+
}
|
|
2987
|
+
if (this.options.enableOAuth?.discord) {
|
|
2988
|
+
const discordBtn = this.createSocialButton('discord', 'Discord', 'login');
|
|
2989
|
+
socialGrid.appendChild(discordBtn);
|
|
2990
|
+
}
|
|
2991
|
+
if (socialGrid.children.length > 0) {
|
|
2992
|
+
form.appendChild(socialGrid);
|
|
2993
|
+
}
|
|
2994
|
+
// Divider
|
|
2995
|
+
const divider = document.createElement('div');
|
|
2996
|
+
divider.className = 'divider';
|
|
2997
|
+
divider.textContent = 'or continue with';
|
|
2998
|
+
form.appendChild(divider);
|
|
2999
|
+
}
|
|
3000
|
+
// "Sign in with Email" button
|
|
3001
|
+
const emailBtn = document.createElement('button');
|
|
3002
|
+
emailBtn.type = 'button';
|
|
3003
|
+
emailBtn.id = 'showOldStyleLogin';
|
|
3004
|
+
emailBtn.className = 'btn-email-toggle';
|
|
3005
|
+
emailBtn.innerHTML = `
|
|
3006
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
3007
|
+
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
3008
|
+
</svg>
|
|
3009
|
+
<span>Sign in with Email</span>
|
|
3010
|
+
`;
|
|
3011
|
+
form.appendChild(emailBtn);
|
|
3012
|
+
// Terms text
|
|
3013
|
+
const termsText = document.createElement('p');
|
|
3014
|
+
termsText.className = 'terms-text';
|
|
3015
|
+
termsText.innerHTML = `
|
|
3016
|
+
By clicking continue, you agree to our
|
|
3017
|
+
<a href="#" class="terms-link">Terms of Service</a> and
|
|
3018
|
+
<a href="#" class="terms-link">Privacy Policy</a>.
|
|
3019
|
+
`;
|
|
3020
|
+
form.appendChild(termsText);
|
|
3021
|
+
view.appendChild(form);
|
|
3022
|
+
return view;
|
|
3023
|
+
}
|
|
3024
|
+
/**
|
|
3025
|
+
* Create old style login view (Traditional email/password form with original CSS)
|
|
3026
|
+
*/
|
|
3027
|
+
createOldStyleLoginView() {
|
|
3028
|
+
const view = document.createElement('div');
|
|
3029
|
+
view.id = 'oldStyleLoginView';
|
|
3030
|
+
view.className = 'old-style-login-view hidden';
|
|
2809
3031
|
// Header
|
|
2810
3032
|
const header = document.createElement('div');
|
|
2811
3033
|
header.className = 'auth-form-header';
|
|
@@ -2823,7 +3045,7 @@ class AuthModal {
|
|
|
2823
3045
|
subtitle.appendChild(signupLink);
|
|
2824
3046
|
header.appendChild(title);
|
|
2825
3047
|
header.appendChild(subtitle);
|
|
2826
|
-
|
|
3048
|
+
view.appendChild(header);
|
|
2827
3049
|
// Form
|
|
2828
3050
|
const form = document.createElement('form');
|
|
2829
3051
|
form.id = 'loginFormElement';
|
|
@@ -2877,28 +3099,25 @@ class AuthModal {
|
|
|
2877
3099
|
// Social buttons grid (Google + GitHub)
|
|
2878
3100
|
const socialGrid = document.createElement('div');
|
|
2879
3101
|
socialGrid.className = 'social-buttons-grid';
|
|
2880
|
-
// Google button - only if enabled
|
|
2881
3102
|
if (this.options.enableOAuth?.google) {
|
|
2882
3103
|
const googleBtn = this.createSocialButton('google', 'Google', 'login');
|
|
2883
3104
|
socialGrid.appendChild(googleBtn);
|
|
2884
3105
|
}
|
|
2885
|
-
// GitHub button - only if configured
|
|
2886
3106
|
if (this.options.enableOAuth?.github) {
|
|
2887
3107
|
const githubBtn = this.createSocialButton('github', 'Github', 'login');
|
|
2888
3108
|
socialGrid.appendChild(githubBtn);
|
|
2889
3109
|
}
|
|
2890
|
-
// Only add grid if it has buttons
|
|
2891
3110
|
if (socialGrid.children.length > 0) {
|
|
2892
3111
|
form.appendChild(socialGrid);
|
|
2893
3112
|
}
|
|
2894
|
-
// Discord button (full width)
|
|
3113
|
+
// Discord button (full width)
|
|
2895
3114
|
if (this.options.enableOAuth?.discord) {
|
|
2896
3115
|
const discordBtn = this.createSocialButton('discord', 'Discord', 'login', true);
|
|
2897
3116
|
form.appendChild(discordBtn);
|
|
2898
3117
|
}
|
|
2899
3118
|
}
|
|
2900
|
-
|
|
2901
|
-
return
|
|
3119
|
+
view.appendChild(form);
|
|
3120
|
+
return view;
|
|
2902
3121
|
}
|
|
2903
3122
|
createSignupForm() {
|
|
2904
3123
|
const container = document.createElement('div');
|
|
@@ -3506,17 +3725,46 @@ class AuthModal {
|
|
|
3506
3725
|
// Backdrop click to close
|
|
3507
3726
|
const backdrop = this.modal.querySelector('.auth-modal-backdrop');
|
|
3508
3727
|
backdrop?.addEventListener('click', () => this.hide());
|
|
3509
|
-
//
|
|
3510
|
-
const
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
this.
|
|
3728
|
+
// Email form toggle
|
|
3729
|
+
const showEmailForm = this.modal.querySelector('#showEmailForm');
|
|
3730
|
+
showEmailForm?.addEventListener('click', () => {
|
|
3731
|
+
const emailForm = this.modal.querySelector('#emailLoginForm');
|
|
3732
|
+
const emailBtn = this.modal.querySelector('#showEmailForm');
|
|
3733
|
+
emailForm?.classList.remove('hidden');
|
|
3734
|
+
emailBtn?.classList.add('hidden');
|
|
3735
|
+
// Update header
|
|
3736
|
+
const title = this.modal.querySelector('#loginForm .auth-form-title');
|
|
3737
|
+
const subtitle = this.modal.querySelector('#loginForm .auth-form-subtitle');
|
|
3738
|
+
if (title)
|
|
3739
|
+
title.textContent = 'Sign in with Email';
|
|
3740
|
+
if (subtitle)
|
|
3741
|
+
subtitle.textContent = 'Enter your details below';
|
|
3742
|
+
});
|
|
3743
|
+
const backToSocialLogin = this.modal.querySelector('#backToSocialLogin');
|
|
3744
|
+
backToSocialLogin?.addEventListener('click', () => {
|
|
3745
|
+
const emailForm = this.modal.querySelector('#emailLoginForm');
|
|
3746
|
+
const emailBtn = this.modal.querySelector('#showEmailForm');
|
|
3747
|
+
emailForm?.classList.add('hidden');
|
|
3748
|
+
emailBtn?.classList.remove('hidden');
|
|
3749
|
+
// Restore header
|
|
3750
|
+
const title = this.modal.querySelector('#loginForm .auth-form-title');
|
|
3751
|
+
const subtitle = this.modal.querySelector('#loginForm .auth-form-subtitle');
|
|
3752
|
+
if (title)
|
|
3753
|
+
title.textContent = 'Welcome back';
|
|
3754
|
+
if (subtitle)
|
|
3755
|
+
subtitle.textContent = 'Please choose a login method to continue';
|
|
3514
3756
|
});
|
|
3757
|
+
// View switching
|
|
3515
3758
|
const showLogin = this.modal.querySelector('#showLogin');
|
|
3516
3759
|
showLogin?.addEventListener('click', (e) => {
|
|
3517
3760
|
e.preventDefault();
|
|
3518
3761
|
this.switchView('login');
|
|
3519
3762
|
});
|
|
3763
|
+
const showSignup = this.modal.querySelector('#showSignup');
|
|
3764
|
+
showSignup?.addEventListener('click', (e) => {
|
|
3765
|
+
e.preventDefault();
|
|
3766
|
+
this.switchView('signup');
|
|
3767
|
+
});
|
|
3520
3768
|
const forgotPasswordLink = this.modal.querySelector('#forgotPasswordLink');
|
|
3521
3769
|
forgotPasswordLink?.addEventListener('click', (e) => {
|
|
3522
3770
|
e.preventDefault();
|
|
@@ -3570,6 +3818,11 @@ class AuthModal {
|
|
|
3570
3818
|
}
|
|
3571
3819
|
});
|
|
3572
3820
|
});
|
|
3821
|
+
// Login view style switching
|
|
3822
|
+
const showOldStyleLogin = this.modal.querySelector('#showOldStyleLogin');
|
|
3823
|
+
showOldStyleLogin?.addEventListener('click', () => {
|
|
3824
|
+
this.showOldStyleLogin();
|
|
3825
|
+
});
|
|
3573
3826
|
// Form submissions
|
|
3574
3827
|
const loginForm = this.modal.querySelector('#loginFormElement');
|
|
3575
3828
|
loginForm?.addEventListener('submit', (e) => this.handleLogin(e));
|
|
@@ -3670,6 +3923,32 @@ class AuthModal {
|
|
|
3670
3923
|
const targetView = this.modal.querySelector(`#${viewMap[view]}`);
|
|
3671
3924
|
targetView?.classList.remove('hidden');
|
|
3672
3925
|
this.currentView = view;
|
|
3926
|
+
// When switching to login view, reset to new style
|
|
3927
|
+
if (view === 'login') {
|
|
3928
|
+
this.showNewStyleLogin();
|
|
3929
|
+
}
|
|
3930
|
+
}
|
|
3931
|
+
/**
|
|
3932
|
+
* Show new style login view (OAuth-first)
|
|
3933
|
+
*/
|
|
3934
|
+
showNewStyleLogin() {
|
|
3935
|
+
if (!this.modal)
|
|
3936
|
+
return;
|
|
3937
|
+
const newStyleView = this.modal.querySelector('#newStyleLoginView');
|
|
3938
|
+
const oldStyleView = this.modal.querySelector('#oldStyleLoginView');
|
|
3939
|
+
newStyleView?.classList.remove('hidden');
|
|
3940
|
+
oldStyleView?.classList.add('hidden');
|
|
3941
|
+
}
|
|
3942
|
+
/**
|
|
3943
|
+
* Show old style login view (traditional email/password form)
|
|
3944
|
+
*/
|
|
3945
|
+
showOldStyleLogin() {
|
|
3946
|
+
if (!this.modal)
|
|
3947
|
+
return;
|
|
3948
|
+
const newStyleView = this.modal.querySelector('#newStyleLoginView');
|
|
3949
|
+
const oldStyleView = this.modal.querySelector('#oldStyleLoginView');
|
|
3950
|
+
newStyleView?.classList.add('hidden');
|
|
3951
|
+
oldStyleView?.classList.remove('hidden');
|
|
3673
3952
|
}
|
|
3674
3953
|
async handleLogin(e) {
|
|
3675
3954
|
e.preventDefault();
|