Admin
03d7bd8de6
- DELETE /api/v1/auth/delete-account (GDPR + Google Play req) - Settings: red Delete Account section with confirmation - Store assets: icon-512, feature-graphic, screenshot-1 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
238 lines
10 KiB
TypeScript
238 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/lib/auth";
|
|
import { useTheme } from "@/components/ThemeProvider";
|
|
import { useTranslation, LOCALES } from "@/lib/i18n";
|
|
import type { Locale } from "@/lib/i18n";
|
|
|
|
export default function SettingsPage() {
|
|
const { token, user, logout } = useAuth();
|
|
const { theme, toggleTheme } = useTheme();
|
|
const { t, locale, setLocale } = useTranslation();
|
|
const router = useRouter();
|
|
const [notifications, setNotifications] = useState({
|
|
push: true,
|
|
email: false,
|
|
taskReminders: true,
|
|
dailySummary: false,
|
|
});
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
router.replace("/login");
|
|
}
|
|
// Load saved preferences
|
|
if (typeof window !== "undefined") {
|
|
const savedNotifs = localStorage.getItem("taskteam_notifications");
|
|
if (savedNotifs) {
|
|
try {
|
|
setNotifications(JSON.parse(savedNotifs));
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
}
|
|
}, [token, router]);
|
|
|
|
function handleSave() {
|
|
if (typeof window !== "undefined") {
|
|
localStorage.setItem("taskteam_notifications", JSON.stringify(notifications));
|
|
}
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 2000);
|
|
}
|
|
|
|
function handleLogout() {
|
|
logout();
|
|
router.push("/login");
|
|
}
|
|
|
|
if (!token) return null;
|
|
|
|
return (
|
|
<div className="max-w-lg mx-auto space-y-6 px-4 pb-24 sm:pb-8">
|
|
<h1 className="text-xl font-bold">{t("settings.title")}</h1>
|
|
|
|
{/* Profile section */}
|
|
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
|
|
<h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.profile")}</h2>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xl font-bold">
|
|
{(user?.name || user?.email || "?").charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-semibold text-lg">{user?.name || t("settings.user")}</p>
|
|
<p className="text-sm text-muted truncate">{user?.email}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Install section */}
|
|
<section id="install" className="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
|
|
<h2 className="font-semibold mb-3">{t("settings.install") || "Instalace"}</h2>
|
|
<div className="space-y-2">
|
|
<a href="https://expo.dev/accounts/it-enterprise/projects/task-team/builds/b31c63a8-0e4f-44d6-80e9-98cb24174037"
|
|
target="_blank" rel="noopener"
|
|
className="flex items-center gap-3 px-4 py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors">
|
|
<span className="text-xl">🤖</span>
|
|
<span>Android APK</span>
|
|
<span className="ml-auto text-sm opacity-75">Stáhnout</span>
|
|
</a>
|
|
<a href="https://tasks.hasdo.info"
|
|
target="_blank" rel="noopener"
|
|
className="flex items-center gap-3 px-4 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
|
|
<span className="text-xl">🌐</span>
|
|
<span>PWA Web App</span>
|
|
<span className="ml-auto text-sm opacity-75">Otevřít</span>
|
|
</a>
|
|
<div className="flex items-center gap-3 px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-500 rounded-lg">
|
|
<span className="text-xl">🍎</span>
|
|
<span>iOS (App Store)</span>
|
|
<span className="ml-auto text-sm">Připravujeme</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-500 rounded-lg">
|
|
<span className="text-xl">📦</span>
|
|
<span>F-Droid</span>
|
|
<span className="ml-auto text-sm">Připravujeme</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Appearance */}
|
|
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
|
|
<h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.appearance")}</h2>
|
|
|
|
{/* Theme toggle */}
|
|
<div className="flex items-center justify-between py-3">
|
|
<div className="flex items-center gap-3">
|
|
{theme === "dark" ? (
|
|
<svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
)}
|
|
<span className="text-sm font-medium">
|
|
{theme === "dark" ? t("settings.dark") : t("settings.light")}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`relative w-12 h-7 rounded-full transition-colors ${
|
|
theme === "dark" ? "bg-blue-600" : "bg-gray-300"
|
|
}`}
|
|
aria-label={t("common.toggleTheme")}
|
|
>
|
|
<div
|
|
className={`absolute top-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform ${
|
|
theme === "dark" ? "translate-x-5" : "translate-x-0.5"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Language */}
|
|
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
|
|
<h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.language")}</h2>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{LOCALES.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => setLocale(lang.code as Locale)}
|
|
className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all ${
|
|
locale === lang.code
|
|
? "bg-blue-600 text-white shadow-md"
|
|
: "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
<span className="text-lg">{lang.flag}</span>
|
|
<span>{lang.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notifications */}
|
|
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
|
|
<h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.notifications")}</h2>
|
|
<div className="space-y-1">
|
|
{[
|
|
{ key: "push" as const, label: t("settings.push") },
|
|
{ key: "email" as const, label: t("settings.email") },
|
|
{ key: "taskReminders" as const, label: t("settings.taskReminders") },
|
|
{ key: "dailySummary" as const, label: t("settings.dailySummary") },
|
|
].map((item) => (
|
|
<div key={item.key} className="flex items-center justify-between py-3">
|
|
<span className="text-sm font-medium">{item.label}</span>
|
|
<button
|
|
onClick={() =>
|
|
setNotifications((prev) => ({
|
|
...prev,
|
|
[item.key]: !prev[item.key],
|
|
}))
|
|
}
|
|
className={`relative w-12 h-7 rounded-full transition-colors ${
|
|
notifications[item.key] ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
|
|
}`}
|
|
aria-label={item.label}
|
|
>
|
|
<div
|
|
className={`absolute top-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform ${
|
|
notifications[item.key] ? "translate-x-5" : "translate-x-0.5"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save button */}
|
|
<button
|
|
onClick={handleSave}
|
|
className={`w-full py-3 rounded-xl font-medium transition-all ${
|
|
saved
|
|
? "bg-green-600 text-white"
|
|
: "bg-blue-600 hover:bg-blue-700 text-white"
|
|
}`}
|
|
>
|
|
{saved ? t("settings.saved") : t("settings.save")}
|
|
</button>
|
|
|
|
{/* Logout */}
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full py-3 rounded-xl font-medium border border-red-300 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
|
>
|
|
{t("auth.logout")}
|
|
</button>
|
|
|
|
{/* App info */}
|
|
<div className="text-center text-xs text-muted py-4">
|
|
<p>{t("common.appName")} {t("common.appVersion")}</p>
|
|
</div>
|
|
|
|
<section className="bg-red-50 dark:bg-red-900/20 rounded-xl p-4 border border-red-200 dark:border-red-800 mt-6">
|
|
<h2 className="font-semibold text-red-600 dark:text-red-400 mb-2">Smazat ucet</h2>
|
|
<p className="text-sm text-red-500 mb-3">Trvale smazat ucet a vsechna data. Tuto akci nelze vratit.</p>
|
|
<button onClick={() => {
|
|
if (confirm("Opravdu chcete trvale smazat svuj ucet a vsechna data?")) {
|
|
const token = localStorage.getItem("taskteam_token");
|
|
fetch("/api/v1/auth/delete-account", { method: "DELETE", headers: { Authorization: "Bearer " + token } })
|
|
.then(r => r.json())
|
|
.then(() => { localStorage.clear(); window.location.href = "/login"; });
|
|
}
|
|
}} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium">
|
|
Smazat ucet
|
|
</button>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|