120 lines
3.8 KiB
Markdown
120 lines
3.8 KiB
Markdown
# 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!** ✨
|