Add Clear All Data feature to settings page

- Add 'Clear All Data' button in Danger Zone section
- Implement confirmation dialog before clearing
- Clear all localStorage and redirect to onboarding
- Add translations for clearAllData, clearAllDataConfirm, and clearAllDataDescription in all 5 languages (EN, DE, FR, IT, PL)
- Style with red theme to indicate destructive action
This commit is contained in:
Stefan
2025-12-01 11:54:35 +01:00
parent 6acc7ecc1c
commit 870efbbff7
2 changed files with 46 additions and 1 deletions
+28 -1
View File
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
import Header from "@/components/Header";
import { useTranslation } from "@/lib/i18n/useTranslation";
import { SupportedLanguage } from "@/lib/i18n/translations";
import { ArrowLeft, Save } from "lucide-react";
import { ArrowLeft, Save, Trash2 } from "lucide-react";
export default function SettingsPage() {
const router = useRouter();
@@ -58,6 +58,16 @@ export default function SettingsPage() {
router.push("/");
};
const handleClearAllData = () => {
if (window.confirm(t.common.clearAllDataConfirm)) {
// Clear all localStorage
localStorage.clear();
// Redirect to onboarding
router.push("/onboarding");
}
};
if (!mounted) return null;
return (
@@ -158,6 +168,23 @@ export default function SettingsPage() {
</div>
</div>
</div>
{/* Danger Zone - Clear All Data */}
<div className="pt-6 border-t border-red-200 dark:border-red-800">
<h2 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-2">
Danger Zone
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
{t.common.clearAllDataDescription}
</p>
<button
onClick={handleClearAllData}
className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium shadow-md transition-all"
>
<Trash2 size={18} />
{t.common.clearAllData}
</button>
</div>
</div>
<div className="pt-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+18
View File
@@ -9,6 +9,9 @@ export interface Translations {
loading: string;
error: string;
save: string;
clearAllData: string;
clearAllDataConfirm: string;
clearAllDataDescription: string;
};
// Header
@@ -181,6 +184,9 @@ const en: Translations = {
loading: 'Loading...',
error: 'Error',
save: 'Save',
clearAllData: 'Clear All Data',
clearAllDataConfirm: 'Are you sure you want to clear all data? This will delete all saved games, settings, and usernames. This action cannot be undone.',
clearAllDataDescription: 'Remove all saved games, settings, and cached data from your browser.',
},
header: {
tagline: 'with Gemini & Stockfish',
@@ -342,6 +348,9 @@ const de: Translations = {
loading: 'Lädt...',
error: 'Fehler',
save: 'Speichern',
clearAllData: 'Alle Daten löschen',
clearAllDataConfirm: 'Sind Sie sicher, dass Sie alle Daten löschen möchten? Dies löscht alle gespeicherten Spiele, Einstellungen und Benutzernamen. Diese Aktion kann nicht rückgängig gemacht werden.',
clearAllDataDescription: 'Alle gespeicherten Spiele, Einstellungen und zwischengespeicherten Daten aus Ihrem Browser entfernen.',
},
header: {
tagline: 'mit Gemini & Stockfish',
@@ -503,6 +512,9 @@ const fr: Translations = {
loading: 'Chargement...',
error: 'Erreur',
save: 'Enregistrer',
clearAllData: 'Effacer toutes les données',
clearAllDataConfirm: 'Êtes-vous sûr de vouloir effacer toutes les données ? Cela supprimera toutes les parties sauvegardées, les paramètres et les noms d\'utilisateur. Cette action est irréversible.',
clearAllDataDescription: 'Supprimer toutes les parties sauvegardées, les paramètres et les données en cache de votre navigateur.',
},
header: {
tagline: 'avec Gemini & Stockfish',
@@ -664,6 +676,9 @@ const it: Translations = {
loading: 'Caricamento...',
error: 'Errore',
save: 'Salva',
clearAllData: 'Cancella tutti i dati',
clearAllDataConfirm: 'Sei sicuro di voler cancellare tutti i dati? Questo eliminerà tutte le partite salvate, le impostazioni e i nomi utente. Questa azione non può essere annullata.',
clearAllDataDescription: 'Rimuovi tutte le partite salvate, le impostazioni e i dati memorizzati dal tuo browser.',
},
header: {
tagline: 'con Gemini & Stockfish',
@@ -825,6 +840,9 @@ const pl: Translations = {
loading: 'Ładowanie...',
error: 'Błąd',
save: 'Zapisz',
clearAllData: 'Wyczyść wszystkie dane',
clearAllDataConfirm: 'Czy na pewno chcesz wyczyścić wszystkie dane? Spowoduje to usunięcie wszystkich zapisanych gier, ustawień i nazw użytkowników. Ta akcja jest nieodwracalna.',
clearAllDataDescription: 'Usuń wszystkie zapisane gry, ustawienia i dane z pamięci podręcznej przeglądarki.',
},
header: {
tagline: 'z Gemini i Stockfish',