mirror of https://github.com/msgbyte/tailchat
feat: 增加邮箱认证功能
moonrailgun
2 years ago
parent
ba7399fc7f
commit
2e774d104f
@ -0,0 +1,120 @@
|
||||
import { setUserJWT } from '@/utils/jwt-helper';
|
||||
import { setGlobalUserLoginInfo } from '@/utils/user-helper';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import {
|
||||
model,
|
||||
showErrorToasts,
|
||||
showSuccessToasts,
|
||||
t,
|
||||
useAppDispatch,
|
||||
useAsyncRequest,
|
||||
userActions,
|
||||
useUserInfo,
|
||||
} from 'tailchat-shared';
|
||||
import {
|
||||
createMetaFormSchema,
|
||||
MetaFormFieldMeta,
|
||||
metaFormFieldSchema,
|
||||
WebMetaForm,
|
||||
FastifyFormFieldProps,
|
||||
useFastifyFormContext,
|
||||
} from 'tailchat-design';
|
||||
import { ModalWrapper } from '../Modal';
|
||||
import { Button, Input } from 'antd';
|
||||
import _compact from 'lodash/compact';
|
||||
import { getGlobalConfig } from 'tailchat-shared/model/config';
|
||||
import { Problem } from '../Problem';
|
||||
|
||||
interface Values {
|
||||
emailOTP: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
const fields: MetaFormFieldMeta[] = [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'emailOTP',
|
||||
placeholder: t('6位校验码'),
|
||||
label: t('邮箱校验码'),
|
||||
},
|
||||
];
|
||||
|
||||
const schema = createMetaFormSchema({
|
||||
emailOTP: metaFormFieldSchema
|
||||
.string()
|
||||
.length(6, t('校验码为6位'))
|
||||
.required(t('校验码不能为空')),
|
||||
});
|
||||
|
||||
export const EmailVerify: React.FC<{
|
||||
onSuccess?: () => void;
|
||||
}> = React.memo((props) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [sended, setSended] = useState(false);
|
||||
const userInfo = useUserInfo();
|
||||
|
||||
const [{ loading }, handleSendEmail] = useAsyncRequest(async () => {
|
||||
if (!userInfo) {
|
||||
return;
|
||||
}
|
||||
|
||||
await model.user.verifyEmail(userInfo.email);
|
||||
setSended(true);
|
||||
}, [userInfo?.email]);
|
||||
|
||||
const [, handleVerifyEmail] = useAsyncRequest(
|
||||
async (values: Values) => {
|
||||
const data = await model.user.verifyEmailWithOTP(values.emailOTP);
|
||||
|
||||
setGlobalUserLoginInfo(data);
|
||||
dispatch(userActions.setUserInfo(data));
|
||||
|
||||
showSuccessToasts(t('邮箱验证通过'));
|
||||
|
||||
if (typeof props.onSuccess === 'function') {
|
||||
props.onSuccess();
|
||||
}
|
||||
},
|
||||
[userInfo?.email, props.onSuccess]
|
||||
);
|
||||
|
||||
if (!userInfo) {
|
||||
return <Problem />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalWrapper title={t('认证邮箱')}>
|
||||
{!sended ? (
|
||||
<>
|
||||
<Button
|
||||
className="mb-2"
|
||||
type="primary"
|
||||
block={true}
|
||||
size="large"
|
||||
loading={loading}
|
||||
onClick={handleSendEmail}
|
||||
>
|
||||
{t('向 {{email}} 发送认证邮件', {
|
||||
email: userInfo.email,
|
||||
})}
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
block={true}
|
||||
size="large"
|
||||
onClick={() => setSended(true)}
|
||||
>
|
||||
{t('已发送认证邮件')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<WebMetaForm
|
||||
schema={schema}
|
||||
fields={fields}
|
||||
onSubmit={handleVerifyEmail}
|
||||
/>
|
||||
)}
|
||||
</ModalWrapper>
|
||||
);
|
||||
});
|
||||
EmailVerify.displayName = 'EmailVerify';
|
||||
Loading…
Reference in New Issue