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

app/api/auth/route.ts

@@ -0,0 +1,107 @@
+/**
+ * Auth API Route
+ * Handles authentication with role-based accounts
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+export const runtime = 'edge';
+
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || '';
+const ACCESS_PASSWORD = process.env.ACCESS_PASSWORD || '';
+const ACCOUNTS = process.env.ACCOUNTS || '';
+const PERSIST_SESSION = process.env.PERSIST_SESSION !== 'false'; // default true
+const SUBSCRIPTION_SOURCES = process.env.SUBSCRIPTION_SOURCES || process.env.NEXT_PUBLIC_SUBSCRIPTION_SOURCES || '';
+
+// Backward compat: ACCESS_PASSWORD acts as ADMIN_PASSWORD if ADMIN_PASSWORD is not set
+const effectiveAdminPassword = ADMIN_PASSWORD || ACCESS_PASSWORD;
+
+interface AccountEntry {
+  password: string;
+  name: string;
+  role: 'admin' | 'viewer';
+}
+
+function parseAccounts(): AccountEntry[] {
+  if (!ACCOUNTS) return [];
+
+  return ACCOUNTS.split(',')
+    .map(entry => entry.trim())
+    .filter(entry => entry.length > 0)
+    .map(entry => {
+      const parts = entry.split(':');
+      if (parts.length < 2) return null;
+      const [password, name, role] = parts;
+      return {
+        password: password.trim(),
+        name: name.trim(),
+        role: (role?.trim() === 'admin' ? 'admin' : 'viewer') as 'admin' | 'viewer',
+      };
+    })
+    .filter((a): a is AccountEntry => a !== null && a.password.length > 0 && a.name.length > 0);
+}
+
+/**
+ * Generate a deterministic profileId from password using SHA-256.
+ * Uses a salt to avoid rainbow table attacks.
+ */
+async function generateProfileId(password: string): Promise<string> {
+  const salt = 'kvideo-profile-salt-v1';
+  const data = new TextEncoder().encode(password + salt);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  const hashArray = Array.from(new Uint8Array(hash));
+  // Use first 8 bytes (16 hex chars) for a compact but unique ID
+  return hashArray.slice(0, 8).map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
+export async function GET() {
+  const hasAuth = !!(effectiveAdminPassword || ACCOUNTS);
+
+  return NextResponse.json({
+    hasAuth,
+    persistSession: PERSIST_SESSION,
+    subscriptionSources: SUBSCRIPTION_SOURCES,
+  });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { password } = await request.json();
+
+    if (!password || typeof password !== 'string') {
+      return NextResponse.json({ valid: false, message: 'Password required' }, { status: 400 });
+    }
+
+    // 1. Check admin password
+    if (effectiveAdminPassword && password === effectiveAdminPassword) {
+      const profileId = await generateProfileId(password);
+      return NextResponse.json({
+        valid: true,
+        name: '管理员',
+        role: 'admin',
+        profileId,
+        persistSession: PERSIST_SESSION,
+      });
+    }
+
+    // 2. Check ACCOUNTS entries
+    const accounts = parseAccounts();
+    for (const account of accounts) {
+      if (password === account.password) {
+        const profileId = await generateProfileId(password);
+        return NextResponse.json({
+          valid: true,
+          name: account.name,
+          role: account.role,
+          profileId,
+          persistSession: PERSIST_SESSION,
+        });
+      }
+    }
+
+    // 3. No match
+    return NextResponse.json({ valid: false });
+  } catch {
+    return NextResponse.json({ valid: false, message: 'Invalid request' }, { status: 400 });
+  }
+}

app/api/config/route.ts

@@ -1,45 +1,17 @@
 /**
- * Config API Route
- * Exposes configuration status (never actual values) to the client
+ * Config API Route (Simplified)
+ * Only returns non-auth configuration now.
+ * Auth has moved to /api/auth.
  */
 
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-const ACCESS_PASSWORD = process.env.ACCESS_PASSWORD || '';
-const SETTINGS_PASSWORD = process.env.SETTINGS_PASSWORD || '';
-const PERSIST_PASSWORD = process.env.PERSIST_PASSWORD !== 'false';
 const SUBSCRIPTION_SOURCES = process.env.SUBSCRIPTION_SOURCES || process.env.NEXT_PUBLIC_SUBSCRIPTION_SOURCES || '';
 
 export async function GET() {
     return NextResponse.json({
-        hasEnvPassword: ACCESS_PASSWORD.length > 0,
-        hasEnvSettingsPassword: SETTINGS_PASSWORD.length > 0,
-        persistPassword: PERSIST_PASSWORD,
         subscriptionSources: SUBSCRIPTION_SOURCES,
     });
 }
-
-export async function POST(request: NextRequest) {
-    try {
-        const { password, type } = await request.json();
-
-        if (type === 'settings') {
-            if (!SETTINGS_PASSWORD) {
-                return NextResponse.json({ valid: false, message: 'No env settings password set' });
-            }
-            const valid = password === SETTINGS_PASSWORD;
-            return NextResponse.json({ valid });
-        }
-
-        if (!ACCESS_PASSWORD) {
-            return NextResponse.json({ valid: false, message: 'No env password set' });
-        }
-
-        const valid = password === ACCESS_PASSWORD;
-        return NextResponse.json({ valid });
-    } catch {
-        return NextResponse.json({ valid: false, message: 'Invalid request' }, { status: 400 });
-    }
-}

app/layout.tsx

@@ -95,7 +95,7 @@ export default function RootLayout({
         suppressHydrationWarning
       >
         <ThemeProvider>
-          <PasswordGate hasEnvPassword={!!process.env.ACCESS_PASSWORD}>
+          <PasswordGate hasAuth={!!(process.env.ADMIN_PASSWORD || process.env.ACCOUNTS || process.env.ACCESS_PASSWORD)}>
             <AdKeywordsWrapper />
             {children}
             <BackToTop />

app/premium/settings/page.tsx

@@ -4,7 +4,7 @@ import { AddSourceModal } from '@/components/settings/AddSourceModal';
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
 import { PremiumSourceSettings } from '@/components/settings/PremiumSourceSettings';
 import { SettingsHeader } from '@/components/settings/SettingsHeader';
-import { SettingsPasswordGate } from '@/components/SettingsPasswordGate';
+import { AdminGate } from '@/components/AdminGate';
 import { usePremiumSettingsPage } from './hooks/usePremiumSettingsPage';
 import Link from 'next/link';
 
@@ -24,7 +24,7 @@ export default function PremiumSettingsPage() {
     } = usePremiumSettingsPage();
 
     return (
-        <SettingsPasswordGate>
+        <AdminGate>
         <div className="min-h-screen bg-black">
             <div className="container mx-auto px-4 py-8 max-w-4xl space-y-8">
                 {/* Custom Header for Secret Settings */}
@@ -83,6 +83,6 @@ export default function PremiumSettingsPage() {
                 onCancel={() => setIsRestoreDefaultsDialogOpen(false)}
             />
         </div>
-        </SettingsPasswordGate>
+        </AdminGate>
     );
 }

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>
   );
 }
-