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

Merge branch 'feat/ui-0.7.0' into 'test' 

chore: Add image capcha code when registering, Dynamically insert custom.css

See merge request opensource/answer!358
This commit is contained in:
贾海涛(龙笛) 2022-12-17 17:56:09 +00:00
parent 703aacf0cf c15b3e73ce
commit 1c68d4be53
5 changed files with 178 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/public/index.html
View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/custom.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

1
ui/src/pages/Layout/index.tsx
View File

@ -30,6 +30,7 @@ const Layout: FC = () => {
<title>{pageTitle}</title>
{keywords && <meta name="keywords" content={keywords} />}
{description && <meta name="description" content={description} />}
<link rel="stylesheet" href={`${process.env.PUBLIC_URL}/custom.css`} />
</Helmet>
<CustomizeTheme />
<SWRConfig

1
ui/src/pages/Users/Personal/index.tsx
View File

@ -122,6 +122,7 @@ const Personal: FC = () => {
<h5 className="mb-3">{t('stats')}</h5>
{userInfo?.info && (
<>
<FormatTime time={1671290521} preFix={t('last_login')} />
<div className="text-secondary">
<FormatTime
time={userInfo.info.created_at}

76
ui/src/pages/Users/Register/components/SignUpForm/index.tsx
View File

@ -1,10 +1,17 @@
import React, { FormEvent, MouseEvent, useState } from 'react';
import React, { FormEvent, MouseEvent, useEffect, useState } from 'react';
import { Form, Button, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import type { FormDataType } from '@/common/interface';
import { register, useLegalTos, useLegalPrivacy } from '@/services';
import { PicAuthCodeModal } from '@/components/Modal';
import { ImgCodeRes, LoginReqParams } from '@/common/interface';
import type { FormDataType, RegisterReqParams } from '@/common/interface';
import {
register,
getRegisterCaptcha,
useLegalTos,
useLegalPrivacy,
} from '@/services';
import userStore from '@/stores/userInfo';
import { handleFormError } from '@/utils';
@ -38,6 +45,17 @@ const Index: React.FC<Props> = ({ callback }) => {
});
const updateUser = userStore((state) => state.update);
const [imgCode, setImgCode] = useState<ImgCodeRes>({
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<Props> = ({ callback }) => {
}
};
const handleSubmit = async (event: FormEvent) => {
const handleRegister = (event?: any) => {
if (event) {
event.preventDefault();
event.stopPropagation();
if (!checkValidated()) {
return;
}
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,7 +157,23 @@ const Index: React.FC<Props> = ({ callback }) => {
});
};
const handleSubmit = async (event: FormEvent) => {
event.preventDefault();
event.stopPropagation();
if (!checkValidated()) {
return;
}
if (imgCode.verify) {
setModalState(true);
return;
}
handleRegister();
};
useEffect(() => {
getImgCode();
}, []);
return (
<>
<Col className="mx-auto" md={3}>
<Form noValidate onSubmit={handleSubmit} autoComplete="off">
<Form.Group controlId="name" className="mb-3">
@ -234,6 +280,18 @@ const Index: React.FC<Props> = ({ callback }) => {
</Trans>
</div>
</Col>
<PicAuthCodeModal
visible={showModal}
data={{
captcha: formData.captcha_code,
imgCode,
}}
handleCaptcha={handleChange}
clickSubmit={handleRegister}
refreshImgCode={getImgCode}
onClose={() => setModalState(false)}
/>
</>
);
};

5
ui/src/services/common.ts
View File

@ -96,6 +96,11 @@ export const register = (params: Type.RegisterReqParams) => {
return request.post<any>('/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');
};