Add username and password configuration to settings UI

knowsuchagency · knowsuchagency · commit bf0a08305e6d · 2025-12-24T04:06:38.000Z
Enable basic authentication credentials to be configured directly from
the settings page, removing the need to edit settings.json manually.
diff --git a/server/routes/config.ts b/server/routes/config.ts
@@ -26,6 +26,8 @@ export const CONFIG_KEYS = {
   LINEAR_API_KEY: 'linearApiKey',
   GITHUB_PAT: 'githubPat',
   LANGUAGE: 'language',
+  BASIC_AUTH_USERNAME: 'basicAuthUsername',
+  BASIC_AUTH_PASSWORD: 'basicAuthPassword',
 } as const
 
 const app = new Hono()
@@ -187,6 +189,11 @@ app.get('/:key', (c) => {
     value = settings.githubPat
   } else if (key === 'language' || key === CONFIG_KEYS.LANGUAGE) {
     return c.json({ key, value: settings.language, isDefault: settings.language === null })
+  } else if (key === 'basic_auth_username' || key === CONFIG_KEYS.BASIC_AUTH_USERNAME) {
+    return c.json({ key, value: settings.basicAuthUsername, isDefault: settings.basicAuthUsername === null })
+  } else if (key === 'basic_auth_password' || key === CONFIG_KEYS.BASIC_AUTH_PASSWORD) {
+    // For security, don't return the actual password value, just whether it's set
+    return c.json({ key, value: settings.basicAuthPassword ? '••••••••' : null, isDefault: settings.basicAuthPassword === null })
   } else if (key === 'worktree_base_path') {
     // Read-only: derived from VIBORA_DIR
     return c.json({ key, value: getWorktreeBasePath(), isDefault: true })
@@ -252,6 +259,19 @@ app.put('/:key', async (c) => {
       }
       updateSettings({ language: langValue as 'en' | 'zh' | null })
       return c.json({ key, value: langValue })
+    } else if (key === 'basic_auth_username' || key === CONFIG_KEYS.BASIC_AUTH_USERNAME) {
+      if (typeof body.value !== 'string') {
+        return c.json({ error: 'Value must be a string' }, 400)
+      }
+      updateSettings({ basicAuthUsername: body.value || null })
+      return c.json({ key, value: body.value })
+    } else if (key === 'basic_auth_password' || key === CONFIG_KEYS.BASIC_AUTH_PASSWORD) {
+      if (typeof body.value !== 'string') {
+        return c.json({ error: 'Value must be a string' }, 400)
+      }
+      updateSettings({ basicAuthPassword: body.value || null })
+      // Don't return the actual password
+      return c.json({ key, value: body.value ? '••••••••' : null })
     } else {
       return c.json({ error: `Unknown or read-only config key: ${key}` }, 400)
     }
@@ -282,6 +302,10 @@ app.delete('/:key', (c) => {
     defaultValue = defaults.githubPat
   } else if (key === 'language' || key === CONFIG_KEYS.LANGUAGE) {
     defaultValue = defaults.language
+  } else if (key === 'basic_auth_username' || key === CONFIG_KEYS.BASIC_AUTH_USERNAME) {
+    defaultValue = defaults.basicAuthUsername
+  } else if (key === 'basic_auth_password' || key === CONFIG_KEYS.BASIC_AUTH_PASSWORD) {
+    defaultValue = defaults.basicAuthPassword
   }
 
   return c.json({ key, value: defaultValue, isDefault: true })
diff --git a/src/hooks/use-config.ts b/src/hooks/use-config.ts
@@ -20,6 +20,8 @@ export const CONFIG_KEYS = {
   LINEAR_API_KEY: 'linear_api_key',
   GITHUB_PAT: 'github_pat',
   LANGUAGE: 'language',
+  BASIC_AUTH_USERNAME: 'basic_auth_username',
+  BASIC_AUTH_PASSWORD: 'basic_auth_password',
 } as const
 
 // Default values (client-side fallbacks)
@@ -115,6 +117,27 @@ export function useLanguage() {
   }
 }
 
+export function useBasicAuthUsername() {
+  const query = useConfig(CONFIG_KEYS.BASIC_AUTH_USERNAME)
+
+  return {
+    ...query,
+    data: (query.data?.value as string) ?? '',
+    isDefault: query.data?.isDefault ?? true,
+  }
+}
+
+export function useBasicAuthPassword() {
+  const query = useConfig(CONFIG_KEYS.BASIC_AUTH_PASSWORD)
+
+  return {
+    ...query,
+    // Password is masked on the server, so we just check if it's set
+    data: (query.data?.value as string) ?? '',
+    isDefault: query.data?.isDefault ?? true,
+  }
+}
+
 export function useUpdateConfig() {
   const queryClient = useQueryClient()
 
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
@@ -3,6 +3,7 @@
   "sections": {
     "serverDefaults": "Server & Defaults",
     "paths": "Paths",
+    "authentication": "Authentication",
     "remoteAccess": "Remote Access",
     "integrations": "Integrations",
     "zai": "z.ai",
@@ -40,6 +41,14 @@
       "label": "GitHub",
       "description": "PAT for Issues & PRs"
     },
+    "auth": {
+      "username": "Username",
+      "password": "Password",
+      "usernamePlaceholder": "Leave empty to disable",
+      "passwordPlaceholder": "Leave empty to disable",
+      "passwordSet": "Enter new password to change",
+      "description": "Set both username and password to enable basic authentication. Leave empty to disable."
+    },
     "zai": {
       "enable": "Enable",
       "apiKey": "API Key",
diff --git a/src/i18n/locales/zh/settings.json b/src/i18n/locales/zh/settings.json
@@ -3,6 +3,7 @@
   "sections": {
     "serverDefaults": "服务器与默认设置",
     "paths": "路径",
+    "authentication": "身份验证",
     "remoteAccess": "远程访问",
     "integrations": "集成",
     "zai": "z.ai",
@@ -40,6 +41,14 @@
       "label": "GitHub",
       "description": "用于 Issues 和 PR 的个人访问令牌"
     },
+    "auth": {
+      "username": "用户名",
+      "password": "密码",
+      "usernamePlaceholder": "留空以禁用",
+      "passwordPlaceholder": "留空以禁用",
+      "passwordSet": "输入新密码以更改",
+      "description": "同时设置用户名和密码以启用基本身份验证。留空以禁用。"
+    },
     "zai": {
       "enable": "启用",
       "apiKey": "API 密钥",
diff --git a/src/routes/settings/index.tsx b/src/routes/settings/index.tsx
@@ -22,6 +22,8 @@ import {
   useSshPort,
   useLinearApiKey,
   useGitHubPat,
+  useBasicAuthUsername,
+  useBasicAuthPassword,
   useUpdateConfig,
   useResetConfig,
   useNotificationSettings,
@@ -59,6 +61,8 @@ function SettingsPage() {
   const { data: sshPort, isLoading: sshPortLoading } = useSshPort()
   const { data: linearApiKey, isLoading: linearApiKeyLoading } = useLinearApiKey()
   const { data: githubPat, isLoading: githubPatLoading } = useGitHubPat()
+  const { data: basicAuthUsername, isLoading: basicAuthUsernameLoading } = useBasicAuthUsername()
+  const { data: basicAuthPassword, isLoading: basicAuthPasswordLoading } = useBasicAuthPassword()
   const { data: notificationSettings, isLoading: notificationsLoading } = useNotificationSettings()
   const { data: zAiSettings, isLoading: zAiLoading } = useZAiSettings()
   const { data: developerMode } = useDeveloperMode()
@@ -76,6 +80,8 @@ function SettingsPage() {
   const [localSshPort, setLocalSshPort] = useState('')
   const [localLinearApiKey, setLocalLinearApiKey] = useState('')
   const [localGitHubPat, setLocalGitHubPat] = useState('')
+  const [localBasicAuthUsername, setLocalBasicAuthUsername] = useState('')
+  const [localBasicAuthPassword, setLocalBasicAuthPassword] = useState('')
   const [reposDirBrowserOpen, setReposDirBrowserOpen] = useState(false)
   const [saved, setSaved] = useState(false)
 
@@ -108,7 +114,10 @@ function SettingsPage() {
     if (sshPort !== undefined) setLocalSshPort(String(sshPort))
     if (linearApiKey !== undefined) setLocalLinearApiKey(linearApiKey)
     if (githubPat !== undefined) setLocalGitHubPat(githubPat)
-  }, [port, defaultGitReposDir, hostname, sshPort, linearApiKey, githubPat])
+    // For username, sync directly. For password, the server returns masked value - only update if empty (not yet loaded)
+    if (basicAuthUsername !== undefined) setLocalBasicAuthUsername(basicAuthUsername)
+    // Don't sync password from server since it's masked - user must re-enter to change
+  }, [port, defaultGitReposDir, hostname, sshPort, linearApiKey, githubPat, basicAuthUsername])
 
   // Sync notification settings
   useEffect(() => {
@@ -137,7 +146,7 @@ function SettingsPage() {
   }, [zAiSettings])
 
   const isLoading =
-    portLoading || reposDirLoading || hostnameLoading || sshPortLoading || linearApiKeyLoading || githubPatLoading || notificationsLoading || zAiLoading
+    portLoading || reposDirLoading || hostnameLoading || sshPortLoading || linearApiKeyLoading || githubPatLoading || basicAuthUsernameLoading || basicAuthPasswordLoading || notificationsLoading || zAiLoading
 
   const hasZAiChanges = zAiSettings && (
     zAiEnabled !== zAiSettings.enabled ||
@@ -159,13 +168,19 @@ function SettingsPage() {
     pushoverUserKey !== (notificationSettings.pushover?.userKey ?? '')
   )
 
+  // Auth has changes if username differs OR password is non-empty (user wants to update it)
+  const hasAuthChanges =
+    localBasicAuthUsername !== basicAuthUsername ||
+    localBasicAuthPassword !== ''
+
   const hasChanges =
     localPort !== String(port) ||
     localReposDir !== defaultGitReposDir ||
     localHostname !== hostname ||
     localSshPort !== String(sshPort) ||
     localLinearApiKey !== linearApiKey ||
     localGitHubPat !== githubPat ||
+    hasAuthChanges ||
     hasNotificationChanges ||
     hasZAiChanges
 
@@ -241,6 +256,31 @@ function SettingsPage() {
       )
     }
 
+    // Save auth settings
+    if (localBasicAuthUsername !== basicAuthUsername) {
+      promises.push(
+        new Promise((resolve) => {
+          updateConfig.mutate(
+            { key: CONFIG_KEYS.BASIC_AUTH_USERNAME, value: localBasicAuthUsername },
+            { onSettled: resolve }
+          )
+        })
+      )
+    }
+
+    if (localBasicAuthPassword !== '') {
+      promises.push(
+        new Promise((resolve) => {
+          updateConfig.mutate(
+            { key: CONFIG_KEYS.BASIC_AUTH_PASSWORD, value: localBasicAuthPassword },
+            { onSettled: resolve }
+          )
+        })
+      )
+      // Clear local password after saving
+      setLocalBasicAuthPassword('')
+    }
+
     // Save notification settings
     if (hasNotificationChanges) {
       promises.push(
@@ -332,6 +372,22 @@ function SettingsPage() {
     })
   }
 
+  const handleResetBasicAuthUsername = () => {
+    resetConfig.mutate(CONFIG_KEYS.BASIC_AUTH_USERNAME, {
+      onSuccess: (data) => {
+        setLocalBasicAuthUsername(data.value !== null && data.value !== undefined ? String(data.value) : '')
+      },
+    })
+  }
+
+  const handleResetBasicAuthPassword = () => {
+    resetConfig.mutate(CONFIG_KEYS.BASIC_AUTH_PASSWORD, {
+      onSuccess: () => {
+        setLocalBasicAuthPassword('')
+      },
+    })
+  }
+
   const handleTestChannel = async (channel: 'sound' | 'slack' | 'discord' | 'pushover') => {
     testChannel.mutate(channel, {
       onSuccess: (result) => {
@@ -432,6 +488,72 @@ function SettingsPage() {
                 </div>
               </SettingsSection>
 
+              {/* Authentication */}
+              <SettingsSection title={t('sections.authentication')}>
+                <div className="space-y-4">
+                  {/* Username */}
+                  <div className="space-y-1">
+                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                      <label className="text-sm text-muted-foreground sm:w-32 sm:shrink-0">
+                        {t('fields.auth.username')}
+                      </label>
+                      <div className="flex flex-1 items-center gap-2">
+                        <Input
+                          value={localBasicAuthUsername}
+                          onChange={(e) => setLocalBasicAuthUsername(e.target.value)}
+                          placeholder={t('fields.auth.usernamePlaceholder')}
+                          disabled={isLoading}
+                          className="flex-1 font-mono text-sm"
+                        />
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                          onClick={handleResetBasicAuthUsername}
+                          disabled={isLoading || resetConfig.isPending}
+                          title={tc('buttons.reset')}
+                        >
+                          <HugeiconsIcon icon={RotateLeft01Icon} size={14} strokeWidth={2} />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Password */}
+                  <div className="space-y-1">
+                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                      <label className="text-sm text-muted-foreground sm:w-32 sm:shrink-0">
+                        {t('fields.auth.password')}
+                      </label>
+                      <div className="flex flex-1 items-center gap-2">
+                        <Input
+                          type="password"
+                          value={localBasicAuthPassword}
+                          onChange={(e) => setLocalBasicAuthPassword(e.target.value)}
+                          placeholder={basicAuthPassword ? t('fields.auth.passwordSet') : t('fields.auth.passwordPlaceholder')}
+                          disabled={isLoading}
+                          className="flex-1 font-mono text-sm"
+                        />
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                          onClick={handleResetBasicAuthPassword}
+                          disabled={isLoading || resetConfig.isPending}
+                          title={tc('buttons.reset')}
+                        >
+                          <HugeiconsIcon icon={RotateLeft01Icon} size={14} strokeWidth={2} />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <p className="text-xs text-muted-foreground">
+                    {t('fields.auth.description')}
+                  </p>
+                </div>
+              </SettingsSection>
+
               {/* Remote Access + Integrations side by side */}
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 {/* Remote Access */}
