feat(admin/users): add new user and change user password done

i18n/en_US.yaml

@@ -705,7 +705,7 @@ ui:
     update: update success
     update_password: Password changed successfully.
     flag_success: Thanks for flagging.
-    fobidden_operate_self: Forbidden to operate on yourself
+    forbidden_operate_self: Forbidden to operate on yourself
     review: Your revision will show after review.
   related_question:
     title: Related Questions

ui/src/hooks/useChangePasswordModal/index.tsx

@@ -21,18 +21,19 @@ const useChangePasswordModal = (props: IProps = {}) => {
 
   const { title = t('title'), onConfirm } = props;
   const [visible, setVisibleState] = useState(false);
+  const [userId, setUserId] = useState('');
   const schema: JSONSchema = {
     title: t('title'),
     required: ['password'],
     properties: {
-      new_password: {
+      password: {
         type: 'string',
         title: t('form.fields.password.label'),
       },
     },
   };
   const uiSchema: UISchema = {
-    new_password: {
+    password: {
       'ui:options': {
         type: 'password',
       },
@@ -50,7 +51,8 @@ const useChangePasswordModal = (props: IProps = {}) => {
     setVisibleState(false);
   };
 
-  const onShow = () => {
+  const onShow = (user_id: string) => {
+    setUserId(user_id);
     setVisibleState(true);
   };
 
@@ -65,27 +67,17 @@ const useChangePasswordModal = (props: IProps = {}) => {
 
     if (onConfirm instanceof Function) {
       onConfirm({
-        slug_name: formData.slugName.value,
-        display_name: formData.displayName.value,
-        original_text: formData.description.value,
+        password: formData.password.value,
+        user_id: userId,
       });
       setFormData({
-        displayName: {
-          value: '',
-          isInvalid: false,
-          errorMsg: '',
-        },
-        slugName: {
-          value: '',
-          isInvalid: false,
-          errorMsg: '',
-        },
-        description: {
+        password: {
           value: '',
           isInvalid: false,
           errorMsg: '',
         },
       });
+      setUserId('');
     }
     onClose();
   };

ui/src/hooks/useUserModal/index.tsx

@@ -85,22 +85,22 @@ const useAddUserModal = (props: IProps = {}) => {
 
     if (onConfirm instanceof Function) {
       onConfirm({
-        slug_name: formData.slugName.value,
-        display_name: formData.displayName.value,
-        original_text: formData.description.value,
+        display_name: formData.display_name.value,
+        email: formData.email.value,
+        password: formData.password.value,
       });
       setFormData({
-        displayName: {
+        display_name: {
           value: '',
           isInvalid: false,
           errorMsg: '',
         },
-        slugName: {
+        email: {
           value: '',
           isInvalid: false,
           errorMsg: '',
         },
-        description: {
+        password: {
           value: '',
           isInvalid: false,
           errorMsg: '',

ui/src/pages/Admin/Users/index.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Form, Table, Dropdown, Button } from 'react-bootstrap';
+import { Form, Table, Dropdown, Button, Stack } from 'react-bootstrap';
 import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -21,7 +21,7 @@ import {
   useChangePasswordModal,
   useToast,
 } from '@/hooks';
-import { useQueryUsers } from '@/services';
+import { useQueryUsers, addUser, updateUserPassword } from '@/services';
 import { loggedUserInfoStore } from '@/stores';
 import { formatCount } from '@/utils';
 
@@ -50,8 +50,6 @@ const Users: FC = () => {
   const curQuery = urlSearchParams.get('query') || '';
   const currentUser = loggedUserInfoStore((state) => state.user);
   const Toast = useToast();
-  const userModal = useUserModal();
-  const changePasswordModal = useChangePasswordModal();
   const {
     data,
     isLoading,
@@ -74,11 +72,31 @@ const Users: FC = () => {
     callback: refreshUsers,
   });
 
+  const userModal = useUserModal({
+    onConfirm: (userModel) => {
+      addUser(userModel).then(() => {
+        if (/all|staff/.test(curFilter) && curPage === 1) {
+          refreshUsers();
+        }
+      });
+    },
+  });
+  const changePasswordModal = useChangePasswordModal({
+    onConfirm: (rd) => {
+      updateUserPassword(rd).then(() => {
+        Toast.onShow({
+          msg: t('update_password', { keyPrefix: 'toast' }),
+          variant: 'success',
+        });
+      });
+    },
+  });
+
   const handleAction = (type, user) => {
     const { user_id, status, role_id, username } = user;
     if (username === currentUser.username) {
       Toast.onShow({
-        msg: t('fobidden_operate_self', { keyPrefix: 'toast' }),
+        msg: t('forbidden_operate_self', { keyPrefix: 'toast' }),
         variant: 'warning',
       });
       return;
@@ -96,6 +114,9 @@ const Users: FC = () => {
         role_id,
       });
     }
+    if (type === 'password') {
+      changePasswordModal.onShow(user_id);
+    }
   };
 
   const handleFilter = (e) => {
@@ -107,21 +128,20 @@ const Users: FC = () => {
     <>
       <h3 className="mb-4">{t('title')}</h3>
       <div className="d-flex justify-content-between align-items-center mb-3">
-        <div>
-          <Button
-            className="me-3"
-            variant="outline-primary"
-            size="sm"
-            onClick={() => userModal.onShow()}>
-            {t('add_user')}
-          </Button>
+        <Stack direction="horizontal" gap={3}>
           <QueryGroup
             data={UserFilterKeys}
             currentSort={curFilter}
             sortKey="filter"
             i18nKeyPrefix="admin.users"
           />
-        </div>
+          <Button
+            variant="outline-primary"
+            size="sm"
+            onClick={() => userModal.onShow()}>
+            {t('add_user')}
+          </Button>
+        </Stack>
 
         <Form.Control
           size="sm"
@@ -206,7 +226,7 @@ const Users: FC = () => {
                       </Dropdown.Toggle>
                       <Dropdown.Menu>
                         <Dropdown.Item
-                          onClick={() => changePasswordModal.onShow()}>
+                          onClick={() => handleAction('password', user)}>
                           {t('set_new_password')}
                         </Dropdown.Item>
                         <Dropdown.Item

ui/src/services/admin/users.ts

@@ -29,3 +29,18 @@ export const getUserRoles = () => {
 export const changeUserRole = (params) => {
   return request.put('/answer/admin/api/user/role', params);
 };
+
+export const addUser = (params: {
+  display_name: string;
+  email: string;
+  password: string;
+}) => {
+  return request.post('/answer/admin/api/user', params);
+};
+
+export const updateUserPassword = (params: {
+  password: string;
+  user_id: string;
+}) => {
+  return request.put('/answer/admin/api/user/password', params);
+};