Spaces:
Paused
Paused
| import { authService } from '../../services/auth-service.js'; | |
| export class AuthView { | |
| constructor(onSuccess) { | |
| this.onSuccess = onSuccess; | |
| this.container = document.createElement('div'); | |
| this.container.className = 'auth-modal-overlay'; | |
| this.isLogin = true; | |
| } | |
| show() { | |
| document.body.appendChild(this.container); | |
| // Add CSS globally if not exists | |
| if (!document.getElementById('auth-styles')) { | |
| const style = document.createElement('style'); | |
| style.id = 'auth-styles'; | |
| style.innerHTML = ` | |
| .auth-modal-overlay { | |
| position: fixed; top: 0; left: 0; right: 0; bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| z-index: 99999; | |
| display: flex; align-items: center; justify-content: center; | |
| padding: 24px; | |
| animation: fade-in 0.3s ease; | |
| } | |
| .auth-modal { | |
| background: rgba(20, 20, 25, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 24px; | |
| padding: 32px; | |
| width: 100%; max-width: 400px; | |
| box-shadow: 0 24px 64px rgba(0,0,0,0.4); | |
| } | |
| .auth-input { | |
| width: 100%; padding: 14px 16px; | |
| background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); | |
| border-radius: 12px; color: white; font-size: 16px; | |
| margin-bottom: 16px; outline: none; transition: border-color 0.2s; | |
| } | |
| .auth-input:focus { border-color: var(--primary-accent); } | |
| .auth-btn { | |
| width: 100%; padding: 16px; border-radius: 12px; | |
| background: var(--primary-accent); color: white; | |
| font-weight: 600; font-size: 16px; border: none; cursor: pointer; | |
| margin-bottom: 16px; transition: transform 0.1s, opacity 0.2s; | |
| } | |
| .auth-btn:active { transform: scale(0.98); } | |
| .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .auth-switch { | |
| text-align: center; color: var(--text-secondary); font-size: 14px; | |
| } | |
| .auth-switch span { color: var(--primary-accent); cursor: pointer; font-weight: 500; } | |
| .auth-error { color: #ff453a; font-size: 14px; margin-bottom: 16px; text-align: center; } | |
| `; | |
| document.head.appendChild(style); | |
| } | |
| this.render(); | |
| } | |
| hide() { | |
| this.container.remove(); | |
| } | |
| render() { | |
| this.container.innerHTML = ` | |
| <div class="auth-modal"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;"> | |
| <h2 style="font-size: 24px; margin: 0;">${this.isLogin ? 'Anmelden' : 'Registrieren'}</h2> | |
| <button class="close-auth-btn" style="background: none; border: none; color: var(--text-secondary); cursor: pointer;"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin-bottom: 24px;"> | |
| Dein Passwort wird lokal verwendet, um deine API Keys mit Zero-Knowledge AES-256 zu verschlüsseln. Niemand außer dir kann deine Daten lesen. | |
| </p> | |
| <form id="auth-form"> | |
| <input type="email" id="auth-email" class="auth-input" placeholder="E-Mail Adresse" required autocomplete="username"> | |
| <input type="password" id="auth-password" class="auth-input" placeholder="Passwort (Master Key)" required autocomplete="current-password" minlength="6"> | |
| <div id="auth-error" class="auth-error"></div> | |
| <button type="submit" id="auth-submit-btn" class="auth-btn">${this.isLogin ? 'Sicher Anmelden' : 'Account erstellen'}</button> | |
| </form> | |
| <div class="auth-switch"> | |
| ${this.isLogin ? 'Noch kein Account?' : 'Bereits einen Account?'} | |
| <span id="auth-switch-btn">${this.isLogin ? 'Hier registrieren' : 'Hier anmelden'}</span> | |
| </div> | |
| </div> | |
| `; | |
| this.attachEvents(); | |
| } | |
| attachEvents() { | |
| this.container.querySelector('.close-auth-btn').addEventListener('click', () => this.hide()); | |
| this.container.querySelector('#auth-switch-btn').addEventListener('click', () => { | |
| this.isLogin = !this.isLogin; | |
| this.render(); | |
| }); | |
| const form = this.container.querySelector('#auth-form'); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const email = form.querySelector('#auth-email').value; | |
| const password = form.querySelector('#auth-password').value; | |
| const btn = form.querySelector('#auth-submit-btn'); | |
| const errorDiv = form.querySelector('#auth-error'); | |
| btn.disabled = true; | |
| btn.textContent = 'Verschlüssele & Lade...'; | |
| errorDiv.textContent = ''; | |
| try { | |
| if (this.isLogin) { | |
| await authService.signIn(email, password); | |
| } else { | |
| await authService.signUp(email, password); | |
| } | |
| this.hide(); | |
| if (this.onSuccess) this.onSuccess(); | |
| } catch (err) { | |
| errorDiv.textContent = err.message || 'Ein Fehler ist aufgetreten.'; | |
| btn.disabled = false; | |
| btn.textContent = this.isLogin ? 'Sicher Anmelden' : 'Account erstellen'; | |
| } | |
| }); | |
| } | |
| } | |