This is an automated email from the ASF dual-hosted git repository. shuai pushed a commit to branch test in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 200815d143b7f8d482a1cb856b9c62cfb6406eb6 Author: shuai <[email protected]> AuthorDate: Thu Apr 25 17:05:57 2024 +0800 fix: auto-scroll to the first invalid form field #873 --- ui/src/components/SchemaForm/index.tsx | 3 +++ ui/src/pages/Admin/Branding/index.tsx | 4 +++- ui/src/pages/Admin/CssAndHtml/index.tsx | 4 +++- ui/src/pages/Admin/General/index.tsx | 4 +++- ui/src/pages/Admin/Interface/index.tsx | 4 +++- ui/src/pages/Admin/Legal/index.tsx | 4 +++- ui/src/pages/Admin/Login/index.tsx | 4 +++- ui/src/pages/Admin/Privileges/index.tsx | 8 +++++--- ui/src/pages/Admin/Seo/index.tsx | 4 +++- ui/src/pages/Admin/SettingsUsers/index.tsx | 4 +++- ui/src/pages/Admin/Smtp/index.tsx | 4 +++- ui/src/pages/Admin/Themes/index.tsx | 4 +++- ui/src/pages/Admin/Write/index.tsx | 4 +++- ui/src/pages/Install/index.tsx | 9 ++++++++- ui/src/pages/Questions/Ask/index.tsx | 15 +++++++++++++-- .../pages/Review/components/EditPostModal/index.tsx | 13 +++++++++++++ ui/src/pages/Tags/Create/index.tsx | 15 ++++++++++++++- .../Users/AccountForgot/components/sendEmail.tsx | 9 ++++++++- .../pages/Users/ChangeEmail/components/sendEmail.tsx | 4 +++- ui/src/pages/Users/Login/index.tsx | 20 ++++++++++++++++++-- ui/src/pages/Users/OauthBindEmail/index.tsx | 9 ++++++++- ui/src/pages/Users/PasswordReset/index.tsx | 15 ++++++++++++--- .../Users/Register/components/SignUpForm/index.tsx | 11 ++++++++++- .../Account/components/ModifyEmail/index.tsx | 15 ++++++++++++--- .../Settings/Account/components/ModifyPass/index.tsx | 18 ++++++++++++++---- ui/src/pages/Users/Settings/Profile/index.tsx | 17 +++++++++++++---- 26 files changed, 187 insertions(+), 38 deletions(-) diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx index d0afb692..51fc4655 100644 --- a/ui/src/components/SchemaForm/index.tsx +++ b/ui/src/components/SchemaForm/index.tsx @@ -29,6 +29,7 @@ import { useTranslation } from 'react-i18next'; import isEmpty from 'lodash/isEmpty'; import classnames from 'classnames'; +import { scrollToElementTop } from '@/utils'; import type * as Type from '@/common/interface'; import type { @@ -201,6 +202,7 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = ( if (onChange instanceof Function) { onChange({ ...formData }); } + scrollToElementTop(document.getElementById(errors[0])); return false; } const syncErrors = await syncValidator(); @@ -216,6 +218,7 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = ( if (onChange instanceof Function) { onChange({ ...formData }); } + scrollToElementTop(document.getElementById(syncErrors[0].key)); return false; } return true; diff --git a/ui/src/pages/Admin/Branding/index.tsx b/ui/src/pages/Admin/Branding/index.tsx index 74c3d40e..bec7fc0f 100644 --- a/ui/src/pages/Admin/Branding/index.tsx +++ b/ui/src/pages/Admin/Branding/index.tsx @@ -25,7 +25,7 @@ import { FormDataType } from '@/common/interface'; import { brandSetting, getBrandSetting } from '@/services'; import { brandingStore } from '@/stores'; import { useToast } from '@/hooks'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const uploadType = 'branding'; const Index: FC = () => { @@ -145,6 +145,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/CssAndHtml/index.tsx b/ui/src/pages/Admin/CssAndHtml/index.tsx index ae64a697..de376ad7 100644 --- a/ui/src/pages/Admin/CssAndHtml/index.tsx +++ b/ui/src/pages/Admin/CssAndHtml/index.tsx @@ -24,7 +24,7 @@ import type * as Type from '@/common/interface'; import { getPageCustom, putPageCustom } from '@/services'; import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components'; import { useToast } from '@/hooks'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { customizeStore } from '@/stores'; const Index: FC = () => { @@ -124,6 +124,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/General/index.tsx b/ui/src/pages/Admin/General/index.tsx index 3c6ff51a..6a1b080f 100644 --- a/ui/src/pages/Admin/General/index.tsx +++ b/ui/src/pages/Admin/General/index.tsx @@ -26,7 +26,7 @@ import { useToast } from '@/hooks'; import { siteInfoStore } from '@/stores'; import { useGeneralSetting, updateGeneralSetting } from '@/services'; import Pattern from '@/common/pattern'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const General: FC = () => { const { t } = useTranslation('translation', { @@ -157,6 +157,8 @@ const General: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Interface/index.tsx b/ui/src/pages/Admin/Interface/index.tsx index f4808f97..9c622048 100644 --- a/ui/src/pages/Admin/Interface/index.tsx +++ b/ui/src/pages/Admin/Interface/index.tsx @@ -39,7 +39,7 @@ import { loadLanguageOptions, setupAppTimeZone, } from '@/utils/localize'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Interface: FC = () => { const { t } = useTranslation('translation', { @@ -141,6 +141,8 @@ const Interface: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Legal/index.tsx b/ui/src/pages/Admin/Legal/index.tsx index d0dd2e7a..83561566 100644 --- a/ui/src/pages/Admin/Legal/index.tsx +++ b/ui/src/pages/Admin/Legal/index.tsx @@ -26,7 +26,7 @@ import type * as Type from '@/common/interface'; import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components'; import { useToast } from '@/hooks'; import { getLegalSetting, putLegalSetting } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Legal: FC = () => { const { t } = useTranslation('translation', { @@ -90,6 +90,8 @@ const Legal: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Login/index.tsx b/ui/src/pages/Admin/Login/index.tsx index c58a293b..c43cfcff 100644 --- a/ui/src/pages/Admin/Login/index.tsx +++ b/ui/src/pages/Admin/Login/index.tsx @@ -24,7 +24,7 @@ import type * as Type from '@/common/interface'; import { getLoginSetting, putLoginSetting } from '@/services'; import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components'; import { useToast } from '@/hooks'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { loginSettingStore } from '@/stores'; const Index: FC = () => { @@ -132,6 +132,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Privileges/index.tsx b/ui/src/pages/Admin/Privileges/index.tsx index dbe58f0c..5276912a 100644 --- a/ui/src/pages/Admin/Privileges/index.tsx +++ b/ui/src/pages/Admin/Privileges/index.tsx @@ -29,7 +29,7 @@ import { AdminSettingsPrivilege, AdminSettingsPrivilegeReq, } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { ADMIN_PRIVILEGE_CUSTOM_LEVEL } from '@/common/constants'; const Index: FC = () => { @@ -83,10 +83,10 @@ const Index: FC = () => { validator: (value: string) => { const val = Number(value); if (Number.isNaN(val)) { - return 'the input should be number'; + return t('msg.should_be_number'); } if (val < 1) { - return 'number should be equal or larger than 1'; + return t('msg.number_larger_1'); } return true; }, @@ -148,6 +148,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Seo/index.tsx b/ui/src/pages/Admin/Seo/index.tsx index 0424eae8..e539595b 100644 --- a/ui/src/pages/Admin/Seo/index.tsx +++ b/ui/src/pages/Admin/Seo/index.tsx @@ -24,7 +24,7 @@ import type * as Type from '@/common/interface'; import { getSeoSetting, putSeoSetting } from '@/services'; import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components'; import { useToast } from '@/hooks'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { seoSettingStore } from '@/stores'; const Index: FC = () => { @@ -90,6 +90,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/SettingsUsers/index.tsx b/ui/src/pages/Admin/SettingsUsers/index.tsx index a83c2e3b..e2714790 100644 --- a/ui/src/pages/Admin/SettingsUsers/index.tsx +++ b/ui/src/pages/Admin/SettingsUsers/index.tsx @@ -29,7 +29,7 @@ import { putUsersSetting, AdminSettingsUsers, } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import * as Type from '@/common/interface'; import { siteInfoStore } from '@/stores'; @@ -168,6 +168,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Smtp/index.tsx b/ui/src/pages/Admin/Smtp/index.tsx index 3103461f..40725c31 100644 --- a/ui/src/pages/Admin/Smtp/index.tsx +++ b/ui/src/pages/Admin/Smtp/index.tsx @@ -25,7 +25,7 @@ import { useToast } from '@/hooks'; import { useSmtpSetting, updateSmtpSetting } from '@/services'; import pattern from '@/common/pattern'; import { SchemaForm, JSONSchema, UISchema, initFormData } from '@/components'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Smtp: FC = () => { const { t } = useTranslation('translation', { @@ -182,6 +182,8 @@ const Smtp: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Themes/index.tsx b/ui/src/pages/Admin/Themes/index.tsx index 346e2e05..0d219816 100644 --- a/ui/src/pages/Admin/Themes/index.tsx +++ b/ui/src/pages/Admin/Themes/index.tsx @@ -24,7 +24,7 @@ import type * as Type from '@/common/interface'; import { getThemeSetting, putThemeSetting } from '@/services'; import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components'; import { useToast } from '@/hooks'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { themeSettingStore } from '@/stores'; import { setupAppTheme } from '@/utils/localize'; @@ -135,6 +135,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Admin/Write/index.tsx b/ui/src/pages/Admin/Write/index.tsx index 7c837435..42806111 100644 --- a/ui/src/pages/Admin/Write/index.tsx +++ b/ui/src/pages/Admin/Write/index.tsx @@ -27,7 +27,7 @@ import { getRequireAndReservedTag, postRequireAndReservedTag, } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { writeSettingStore } from '@/stores'; const Index: FC = () => { @@ -121,6 +121,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Install/index.tsx b/ui/src/pages/Install/index.tsx index 69723d29..14a2b30b 100644 --- a/ui/src/pages/Install/index.tsx +++ b/ui/src/pages/Install/index.tsx @@ -29,7 +29,12 @@ import { installBaseInfo, checkConfigFileExists, } from '@/services'; -import { Storage, handleFormError, scrollToDocTop } from '@/utils'; +import { + Storage, + handleFormError, + scrollToDocTop, + scrollToElementTop, +} from '@/utils'; import { CURRENT_LANG_STORAGE_KEY } from '@/common/constants'; import { @@ -201,6 +206,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } else { handleErr(err); } diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx index 68ef0ed6..30939a2e 100644 --- a/ui/src/pages/Questions/Ask/index.tsx +++ b/ui/src/pages/Questions/Ask/index.tsx @@ -40,7 +40,12 @@ import { getTagsBySlugName, saveQuestionWithAnswer, } from '@/services'; -import { handleFormError, SaveDraft, storageExpires } from '@/utils'; +import { + handleFormError, + SaveDraft, + storageExpires, + scrollToElementTop, +} from '@/utils'; import { pathFactory } from '@/router/pathFactory'; import { useCaptchaPlugin } from '@/utils/pluginKit'; @@ -300,6 +305,8 @@ const Ask = () => { editCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; @@ -321,6 +328,8 @@ const Ask = () => { if (!(captchaErr && err.list.length === 1)) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } } }); @@ -331,6 +340,8 @@ const Ask = () => { if (!(captchaErr && err.list.length === 1)) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } } }); @@ -443,7 +454,7 @@ const Ask = () => { </Form.Control.Feedback> {bool && <SearchQuestion similarQuestions={similarQuestions} />} </Form.Group> - <Form.Group controlId="body"> + <Form.Group controlId="content"> <Form.Label>{t('form.fields.body.label')}</Form.Label> <Form.Control defaultValue={formData.content.value} diff --git a/ui/src/pages/Review/components/EditPostModal/index.tsx b/ui/src/pages/Review/components/EditPostModal/index.tsx index 4ee80b0a..9e7ae5e9 100644 --- a/ui/src/pages/Review/components/EditPostModal/index.tsx +++ b/ui/src/pages/Review/components/EditPostModal/index.tsx @@ -32,6 +32,7 @@ import { parseUserInfo, handleFormError, parseEditMentionUser, + scrollToElementTop, } from '@/utils'; import type * as Type from '@/common/interface'; @@ -158,6 +159,15 @@ const Index: FC<Props> = ({ setFormData({ ...formData, }); + + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } + return bol; }; @@ -202,6 +212,9 @@ const Index: FC<Props> = ({ editCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Tags/Create/index.tsx b/ui/src/pages/Tags/Create/index.tsx index 8b3b12bf..b0564f19 100644 --- a/ui/src/pages/Tags/Create/index.tsx +++ b/ui/src/pages/Tags/Create/index.tsx @@ -29,7 +29,7 @@ import { Editor, EditorRef } from '@/components'; import { loggedUserInfoStore } from '@/stores'; import type * as Type from '@/common/interface'; import { createTag } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { TAG_SLUG_NAME_MAX_LENGTH } from '@/common/constants'; interface FormDataItem { @@ -107,10 +107,12 @@ const Index = () => { const checkValidated = (): boolean => { let bol = true; + let errObjKey = ''; const { displayName, slugName } = formData; if (!displayName.value) { bol = false; + errObjKey = 'display_name'; formData.displayName = { value: '', isInvalid: true, @@ -118,6 +120,7 @@ const Index = () => { }; } else if (displayName.value.length > TAG_SLUG_NAME_MAX_LENGTH) { bol = false; + errObjKey = 'display_name'; formData.displayName = { value: displayName.value, isInvalid: true, @@ -133,6 +136,7 @@ const Index = () => { if (!slugName.value) { bol = false; + errObjKey = 'slug_name'; formData.slugName = { value: '', isInvalid: true, @@ -140,6 +144,7 @@ const Index = () => { }; } else if (slugName.value.length > TAG_SLUG_NAME_MAX_LENGTH) { bol = false; + errObjKey = 'slug_name'; formData.slugName = { value: slugName.value, isInvalid: true, @@ -156,6 +161,12 @@ const Index = () => { setFormData({ ...formData, }); + + if (!bol) { + const ele = document.getElementById(errObjKey); + scrollToElementTop(ele); + } + return bol; }; @@ -187,6 +198,8 @@ const Index = () => { { from: 'original_text', to: 'description' }, ]); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Users/AccountForgot/components/sendEmail.tsx b/ui/src/pages/Users/AccountForgot/components/sendEmail.tsx index 5d7d2c9b..e1a823db 100644 --- a/ui/src/pages/Users/AccountForgot/components/sendEmail.tsx +++ b/ui/src/pages/Users/AccountForgot/components/sendEmail.tsx @@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next'; import type { PasswordResetReq, FormDataType } from '@/common/interface'; import { resetPassword } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { useCaptchaPlugin } from '@/utils/pluginKit'; interface IProps { @@ -62,6 +62,11 @@ const Index: FC<IProps> = ({ callback }) => { setFormData({ ...formData, }); + if (!bol) { + const ele = document.getElementById('email'); + scrollToElementTop(ele); + } + return bol; }; @@ -89,6 +94,8 @@ const Index: FC<IProps> = ({ callback }) => { emailCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Users/ChangeEmail/components/sendEmail.tsx b/ui/src/pages/Users/ChangeEmail/components/sendEmail.tsx index 419e226e..eb279ef4 100644 --- a/ui/src/pages/Users/ChangeEmail/components/sendEmail.tsx +++ b/ui/src/pages/Users/ChangeEmail/components/sendEmail.tsx @@ -25,7 +25,7 @@ import { useNavigate } from 'react-router-dom'; import type { PasswordResetReq, FormDataType } from '@/common/interface'; import { loggedUserInfoStore } from '@/stores'; import { changeEmail } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { useCaptchaPlugin } from '@/utils/pluginKit'; const Index: FC = () => { @@ -89,6 +89,8 @@ const Index: FC = () => { emailCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; diff --git a/ui/src/pages/Users/Login/index.tsx b/ui/src/pages/Users/Login/index.tsx index 52bbd00e..404bb4ce 100644 --- a/ui/src/pages/Users/Login/index.tsx +++ b/ui/src/pages/Users/Login/index.tsx @@ -30,7 +30,13 @@ import { loginSettingStore, userCenterStore, } from '@/stores'; -import { floppyNavigation, guard, handleFormError, userCenter } from '@/utils'; +import { + floppyNavigation, + guard, + handleFormError, + userCenter, + scrollToElementTop, +} from '@/utils'; import { useCaptchaPlugin } from '@/utils/pluginKit'; import { login, UcAgent } from '@/services'; import { setupAppTheme } from '@/utils/localize'; @@ -96,6 +102,14 @@ const Index: React.FC = () => { setFormData({ ...formData, }); + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } + return bol; }; @@ -132,6 +146,8 @@ const Index: React.FC = () => { const data = handleFormError(err, formData); setFormData({ ...data }); passwordCaptcha?.handleCaptchaError?.(err.list); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; @@ -221,7 +237,7 @@ const Index: React.FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="password" className="mb-3"> + <Form.Group controlId="pass" className="mb-3"> <div className="d-flex justify-content-between"> <Form.Label>{t('password.label')}</Form.Label> <Link to="/users/account-recovery" tabIndex={2}> diff --git a/ui/src/pages/Users/OauthBindEmail/index.tsx b/ui/src/pages/Users/OauthBindEmail/index.tsx index f6a0dc0c..5e3735a0 100644 --- a/ui/src/pages/Users/OauthBindEmail/index.tsx +++ b/ui/src/pages/Users/OauthBindEmail/index.tsx @@ -29,7 +29,7 @@ import { loggedUserInfoStore } from '@/stores'; import { oAuthBindEmail, getLoggedUserInfo } from '@/services'; import Storage from '@/utils/storage'; import { LOGGED_TOKEN_STORAGE_KEY } from '@/common/constants'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Index: FC = () => { const { t } = useTranslation('translation', { @@ -70,6 +70,11 @@ const Index: FC = () => { setFormData({ ...formData, }); + if (!bol) { + const ele = document.getElementById('email'); + scrollToElementTop(ele); + } + return bol; }; @@ -142,6 +147,8 @@ const Index: FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); } diff --git a/ui/src/pages/Users/PasswordReset/index.tsx b/ui/src/pages/Users/PasswordReset/index.tsx index 9d04e89a..d43f032f 100644 --- a/ui/src/pages/Users/PasswordReset/index.tsx +++ b/ui/src/pages/Users/PasswordReset/index.tsx @@ -26,7 +26,7 @@ import { usePageTags } from '@/hooks'; import { loggedUserInfoStore } from '@/stores'; import type { FormDataType } from '@/common/interface'; import { replacementPassword } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Index: React.FC = () => { const { t } = useTranslation('translation', { keyPrefix: 'password_reset' }); @@ -101,6 +101,13 @@ const Index: React.FC = () => { setFormData({ ...formData, }); + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } return bol; }; @@ -128,6 +135,8 @@ const Index: React.FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; @@ -140,7 +149,7 @@ const Index: React.FC = () => { {step === 1 && ( <Col className="mx-auto" md={6} lg={4} xl={3}> <Form noValidate onSubmit={handleSubmit} autoComplete="off"> - <Form.Group controlId="email" className="mb-3"> + <Form.Group controlId="pass" className="mb-3"> <Form.Label>{t('password.label')}</Form.Label> <Form.Control autoComplete="off" @@ -162,7 +171,7 @@ const Index: React.FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="password" className="mb-3"> + <Form.Group controlId="passSecond" className="mb-3"> <Form.Label>{t('password_confirm.label')}</Form.Label> <Form.Control autoComplete="off" diff --git a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx index 433f0427..bfa5d23e 100644 --- a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx +++ b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx @@ -26,7 +26,7 @@ import { useCaptchaPlugin } from '@/utils/pluginKit'; import type { FormDataType, RegisterReqParams } from '@/common/interface'; import { register } from '@/services'; import userStore from '@/stores/loggedUserInfo'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { useLegalClick } from '@/behaviour/useLegalClick'; interface Props { @@ -84,6 +84,13 @@ const Index: React.FC<Props> = ({ callback }) => { setFormData({ ...formData, }); + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } return bol; }; @@ -116,6 +123,8 @@ const Index: React.FC<Props> = ({ callback }) => { emailCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; 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 27eda181..17af4b01 100644 --- a/ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx +++ b/ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx @@ -25,7 +25,7 @@ import type * as Type from '@/common/interface'; import { useToast } from '@/hooks'; import { useCaptchaPlugin } from '@/utils/pluginKit'; import { getLoggedUserInfo, changeEmail } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Index: FC = () => { const { t } = useTranslation('translation', { @@ -82,6 +82,13 @@ const Index: FC = () => { setFormData({ ...formData, }); + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } return bol; }; @@ -129,6 +136,8 @@ const Index: FC = () => { emailCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; @@ -175,7 +184,7 @@ const Index: FC = () => { )} {step === 2 && ( <Form noValidate onSubmit={handleSubmit}> - <Form.Group controlId="currentPass" className="mb-3"> + <Form.Group controlId="pass" className="mb-3"> <Form.Label>{t('pass.label')}</Form.Label> <Form.Control autoComplete="new-password" @@ -197,7 +206,7 @@ const Index: FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="newEmail" className="mb-3"> + <Form.Group controlId="e_mail" className="mb-3"> <Form.Label>{t('new_email.label')}</Form.Label> <Form.Control autoComplete="off" diff --git a/ui/src/pages/Users/Settings/Account/components/ModifyPass/index.tsx b/ui/src/pages/Users/Settings/Account/components/ModifyPass/index.tsx index bdc84bd7..4f4ec0cb 100644 --- a/ui/src/pages/Users/Settings/Account/components/ModifyPass/index.tsx +++ b/ui/src/pages/Users/Settings/Account/components/ModifyPass/index.tsx @@ -27,7 +27,7 @@ import { useToast } from '@/hooks'; import { useCaptchaPlugin } from '@/utils/pluginKit'; import type { FormDataType } from '@/common/interface'; import { modifyPassword } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; import { loggedUserInfoStore } from '@/stores'; const Index: FC = () => { @@ -123,6 +123,14 @@ const Index: FC = () => { setFormData({ ...formData, }); + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } + return bol; }; @@ -154,6 +162,8 @@ const Index: FC = () => { infoCaptcha?.handleCaptchaError(err.list); const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; @@ -179,7 +189,7 @@ const Index: FC = () => { {showForm ? ( <Form noValidate onSubmit={handleSubmit}> <Form.Group - controlId="oldPass" + controlId="old_pass" className={classname('mb-3', user.have_password ? '' : 'd-none')}> <Form.Label>{t('current_pass.label')}</Form.Label> <Form.Control @@ -203,7 +213,7 @@ const Index: FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="newPass" className="mb-3"> + <Form.Group controlId="new_pass" className="mb-3"> <Form.Label>{t('new_pass.label')}</Form.Label> <Form.Control autoComplete="off" @@ -225,7 +235,7 @@ const Index: FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="newPass2" className="mb-3"> + <Form.Group controlId="pass2" className="mb-3"> <Form.Label>{t('pass_confirm.label')}</Form.Label> <Form.Control autoComplete="off" diff --git a/ui/src/pages/Users/Settings/Profile/index.tsx b/ui/src/pages/Users/Settings/Profile/index.tsx index 0e935fa7..ab2ee0f1 100644 --- a/ui/src/pages/Users/Settings/Profile/index.tsx +++ b/ui/src/pages/Users/Settings/Profile/index.tsx @@ -33,7 +33,7 @@ import { getUcSettings, UcSettingAgent, } from '@/services'; -import { handleFormError } from '@/utils'; +import { handleFormError, scrollToElementTop } from '@/utils'; const Index: React.FC = () => { const { t } = useTranslation('translation', { @@ -209,6 +209,13 @@ const Index: React.FC = () => { setFormData({ ...formData, }); + if (!bol) { + const errObj = Object.keys(formData).filter( + (key) => formData[key].isInvalid, + ); + const ele = document.getElementById(errObj[0]); + scrollToElementTop(ele); + } return bol; }; @@ -247,6 +254,8 @@ const Index: React.FC = () => { if (err.isError) { const data = handleFormError(err, formData); setFormData({ ...data }); + const ele = document.getElementById(err.list[0].error_field); + scrollToElementTop(ele); } }); }; @@ -295,7 +304,7 @@ const Index: React.FC = () => { ) : null} {!ucAgent?.enabled || profileAgent?.enabled === false ? ( <Form noValidate onSubmit={handleSubmit}> - <Form.Group controlId="displayName" className="mb-3"> + <Form.Group controlId="display_name" className="mb-3"> <Form.Label>{t('display_name.label')}</Form.Label> <Form.Control required @@ -318,7 +327,7 @@ const Index: React.FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="userName" className="mb-3"> + <Form.Group controlId="username" className="mb-3"> <Form.Label>{t('username.label')}</Form.Label> <Form.Control required @@ -498,7 +507,7 @@ const Index: React.FC = () => { </Form.Control.Feedback> </Form.Group> - <Form.Group controlId="email" className="mb-3"> + <Form.Group controlId="location" className="mb-3"> <Form.Label>{`${t('location.label')} ${t('optional', { keyPrefix: 'form', })}`}</Form.Label>
