github-featured/apache--answer
2
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

fix: auto-scroll to the first invalid form field #873

Browse Source
This commit is contained in:
shuai
2024-04-25 17:05:57 +08:00
parent eeb668e48a
commit 76c55fcd8e
26 changed files with 187 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/SchemaForm/index.tsx
+3
View File
@@ -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;
ui/src/pages/Admin/Branding/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/CssAndHtml/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/General/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Interface/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Legal/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Login/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Privileges/index.tsx
+5 -3
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Seo/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/SettingsUsers/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Smtp/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Themes/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Admin/Write/index.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Install/index.tsx
+8 -1
View File
@@ -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);
}
ui/src/pages/Questions/Ask/index.tsx
+13 -2
View File
@@ -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}
ui/src/pages/Review/components/EditPostModal/index.tsx
+13
View File
@@ -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);
}
});
};
ui/src/pages/Tags/Create/index.tsx
+14 -1
View File
@@ -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);
}
});
};
ui/src/pages/Users/AccountForgot/components/sendEmail.tsx
+8 -1
View File
@@ -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);
}
});
};
ui/src/pages/Users/ChangeEmail/components/sendEmail.tsx
+3 -1
View File
@@ -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);
}
});
};
ui/src/pages/Users/Login/index.tsx
+18 -2
View File
@@ -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);
}
});
};
@@ -210,7 +226,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}>
ui/src/pages/Users/OauthBindEmail/index.tsx
+8 -1
View File
@@ -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);
}
});
}
ui/src/pages/Users/PasswordReset/index.tsx
+12 -3
View File
@@ -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"
ui/src/pages/Users/Register/components/SignUpForm/index.tsx
+10 -1
View File
@@ -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);
}
});
};
ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx
+12 -3
View File
@@ -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"
ui/src/pages/Users/Settings/Account/components/ModifyPass/index.tsx
+14 -4
View File
@@ -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"
ui/src/pages/Users/Settings/Profile/index.tsx
+13 -4
View File
@@ -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>