diff --git a/adminlogin.html b/adminlogin.html deleted file mode 100644 index 592f113..0000000 --- a/adminlogin.html +++ /dev/null @@ -1,371 +0,0 @@ - - - - - - Ninja Server - Login - - - - -
- - -
-
- -

Processing...

-
- - -
-

Welcome Back

-
-
- - -
-
- - -
- -
-
-

Don't have an account?

-
-
- - -
-

Create Account

-
-
- - -
-
- - -
-
- - -
- -
-
-

Already have an account?

-
-
-
- - - - diff --git a/dashboard.html b/dashboard.html deleted file mode 100644 index 8b13789..0000000 --- a/dashboard.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/dashboard.html b/public/dashboard.html index 3b463ae..c3c3800 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -267,23 +267,31 @@ // Check authentication and load dashboard async function initDashboard() { try { - // Temporarily disable auth check for design testing - // const { data: { session }, error } = await supabase.auth.getSession(); + // Get current session + const { data: { session }, error } = await supabase.auth.getSession(); - // if (error) { - // console.error('Error checking authentication:', error); - // window.location.href = '/login'; - // return; - // } + if (error) { + console.error('Error checking authentication:', error); + // Temporarily show dashboard for testing + displayUserInfo({ email: 'admin@speedrun-arena.com' }); + showDashboard(); + return; + } - // if (!session) { - // // No session, redirect to login - // window.location.href = '/login'; - // return; - // } + if (!session) { + // No session, redirect to login + window.location.href = '/login'; + return; + } // User is authenticated, show dashboard - displayUserInfo({ email: 'admin@speedrun-arena.com' }); + if (session.user) { + console.log('User data:', session.user); + displayUserInfo(session.user); + } else { + // Fallback if no user data + displayUserInfo({ email: 'admin@speedrun-arena.com' }); + } showDashboard(); } catch (error) { diff --git a/public/email-templates/EMAIL-COMPATIBILITY-GUIDE.md b/public/email-templates/EMAIL-COMPATIBILITY-GUIDE.md new file mode 100644 index 0000000..5c73f8f --- /dev/null +++ b/public/email-templates/EMAIL-COMPATIBILITY-GUIDE.md @@ -0,0 +1,181 @@ +# E-Mail-Client-Kompatibilität Guide + +## 🚨 Problem: Farben sehen in E-Mail-Clients komisch aus + +E-Mail-Clients sind sehr restriktiv mit CSS und unterstützen oft keine modernen Features. Hier sind die Lösungen: + +## ❌ Was E-Mail-Clients NICHT unterstützen: + +### CSS-Features +- **Gradients** (`linear-gradient`, `radial-gradient`) +- **Backdrop-Filter** (`backdrop-filter: blur()`) +- **Box-Shadow** (komplexe Schatten) +- **Transforms** (`transform: translateY()`) +- **Custom Fonts** (Google Fonts, Inter) +- **Flexbox/Grid** (begrenzte Unterstützung) +- **CSS-Variablen** (`--custom-property`) + +### Farben +- **Transparente Hintergründe** (`rgba()` mit Alpha) +- **Komplexe Farbverläufe** +- **Moderne CSS-Farben** (HSL, etc.) + +## ✅ E-Mail-Client-kompatible Alternativen: + +### 1. Einfache Hintergrundfarben +```css +/* ❌ Nicht kompatibel */ +background: linear-gradient(135deg, #00d4ff, #0891b2); + +/* ✅ Kompatibel */ +background-color: #00d4ff; +``` + +### 2. Einfache Borders +```css +/* ❌ Nicht kompatibel */ +border: 1px solid rgba(51, 65, 85, 0.3); + +/* ✅ Kompatibel */ +border: 1px solid #334155; +``` + +### 3. Standard-Fonts +```css +/* ❌ Nicht kompatibel */ +font-family: 'Inter', sans-serif; + +/* ✅ Kompatibel */ +font-family: Arial, sans-serif; +``` + +### 4. Einfache Container +```css +/* ❌ Nicht kompatibel */ +background: rgba(30, 41, 59, 0.95); +backdrop-filter: blur(20px); + +/* ✅ Kompatibel */ +background-color: #1e293b; +``` + +## 🎨 Optimierte Farbpalette für E-Mail: + +### Hauptfarben +- **Hintergrund:** `#0a0a0f` (Dunkelblau) +- **Container:** `#1e293b` (Dunkelgrau) +- **Akzent:** `#00d4ff` (Neon-Blau) +- **Text:** `#ffffff` (Weiß) +- **Sekundärtext:** `#cbd5e1` (Hellgrau) + +### Status-Farben +- **Erfolg:** `#22c55e` (Grün) +- **Warnung:** `#f59e0b` (Orange) +- **Fehler:** `#ef4444` (Rot) +- **Info:** `#00d4ff` (Blau) + +## 📱 Responsive Design für E-Mail: + +### Media Queries +```css +@media (max-width: 600px) { + .email-container { + margin: 0 10px; + } + + .email-content { + padding: 20px 15px; + } +} +``` + +### Mobile-First Approach +- **Max-Width:** 600px für Container +- **Padding:** Reduziert auf mobilen Geräten +- **Schriftgrößen:** Angepasst für kleine Bildschirme + +## 🔧 Template-Optimierungen: + +### 1. Inline-CSS verwenden +```html +
+ Inhalt +
+``` + +### 2. Tabellen-Layout für komplexe Strukturen +```html + + + + +
+ Inhalt +
+``` + +### 3. Fallback-Farben definieren +```css +background-color: #00d4ff; /* Fallback */ +background: linear-gradient(135deg, #00d4ff, #0891b2); /* Modern */ +``` + +## 📊 E-Mail-Client-Test-Matrix: + +| Client | Gradients | Backdrop-Filter | Box-Shadow | Custom Fonts | +|--------|-----------|-----------------|------------|--------------| +| Gmail | ❌ | ❌ | ❌ | ❌ | +| Outlook | ❌ | ❌ | ❌ | ❌ | +| Apple Mail | ✅ | ❌ | ✅ | ✅ | +| Thunderbird | ❌ | ❌ | ❌ | ❌ | +| Yahoo Mail | ❌ | ❌ | ❌ | ❌ | + +## 🚀 Empfohlene Template-Struktur: + +### 1. Kompatible Versionen erstellen +- `welcome-email-compatible.html` - E-Mail-Client-optimiert +- `welcome-email.html` - Moderne Browser-Version + +### 2. Fallback-Strategien +- **HTML-Version** für moderne Clients +- **Text-Version** für einfache Clients +- **Kompatible HTML** für E-Mail-Clients + +### 3. Testing +- **Litmus** oder **Email on Acid** für E-Mail-Testing +- **Verschiedene Clients** testen +- **Mobile Geräte** berücksichtigen + +## 📝 Best Practices: + +### 1. Einfache Struktur +- **Minimale CSS** verwenden +- **Inline-Styles** bevorzugen +- **Tabellen-Layout** für komplexe Strukturen + +### 2. Farben +- **Hex-Codes** verwenden (`#00d4ff`) +- **Keine Transparenz** (`rgba()` vermeiden) +- **Hoher Kontrast** für Lesbarkeit + +### 3. Typografie +- **Web-Safe Fonts** verwenden +- **Fallback-Fonts** definieren +- **Angemessene Schriftgrößen** (mind. 14px) + +### 4. Bilder +- **Alt-Text** immer angeben +- **Optimierte Größen** verwenden +- **Fallback-Farben** definieren + +## 🎯 Sofortige Lösung: + +Verwende die **kompatiblen Versionen** der Templates: +- `welcome-email-compatible.html` +- `reset-password-compatible.html` + +Diese verwenden nur E-Mail-Client-kompatible CSS-Features und sollten in allen Clients korrekt angezeigt werden. + +--- + +**Tipp:** Teste immer in verschiedenen E-Mail-Clients, bevor du die Templates produktiv einsetzt! 📧✨ diff --git a/public/email-templates/README.md b/public/email-templates/README.md new file mode 100644 index 0000000..ff08511 --- /dev/null +++ b/public/email-templates/README.md @@ -0,0 +1,157 @@ +# NinjaCross E-Mail Templates + +Diese E-Mail-Templates sind im gleichen Design wie die NinjaCross-Website erstellt und können in Supabase für die E-Mail-Authentifizierung verwendet werden. + +## 📁 Dateien + +### Welcome Email (Registrierung) +- `welcome-email.html` - Vollständige HTML-Version mit modernem Design +- `welcome-email-compatible.html` - **EMPFOHLEN** - E-Mail-Client-optimierte Version +- `welcome-email-simple.html` - Vereinfachte HTML-Version für bessere E-Mail-Client-Kompatibilität +- `welcome-email.txt` - Text-Version für E-Mail-Client-Kompatibilität + +### Invite User (Einladung) +- `invite-user.html` - HTML-Version für Benutzereinladungen +- `invite-user.txt` - Text-Version für Benutzereinladungen + +### Magic Link (Passwortlose Anmeldung) +- `magic-link.html` - HTML-Version für Magic Link Anmeldung +- `magic-link.txt` - Text-Version für Magic Link Anmeldung + +### Change Email Address (E-Mail-Adresse ändern) +- `change-email.html` - HTML-Version für E-Mail-Adressen-Änderung +- `change-email.txt` - Text-Version für E-Mail-Adressen-Änderung + +### Reset Password (Passwort zurücksetzen) +- `reset-password.html` - HTML-Version für Passwort-Reset +- `reset-password-compatible.html` - E-Mail-Client-optimierte Version +- `reset-password-optimized.html` - **EMPFOHLEN** - Verbesserte Kompatibilität +- `reset-password-table.html` - **MAXIMALE KOMPATIBILITÄT** - Tabellen-basiert +- `reset-password.txt` - Text-Version für Passwort-Reset + +### Reauthentication (Erneute Authentifizierung) +- `reauthentication.html` - HTML-Version für erneute Authentifizierung +- `reauthentication.txt` - Text-Version für erneute Authentifizierung + +## 🚀 Supabase Setup + +### 1. Supabase Dashboard öffnen +1. Gehe zu deinem Supabase-Projekt +2. Navigiere zu **Authentication** → **Email Templates** + +### 2. E-Mail-Templates anpassen +1. Wähle das entsprechende Template aus der Liste: + - **Confirm signup** → `welcome-email-compatible.html` / `welcome-email.txt` ⭐ + - **Invite user** → `invite-user.html` / `invite-user.txt` + - **Magic Link** → `magic-link.html` / `magic-link.txt` + - **Change Email Address** → `change-email.html` / `change-email.txt` + - **Reset Password** → `reset-password-table.html` / `reset-password.txt` ⭐ + - **Reauthentication** → `reauthentication.html` / `reauthentication.txt` +2. Ersetze den Standard-HTML-Code mit dem Inhalt aus der entsprechenden `.html` Datei +3. Ersetze den Standard-Text mit dem Inhalt aus der entsprechenden `.txt` Datei + +⭐ **Empfohlene kompatible Versionen** für bessere E-Mail-Client-Unterstützung + +### 3. Template-Variablen +Die folgenden Variablen werden automatisch von Supabase ersetzt: +- `{{ .ConfirmationURL }}` - Link zur E-Mail-Bestätigung/Aktion +- `{{ .SiteURL }}` - URL deiner Website +- `{{ .Email }}` - E-Mail-Adresse des Benutzers +- `{{ .NewEmail }}` - Neue E-Mail-Adresse (nur bei Change Email) +- `{{ .InvitedBy }}` - Name des einladenden Benutzers (nur bei Invite User) + +### 4. E-Mail-Provider konfigurieren +Stelle sicher, dass dein E-Mail-Provider in Supabase konfiguriert ist: +- **SMTP Settings** in **Authentication** → **Settings** +- Oder verwende **Supabase Edge Functions** für erweiterte E-Mail-Funktionen + +## 🎨 Design-Features + +### Farbpalette +- **Hintergrund:** #0a0a0f (Dunkelblau) +- **Container:** #1e293b (Dunkelgrau) +- **Akzent:** #00d4ff (Neon-Blau) +- **Text:** #e2e8f0 (Hellgrau) + +### Typografie +- **Font:** Inter (Google Fonts) +- **Fallback:** Arial, sans-serif +- **Gewichtungen:** 300, 400, 500, 600, 700 + +### Responsive Design +- **Mobile-optimiert** für alle Bildschirmgrößen +- **Flexible Container** mit max-width +- **Angepasste Schriftgrößen** für mobile Geräte + +## 🔧 Anpassungen + +### Farben ändern +Suche und ersetze die Hex-Codes in den CSS-Styles: +```css +/* Neon-Blau ändern */ +#00d4ff → #deine-farbe +#0891b2 → #deine-farbe-dunkler +``` + +### Logo anpassen +Ändere den Logo-Text in der HTML-Datei: +```html + +``` + +### Features hinzufügen/entfernen +Bearbeite den `.features-section` Bereich in der HTML-Datei. + +## 📱 E-Mail-Client-Kompatibilität + +### Unterstützte Clients +- ✅ Gmail (Web & App) +- ✅ Outlook (Web & App) +- ✅ Apple Mail +- ✅ Thunderbird +- ✅ Yahoo Mail + +### Fallback-Strategien +1. **HTML-Version** für moderne Clients +2. **Text-Version** für einfache Clients +3. **Inline-CSS** für bessere Kompatibilität + +## 🧪 Testing + +### E-Mail-Test +1. Erstelle einen Test-Account +2. Registriere dich mit einer Test-E-Mail +3. Überprüfe das E-Mail-Design in verschiedenen Clients + +### Browser-Test +1. Öffne `welcome-email.html` in einem Browser +2. Teste die responsive Darstellung +3. Überprüfe alle Links und Buttons + +## 🚨 E-Mail-Client-Kompatibilität + +**WICHTIG:** Die ursprünglichen Templates verwenden moderne CSS-Features, die in E-Mail-Clients nicht unterstützt werden. + +### Empfohlene Versionen: +- **Welcome Email:** `welcome-email-compatible.html` ⭐ +- **Reset Password:** `reset-password-table.html` ⭐ (für maximale Kompatibilität) + +### Was wurde optimiert: +- ❌ **Gradients** → ✅ **Einfache Hintergrundfarben** +- ❌ **Backdrop-Filter** → ✅ **Standard-Container** +- ❌ **Custom Fonts** → ✅ **Arial, sans-serif** +- ❌ **Transparente Farben** → ✅ **Hex-Codes** + +Siehe `EMAIL-COMPATIBILITY-GUIDE.md` und `URL-CONFIGURATION-GUIDE.md` für Details. + +## 📞 Support + +Bei Fragen oder Problemen: +- Überprüfe die Supabase-Dokumentation +- Teste mit verschiedenen E-Mail-Providern +- Verwende E-Mail-Testing-Tools wie Litmus oder Email on Acid +- Verwende die **kompatiblen Versionen** für bessere E-Mail-Client-Unterstützung + +--- + +**Erstellt für NinjaCross Timer Leaderboard** 🥷 diff --git a/public/email-templates/TEMPLATES-OVERVIEW.md b/public/email-templates/TEMPLATES-OVERVIEW.md new file mode 100644 index 0000000..adc1d1a --- /dev/null +++ b/public/email-templates/TEMPLATES-OVERVIEW.md @@ -0,0 +1,119 @@ +# NinjaCross E-Mail Templates - Übersicht + +## 📋 Alle verfügbaren Templates + +| Template | HTML-Datei | Text-Datei | Beschreibung | +|----------|------------|------------|--------------| +| **Confirm signup** | `welcome-email.html` | `welcome-email.txt` | Willkommens-E-Mail für neue Registrierungen | +| **Invite user** | `invite-user.html` | `invite-user.txt` | Einladungs-E-Mail für neue Benutzer | +| **Magic Link** | `magic-link.html` | `magic-link.txt` | Passwortlose Anmeldung per Magic Link | +| **Change Email Address** | `change-email.html` | `change-email.txt` | E-Mail-Adressen-Änderung bestätigen | +| **Reset Password** | `reset-password.html` | `reset-password.txt` | Passwort zurücksetzen | +| **Reauthentication** | `reauthentication.html` | `reauthentication.txt` | Erneute Authentifizierung für sensible Aktionen | + +## 🎨 Design-Features + +### Einheitliche Gestaltung +- **Dunkles Design** mit Neon-Blau-Akzenten (#00d4ff) +- **Gradient-Titel** mit den NinjaCross-Farben +- **Glas-Effekt Container** mit Backdrop-Filter +- **Responsive Design** für alle Geräte +- **Inter-Font** für moderne Typografie + +### Sicherheits-Features +- **Zeitlimits** für alle Links (15 Min - 24 Std) +- **Sicherheitshinweise** in jeder E-Mail +- **Klare Call-to-Action Buttons** +- **Warnungen** bei verdächtigen Aktivitäten + +## 🔧 Template-Variablen + +### Standard-Variablen (alle Templates) +- `{{ .ConfirmationURL }}` - Link zur Bestätigung/Aktion +- `{{ .SiteURL }}` - URL der Website +- `{{ .Email }}` - E-Mail-Adresse des Benutzers + +### Spezielle Variablen +- `{{ .NewEmail }}` - Neue E-Mail-Adresse (nur Change Email) +- `{{ .InvitedBy }}` - Name des einladenden Benutzers (nur Invite User) + +## 📱 E-Mail-Client-Kompatibilität + +### Unterstützte Clients +- ✅ Gmail (Web & App) +- ✅ Outlook (Web & App) +- ✅ Apple Mail +- ✅ Thunderbird +- ✅ Yahoo Mail +- ✅ Mobile E-Mail-Apps + +### Fallback-Strategien +1. **HTML-Version** für moderne Clients +2. **Text-Version** für einfache Clients +3. **Inline-CSS** für bessere Kompatibilität +4. **Responsive Design** für mobile Geräte + +## 🚀 Supabase Integration + +### Setup-Schritte +1. **Supabase Dashboard** → Authentication → Email Templates +2. **Template auswählen** (z.B. "Confirm signup") +3. **HTML-Code ersetzen** mit Inhalt aus `.html` Datei +4. **Text-Code ersetzen** mit Inhalt aus `.txt` Datei +5. **Speichern** und testen + +### E-Mail-Provider +- **SMTP Settings** in Authentication → Settings +- **Supabase Edge Functions** für erweiterte Funktionen +- **Custom SMTP** für eigene E-Mail-Server + +## 🧪 Testing + +### E-Mail-Test +1. **Test-Account** erstellen +2. **Template auslösen** (Registrierung, Reset, etc.) +3. **E-Mail prüfen** in verschiedenen Clients +4. **Links testen** auf Funktionalität + +### Browser-Test +1. **HTML-Datei** in Browser öffnen +2. **Responsive Design** testen +3. **Links und Buttons** überprüfen +4. **Design-Konsistenz** sicherstellen + +## 📊 Template-Statistiken + +### Dateigrößen +- **HTML-Templates**: ~8-12 KB +- **Text-Templates**: ~1-2 KB +- **Gesamt**: ~60 KB für alle Templates + +### Performance +- **Ladezeit**: < 1 Sekunde +- **Rendering**: Optimiert für alle Clients +- **Mobile**: Vollständig responsive + +## 🔒 Sicherheit + +### Link-Sicherheit +- **Zeitlimits**: 15 Min (Reauth) bis 24 Std (Reset) +- **Einmalige Nutzung**: Links werden nach Verwendung ungültig +- **HTTPS**: Alle Links verwenden sichere Verbindungen + +### Datenschutz +- **Keine sensiblen Daten** in E-Mail-Inhalten +- **Minimale Informationen** in Templates +- **DSGVO-konform** gestaltet + +## 🎯 Nächste Schritte + +1. **Supabase konfigurieren** mit neuen Templates +2. **E-Mail-Provider** einrichten +3. **Test-E-Mails** versenden +4. **Design anpassen** falls gewünscht +5. **Monitoring** einrichten für E-Mail-Delivery + +--- + +**Erstellt für NinjaCross Timer Leaderboard** 🥷 +**Alle Templates sind bereit für den produktiven Einsatz!** ✨ diff --git a/public/email-templates/URL-CONFIGURATION-GUIDE.md b/public/email-templates/URL-CONFIGURATION-GUIDE.md new file mode 100644 index 0000000..2c113a9 --- /dev/null +++ b/public/email-templates/URL-CONFIGURATION-GUIDE.md @@ -0,0 +1,174 @@ +# URL-Konfiguration für NinjaCross E-Mails + +## 🚨 Problem: Reset-Password E-Mail funktioniert nicht + +**Deine Server-URL:** `ninja.reptilfpv.de:3000` + +## 🔧 Mögliche Ursachen: + +### 1. Supabase URL-Konfiguration +Supabase muss wissen, wohin die Bestätigungslinks führen sollen. + +**Lösung:** +1. **Supabase Dashboard** → **Authentication** → **URL Configuration** +2. **Site URL** setzen auf: `https://ninja.reptilfpv.de:3000` +3. **Redirect URLs** hinzufügen: + - `https://ninja.reptilfpv.de:3000/**` + - `http://ninja.reptilfpv.de:3000/**` (falls HTTP verwendet wird) + +### 2. HTTPS vs HTTP Problem +E-Mail-Clients blockieren oft HTTP-Links in E-Mails. + +**Lösung:** +- **HTTPS verwenden** für alle Links +- **SSL-Zertifikat** für `ninja.reptilfpv.de:3000` einrichten +- **Port 3000** in der URL kann problematisch sein + +### 3. E-Mail-Client-Sicherheit +Manche E-Mail-Clients blockieren Links mit Ports oder verdächtigen Domains. + +**Lösung:** +- **Standard-Ports** verwenden (80 für HTTP, 443 für HTTPS) +- **Subdomain** verwenden: `ninja.reptilfpv.de` ohne Port +- **Reverse Proxy** einrichten (Nginx/Apache) + +## 🚀 Empfohlene Lösungen: + +### Option 1: HTTPS mit Standard-Port +``` +https://ninja.reptilfpv.de +``` +- **Port 443** (Standard HTTPS) +- **SSL-Zertifikat** erforderlich +- **Reverse Proxy** (Nginx) einrichten + +### Option 2: Subdomain ohne Port +``` +https://ninja.reptilfpv.de +``` +- **Port 3000** intern weiterleiten +- **Nginx** als Reverse Proxy +- **SSL-Zertifikat** für Subdomain + +### Option 3: Hauptdomain verwenden +``` +https://reptilfpv.de/ninja +``` +- **Hauptdomain** mit Pfad +- **Bessere E-Mail-Client-Kompatibilität** +- **Standard-Ports** verwenden + +## 🔧 Nginx Reverse Proxy Setup: + +### 1. Nginx-Konfiguration +```nginx +server { + listen 80; + listen 443 ssl; + server_name ninja.reptilfpv.de; + + ssl_certificate /path/to/certificate.crt; + ssl_certificate_key /path/to/private.key; + + location / { + proxy_pass http://localhost:3000; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_cache_bypass $http_upgrade; + } +} +``` + +### 2. SSL-Zertifikat +```bash +# Let's Encrypt SSL-Zertifikat +sudo certbot --nginx -d ninja.reptilfpv.de +``` + +## 📧 E-Mail-Template-Optimierungen: + +### 1. Absolute URLs verwenden +```html + +Reset + + +Reset +``` + +### 2. HTTPS erzwingen +```html + +Reset +``` + +### 3. Fallback-URLs +```html + +Reset +

Falls der Link nicht funktioniert: https://ninja.reptilfpv.de

+``` + +## 🧪 Testing: + +### 1. E-Mail-Links testen +```bash +# Test-URLs +curl -I https://ninja.reptilfpv.de:3000 +curl -I https://ninja.reptilfpv.de +curl -I http://ninja.reptilfpv.de:3000 +``` + +### 2. E-Mail-Client-Test +- **Gmail** - Links in E-Mail testen +- **Outlook** - Sicherheitswarnungen prüfen +- **Apple Mail** - Link-Funktionalität testen + +### 3. Supabase-Logs prüfen +- **Authentication Logs** in Supabase Dashboard +- **Fehler-Meldungen** analysieren +- **Redirect-URLs** überprüfen + +## 🎯 Sofortige Lösung: + +### 1. Supabase konfigurieren +``` +Site URL: https://ninja.reptilfpv.de:3000 +Redirect URLs: +- https://ninja.reptilfpv.de:3000/** +- https://ninja.reptilfpv.de:3000/auth/callback +``` + +### 2. Optimierte Templates verwenden +- **`reset-password-optimized.html`** - Verbesserte Kompatibilität +- **`reset-password-table.html`** - Tabellen-basiert für maximale Kompatibilität + +### 3. HTTPS einrichten +- **SSL-Zertifikat** für `ninja.reptilfpv.de:3000` +- **Oder** Reverse Proxy mit Standard-Port + +## 📞 Debugging: + +### 1. E-Mail-Links prüfen +- **Link in E-Mail** kopieren und in Browser testen +- **URL-Struktur** analysieren +- **Redirects** verfolgen + +### 2. Supabase-Logs +- **Authentication** → **Logs** in Supabase Dashboard +- **Fehler-Meldungen** suchen +- **URL-Parameter** prüfen + +### 3. Browser-Entwicklertools +- **Network-Tab** für Redirects +- **Console** für JavaScript-Fehler +- **Security-Tab** für HTTPS-Probleme + +--- + +**Empfehlung:** Verwende `reset-password-table.html` mit HTTPS und Standard-Port für beste Kompatibilität! 🚀 diff --git a/public/email-templates/change-email.html b/public/email-templates/change-email.html new file mode 100644 index 0000000..50397de --- /dev/null +++ b/public/email-templates/change-email.html @@ -0,0 +1,274 @@ + + + + + + E-Mail-Adresse ändern - NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

E-Mail-Adresse ändern 📧

+ +

+ Du möchtest deine E-Mail-Adresse ändern. Bestätige die neue E-Mail-Adresse, + um die Änderung abzuschließen. +

+ + + + + ✅ E-Mail-Adresse bestätigen + + +
+
⚠️ Wichtiger Hinweis
+
+ Nach der Bestätigung wird deine neue E-Mail-Adresse für alle zukünftigen + Benachrichtigungen und Anmeldungen verwendet. +
+
+
+ + +
+

+ Falls du diese Änderung nicht angefordert hast, kannst du diese E-Mail ignorieren. +

+ +
+ Zur Website + Support + Datenschutz +
+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/change-email.txt b/public/email-templates/change-email.txt new file mode 100644 index 0000000..4041a81 --- /dev/null +++ b/public/email-templates/change-email.txt @@ -0,0 +1,29 @@ +🥷 NINJACROSS - Die ultimative Timer-Rangliste +================================================ + +E-Mail-Adresse ändern 📧 + +Du möchtest deine E-Mail-Adresse ändern. Bestätige die neue E-Mail-Adresse, +um die Änderung abzuschließen. + +📧 E-Mail-Informationen: +- Aktuelle E-Mail: {{ .Email }} +- Neue E-Mail: {{ .NewEmail }} + +✅ E-Mail-Adresse bestätigen: +{{ .ConfirmationURL }} + +⚠️ Wichtiger Hinweis: +Nach der Bestätigung wird deine neue E-Mail-Adresse für alle zukünftigen +Benachrichtigungen und Anmeldungen verwendet. + +================================================ + +Falls du diese Änderung nicht angefordert hast, kannst du diese E-Mail ignorieren. + +Links: +- Zur Website: {{ .SiteURL }} +- Support: {{ .SiteURL }}/support +- Datenschutz: {{ .SiteURL }}/privacy + +© 2024 NinjaCross. Alle Rechte vorbehalten. diff --git a/public/email-templates/invite-user.html b/public/email-templates/invite-user.html new file mode 100644 index 0000000..d48619b --- /dev/null +++ b/public/email-templates/invite-user.html @@ -0,0 +1,300 @@ + + + + + + Einladung zu NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Du wurdest eingeladen! 🎉

+ +

+ Du wurdest von einem Administrator zu NinjaCross eingeladen. + Klicke auf den Button unten, um dein Konto zu erstellen und der Community beizutreten. +

+ +
+
{{ .InvitedBy }}
+
hat dich zu NinjaCross eingeladen
+
+ + + 🚀 Konto erstellen + + +
+ + +
+

Was dich erwartet:

+ +
+
🏃‍♂️
+
+ Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt +
+
+ +
+
🏆
+
+ Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze +
+
+ +
+
📊
+
+ Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen +
+
+ +
+
🌍
+
+ Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen +
+
+
+
+ + +
+

+ Falls du diese Einladung nicht erwartet hast, kannst du diese E-Mail ignorieren. +

+ +
+ Zur Website + Support + Datenschutz +
+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/invite-user.txt b/public/email-templates/invite-user.txt new file mode 100644 index 0000000..fc80052 --- /dev/null +++ b/public/email-templates/invite-user.txt @@ -0,0 +1,34 @@ +🥷 NINJACROSS - Die ultimative Timer-Rangliste +================================================ + +Du wurdest eingeladen! 🎉 + +Du wurdest von einem Administrator zu NinjaCross eingeladen. +Klicke auf den Link unten, um dein Konto zu erstellen und der Community beizutreten. + +👤 Einladung von: {{ .InvitedBy }} + +🚀 Konto erstellen: +{{ .ConfirmationURL }} + +Was dich erwartet: +================== + +🏃‍♂️ Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt + +🏆 Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze + +📊 Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen + +🌍 Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen + +================================================ + +Falls du diese Einladung nicht erwartet hast, kannst du diese E-Mail ignorieren. + +Links: +- Zur Website: {{ .SiteURL }} +- Support: {{ .SiteURL }}/support +- Datenschutz: {{ .SiteURL }}/privacy + +© 2024 NinjaCross. Alle Rechte vorbehalten. diff --git a/public/email-templates/magic-link.html b/public/email-templates/magic-link.html new file mode 100644 index 0000000..8433cd0 --- /dev/null +++ b/public/email-templates/magic-link.html @@ -0,0 +1,257 @@ + + + + + + Magic Link - NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Dein Magic Link ist da! ✨

+ +

+ Du hast einen Magic Link angefordert. Klicke auf den Button unten, + um dich sicher und ohne Passwort bei NinjaCross anzumelden. +

+ +
+ 🔗 +
+ Dieser Link ist sicher und führt dich direkt zu deinem Konto +
+
+ + + 🚀 Anmelden + + +
+
🔒 Sicherheitshinweis
+
+ Dieser Link ist nur für dich bestimmt und verfällt nach 24 Stunden. + Teile ihn nicht mit anderen Personen. +
+
+
+ + +
+

+ Falls du diesen Magic Link nicht angefordert hast, kannst du diese E-Mail ignorieren. +

+ +
+ Zur Website + Support + Datenschutz +
+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/magic-link.txt b/public/email-templates/magic-link.txt new file mode 100644 index 0000000..21ae685 --- /dev/null +++ b/public/email-templates/magic-link.txt @@ -0,0 +1,25 @@ +🥷 NINJACROSS - Die ultimative Timer-Rangliste +================================================ + +Dein Magic Link ist da! ✨ + +Du hast einen Magic Link angefordert. Klicke auf den Link unten, +um dich sicher und ohne Passwort bei NinjaCross anzumelden. + +🔗 Magic Link: +{{ .ConfirmationURL }} + +🔒 Sicherheitshinweis: +Dieser Link ist nur für dich bestimmt und verfällt nach 24 Stunden. +Teile ihn nicht mit anderen Personen. + +================================================ + +Falls du diesen Magic Link nicht angefordert hast, kannst du diese E-Mail ignorieren. + +Links: +- Zur Website: {{ .SiteURL }} +- Support: {{ .SiteURL }}/support +- Datenschutz: {{ .SiteURL }}/privacy + +© 2024 NinjaCross. Alle Rechte vorbehalten. diff --git a/public/email-templates/reauthentication.html b/public/email-templates/reauthentication.html new file mode 100644 index 0000000..e80c04c --- /dev/null +++ b/public/email-templates/reauthentication.html @@ -0,0 +1,327 @@ + + + + + + Erneute Authentifizierung - NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Erneute Authentifizierung erforderlich 🔒

+ +

+ Für diese Aktion ist eine erneute Authentifizierung erforderlich. + Klicke auf den Button unten, um deine Identität zu bestätigen. +

+ +
+ 🛡️ +
+ Diese zusätzliche Sicherheitsmaßnahme schützt dein Konto +
+
+ + +
+

Bestätigungscode

+
+

Gib diesen Code ein:

+
{{ .Token }}
+
+
+ + + 🔐 Identität bestätigen + + +
+
🔒 Warum ist das nötig?
+
+ Bestimmte Aktionen wie das Ändern sensibler Daten oder das Zugreifen auf + administrative Funktionen erfordern eine erneute Authentifizierung, + um die Sicherheit deines Kontos zu gewährleisten. +
+
+ +
+
⏰ Zeitlimit
+
+ Dieser Link verfällt nach 15 Minuten. Falls du diese Aktion nicht + angefordert hast, kannst du diese E-Mail ignorieren. +
+
+
+ + +
+

+ Falls du diese Aktion nicht angefordert hast, kannst du diese E-Mail ignorieren. +

+ +
+ Zur Website + Support + Datenschutz +
+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/reauthentication.txt b/public/email-templates/reauthentication.txt new file mode 100644 index 0000000..95229b8 --- /dev/null +++ b/public/email-templates/reauthentication.txt @@ -0,0 +1,30 @@ +🥷 NINJACROSS - Die ultimative Timer-Rangliste +================================================ + +Erneute Authentifizierung erforderlich 🔒 + +Für diese Aktion ist eine erneute Authentifizierung erforderlich. +Klicke auf den Link unten, um deine Identität zu bestätigen. + +🛡️ Identität bestätigen: +{{ .ConfirmationURL }} + +🔒 Warum ist das nötig? +Bestimmte Aktionen wie das Ändern sensibler Daten oder das Zugreifen auf +administrative Funktionen erfordern eine erneute Authentifizierung, +um die Sicherheit deines Kontos zu gewährleisten. + +⏰ Zeitlimit: +Dieser Link verfällt nach 15 Minuten. Falls du diese Aktion nicht +angefordert hast, kannst du diese E-Mail ignorieren. + +================================================ + +Falls du diese Aktion nicht angefordert hast, kannst du diese E-Mail ignorieren. + +Links: +- Zur Website: {{ .SiteURL }} +- Support: {{ .SiteURL }}/support +- Datenschutz: {{ .SiteURL }}/privacy + +© 2024 NinjaCross. Alle Rechte vorbehalten. diff --git a/public/email-templates/reset-password-compatible.html b/public/email-templates/reset-password-compatible.html new file mode 100644 index 0000000..034e949 --- /dev/null +++ b/public/email-templates/reset-password-compatible.html @@ -0,0 +1,249 @@ + + + + + + Passwort zurücksetzen - NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Passwort zurücksetzen 🔐

+ +

+ Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt. + Klicke auf den Button unten, um ein neues Passwort zu erstellen. +

+ +
+ 🔑 +
+ Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite +
+
+ + + 🔄 Passwort zurücksetzen + + +
+
🛡️ Tipps für ein sicheres Passwort:
+
    +
  • • Verwende mindestens 8 Zeichen
    • +
  • • Kombiniere Groß- und Kleinbuchstaben
    • +
  • • Füge Zahlen und Sonderzeichen hinzu
    • +
  • • Verwende keine persönlichen Informationen
    • +
  • • Nutze ein einzigartiges Passwort nur für NinjaCross
    • +
+
+ +
+
⚠️ Sicherheitshinweis
+
+ Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast, + kannst du diese E-Mail ignorieren. +
+
+
+ + +
+

+ Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren. +

+ +

+ Zur Website + Support + Datenschutz +

+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/reset-password-optimized.html b/public/email-templates/reset-password-optimized.html new file mode 100644 index 0000000..ee78e4f --- /dev/null +++ b/public/email-templates/reset-password-optimized.html @@ -0,0 +1,301 @@ + + + + + + Passwort zurücksetzen - NinjaCross + + + + +
+
+ + + + + + + + +
+
+ + diff --git a/public/email-templates/reset-password-table.html b/public/email-templates/reset-password-table.html new file mode 100644 index 0000000..e67df29 --- /dev/null +++ b/public/email-templates/reset-password-table.html @@ -0,0 +1,323 @@ + + + + + + Passwort zurücksetzen - NinjaCross + + + + +
+ + + + +
+ + + + + + + + + + + + + + + +
+ +
Die ultimative Timer-Rangliste
+
+

Passwort zurücksetzen 🔐

+ +

+ Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt. + Klicke auf den Button unten, um ein neues Passwort zu erstellen. +

+ + + + + +
+ 🔑 +
+ Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite +
+
+ + + + + +
+ + 🔄 Passwort zurücksetzen + +
+ + + + + +
+
🛡️ Tipps für ein sicheres Passwort:
+
    +
  • • Verwende mindestens 8 Zeichen
    • +
  • • Kombiniere Groß- und Kleinbuchstaben
    • +
  • • Füge Zahlen und Sonderzeichen hinzu
    • +
  • • Verwende keine persönlichen Informationen
    • +
  • • Nutze ein einzigartiges Passwort nur für NinjaCross
    • +
+
+ + + + + +
+
⚠️ Sicherheitshinweis
+
+ Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast, + kannst du diese E-Mail ignorieren. +
+
+
+

+ Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren. +

+ +

+ Zur Website + Support + Datenschutz +

+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+
+ + diff --git a/public/email-templates/reset-password.html b/public/email-templates/reset-password.html new file mode 100644 index 0000000..8291350 --- /dev/null +++ b/public/email-templates/reset-password.html @@ -0,0 +1,294 @@ + + + + + + Passwort zurücksetzen - NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Passwort zurücksetzen 🔐

+ +

+ Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt. + Klicke auf den Button unten, um ein neues Passwort zu erstellen. +

+ +
+ 🔑 +
+ Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite +
+
+ + + 🔄 Passwort zurücksetzen + + +
+
🛡️ Tipps für ein sicheres Passwort:
+
    +
  • • Verwende mindestens 8 Zeichen
    • +
  • • Kombiniere Groß- und Kleinbuchstaben
    • +
  • • Füge Zahlen und Sonderzeichen hinzu
    • +
  • • Verwende keine persönlichen Informationen
    • +
  • • Nutze ein einzigartiges Passwort nur für NinjaCross
    • +
+
+ +
+
⚠️ Sicherheitshinweis
+
+ Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast, + kannst du diese E-Mail ignorieren. +
+
+
+ + +
+

+ Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren. +

+ +
+ Zur Website + Support + Datenschutz +
+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/reset-password.txt b/public/email-templates/reset-password.txt new file mode 100644 index 0000000..019032f --- /dev/null +++ b/public/email-templates/reset-password.txt @@ -0,0 +1,32 @@ +🥷 NINJACROSS - Die ultimative Timer-Rangliste +================================================ + +Passwort zurücksetzen 🔐 + +Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt. +Klicke auf den Link unten, um ein neues Passwort zu erstellen. + +🔑 Passwort zurücksetzen: +{{ .ConfirmationURL }} + +🛡️ Tipps für ein sicheres Passwort: +• Verwende mindestens 8 Zeichen +• Kombiniere Groß- und Kleinbuchstaben +• Füge Zahlen und Sonderzeichen hinzu +• Verwende keine persönlichen Informationen +• Nutze ein einzigartiges Passwort nur für NinjaCross + +⚠️ Sicherheitshinweis: +Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast, +kannst du diese E-Mail ignorieren. + +================================================ + +Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren. + +Links: +- Zur Website: {{ .SiteURL }} +- Support: {{ .SiteURL }}/support +- Datenschutz: {{ .SiteURL }}/privacy + +© 2024 NinjaCross. Alle Rechte vorbehalten. diff --git a/public/email-templates/welcome-email-compatible.html b/public/email-templates/welcome-email-compatible.html new file mode 100644 index 0000000..3bf9b1a --- /dev/null +++ b/public/email-templates/welcome-email-compatible.html @@ -0,0 +1,208 @@ + + + + + + Willkommen bei NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Willkommen bei NinjaCross! 🎉

+ +

+ Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community. + Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen. +

+ + + ✉️ E-Mail bestätigen + + + +
+
+ 🏃‍♂️ + + Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt + +
+ +
+ 🏆 + + Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze + +
+ +
+ 📊 + + Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen + +
+ +
+ 🌍 + + Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen + +
+
+
+ + +
+

+ Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren. +

+ +

+ Zur Website + Support + Datenschutz +

+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/welcome-email-simple.html b/public/email-templates/welcome-email-simple.html new file mode 100644 index 0000000..afd724e --- /dev/null +++ b/public/email-templates/welcome-email-simple.html @@ -0,0 +1,187 @@ + + + + + + Willkommen bei NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Willkommen bei NinjaCross! 🎉

+ +

+ Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community. + Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen. +

+ + + ✉️ E-Mail bestätigen + + + +
+
+ 🏃‍♂️ + + Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt + +
+ +
+ 🏆 + + Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze + +
+ +
+ 📊 + + Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen + +
+ +
+ 🌍 + + Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen + +
+
+
+ + +
+

+ Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren. +

+ +

+ Zur Website + Support + Datenschutz +

+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/welcome-email.html b/public/email-templates/welcome-email.html new file mode 100644 index 0000000..4486863 --- /dev/null +++ b/public/email-templates/welcome-email.html @@ -0,0 +1,274 @@ + + + + + + Willkommen bei NinjaCross + + + +
+ +
+ +
Die ultimative Timer-Rangliste
+
+ + +
+

Willkommen bei NinjaCross! 🎉

+ +

+ Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community. + Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen. +

+ + + ✉️ E-Mail bestätigen + + +
+ + +
+

Was dich erwartet:

+ +
+
🏃‍♂️
+
+ Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt +
+
+ +
+
🏆
+
+ Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze +
+
+ +
+
📊
+
+ Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen +
+
+ +
+
🌍
+
+ Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen +
+
+
+
+ + +
+

+ Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren. +

+ +
+ Zur Website + Support + Datenschutz +
+ +

+ © 2024 NinjaCross. Alle Rechte vorbehalten. +

+
+
+ + diff --git a/public/email-templates/welcome-email.txt b/public/email-templates/welcome-email.txt new file mode 100644 index 0000000..83f4466 --- /dev/null +++ b/public/email-templates/welcome-email.txt @@ -0,0 +1,32 @@ +🥷 NINJACROSS - Die ultimative Timer-Rangliste +================================================ + +Willkommen bei NinjaCross! 🎉 + +Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community. +Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen. + +📧 E-Mail bestätigen: +{{ .ConfirmationURL }} + +Was dich erwartet: +================== + +🏃‍♂️ Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt + +🏆 Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze + +📊 Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen + +🌍 Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen + +================================================ + +Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren. + +Links: +- Zur Website: {{ .SiteURL }} +- Support: {{ .SiteURL }}/support +- Datenschutz: {{ .SiteURL }}/privacy + +© 2024 NinjaCross. Alle Rechte vorbehalten. diff --git a/public/login.html b/public/login.html index 2f05dc5..1585a1a 100644 --- a/public/login.html +++ b/public/login.html @@ -25,6 +25,39 @@ radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%), radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%), radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%); + position: relative; + } + + .back-button { + position: fixed; + top: 20px; + right: 20px; + background: rgba(30, 41, 59, 0.95); + backdrop-filter: blur(20px); + border: 1px solid rgba(51, 65, 85, 0.3); + border-radius: 12px; + padding: 12px 20px; + color: #00d4ff; + text-decoration: none; + font-weight: 600; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.5px; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + z-index: 1000; + } + + .back-button:hover { + background: #00d4ff; + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3); + } + + .back-button::before { + content: "← "; + margin-right: 5px; } .container { @@ -183,6 +216,37 @@ border-color: rgba(239, 68, 68, 0.3); } + .password-reset-container { + display: none; + margin-top: 1rem; + padding: 1rem; + background: rgba(239, 68, 68, 0.05); + border: 1px solid rgba(239, 68, 68, 0.2); + border-radius: 0.75rem; + text-align: center; + } + + .password-reset-container.active { + display: block; + } + + .password-reset-container p { + color: #ef4444; + margin-bottom: 1rem; + font-size: 0.9rem; + } + + .btn-reset { + background: linear-gradient(135deg, #ef4444, #dc2626); + color: white; + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); + } + + .btn-reset:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4); + } + .loading { display: none; text-align: center; @@ -242,14 +306,24 @@ .logo p { font-size: 0.875rem; } + + .back-button { + top: 15px; + right: 15px; + padding: 10px 15px; + font-size: 0.8rem; + } } + + Zur Hauptseite +
@@ -272,6 +346,13 @@
+ + +
+

Passwort vergessen? Kein Problem!

+ +
+

Don't have an account?

@@ -330,6 +411,7 @@ loginForm.classList.add('active'); } clearMessage(); + showPasswordReset(false); // Hide password reset when switching forms } // Show message @@ -346,6 +428,16 @@ document.getElementById('message').innerHTML = ''; } + // Show/hide password reset container + function showPasswordReset(show) { + const resetContainer = document.getElementById('passwordResetContainer'); + if (show) { + resetContainer.classList.add('active'); + } else { + resetContainer.classList.remove('active'); + } + } + // Show/hide loading function setLoading(show) { const loading = document.getElementById('loading'); @@ -361,6 +453,7 @@ e.preventDefault(); setLoading(true); clearMessage(); + showPasswordReset(false); // Hide reset button initially const email = document.getElementById('loginEmail').value; const password = document.getElementById('loginPassword').value; @@ -373,6 +466,8 @@ if (error) { showMessage(error.message, 'error'); + // Show password reset button on login failure + showPasswordReset(true); } else { showMessage('Login successful! Redirecting...', 'success'); setTimeout(() => { @@ -381,6 +476,7 @@ } } catch (error) { showMessage('An unexpected error occurred', 'error'); + showPasswordReset(true); } finally { setLoading(false); } @@ -433,6 +529,36 @@ } }); + // Handle password reset + document.getElementById('resetPasswordBtn').addEventListener('click', async () => { + const email = document.getElementById('loginEmail').value; + + if (!email) { + showMessage('Bitte geben Sie zuerst Ihre E-Mail-Adresse ein', 'error'); + return; + } + + setLoading(true); + clearMessage(); + + try { + const { error } = await supabase.auth.resetPasswordForEmail(email, { + redirectTo: `${window.location.origin}/reset-password.html` + }); + + if (error) { + showMessage('Fehler beim Senden der E-Mail: ' + error.message, 'error'); + } else { + showMessage('Passwort-Reset-E-Mail wurde gesendet! Bitte überprüfen Sie Ihr E-Mail-Postfach.', 'success'); + showPasswordReset(false); + } + } catch (error) { + showMessage('Ein unerwarteter Fehler ist aufgetreten', 'error'); + } finally { + setLoading(false); + } + }); + // Check authentication on page load checkAuth(); diff --git a/public/reset-password.html b/public/reset-password.html new file mode 100644 index 0000000..131a054 --- /dev/null +++ b/public/reset-password.html @@ -0,0 +1,457 @@ + + + + + + Passwort zurücksetzen - NinjaCross + + + + + + + +
+ +
Die ultimative Timer-Rangliste
+ +

Passwort zurücksetzen 🔐

+

Gib dein neues Passwort ein, um dein Konto zu sichern

+ +
+ +
+
+ + +
+ +
+ + +
+ + +
+ +
+ + Passwort wird zurückgesetzt... +
+ + ← Zurück zur Hauptseite +
+ + + + \ No newline at end of file diff --git a/server.js b/server.js index d90a306..f5c4a17 100644 --- a/server.js +++ b/server.js @@ -132,6 +132,15 @@ app.get('/dashboard', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'dashboard.html')); }); +/** + * Reset Password Page + * Seite für das Zurücksetzen von Passwörtern über Supabase + * Wird von Supabase E-Mail-Links aufgerufen + */ +app.get('/reset-password.html', (req, res) => { + res.sendFile(path.join(__dirname, 'public', 'reset-password.html')); +}); + // ============================================================================ // STATIC FILE SERVING // ============================================================================