From 763e0b75ae94e303b2e00023ecfc3496af85bdd1 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Sun, 21 Dec 2025 21:35:36 +0800
Subject: [PATCH] feat: Add global password display from environment variables
 and improve cursor styles for interactive elements.

---
 app/settings/hooks/useSettingsPage.ts    |  5 +++++
 app/settings/page.tsx                    |  2 ++
 app/styles/base.css                      | 16 ++++++++++++++++
 components/settings/PasswordSettings.tsx | 15 ++++++++++++++-
 package-lock.json                        |  4 ++--
 package.json                             |  2 +-
 6 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/app/settings/hooks/useSettingsPage.ts b/app/settings/hooks/useSettingsPage.ts
index 333bc47..9a9ef92 100644
--- a/app/settings/hooks/useSettingsPage.ts
+++ b/app/settings/hooks/useSettingsPage.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { settingsStore, getDefaultSources, type SortOption } from '@/lib/store/settings-store';
 import type { VideoSource } from '@/lib/types';
+import { isEnvPasswordRequired } from '@/lib/actions/auth';
 
 export function useSettingsPage() {
     const [sources, setSources] = useState<VideoSource[]>([]);
@@ -14,6 +15,7 @@ export function useSettingsPage() {
 
     const [passwordAccess, setPasswordAccess] = useState(false);
     const [accessPasswords, setAccessPasswords] = useState<string[]>([]);
+    const [envPasswordSet, setEnvPasswordSet] = useState(false);
 
     useEffect(() => {
         const settings = settingsStore.getSettings();
@@ -21,6 +23,8 @@ export function useSettingsPage() {
         setSortBy(settings.sortBy);
         setPasswordAccess(settings.passwordAccess);
         setAccessPasswords(settings.accessPasswords);
+
+        isEnvPasswordRequired().then(setEnvPasswordSet);
     }, []);
 
     const handleSourcesChange = (newSources: VideoSource[]) => {
@@ -162,5 +166,6 @@ export function useSettingsPage() {
         handleResetAll,
         editingSource,
         handleEditSource,
+        envPasswordSet,
     };
 }
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index a1b9360..923b90b 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -41,6 +41,7 @@ export default function SettingsPage() {
     editingSource,
     handleEditSource,
     setEditingSource,
+    envPasswordSet,
   } = useSettingsPage();
 
   return (
@@ -56,6 +57,7 @@ export default function SettingsPage() {
           onToggle={handlePasswordToggle}
           onAdd={handleAddPassword}
           onRemove={handleRemovePassword}
+          envPasswordSet={envPasswordSet}
         />
 
         {/* Source Management */}
diff --git a/app/styles/base.css b/app/styles/base.css
index d3ba92f..12efe4c 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -11,6 +11,22 @@ html {
     scroll-behavior: auto;
 }
 
+/* Accessibility & UX */
+button,
+label,
+a,
+select,
+summary,
+[role="button"],
+.clickable {
+    cursor: pointer;
+}
+
+button:disabled,
+[role="button"]:disabled {
+    cursor: not-allowed;
+}
+
 /* Focus Styles */
 *:focus-visible {
     outline: 2px solid var(--accent-color);
diff --git a/components/settings/PasswordSettings.tsx b/components/settings/PasswordSettings.tsx
index fe2c5ff..701a81e 100644
--- a/components/settings/PasswordSettings.tsx
+++ b/components/settings/PasswordSettings.tsx
@@ -10,6 +10,7 @@ interface PasswordSettingsProps {
     onToggle: (enabled: boolean) => void;
     onAdd: (password: string) => void;
     onRemove: (password: string) => void;
+    envPasswordSet?: boolean;
 }
 
 export function PasswordSettings({
@@ -18,6 +19,7 @@ export function PasswordSettings({
     onToggle,
     onAdd,
     onRemove,
+    envPasswordSet,
 }: PasswordSettingsProps) {
     const [newPassword, setNewPassword] = useState('');
     const [error, setError] = useState('');
@@ -67,6 +69,17 @@ export function PasswordSettings({
                             )}
 
                             <div className="flex flex-wrap gap-2">
+                                {envPasswordSet && (
+                                    <div
+                                        className="flex items-center gap-2 px-3 py-1.5 bg-[var(--accent-color)]/10 border border-[var(--accent-color)]/30 rounded-[var(--radius-full)] text-sm shadow-[0_2px_4px_rgba(0,0,0,0.05)]"
+                                        title="这是通过环境变量设置的全局密码，不可在此删除。"
+                                    >
+                                        <span className="w-2 h-2 rounded-full bg-[var(--accent-color)] animate-pulse"></span>
+                                        <span className="font-semibold text-[var(--accent-color)]">全局密码</span>
+                                        <span className="font-mono">{showPassword ? 'ACCESS_PASSWORD' : '••••••'}</span>
+                                        <span className="text-[var(--text-color-secondary)] text-xs opacity-60">不可在此删除</span>
+                                    </div>
+                                )}
                                 {passwords.map((pwd, index) => (
                                     <div
                                         key={index}
@@ -76,7 +89,7 @@ export function PasswordSettings({
                                         <button
                                             onClick={() => onRemove(pwd)}
                                             className="text-[var(--text-color-secondary)] hover:text-red-500 transition-colors"
-                                            title="删除密码"
+                                            title="删除本地密码"
                                         >
                                             <Trash2 size={14} />
                                         </button>
diff --git a/package-lock.json b/package-lock.json
index a204738..a515bac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kvideo",
-  "version": "2.1.0",
+  "version": "2.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "2.1.0",
+      "version": "2.5.0",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
diff --git a/package.json b/package.json
index b0c70d2..8ff34e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "2.1.0",
+  "version": "2.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",