api/api/endpoints/account.py

@@ -80,7 +80,7 @@ async def create_account(
         )
 
 
-@api_router.put("/{user_id}", dependencies=[Depends(bearer_schema)], response_model=User)
+@api_router.put("/{user_id}", dependencies=[Depends(bearer_schema)], response_model=UserUpdate)
 async def update_account(
     user_id: int,
     user_update: UserUpdate,
@@ -98,7 +98,7 @@ async def update_account(
     if update_values is None:
         return user
 
-    user_update_data = User.model_validate({**user.model_dump(), **update_values})
+    user_update_data = UserUpdate.model_validate({**user.model_dump(), **update_values})
 
     await update_user_by_id(connection, update_values, user)
 

client/src/api/api.ts

@@ -3,7 +3,7 @@ import axiosRetry from 'axios-retry';
 import { Auth, Tokens } from '@/types/auth';
 import { useAuthStore } from '@/store/authStore';
 import { AuthService } from '@/services/authService';
-import { User, UserCreate } from '@/types/user';
+import { User, UserCreate, UserUpdate } from '@/types/user';
 
 const baseURL = `${import.meta.env.VITE_APP_HTTP_PROTOCOL}://${
   import.meta.env.VITE_APP_API_URL
@@ -119,8 +119,12 @@ const api = {
     return response.data;
   },
 
+  async updateUser(userId: number, user: UserUpdate): Promise<User> {
+    const response = await base.put<User>(`/account/${userId}`, user);
+    return response.data;
+  },
+
   // keyrings
-  async setPassword(userId: number, password: string): Promise<any> {},
 };
 
 export default api;

client/src/components/UserEdit.tsx

@@ -1,7 +1,8 @@
 import { UserService } from '@/services/userService';
 import { useUserSelector } from '@/store/userStore';
-import { User } from '@/types/user';
+import { User, UserUpdate } from '@/types/user';
-import { Button, Form, Input, Select } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Select, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +16,18 @@ export default function UserEdit({ userId }: UserEditProps) {
   const currentUser = useUserSelector();
   const [form] = Form.useForm();
   const { t } = useTranslation();
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<User>({
+    id: 0,
+    name: '',
+    login: '',
+    email: '',
+    bindTenantId: '',
+    role: 'VIEWER',
+    meta: {},
+    createdAt: '',
+    status: 'ACTIVE',
+  });
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     async function getUser() {
@@ -30,13 +42,30 @@ export default function UserEdit({ userId }: UserEditProps) {
     getUser();
   }, []);
 
+  const onFinish = async (values: UserUpdate) => {
+    setLoading(true);
+    let updatedUser: Partial<UserUpdate> = {};
+
+    (Object.keys(values) as Array<keyof UserUpdate>).forEach((key) => {
+      if (values[key] !== user[key]) {
+        updatedUser = { ...updatedUser, [key]: values[key] };
+      }
+    });
+
+    if (Object.keys(updatedUser).length > 0) {
+      await UserService.updateUser(userId!, updatedUser);
+    }
+
+    setLoading(false);
+  };
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <Form
         form={form}
         name="user-edit-form"
         layout="vertical"
-        // onFinish={onFinish}
+        onFinish={onFinish}
         initialValues={{ ...user }}
         style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
       >
@@ -123,12 +152,21 @@ export default function UserEdit({ userId }: UserEditProps) {
             block
             style={{ color: '#000' }}
           >
-            <img
+            {loading ? (
-              src="/icons/drawer/save.svg"
+              <>
-              alt="save"
+                <Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{' '}
-              style={{ height: '18px', width: '18px' }}
+                {t('saving')}
-            />{' '}
+              </>
-            {t('save')}
+            ) : (
+              <>
+                <img
+                  src="/icons/drawer/save.svg"
+                  alt="save"
+                  style={{ height: '18px', width: '18px' }}
+                />{' '}
+                {t('save')}
+              </>
+            )}
           </Button>
         </Form.Item>
       </Form>

client/src/services/userService.ts

@@ -1,5 +1,5 @@
 import api from '@/api/api';
-import { AllUserResponse, User, UserCreate } from '@/types/user';
+import { AllUserResponse, User, UserCreate, UserUpdate } from '@/types/user';
 
 export class UserService {
   static async getProfile(): Promise<User> {
@@ -29,4 +29,10 @@ export class UserService {
     const createdUser = api.createUser(user);
     return createdUser;
   }
+
+  static async updateUser(userId: number, user: UserUpdate): Promise<User> {
+    console.log('updateUser');
+    const updatedUser = api.updateUser(userId, user);
+    return updatedUser;
+  }
 }