Spaces:
Paused
Paused
File size: 5,415 Bytes
3ed9766 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 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';
}
});
}
}
|