feat: Implement new authentication and account management system, refactoring password gates and settings components.

app/settings/hooks/useSettingsPage.ts

@@ -19,14 +19,6 @@ export function useSettingsPage() {
     const [isRestoreDefaultsDialogOpen, setIsRestoreDefaultsDialogOpen] = useState(false);
     const [editingSource, setEditingSource] = useState<VideoSource | null>(null);
 
-    const [passwordAccess, setPasswordAccess] = useState(false);
-    const [accessPasswords, setAccessPasswords] = useState<string[]>([]);
-    const [envPasswordSet, setEnvPasswordSet] = useState(false);
-
-    const [settingsPasswordEnabled, setSettingsPasswordEnabled] = useState(false);
-    const [settingsPasswords, setSettingsPasswords] = useState<string[]>([]);
-    const [envSettingsPasswordSet, setEnvSettingsPasswordSet] = useState(false);
-
     // Display settings
     const [realtimeLatency, setRealtimeLatency] = useState(false);
     const [searchDisplayMode, setSearchDisplayMode] = useState<SearchDisplayMode>('normal');
@@ -39,27 +31,11 @@ export function useSettingsPage() {
         setSources(settings.sources || []);
         setSubscriptions(settings.subscriptions || []);
         setSortBy(settings.sortBy);
-        setPasswordAccess(settings.passwordAccess);
-        setAccessPasswords(settings.accessPasswords);
-        setSettingsPasswordEnabled(settings.settingsPasswordEnabled);
-        setSettingsPasswords(settings.settingsPasswords);
         setRealtimeLatency(settings.realtimeLatency);
         setSearchDisplayMode(settings.searchDisplayMode);
         setFullscreenType(settings.fullscreenType);
         setProxyMode(settings.proxyMode);
         setRememberScrollPosition(settings.rememberScrollPosition);
-
-        // Fetch env password status
-        fetch('/api/config')
-            .then(res => res.json())
-            .then(data => {
-                setEnvPasswordSet(data.hasEnvPassword);
-                setEnvSettingsPasswordSet(data.hasEnvSettingsPassword);
-            })
-            .catch(() => {
-                setEnvPasswordSet(false);
-                setEnvSettingsPasswordSet(false);
-            });
     }, []);
 
     const handleSourcesChange = (newSources: VideoSource[]) => {
@@ -70,10 +46,6 @@ export function useSettingsPage() {
             sources: newSources,
             sortBy,
             subscriptions,
-            searchHistory: true,
-            watchHistory: true,
-            passwordAccess,
-            accessPasswords
         });
     };
 
@@ -98,85 +70,6 @@ export function useSettingsPage() {
             ...currentSettings,
             sources,
             sortBy: newSort,
-            searchHistory: true,
-            watchHistory: true,
-            passwordAccess,
-            accessPasswords
-        });
-    };
-
-    const handlePasswordToggle = (enabled: boolean) => {
-        setPasswordAccess(enabled);
-        const currentSettings = settingsStore.getSettings();
-        settingsStore.saveSettings({
-            ...currentSettings,
-            sources,
-            sortBy,
-            searchHistory: true,
-            watchHistory: true,
-            passwordAccess: enabled,
-            accessPasswords
-        });
-    };
-
-    const handleAddPassword = (password: string) => {
-        const updated = [...accessPasswords, password];
-        setAccessPasswords(updated);
-        const currentSettings = settingsStore.getSettings();
-        settingsStore.saveSettings({
-            ...currentSettings,
-            sources,
-            sortBy,
-            searchHistory: true,
-            watchHistory: true,
-            passwordAccess,
-            accessPasswords: updated
-        });
-    };
-
-    const handleRemovePassword = (password: string) => {
-        const updated = accessPasswords.filter(p => p !== password);
-        setAccessPasswords(updated);
-        const currentSettings = settingsStore.getSettings();
-        settingsStore.saveSettings({
-            ...currentSettings,
-            sources,
-            sortBy,
-            searchHistory: true,
-            watchHistory: true,
-            passwordAccess,
-            accessPasswords: updated
-        });
-    };
-
-    const handleSettingsPasswordToggle = (enabled: boolean) => {
-        setSettingsPasswordEnabled(enabled);
-        const currentSettings = settingsStore.getSettings();
-        settingsStore.saveSettings({
-            ...currentSettings,
-            settingsPasswordEnabled: enabled,
-        });
-    };
-
-    const handleAddSettingsPassword = (password: string) => {
-        const updated = [...settingsPasswords, password];
-        setSettingsPasswords(updated);
-        const currentSettings = settingsStore.getSettings();
-        settingsStore.saveSettings({
-            ...currentSettings,
-            settingsPasswordEnabled,
-            settingsPasswords: updated,
-        });
-    };
-
-    const handleRemoveSettingsPassword = (password: string) => {
-        const updated = settingsPasswords.filter(p => p !== password);
-        setSettingsPasswords(updated);
-        const currentSettings = settingsStore.getSettings();
-        settingsStore.saveSettings({
-            ...currentSettings,
-            settingsPasswordEnabled,
-            settingsPasswords: updated,
         });
     };
 
@@ -199,8 +92,6 @@ export function useSettingsPage() {
             setSources(settings.sources);
             setSortBy(settings.sortBy);
             setSubscriptions(settings.subscriptions || []);
-            setPasswordAccess(settings.passwordAccess);
-            setAccessPasswords(settings.accessPasswords);
 
             // Reload to apply changes
             setTimeout(() => window.location.reload(), 1000);
@@ -371,12 +262,6 @@ export function useSettingsPage() {
         sources,
         subscriptions,
         sortBy,
-        passwordAccess,
-        accessPasswords,
-        envPasswordSet,
-        settingsPasswordEnabled,
-        settingsPasswords,
-        envSettingsPasswordSet,
         realtimeLatency,
         searchDisplayMode,
         isAddModalOpen,
@@ -393,18 +278,12 @@ export function useSettingsPage() {
         handleSourcesChange,
         handleAddSource,
         handleSortChange,
-        handlePasswordToggle,
-        handleAddPassword,
-        handleRemovePassword,
-        handleSettingsPasswordToggle,
-        handleAddSettingsPassword,
-        handleRemoveSettingsPassword,
         handleExport,
-        handleImportFile, // Renamed from handleImport
-        handleImportLink, // New
-        handleAddSubscription, // New
-        handleRemoveSubscription, // New
-        handleRefreshSubscription, // New
+        handleImportFile,
+        handleImportLink,
+        handleAddSubscription,
+        handleRemoveSubscription,
+        handleRefreshSubscription,
         handleRestoreDefaults,
         handleResetAll,
         editingSource,

app/settings/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Suspense } from 'react';
 import { AddSourceModal } from '@/components/settings/AddSourceModal';
 import { ExportModal } from '@/components/settings/ExportModal';
 import { ImportModal } from '@/components/settings/ImportModal';
@@ -8,24 +7,17 @@ import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
 import { SourceSettings } from '@/components/settings/SourceSettings';
 import { SortSettings } from '@/components/settings/SortSettings';
 import { DataSettings } from '@/components/settings/DataSettings';
-import { PasswordSettings } from '@/components/settings/PasswordSettings';
-import { SettingsPasswordSettings } from '@/components/settings/SettingsPasswordSettings';
+import { AccountSettings } from '@/components/settings/AccountSettings';
 import { DisplaySettings } from '@/components/settings/DisplaySettings';
 import { PlayerSettings } from '@/components/settings/PlayerSettings';
 import { SettingsHeader } from '@/components/settings/SettingsHeader';
-import { SettingsPasswordGate } from '@/components/SettingsPasswordGate';
+import { AdminGate } from '@/components/AdminGate';
 import { useSettingsPage } from './hooks/useSettingsPage';
 
 export default function SettingsPage() {
   const {
     sources,
     sortBy,
-    passwordAccess,
-    accessPasswords,
-    envPasswordSet,
-    settingsPasswordEnabled,
-    settingsPasswords,
-    envSettingsPasswordSet,
     realtimeLatency,
     searchDisplayMode,
     fullscreenType,
@@ -42,12 +34,6 @@ export default function SettingsPage() {
     handleSourcesChange,
     handleAddSource,
     handleSortChange,
-    handlePasswordToggle,
-    handleAddPassword,
-    handleRemovePassword,
-    handleSettingsPasswordToggle,
-    handleAddSettingsPassword,
-    handleRemoveSettingsPassword,
     handleExport,
     handleImportFile,
     handleImportLink,
@@ -70,12 +56,15 @@ export default function SettingsPage() {
   } = useSettingsPage();
 
   return (
-    <SettingsPasswordGate>
+    <AdminGate>
     <div className="min-h-screen bg-[var(--bg-color)] bg-[image:var(--bg-image)] bg-fixed">
       <div className="container mx-auto px-4 py-8 max-w-4xl space-y-8">
         {/* Header */}
         <SettingsHeader />
 
+        {/* Account Settings */}
+        <AccountSettings />
+
         {/* Player Settings */}
         <PlayerSettings
           fullscreenType={fullscreenType}
@@ -84,26 +73,6 @@ export default function SettingsPage() {
           onProxyModeChange={handleProxyModeChange}
         />
 
-        {/* Password Settings */}
-        <PasswordSettings
-          enabled={passwordAccess}
-          passwords={accessPasswords}
-          envPasswordSet={envPasswordSet}
-          onToggle={handlePasswordToggle}
-          onAdd={handleAddPassword}
-          onRemove={handleRemovePassword}
-        />
-
-        {/* Settings Password Protection */}
-        <SettingsPasswordSettings
-          enabled={settingsPasswordEnabled}
-          passwords={settingsPasswords}
-          envSettingsPasswordSet={envSettingsPasswordSet}
-          onToggle={handleSettingsPasswordToggle}
-          onAdd={handleAddSettingsPassword}
-          onRemove={handleRemoveSettingsPassword}
-        />
-
         {/* Display Settings */}
         <DisplaySettings
           realtimeLatency={realtimeLatency}
@@ -190,7 +159,6 @@ export default function SettingsPage() {
         dangerous
       />
     </div>
-    </SettingsPasswordGate>
+    </AdminGate>
   );
 }
-