p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: solve the problem of form validation

This commit is contained in:
robin 2022-12-13 15:53:01 +08:00
parent 12e152af59
commit 9f2ed9c55f
3 changed files with 99 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/src/hooks/useChangePasswordModal/index.tsx
View File

@ -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) => {

67
ui/src/hooks/useUserModal/index.tsx
View File

@ -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) => {

32
ui/src/pages/Admin/Users/index.tsx
View File

@ -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);
});
});
},
});