Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhoubichuan
zhoubichuan committed Oct 5, 2023
1 parent 4d5c183 commit 4a881d3
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 143 deletions.
6 changes: 3 additions & 3 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ export async function getInitialState(): Promise<{
const currentUser = await queryCurrentUser();
return currentUser;
} catch (error) {
// history.push(loginPath);
history.push(loginPath);
}
return undefined;
};

// 如果是登录页面，不执行
if (history.location.pathname !== loginPath) {
if (history.location.pathname !== '/user/login') {
const currentUser = await fetchUserInfo();
return {
fetchUserInfo,
Expand Down Expand Up @@ -143,7 +143,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
onPageChange: () => {
const { location } = history;
// 如果没有登录，重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
if (!initialState?.currentUser && !location.pathname.includes('/user/')) {
history.push(loginPath);
}
},
Expand Down
9 changes: 6 additions & 3 deletions src/pages/user/Login/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const Login: React.FC = () => {
setSubmitting(true);
try {
// 登录
const msg = await login({ ...values, type });
const msg: any = await login({ ...values, type });
if (msg.status === 'success') {
localStorage.token = msg.token;
const defaultloginSuccessMessage = intl.formatMessage({
Expand Down Expand Up @@ -95,7 +95,7 @@ const Login: React.FC = () => {
<div className={styles.content}>
<div className={styles.top}>
<div className={styles.header}>
<Link to="/">
<Link to="/user/register">
<img
alt="logo"
onClick={() =>
Expand Down Expand Up @@ -287,7 +287,7 @@ const Login: React.FC = () => {
const result = await getFakeCaptcha({
phone,
});
if (result === false) {
if (result.status !== '200') {
return;
}
message.success('获取验证码成功！验证码为：1234');
Expand Down Expand Up @@ -318,6 +318,9 @@ const Login: React.FC = () => {
<TaobaoCircleOutlined className={styles.icon} />
<WeiboCircleOutlined className={styles.icon} />
</Space>
<div>
<Link to="/user/register">注册页面</Link>
</div>
</div>
</div>
<Footer />
Expand Down
299 changes: 162 additions & 137 deletions src/pages/user/register/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import type { FC } from 'react';
import { useState, useEffect } from 'react';
import { Form, Button, Col, Input, Popover, Progress, Row, Select, message } from 'antd';
import type { Store } from 'antd/es/form/interface';
import { Link, useRequest, history } from 'umi';
import { useRequest } from 'umi';
import type { StateType } from './service';
import { fakeRegister } from './service';

import { useIntl, Link, history, SelectLang } from 'umi';
import styles from './style.less';

const FormItem = Form.Item;
Expand Down Expand Up @@ -48,7 +48,7 @@ const Register: FC = () => {
const confirmDirty = false;
let interval: number | undefined;
const [form] = Form.useForm();

const intl = useIntl();
useEffect(
() => () => {
clearInterval(interval);
Expand Down Expand Up @@ -147,149 +147,174 @@ const Register: FC = () => {
};

return (
<div className={styles.main}>
<h3>注册</h3>
<Form form={form} name="UserRegister" onFinish={onFinish}>
<FormItem
name="email"
rules={[
{
required: true,
message: '请输入邮箱地址!',
},
{
type: 'email',
message: '邮箱地址格式错误!',
},
]}
>
<Input size="large" placeholder="邮箱" />
</FormItem>
<FormItem
name="username"
rules={[
{
required: true,
message: '请输入用户名',
},
]}
>
<Input size="large" placeholder="用户名" />
</FormItem>
<Popover
getPopupContainer={(node) => {
if (node && node.parentNode) {
return node.parentNode as HTMLElement;
}
return node;
}}
content={
visible && (
<div style={{ padding: '4px 0' }}>
{passwordStatusMap[getPasswordStatus()]}
{renderPasswordProgress()}
<div style={{ marginTop: 10 }}>
<span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
</div>
</div>
)
}
overlayStyle={{ width: 240 }}
placement="right"
visible={visible}
>
<FormItem
name="password"
className={
form.getFieldValue('password') &&
form.getFieldValue('password').length > 0 &&
styles.password
}
rules={[
{
validator: checkPassword,
},
]}
>
<Input size="large" type="password" placeholder="至少6位密码，区分大小写" />
</FormItem>
</Popover>
<FormItem
name="confirm"
rules={[
{
required: true,
message: '确认密码',
},
{
validator: checkConfirm,
},
]}
>
<Input size="large" type="password" placeholder="确认密码" />
</FormItem>
<InputGroup compact>
<Select size="large" value={prefix} onChange={changePrefix} style={{ width: '20%' }}>
<Option value="86">+86</Option>
<Option value="87">+87</Option>
</Select>
<FormItem
style={{ width: '80%' }}
name="mobile"
rules={[
{
required: true,
message: '请输入手机号!',
},
{
pattern: /^\d{11}$/,
message: '手机号格式错误!',
},
]}
>
<Input size="large" placeholder="手机号" />
</FormItem>
</InputGroup>
<Row gutter={8}>
<Col span={16}>
<div className={styles.container}>
<div className={styles.lang} data-lang>
{SelectLang && <SelectLang />}
</div>
<div className={styles.content}>
<div className={styles.top}>
<div className={styles.header}>
<Link to="/user/register-result">
<img
alt="logo"
onClick={() =>
(localStorage.antdprourl = 'https://zhoubichuan.com/antdpro-express')
}
className={styles.logo}
src="/antdpro-demo/logo.svg"
/>
<span className={styles.title}>数据管理系统</span>
</Link>
</div>
<div className={styles.desc}>
{intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
</div>
</div>
<div className={styles.main}>
<h3>注册</h3>
<Form form={form} name="UserRegister" onFinish={onFinish}>
<FormItem
name="email"
rules={[
{
required: true,
message: '请输入邮箱地址!',
},
{
type: 'email',
message: '邮箱地址格式错误!',
},
]}
>
<Input size="large" placeholder="邮箱" />
</FormItem>
<FormItem
name="captcha"
name="username"
rules={[
{
required: true,
message: '请输入验证码!',
message: '请输入用户名',
},
]}
>
<Input size="large" placeholder="验证码" />
<Input size="large" placeholder="用户名" />
</FormItem>
</Col>
<Col span={8}>
<Button
size="large"
disabled={!!count}
className={styles.getCaptcha}
onClick={onGetCaptcha}
<Popover
getPopupContainer={(node) => {
if (node && node.parentNode) {
return node.parentNode as HTMLElement;
}
return node;
}}
content={
visible && (
<div style={{ padding: '4px 0' }}>
{passwordStatusMap[getPasswordStatus()]}
{renderPasswordProgress()}
<div style={{ marginTop: 10 }}>
<span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
</div>
</div>
)
}
overlayStyle={{ width: 240 }}
placement="right"
visible={visible}
>
{count ? `${count} s` : '获取验证码'}
</Button>
</Col>
</Row>
<FormItem>
<Button
size="large"
loading={submitting}
className={styles.submit}
type="primary"
htmlType="submit"
>
<span>注册</span>
</Button>
<Link className={styles.login} to="/user/login">
<span>使用已有账户登录</span>
</Link>
</FormItem>
</Form>
<FormItem
name="password"
className={
form.getFieldValue('password') &&
form.getFieldValue('password').length > 0 &&
styles.password
}
rules={[
{
validator: checkPassword,
},
]}
>
<Input size="large" type="password" placeholder="至少6位密码，区分大小写" />
</FormItem>
</Popover>
<FormItem
name="confirm"
rules={[
{
required: true,
message: '确认密码',
},
{
validator: checkConfirm,
},
]}
>
<Input size="large" type="password" placeholder="确认密码" />
</FormItem>
<InputGroup compact>
<Select size="large" value={prefix} onChange={changePrefix} style={{ width: '20%' }}>
<Option value="86">+86</Option>
<Option value="87">+87</Option>
</Select>
<FormItem
style={{ width: '80%' }}
name="mobile"
rules={[
{
required: true,
message: '请输入手机号!',
},
{
pattern: /^\d{11}$/,
message: '手机号格式错误!',
},
]}
>
<Input size="large" placeholder="手机号" />
</FormItem>
</InputGroup>
<Row gutter={8}>
<Col span={16}>
<FormItem
name="captcha"
rules={[
{
required: true,
message: '请输入验证码!',
},
]}
>
<Input size="large" placeholder="验证码" />
</FormItem>
</Col>
<Col span={8}>
<Button
size="large"
disabled={!!count}
className={styles.getCaptcha}
onClick={onGetCaptcha}
>
{count ? `${count} s` : '获取验证码'}
</Button>
</Col>
</Row>
<FormItem>
<Button
size="large"
loading={submitting}
className={styles.submit}
type="primary"
htmlType="submit"
>
<span>注册</span>
</Button>
<Link className={styles.login} to="/user/login">
<span>使用已有账户登录</span>
</Link>
</FormItem>
</Form>
</div>
</div>
</div>
);
};
Expand Down
Loading

0 comments on commit 4a881d3

Please sign in to comment.