feat: implement account settings dialog for managing user passwords and binding Space accounts

web/src/app/home/components/account-settings-dialog/AccountSettingsDialog.tsx

@@ -0,0 +1,274 @@
+'use client';
+
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Loader2, ExternalLink } from 'lucide-react';
+
+interface AccountSettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function AccountSettingsDialog({
+  open,
+  onOpenChange,
+}: AccountSettingsDialogProps) {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [accountType, setAccountType] = useState<'local' | 'space'>('local');
+  const [hasPassword, setHasPassword] = useState(false);
+  const [userEmail, setUserEmail] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [spaceBindLoading, setSpaceBindLoading] = useState(false);
+
+  // Schema with optional currentPassword
+  const formSchema = z
+    .object({
+      currentPassword: z.string().optional(),
+      newPassword: z
+        .string()
+        .min(1, { message: t('common.newPasswordRequired') }),
+      confirmNewPassword: z
+        .string()
+        .min(1, { message: t('common.confirmPasswordRequired') }),
+    })
+    .refine((data) => data.newPassword === data.confirmNewPassword, {
+      message: t('common.passwordsDoNotMatch'),
+      path: ['confirmNewPassword'],
+    })
+    .refine(
+      (data) =>
+        !hasPassword ||
+        (data.currentPassword && data.currentPassword.length > 0),
+      {
+        message: t('common.currentPasswordRequired'),
+        path: ['currentPassword'],
+      },
+    );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmNewPassword: '',
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      loadUserInfo();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    form.reset({
+      currentPassword: '',
+      newPassword: '',
+      confirmNewPassword: '',
+    });
+  }, [hasPassword, form]);
+
+  async function loadUserInfo() {
+    setLoading(true);
+    try {
+      const info = await httpClient.getUserInfo();
+      setAccountType(info.account_type);
+      setHasPassword(info.has_password);
+      setUserEmail(info.user);
+    } catch {
+      toast.error(t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsSubmitting(true);
+    try {
+      await httpClient.setPassword(values.newPassword, values.currentPassword);
+      toast.success(t('account.passwordSetSuccess'));
+      form.reset();
+      setHasPassword(true);
+    } catch {
+      toast.error(t('common.changePasswordFailed'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBindSpace = async () => {
+    setSpaceBindLoading(true);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        toast.error(t('common.error'));
+        setSpaceBindLoading(false);
+        return;
+      }
+      const currentOrigin = window.location.origin;
+      const redirectUri = `${currentOrigin}/auth/space/callback?mode=bind`;
+      // Pass token as state for security verification
+      const response = await httpClient.getSpaceAuthorizeUrl(
+        redirectUri,
+        token,
+      );
+      window.location.href = response.authorize_url;
+    } catch {
+      toast.error(t('common.spaceLoginFailed'));
+      setSpaceBindLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('account.settings')}</DialogTitle>
+          <DialogDescription>{userEmail}</DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex justify-center py-8">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* Password Section */}
+            <div className="space-y-4">
+              <h4 className="text-sm font-medium">
+                {hasPassword
+                  ? t('common.changePassword')
+                  : t('account.setPassword')}
+              </h4>
+              {!hasPassword && (
+                <p className="text-sm text-muted-foreground">
+                  {t('account.setPasswordHint')}
+                </p>
+              )}
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="space-y-4"
+                >
+                  {hasPassword && (
+                    <FormField
+                      control={form.control}
+                      name="currentPassword"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('common.currentPassword')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="password"
+                              placeholder={t('common.enterCurrentPassword')}
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                  <FormField
+                    control={form.control}
+                    name="newPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('common.newPassword')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="password"
+                            placeholder={t('common.enterNewPassword')}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="confirmNewPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('common.confirmNewPassword')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="password"
+                            placeholder={t('common.enterConfirmPassword')}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full"
+                  >
+                    {isSubmitting ? t('common.saving') : t('common.save')}
+                  </Button>
+                </form>
+              </Form>
+            </div>
+
+            {/* Bind Space Account - only for local accounts */}
+            {accountType === 'local' && (
+              <>
+                <Separator />
+                <div className="space-y-4">
+                  <h4 className="text-sm font-medium">
+                    {t('account.bindSpace')}
+                  </h4>
+                  <p className="text-sm text-muted-foreground">
+                    {t('account.bindSpaceDescription')}
+                  </p>
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={handleBindSpace}
+                    disabled={spaceBindLoading}
+                  >
+                    {spaceBindLoading ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <ExternalLink className="mr-2 h-4 w-4" />
+                    )}
+                    {t('account.bindSpaceButton')}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -9,7 +9,7 @@ import {
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
-import { systemInfo } from '@/app/infra/http/HttpClient';
+import { systemInfo, httpClient } from '@/app/infra/http/HttpClient';
 import { getCloudServiceClientSync } from '@/app/infra/http';
 import { useTranslation } from 'react-i18next';
 import {
@@ -18,9 +18,9 @@ import {
   Monitor,
   CircleHelp,
   Lightbulb,
-  Lock,
   LogOut,
   KeyRound,
+  User,
 } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
@@ -33,7 +33,7 @@ import { Button } from '@/components/ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { LanguageSelector } from '@/components/ui/language-selector';
 import { Badge } from '@/components/ui/badge';
-import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
+import AccountSettingsDialog from '@/app/home/components/account-settings-dialog/AccountSettingsDialog';
 import ApiIntegrationDialog from '@/app/home/components/api-integration-dialog/ApiIntegrationDialog';
 import NewVersionDialog from '@/app/home/components/new-version-dialog/NewVersionDialog';
 import ModelsDialog from '@/app/home/components/models-dialog/ModelsDialog';
@@ -85,7 +85,7 @@ export default function HomeSidebar({
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const [passwordChangeOpen, setPasswordChangeOpen] = useState(false);
+  const [accountSettingsOpen, setAccountSettingsOpen] = useState(false);
   const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
   const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
   const [starCount, setStarCount] = useState<number | null>(null);
@@ -95,6 +95,7 @@ export default function HomeSidebar({
   const [hasNewVersion, setHasNewVersion] = useState(false);
   const [versionDialogOpen, setVersionDialogOpen] = useState(false);
   const [modelsDialogOpen, setModelsDialogOpen] = useState(false);
+  const [userEmail, setUserEmail] = useState<string>('');
 
   // 处理模型对话框的打开和关闭，同时更新 URL
   function handleModelsDialogChange(open: boolean) {
@@ -120,6 +121,21 @@ export default function HomeSidebar({
       localStorage.setItem('userEmail', 'test@example.com');
     }
 
+    // Load user email
+    const storedEmail = localStorage.getItem('userEmail');
+    if (storedEmail) {
+      setUserEmail(storedEmail);
+    } else {
+      // Fetch from API if not in localStorage
+      httpClient
+        .getUserInfo()
+        .then((info) => {
+          setUserEmail(info.user);
+          localStorage.setItem('userEmail', info.user);
+        })
+        .catch(() => {});
+    }
+
     getCloudServiceClientSync()
       .get('/api/v1/dist/info/repo')
       .then((response) => {
@@ -374,6 +390,20 @@ export default function HomeSidebar({
 
             <div className="flex flex-col gap-2 w-full">
               <span className="text-sm font-medium">{t('common.account')}</span>
+              {/* User email display */}
+              <Button
+                variant="ghost"
+                className="w-full justify-start font-normal"
+                onClick={() => {
+                  setAccountSettingsOpen(true);
+                  setPopoverOpen(false);
+                }}
+              >
+                <User className="w-4 h-4 mr-2" />
+                <span className="truncate max-w-[180px]">
+                  {userEmail || t('account.settings')}
+                </span>
+              </Button>
               <Button
                 variant="ghost"
                 className="w-full justify-start font-normal"
@@ -416,19 +446,6 @@ export default function HomeSidebar({
                 <Lightbulb className="w-4 h-4 mr-2" />
                 {t('common.featureRequest')}
               </Button>
-              {systemInfo?.allow_change_password && (
-                <Button
-                  variant="ghost"
-                  className="w-full justify-start font-normal"
-                  onClick={() => {
-                    setPasswordChangeOpen(true);
-                    setPopoverOpen(false);
-                  }}
-                >
-                  <Lock className="w-4 h-4 mr-2" />
-                  {t('common.changePassword')}
-                </Button>
-              )}
               <Button
                 variant="ghost"
                 className="w-full justify-start font-normal"
@@ -443,9 +460,9 @@ export default function HomeSidebar({
           </PopoverContent>
         </Popover>
       </div>
-      <PasswordChangeDialog
-        open={passwordChangeOpen}
-        onOpenChange={setPasswordChangeOpen}
+      <AccountSettingsDialog
+        open={accountSettingsOpen}
+        onOpenChange={setAccountSettingsOpen}
       />
       <ApiIntegrationDialog
         open={apiKeyDialogOpen}