frontend-recharge-system/src/pages/Login/index.tsx

93 lines
2.9 KiB
TypeScript

import { LeftSquareFilled, LockOutlined, UserOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { ProFormText, LoginForm } from '@ant-design/pro-form';
import { useIntl, history, FormattedMessage, useModel } from 'umi';
import { login } from '@/services/login';
import defaultSettings from '../../../config/defaultSettings';
import styles from './index.less';
import { CACHE_TOKEN } from '@/constants/cacheKey';
import { initWeb3, walletSign } from '../../utils/web3';
const Login: React.FC = () => {
const intl = useIntl();
const handleSubmit = async (values: API.LoginParams) => {
// 登录
await initWeb3();
const signInfo = await walletSign();
const res: any = await login({ data: signInfo.raw, sign: signInfo.sign });
localStorage.setItem(CACHE_TOKEN, res.token);
// const res: any = await login({ ...values });
// localStorage.setItem(CACHE_TOKEN, res.token);
/** 此方法会跳转到 redirect 参数所在的位置 */
if (!history) return;
const { query } = history.location;
const { redirect } = query as { redirect: string };
history.push(redirect || '/');
};
return (
<div className={styles.container}>
<div className={styles.content}>
<LoginForm
logo={<img alt="logo" src="/logo.svg" />}
title={defaultSettings.title as string}
initialValues={{
autoLogin: true,
}}
onFinish={async (values) => {
await handleSubmit(values as API.LoginParams);
}}
>
<ProFormText
name="username"
fieldProps={{
size: 'large',
prefix: <UserOutlined className={styles.prefixIcon} />,
}}
placeholder={intl.formatMessage({
id: 'pages.login.username.placeholder',
defaultMessage: '用户名',
})}
rules={[
{
required: true,
message: (
<FormattedMessage
id="pages.login.username.required"
defaultMessage="请输入用户名!"
/>
),
},
]}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: 'large',
prefix: <LockOutlined className={styles.prefixIcon} />,
}}
placeholder={intl.formatMessage({
id: 'pages.login.password.placeholder',
defaultMessage: '密码',
})}
rules={[
{
required: true,
message: (
<FormattedMessage
id="pages.login.password.required"
defaultMessage="请输入密码!"
/>
),
},
]}
/>
</LoginForm>
</div>
</div>
);
};
export default Login;