feat: add users in batches

i18n/en_US.yaml

@@ -1428,6 +1428,10 @@ ui:
       title: Add new user
       form:
         fields:
+          users:
+            label: Bulk add user
+            text: Separate “name, email, password” with commas. One user per line.
+            msg: "Please enter the user's email, one per line."
           display_name:
             label: Display Name
             msg: Display Name must be at 4-30 characters in length.

ui/src/hooks/useUserModal/index.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 
 import ReactDOM from 'react-dom/client';
 
-import pattern from '@/common/pattern';
 import type * as Type from '@/common/interface';
 import { SchemaForm, JSONSchema, UISchema, initFormData } from '@/components';
 import { handleFormError } from '@/utils';
@@ -25,58 +24,20 @@ const useAddUserModal = (props: IProps = {}) => {
   const [visible, setVisibleState] = useState(false);
   const schema: JSONSchema = {
     title: t('title'),
-    required: ['display_name', 'email', 'password'],
+    required: ['users'],
     properties: {
-      display_name: {
+      users: {
         type: 'string',
-        title: t('form.fields.display_name.label'),
+        title: t('form.fields.users.label'),
-      },
+        description: t('form.fields.users.text'),
-      email: {
-        type: 'string',
-        title: t('form.fields.email.label'),
-      },
-      password: {
-        type: 'string',
-        title: t('form.fields.password.label'),
       },
     },
   };
   const uiSchema: UISchema = {
-    display_name: {
+    users: {
+      'ui:widget': 'textarea',
       'ui:options': {
-        validator: (value) => {
+        rows: 6,
-          const MIN_LENGTH = 4;
-          const MAX_LENGTH = 30;
-
-          if (value.length < MIN_LENGTH || value.length > MAX_LENGTH) {
-            return t('form.fields.display_name.msg');
-          }
-          return true;
-        },
-      },
-    },
-    email: {
-      'ui:options': {
-        inputType: 'email',
-        validator: (value) => {
-          if (value && !pattern.email.test(value)) {
-            return t('form.fields.email.msg');
-          }
-          return true;
-        },
-      },
-    },
-    password: {
-      'ui:options': {
-        inputType: 'password',
-        validator: (value) => {
-          const MIN_LENGTH = 8;
-          const MAX_LENGTH = 32;
-          if (value.length < MIN_LENGTH || value.length > MAX_LENGTH) {
-            return t('form.fields.password.msg');
-          }
-          return true;
-        },
       },
     },
   };
@@ -107,23 +68,11 @@ const useAddUserModal = (props: IProps = {}) => {
 
     if (onConfirm instanceof Function) {
       onConfirm({
-        display_name: formData.display_name.value,
+        users: formData.users.value,
-        email: formData.email.value,
-        password: formData.password.value,
       })
         .then(() => {
           setFormData({
-            display_name: {
+            users: {
-              value: '',
-              isInvalid: false,
-              errorMsg: '',
-            },
-            email: {
-              value: '',
-              isInvalid: false,
-              errorMsg: '',
-            },
-            password: {
               value: '',
               isInvalid: false,
               errorMsg: '',

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

@@ -24,7 +24,7 @@ import {
 } from '@/hooks';
 import {
   useQueryUsers,
-  addUser,
+  addUsers,
   updateUserPassword,
   getAdminUcAgent,
   AdminUcAgent,
@@ -89,7 +89,7 @@ const Users: FC = () => {
   const userModal = useUserModal({
     onConfirm: (userModel) => {
       return new Promise((resolve, reject) => {
-        addUser(userModel)
+        addUsers(userModel)
           .then(() => {
             if (/all|staff/.test(curFilter) && curPage === 1) {
               refreshUsers();

ui/src/services/admin/users.ts

@@ -38,6 +38,10 @@ export const addUser = (params: {
   return request.post('/answer/admin/api/user', params);
 };
 
+export const addUsers = (params: { users: string }) => {
+  return request.post('/answer/admin/api/users', params);
+};
+
 export const updateUserPassword = (params: {
   password: string;
   user_id: string;