From 9f2ed9c55f7eb965e3be42c7cdb2a012d913fe9b Mon Sep 17 00:00:00 2001 From: robin Date: Tue, 13 Dec 2022 15:53:01 +0800 Subject: [PATCH 1/5] fix: solve the problem of form validation --- ui/src/hooks/useChangePasswordModal/index.tsx | 40 ++++++++--- ui/src/hooks/useUserModal/index.tsx | 67 +++++++++++++------ ui/src/pages/Admin/Users/index.tsx | 32 ++++++--- 3 files changed, 99 insertions(+), 40 deletions(-) diff --git a/ui/src/hooks/useChangePasswordModal/index.tsx b/ui/src/hooks/useChangePasswordModal/index.tsx index a8c046c1..6c8b6d90 100644 --- a/ui/src/hooks/useChangePasswordModal/index.tsx +++ b/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; } 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) => { diff --git a/ui/src/hooks/useUserModal/index.tsx b/ui/src/hooks/useUserModal/index.tsx index 4ce41f8c..dc3df9a5 100644 --- a/ui/src/hooks/useUserModal/index.tsx +++ b/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; } 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) => { diff --git a/ui/src/pages/Admin/Users/index.tsx b/ui/src/pages/Admin/Users/index.tsx index b6dbabe7..8f409fbc 100644 --- a/ui/src/pages/Admin/Users/index.tsx +++ b/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); + }); }); }, }); From 121f8df0245b9cf236056dcecced5d806bf0d806 Mon Sep 17 00:00:00 2001 From: robin Date: Tue, 13 Dec 2022 16:01:04 +0800 Subject: [PATCH 2/5] refactor: replace my-2 with mt-3 --- ui/src/components/FollowingTags/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/FollowingTags/index.tsx b/ui/src/components/FollowingTags/index.tsx index 2ae65602..524d3125 100644 --- a/ui/src/components/FollowingTags/index.tsx +++ b/ui/src/components/FollowingTags/index.tsx @@ -78,7 +78,7 @@ const Index: FC = () => { ) : ( <>
{t('follow_tag_tip')}
- + From bd478a1400ae6c1c2167406f5c096d2e4b11ce31 Mon Sep 17 00:00:00 2001 From: robin Date: Tue, 13 Dec 2022 16:18:13 +0800 Subject: [PATCH 3/5] refactor: update en_US.yaml --- i18n/en_US.yaml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml index 2f9efa80..f55a2e3c 100644 --- a/i18n/en_US.yaml +++ b/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 From a936f6f273d071e1c258af9b645bc6f48d6a4550 Mon Sep 17 00:00:00 2001 From: robin Date: Tue, 13 Dec 2022 16:18:52 +0800 Subject: [PATCH 4/5] refactor(ui): modify input type --- .../Users/Settings/Account/components/ModifyEmail/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx b/ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx index 1a7c13ed..fe8b7ea3 100644 --- a/ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx +++ b/ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx @@ -108,7 +108,7 @@ const Index: FC = () => { Date: Tue, 13 Dec 2022 16:22:42 +0800 Subject: [PATCH 5/5] refactor(ui): modify margin --- ui/src/components/QuestionList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/QuestionList/index.tsx b/ui/src/components/QuestionList/index.tsx index ca464d4f..694300d5 100644 --- a/ui/src/components/QuestionList/index.tsx +++ b/ui/src/components/QuestionList/index.tsx @@ -129,7 +129,7 @@ const QuestionList: FC = ({ source }) => { {li.status === 2 ? ` [${t('closed')}]` : ''} -
+