Merge branch 'feat/ui-0.7.0' of git.backyard.segmentfault.com:opensource/answer into feat/ui-0.7.0

i18n/en_US.yaml

@@ -1094,6 +1094,8 @@ ui:
           fields:
             password:
               label: Password
+              text: The user will be logged out and need to login again.
+              msg: Password must be at 8 - 32 characters in length.
         btn_cancel: Cancel
         btn_submit: Submit
       user_modal:
@@ -1102,11 +1104,14 @@ ui:
           fields:
             display_name:
               label: Display Name
+              msg: display_name must be at maximum 30 characters in length.
             email:
               label: Email
               msg: Email is not valid.
             password:
               label: Password
+              msg: Password must be at 8 - 32 characters in length.
+
         btn_cancel: Cancel
         btn_submit: Submit
 

ui/src/components/FollowingTags/index.tsx

@@ -78,7 +78,7 @@ const Index: FC = () => {
         ) : (
           <>
             <div className="text-muted">{t('follow_tag_tip')}</div>
-            <NavLink className="d-inline-block my-2" to="/tags">
+            <NavLink className="d-inline-block mt-3" to="/tags">
               <Button size="sm" variant="outline-primary">
                 {t('follow_a_tag')}
               </Button>

ui/src/components/QuestionList/index.tsx

@@ -129,7 +129,7 @@ const QuestionList: FC<Props> = ({ source }) => {
                   {li.status === 2 ? ` [${t('closed')}]` : ''}
                 </NavLink>
               </h5>
-              <div className="d-flex flex-column flex-md-row align-items-md-center fs-14 mb-3 text-secondary">
+              <div className="d-flex flex-column flex-md-row align-items-md-center fs-14 mb-2 text-secondary">
                 <QuestionLastUpdate q={li} />
                 <div className="ms-0 ms-md-3 mt-2 mt-md-0">
                   <span>

ui/src/hooks/useChangePasswordModal/index.tsx

@@ -6,13 +6,14 @@ import ReactDOM from 'react-dom/client';
 
 import type * as Type from '@/common/interface';
 import { SchemaForm, JSONSchema, UISchema, initFormData } from '@/components';
+import { handleFormError } from '@/utils';
 
 const div = document.createElement('div');
 const root = ReactDOM.createRoot(div);
 
 interface IProps {
   title?: string;
-  onConfirm?: (formData: any) => void;
+  onConfirm?: (formData: any) => Promise<any>;
 }
 const useChangePasswordModal = (props: IProps = {}) => {
   const { t } = useTranslation('translation', {
@@ -29,6 +30,7 @@ const useChangePasswordModal = (props: IProps = {}) => {
       password: {
         type: 'string',
         title: t('form.fields.password.label'),
+        description: t('form.fields.password.text'),
       },
     },
   };
@@ -36,6 +38,14 @@ const useChangePasswordModal = (props: IProps = {}) => {
     password: {
       'ui:options': {
         type: '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;
+        },
       },
     },
   };
@@ -69,17 +79,25 @@ const useChangePasswordModal = (props: IProps = {}) => {
       onConfirm({
         password: formData.password.value,
         user_id: userId,
-      });
-      setFormData({
-        password: {
-          value: '',
-          isInvalid: false,
-          errorMsg: '',
-        },
-      });
-      setUserId('');
+      })
+        .then(() => {
+          setFormData({
+            password: {
+              value: '',
+              isInvalid: false,
+              errorMsg: '',
+            },
+          });
+          setUserId('');
+          onClose();
+        })
+        .catch((err) => {
+          if (err.isError) {
+            const data = handleFormError(err, formData);
+            setFormData({ ...data });
+          }
+        });
     }
-    onClose();
   };
 
   const handleOnChange = (data) => {

ui/src/hooks/useUserModal/index.tsx

@@ -7,13 +7,14 @@ 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';
 
 const div = document.createElement('div');
 const root = ReactDOM.createRoot(div);
 
 interface IProps {
   title?: string;
-  onConfirm?: (formData: any) => void;
+  onConfirm?: (formData: any) => Promise<any>;
 }
 const useAddUserModal = (props: IProps = {}) => {
   const { t } = useTranslation('translation', {
@@ -41,6 +42,16 @@ const useAddUserModal = (props: IProps = {}) => {
     },
   };
   const uiSchema: UISchema = {
+    display_name: {
+      'ui:options': {
+        validator: (value) => {
+          if (value.length > 30) {
+            return t('form.fields.display_name.msg');
+          }
+          return true;
+        },
+      },
+    },
     email: {
       'ui:options': {
         type: 'email',
@@ -55,6 +66,14 @@ const useAddUserModal = (props: IProps = {}) => {
     password: {
       'ui:options': {
         type: '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;
+        },
       },
     },
   };
@@ -88,26 +107,34 @@ const useAddUserModal = (props: IProps = {}) => {
         display_name: formData.display_name.value,
         email: formData.email.value,
         password: formData.password.value,
-      });
-      setFormData({
-        display_name: {
-          value: '',
-          isInvalid: false,
-          errorMsg: '',
-        },
-        email: {
-          value: '',
-          isInvalid: false,
-          errorMsg: '',
-        },
-        password: {
-          value: '',
-          isInvalid: false,
-          errorMsg: '',
-        },
-      });
+      })
+        .then(() => {
+          setFormData({
+            display_name: {
+              value: '',
+              isInvalid: false,
+              errorMsg: '',
+            },
+            email: {
+              value: '',
+              isInvalid: false,
+              errorMsg: '',
+            },
+            password: {
+              value: '',
+              isInvalid: false,
+              errorMsg: '',
+            },
+          });
+          onClose();
+        })
+        .catch((err) => {
+          if (err.isError) {
+            const data = handleFormError(err, formData);
+            setFormData({ ...data });
+          }
+        });
     }
-    onClose();
   };
 
   const handleOnChange = (data) => {

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

@@ -74,20 +74,34 @@ const Users: FC = () => {
 
   const userModal = useUserModal({
     onConfirm: (userModel) => {
-      addUser(userModel).then(() => {
-        if (/all|staff/.test(curFilter) && curPage === 1) {
-          refreshUsers();
-        }
+      return new Promise((resolve, reject) => {
+        addUser(userModel)
+          .then(() => {
+            if (/all|staff/.test(curFilter) && curPage === 1) {
+              refreshUsers();
+            }
+            resolve(true);
+          })
+          .catch((e) => {
+            reject(e);
+          });
       });
     },
   });
   const changePasswordModal = useChangePasswordModal({
     onConfirm: (rd) => {
-      updateUserPassword(rd).then(() => {
-        Toast.onShow({
-          msg: t('update_password', { keyPrefix: 'toast' }),
-          variant: 'success',
-        });
+      return new Promise((resolve, reject) => {
+        updateUserPassword(rd)
+          .then(() => {
+            Toast.onShow({
+              msg: t('update_password', { keyPrefix: 'toast' }),
+              variant: 'success',
+            });
+            resolve(true);
+          })
+          .catch((e) => {
+            reject(e);
+          });
       });
     },
   });

ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx

@@ -108,7 +108,7 @@ const Index: FC = () => {
             <Form.Control
               autoComplete="off"
               required
-              type="text"
+              type="email"
               placeholder=""
               value={formData.e_mail.value}
               isInvalid={formData.e_mail.isInvalid}