From c15b3e73cecbaec260389227980cb80d44886eea Mon Sep 17 00:00:00 2001 From: "haitao(lj)" Date: Sun, 18 Dec 2022 01:46:41 +0800 Subject: [PATCH] chore: Add image capcha code when registering, Dynamically insert custom.css --- ui/public/index.html | 1 - ui/src/pages/Layout/index.tsx | 1 + ui/src/pages/Users/Personal/index.tsx | 1 + .../Register/components/SignUpForm/index.tsx | 284 +++++++++++------- ui/src/services/common.ts | 5 + 5 files changed, 178 insertions(+), 114 deletions(-) diff --git a/ui/public/index.html b/ui/public/index.html index b36cc2d4..3c2b1841 100644 --- a/ui/public/index.html +++ b/ui/public/index.html @@ -5,7 +5,6 @@ - diff --git a/ui/src/pages/Layout/index.tsx b/ui/src/pages/Layout/index.tsx index 331aec3f..0905d893 100644 --- a/ui/src/pages/Layout/index.tsx +++ b/ui/src/pages/Layout/index.tsx @@ -30,6 +30,7 @@ const Layout: FC = () => { {pageTitle} {keywords && } {description && } + {
{t('stats')}
{userInfo?.info && ( <> +
= ({ callback }) => { }); const updateUser = userStore((state) => state.update); + const [imgCode, setImgCode] = useState({ + captcha_id: '', + captcha_img: '', + verify: false, + }); + const [showModal, setModalState] = useState(false); + const getImgCode = () => { + getRegisterCaptcha().then((res) => { + setImgCode(res); + }); + }; const handleChange = (params: FormDataType) => { setFormData({ ...formData, ...params }); }; @@ -104,17 +122,29 @@ const Index: React.FC = ({ callback }) => { } }; - const handleSubmit = async (event: FormEvent) => { - event.preventDefault(); - event.stopPropagation(); - if (!checkValidated()) { - return; + const handleRegister = (event?: any) => { + if (event) { + event.preventDefault(); } - register({ + const params: LoginReqParams = { + e_mail: formData.e_mail.value, + pass: formData.pass.value, + }; + if (imgCode.verify) { + params.captcha_code = formData.captcha_code.value; + params.captcha_id = imgCode.captcha_id; + } + const reqParams: RegisterReqParams = { name: formData.name.value, e_mail: formData.e_mail.value, pass: formData.pass.value, - }) + }; + + if (imgCode.verify) { + reqParams.captcha_code = formData.captcha_code.value; + reqParams.captcha_id = imgCode.captcha_id; + } + register(reqParams) .then((res) => { updateUser(res); callback(); @@ -127,113 +157,141 @@ const Index: React.FC = ({ callback }) => { }); }; + const handleSubmit = async (event: FormEvent) => { + event.preventDefault(); + event.stopPropagation(); + if (!checkValidated()) { + return; + } + if (imgCode.verify) { + setModalState(true); + return; + } + handleRegister(); + }; + useEffect(() => { + getImgCode(); + }, []); return ( - -
- - {t('name.label')} - - handleChange({ - name: { - value: e.target.value, - isInvalid: false, - errorMsg: '', - }, - }) - } - /> - - {formData.name.errorMsg} - - - - {t('email.label')} - - handleChange({ - e_mail: { - value: e.target.value, - isInvalid: false, - errorMsg: '', - }, - }) - } - /> - - {formData.e_mail.errorMsg} - - + <> + + + + {t('name.label')} + + handleChange({ + name: { + value: e.target.value, + isInvalid: false, + errorMsg: '', + }, + }) + } + /> + + {formData.name.errorMsg} + + + + {t('email.label')} + + handleChange({ + e_mail: { + value: e.target.value, + isInvalid: false, + errorMsg: '', + }, + }) + } + /> + + {formData.e_mail.errorMsg} + + - - {t('password.label')} - - handleChange({ - pass: { - value: e.target.value, - isInvalid: false, - errorMsg: '', - }, - }) - } - /> - - {formData.pass.errorMsg} - - + + {t('password.label')} + + handleChange({ + pass: { + value: e.target.value, + isInvalid: false, + errorMsg: '', + }, + }) + } + /> + + {formData.pass.errorMsg} + + -
- +
+ +
+ +
+ + By registering, you agree to the + { + argumentClick(evt, 'privacy'); + }} + target="_blank"> + privacy policy + + and + { + argumentClick(evt, 'tos'); + }} + target="_blank"> + terms of service + + . +
- -
- - By registering, you agree to the - { - argumentClick(evt, 'privacy'); - }} - target="_blank"> - privacy policy - - and - { - argumentClick(evt, 'tos'); - }} - target="_blank"> - terms of service - - . - -
-
- - Already have an account? Log in - -
- +
+ + Already have an account? Log in + +
+ + setModalState(false)} + /> + ); }; diff --git a/ui/src/services/common.ts b/ui/src/services/common.ts index 18e46490..0f4eac3f 100644 --- a/ui/src/services/common.ts +++ b/ui/src/services/common.ts @@ -96,6 +96,11 @@ export const register = (params: Type.RegisterReqParams) => { return request.post('/answer/api/v1/user/register/email', params); }; +export const getRegisterCaptcha = () => { + const apiUrl = '/answer/api/v1/user/register/captcha'; + return request.get(apiUrl); +}; + export const logout = () => { return request.get('/answer/api/v1/user/logout'); };