Skip to content

GitLab

A
ant-design-pro
Commit 89bacb35 authored by duanledexianxianxian's avatar duanledexianxianxian
Browse files
Options

登录页面

parent 55cb4bfd
Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 2178 deletions
config/config.ts
View file @ 89bacb35
......@@ -102,16 +102,6 @@ export default {
path: '/user/login',
component: './user/login',
},
{
name: 'register-result',
path: '/user/register-result',
component: './user/register-result',
},
{
name: 'register',
path: '/user/register',
component: './user/register',
},
],
},
{
......
src/app.js
View file @ 89bacb35
export const dva = {
config: {
onError(e) {
console.log(e);
e.preventDefault();
},
},
......
src/config.js
View file @ 89bacb35
......@@ -11,4 +11,5 @@ export default {
resMessageKey: 'message', // 后台正常返回错误编码
successCode: 'sys.success', // 后台正常返回错误编码
isThrowError: true,
copyright: `${new Date().getFullYear()} KIM3.0技术中台部出品`,
};
src/layouts/UserLayout.less
View file @ 89bacb35
......@@ -6,6 +6,20 @@
height: 100vh;
overflow: auto;
background: @layout-body-background;
.content {
padding: 0;
}
:global {
.anticon-copyright {
margin-right: 16px;
}
.ant-layout-footer {
background: linear-gradient(#43cec4, #43cec4);
.ant-pro-global-footer-copyright {
color: rgba(255, 255, 255, 0.6);
}
}
}
}
.lang {
......
src/layouts/UserLayout.tsx
View file @ 89bacb35
......@@ -9,6 +9,7 @@ import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import DefaultSettings from 'config/defaultSettings';
import logo from '../assets/logo.svg';
import config from '@/config';
import styles from './UserLayout.less';
export interface UserLayoutProps extends ConnectProps {
......@@ -43,19 +44,8 @@ const UserLayout: React.SFC<UserLayoutProps> = props => {
<div className={styles.lang}>
<SelectLang locales={DefaultSettings.locales} />
</div>
<div className={styles.content}>
<div className={styles.top}>
<div className={styles.header}>
<Link to="/">
<img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>Ant Design</span>
</Link>
</div>
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
</div>
{children}
</div>
<DefaultFooter />
<div className={styles.content}>{children}</div>
<DefaultFooter copyright={config.copyright} links={[]} />
</div>
</DocumentTitle>
);
......
src/pages/user/login/_mock.ts deleted 100644 → 0
View file @ 55cb4bfd
function getFakeCaptcha(req: any, res: { json: (arg0: string) => void }) {
return res.json('captcha-xxx');
}
export default {
'POST /api/login/account': (
req: { body: { password: any; userName: any; type: any } },
res: {
send: (data: any) => void;
},
) => {
const { password, userName, type } = req.body;
if (password === 'ant.design' && userName === 'admin') {
res.send({
status: 'ok',
type,
currentAuthority: 'admin',
});
return;
}
if (password === 'ant.design' && userName === 'user') {
res.send({
status: 'ok',
type,
currentAuthority: 'user',
});
return;
}
res.send({
status: 'error',
type,
currentAuthority: 'guest',
});
},
'GET /api/login/captcha': getFakeCaptcha,
};
src/pages/user/login/components/Login/LoginContext.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { createContext } from 'react';
export interface LoginContextProps {
tabUtil?: {
addTab: (id: string) => void;
removeTab: (id: string) => void;
};
updateActive?: (activeItem: { [key: string]: string } | string) => void;
}
const LoginContext: React.Context<LoginContextProps> = createContext({});
export default LoginContext;
src/pages/user/login/components/Login/LoginItem.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Button, Col, Form, Input, Row } from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import omit from 'omit.js';
import ItemMap from './map';
import LoginContext, { LoginContextProps } from './LoginContext';
import styles from './index.less';
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export type WrappedLoginItemProps = Omit<LoginItemProps, 'form' | 'type' | 'updateActive'>;
export type LoginItemKeyType = keyof typeof ItemMap;
export interface LoginItemType {
UserName: React.FC<WrappedLoginItemProps>;
Password: React.FC<WrappedLoginItemProps>;
Mobile: React.FC<WrappedLoginItemProps>;
Captcha: React.FC<WrappedLoginItemProps>;
}
export interface LoginItemProps {
name?: string;
rules?: any[];
style?: React.CSSProperties;
onGetCaptcha?: (event?: MouseEvent) => void | Promise<any> | false;
placeholder?: string;
buttonText?: React.ReactNode;
onPressEnter?: (e: any) => void;
countDown?: number;
getCaptchaButtonText?: string;
getCaptchaSecondText?: string;
updateActive?: LoginContextProps['updateActive'];
type?: string;
defaultValue?: string;
form?: FormComponentProps['form'];
customProps?: { [key: string]: any };
onChange?: (e: any) => void;
tabUtil?: any;
}
interface LoginItemState {
count: number;
}
const FormItem = Form.Item;
class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
static defaultProps = {
getCaptchaButtonText: 'captcha',
getCaptchaSecondText: 'second',
};
interval: number | undefined = undefined;
constructor(props: LoginItemProps) {
super(props);
this.state = {
count: 0,
};
}
componentDidMount() {
const { updateActive, name = '' } = this.props;
if (updateActive) {
updateActive(name);
}
}
componentWillUnmount() {
clearInterval(this.interval);
}
onGetCaptcha = () => {
const { onGetCaptcha } = this.props;
const result = onGetCaptcha ? onGetCaptcha() : null;
if (result === false) {
return;
}
if (result instanceof Promise) {
result.then(this.runGetCaptchaCountDown);
} else {
this.runGetCaptchaCountDown();
}
};
getFormItemOptions = ({ onChange, defaultValue, customProps = {}, rules }: LoginItemProps) => {
const options: {
rules?: any[];
onChange?: LoginItemProps['onChange'];
initialValue?: LoginItemProps['defaultValue'];
} = {
rules: rules || customProps.rules,
};
if (onChange) {
options.onChange = onChange;
}
if (defaultValue) {
options.initialValue = defaultValue;
}
return options;
};
runGetCaptchaCountDown = () => {
const { countDown } = this.props;
let count = countDown || 59;
this.setState({ count });
this.interval = window.setInterval(() => {
count -= 1;
this.setState({ count });
if (count === 0) {
clearInterval(this.interval);
}
}, 1000);
};
render() {
const { count } = this.state;
// 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props tabUtil
const {
onChange,
customProps,
defaultValue,
rules,
name,
getCaptchaButtonText,
getCaptchaSecondText,
updateActive,
type,
form,
tabUtil,
...restProps
} = this.props;
if (!name) {
return null;
}
if (!form) {
return null;
}
const { getFieldDecorator } = form;
// get getFieldDecorator props
const options = this.getFormItemOptions(this.props);
const otherProps = restProps || {};
if (type === 'Captcha') {
const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
return (
<FormItem>
<Row gutter={8}>
<Col span={16}>
{getFieldDecorator(name, options)(<Input {...customProps} {...inputProps} />)}
</Col>
<Col span={8}>
<Button
disabled={!!count}
className={styles.getCaptcha}
size="large"
onClick={this.onGetCaptcha}
>
{count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
</Button>
</Col>
</Row>
</FormItem>
);
}
return (
<FormItem>
{getFieldDecorator(name, options)(<Input {...customProps} {...otherProps} />)}
</FormItem>
);
}
}
const LoginItem: Partial<LoginItemType> = {};
Object.keys(ItemMap).forEach(key => {
const item = ItemMap[key];
LoginItem[key] = (props: LoginItemProps) => (
<LoginContext.Consumer>
{context => (
<WrapFormItem
customProps={item.props}
rules={item.rules}
{...props}
type={key}
{...context}
updateActive={context.updateActive}
/>
)}
</LoginContext.Consumer>
);
});
export default LoginItem as LoginItemType;
src/pages/user/login/components/Login/LoginSubmit.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Button, Form } from 'antd';
import { ButtonProps } from 'antd/es/button';
import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
const FormItem = Form.Item;
interface LoginSubmitProps extends ButtonProps {
className?: string;
}
const LoginSubmit: React.SFC<LoginSubmitProps> = ({ className, ...rest }) => {
const clsString = classNames(styles.submit, className);
return (
<FormItem>
<Button size="large" className={clsString} type="primary" htmlType="submit" {...rest} />
</FormItem>
);
};
export default LoginSubmit;
src/pages/user/login/components/Login/LoginTab.tsx deleted 100644 → 0
View file @ 55cb4bfd
import React, { Component } from 'react';
import { TabPaneProps } from 'antd/es/tabs';
import { Tabs } from 'antd';
import LoginContext, { LoginContextProps } from './LoginContext';
const { TabPane } = Tabs;
const generateId = (() => {
let i = 0;
return (prefix = '') => {
i += 1;
return `${prefix}${i}`;
};
})();
interface LoginTabProps extends TabPaneProps {
tabUtil: LoginContextProps['tabUtil'];
}
class LoginTab extends Component<LoginTabProps> {
uniqueId: string = '';
constructor(props: LoginTabProps) {
super(props);
this.uniqueId = generateId('login-tab-');
}
componentDidMount() {
const { tabUtil } = this.props;
if (tabUtil) {
tabUtil.addTab(this.uniqueId);
}
}
render() {
const { children } = this.props;
return <TabPane {...this.props}>{children}</TabPane>;
}
}
const WrapContext: React.SFC<TabPaneProps> & {
typeName: string;
} = props => (
<LoginContext.Consumer>
{value => <LoginTab tabUtil={value.tabUtil} {...props} />}
</LoginContext.Consumer>
);
// 标志位 用来判断是不是自定义组件
WrapContext.typeName = 'LoginTab';
export default WrapContext;
src/pages/user/login/components/Login/index.less deleted 100644 → 0
View file @ 55cb4bfd
@import '~antd/es/style/themes/default.less';
.login {
:global {
.ant-tabs .ant-tabs-bar {
margin-bottom: 24px;
text-align: center;
border-bottom: 0;
}
.ant-form-item {
margin: 0 2px 24px;
}
}
.getCaptcha {
display: block;
width: 100%;
}
.icon {
margin-left: 16px;
color: rgba(0, 0, 0, 0.2);
font-size: 24px;
vertical-align: middle;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @primary-color;
}
}
.other {
margin-top: 24px;
line-height: 22px;
text-align: left;
.register {
float: right;
}
}
.prefixIcon {
color: @disabled-color;
font-size: @font-size-base;
}
.submit {
width: 100%;
margin-top: 24px;
}
}
src/pages/user/login/components/Login/index.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Form, Tabs } from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import classNames from 'classnames';
import LoginContext, { LoginContextProps } from './LoginContext';
import LoginItem, { LoginItemProps } from './LoginItem';
import LoginSubmit from './LoginSubmit';
import LoginTab from './LoginTab';
import styles from './index.less';
export interface LoginProps {
defaultActiveKey?: string;
onTabChange?: (key: string) => void;
style?: React.CSSProperties;
onSubmit?: (error: any, values: any) => void;
className?: string;
form: FormComponentProps['form'];
children: React.ReactElement<LoginTab>[];
}
interface LoginState {
tabs?: string[];
type?: string;
active?: { [key: string]: any[] };
}
class Login extends Component<LoginProps, LoginState> {
public static Tab = LoginTab;
public static Submit = LoginSubmit;
public static UserName: React.FunctionComponent<LoginItemProps>;
public static Password: React.FunctionComponent<LoginItemProps>;
public static Mobile: React.FunctionComponent<LoginItemProps>;
public static Captcha: React.FunctionComponent<LoginItemProps>;
static defaultProps = {
className: '',
defaultActiveKey: '',
onTabChange: () => {},
onSubmit: () => {},
};
constructor(props: LoginProps) {
super(props);
this.state = {
type: props.defaultActiveKey,
tabs: [],
active: {},
};
}
onSwitch = (type: string) => {
this.setState(
{
type,
},
() => {
const { onTabChange } = this.props;
if (onTabChange) {
onTabChange(type);
}
},
);
};
getContext: () => LoginContextProps = () => {
const { form } = this.props;
const { tabs = [] } = this.state;
return {
tabUtil: {
addTab: id => {
this.setState({
tabs: [...tabs, id],
});
},
removeTab: id => {
this.setState({
tabs: tabs.filter(currentId => currentId !== id),
});
},
},
form: { ...form },
updateActive: activeItem => {
const { type = '', active = {} } = this.state;
if (active[type]) {
active[type].push(activeItem);
} else {
active[type] = [activeItem];
}
this.setState({
active,
});
},
};
};
handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const { active = {}, type = '' } = this.state;
const { form, onSubmit } = this.props;
const activeFields = active[type] || [];
if (form) {
form.validateFields(activeFields, { force: true }, (err, values) => {
if (onSubmit) {
onSubmit(err, values);
}
});
}
};
render() {
const { className, children } = this.props;
const { type, tabs = [] } = this.state;
const TabChildren: React.ReactComponentElement<LoginTab>[] = [];
const otherChildren: React.ReactElement<any>[] = [];
React.Children.forEach(
children,
(child: React.ReactComponentElement<LoginTab> | React.ReactElement<any>) => {
if (!child) {
return;
}
if (child.type.typeName === 'LoginTab') {
TabChildren.push(child);
} else {
otherChildren.push(child);
}
},
);
return (
<LoginContext.Provider value={this.getContext()}>
<div className={classNames(className, styles.login)}>
<Form onSubmit={this.handleSubmit}>
{tabs.length ? (
<React.Fragment>
<Tabs
animated={false}
className={styles.tabs}
activeKey={type}
onChange={this.onSwitch}
>
{TabChildren}
</Tabs>
{otherChildren}
</React.Fragment>
) : (
children
)}
</Form>
</div>
</LoginContext.Provider>
);
}
}
(Object.keys(LoginItem) as (keyof LoginItemType)[]).forEach(item => {
Login[item] = LoginItem[item];
});
export default Form.create<LoginProps>()(Login);
src/pages/user/login/components/Login/map.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Icon } from 'antd';
import React from 'react';
import styles from './index.less';
export default {
UserName: {
props: {
size: 'large',
id: 'userName',
prefix: <Icon type="user" className={styles.prefixIcon} />,
placeholder: 'admin',
},
rules: [
{
required: true,
message: 'Please enter username!',
},
],
},
Password: {
props: {
size: 'large',
prefix: <Icon type="lock" className={styles.prefixIcon} />,
type: 'password',
id: 'password',
placeholder: '888888',
},
rules: [
{
required: true,
message: 'Please enter password!',
},
],
},
Mobile: {
props: {
size: 'large',
prefix: <Icon type="mobile" className={styles.prefixIcon} />,
placeholder: 'mobile number',
},
rules: [
{
required: true,
message: 'Please enter mobile number!',
},
{
pattern: /^1\d{10}$/,
message: 'Wrong mobile number format!',
},
],
},
Captcha: {
props: {
size: 'large',
prefix: <Icon type="mail" className={styles.prefixIcon} />,
placeholder: 'captcha',
},
rules: [
{
required: true,
message: 'Please enter Captcha!',
},
],
},
};
src/pages/user/login/index.js 0 → 100644
View file @ 89bacb35
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import store from '@/utils/store';
import { Input, Icon, Button, message } from 'antd';
import config from '@/config';
import styles from './index.less';
@connect()
class Login extends React.Component {
state = {
username: '',
password: '',
};
localOnChangeUserName = e => {
this.setState({ username: e.target.value });
};
localOnChangePassWord = e => {
this.setState({ password: e.target.value });
};
login = () => {
const { username, password } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'login/login',
payload: { userName: username, password },
}).then(({ code, data }) => {
if (code === 'sys.success') {
const { token, userId } = data;
// message.success("登录成功");
store.set('token', token);
store.set('userId', userId);
router.push(config.home || '/profile/message');
}
});
};
render() {
return (
<div className={styles.root}>
<div className={styles.container}>
<div className={styles.box}>
<div className={styles.title}>KIM3.0 平台业务架构</div>
<Input
className={styles.username}
onChange={this.localOnChangeUserName}
prefix={<Icon type="user" />}
placeholder="请输入账号"
/>
<Input
className={styles.password}
onChange={this.localOnChangePassWord}
type="password"
prefix={<Icon type="lock" />}
placeholder="请输入密码"
onPressEnter={this.login}
/>
<Button className={styles.submit} type="primary" onClick={this.login}>
登录
</Button>
</div>
{/* <div className={styles.more}>
<div className={styles.info} />
<div className={styles.rights}>
<span>copyright</span>
<span>2019 KIM3.0技术中台部出品</span>
</div>
</div> */}
</div>
<div className={styles.line} />
</div>
);
}
}
export default Login;
src/pages/user/login/index.less 0 → 100644
View file @ 89bacb35
@import '~@/themes/vars.less';
.root {
// background-image: url(../assets/background-image.png);
// background-repeat: no-repeat;
// // background-color: #b8e5f8;
// background-size: cover;
background: linear-gradient(@color-primary, @color-primary);
width: 100%;
// height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.container {
// height: 500px;
width: 500px;
background-color: rgba(255, 255, 255, 0);
//border-radius: 4px;
//box-shadow: 0px 2px 4px;
margin-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
position: relative;
.box {
width: 260px;
.title {
font-size: @font-size-xmd;
color: white;
text-align: center;
margin-bottom: @space-md * 2;
font-weight: 500;
}
.username,
.password {
margin-bottom: @space-lg;
:global {
.ant-input {
font-size: @font-size-sm;
height: 36px;
padding-bottom: 8px;
padding-left: 40px;
}
i {
font-size: @font-size-sm;
color: @color-primary;
}
}
}
.submit {
font-size: @font-size-sm;
//line-height: 36px;
height: 36px;
width: 100%;
background-color: rgba(43, 187, 176, 0.8);
//border-color: rgba(43, 187, 176, 0.9);
box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
}
}
.more {
// height: 100px;
top: 100%;
// bottom: 0px;
width: 100%;
position: absolute;
display: flex;
align-items: center;
flex-direction: column;
.info {
width: 60%;
display: flex;
justify-content: space-between;
a {
color: rgba(255, 255, 255, 0.8);
font-size: @font-size-md;
margin: @space-lg * 2 0;
}
}
.rights {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
:first-child {
margin-right: @space-lg;
}
}
}
}
.line {
position: absolute;
bottom: 0;
width: 100%;
background-color: @color-primary;
//height: 80%;
//background-image: url("../assets/line.png");
//background-repeat: no-repeat;
//background-size: cover;
}
}
src/pages/user/login/index.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Alert, Checkbox, Icon } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import Link from 'umi/link';
import { connect } from 'dva';
import { StateType } from './model';
import LoginComponents from './components/Login';
import styles from './style.less';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;
interface LoginProps {
dispatch: Dispatch<any>;
userLogin: StateType;
submitting: boolean;
}
interface LoginState {
type: string;
autoLogin: boolean;
}
export interface FromDataType {
userName: string;
password: string;
mobile: string;
captcha: string;
}
@connect(
({
userLogin,
loading,
}: {
userLogin: StateType;
loading: {
effects: {
[key: string]: string;
};
};
}) => ({
userLogin,
submitting: loading.effects['userLogin/login'],
}),
)
class Login extends Component<LoginProps, LoginState> {
loginForm: FormComponentProps['form'] | undefined | null = undefined;
state: LoginState = {
type: 'account',
autoLogin: true,
};
changeAutoLogin = (e: CheckboxChangeEvent) => {
this.setState({
autoLogin: e.target.checked,
});
};
handleSubmit = (err: any, values: FromDataType) => {
const { type } = this.state;
if (!err) {
const { dispatch } = this.props;
dispatch({
type: 'userLogin/login',
payload: {
...values,
type,
},
});
}
};
onTabChange = (type: string) => {
this.setState({ type });
};
onGetCaptcha = () =>
new Promise((resolve, reject) => {
if (!this.loginForm) {
return;
}
this.loginForm.validateFields(['mobile'], {}, (err: any, values: FromDataType) => {
if (err) {
reject(err);
} else {
const { dispatch } = this.props;
((dispatch({
type: 'userLogin/getCaptcha',
payload: values.mobile,
}) as unknown) as Promise<any>)
.then(resolve)
.catch(reject);
}
});
});
renderMessage = (content: string) => (
<Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
);
render() {
const { userLogin, submitting } = this.props;
const { status, type: loginType } = userLogin;
const { type, autoLogin } = this.state;
return (
<div className={styles.main}>
<LoginComponents
defaultActiveKey={type}
onTabChange={this.onTabChange}
onSubmit={this.handleSubmit}
ref={(form: any) => {
this.loginForm = form;
}}
>
<Tab key="account" tab={formatMessage({ id: 'user-login.login.tab-login-credentials' })}>
{status === 'error' &&
loginType === 'account' &&
!submitting &&
this.renderMessage(
formatMessage({ id: 'user-login.login.message-invalid-credentials' }),
)}
<UserName
name="userName"
placeholder={`${formatMessage({ id: 'user-login.login.userName' })}: admin or user`}
rules={[
{
required: true,
message: formatMessage({ id: 'user-login.userName.required' }),
},
]}
/>
<Password
name="password"
placeholder={`${formatMessage({ id: 'user-login.login.password' })}: ant.design`}
rules={[
{
required: true,
message: formatMessage({ id: 'user-login.password.required' }),
},
]}
onPressEnter={() =>
this.loginForm && this.loginForm.validateFields(this.handleSubmit)
}
/>
</Tab>
<Tab key="mobile" tab={formatMessage({ id: 'user-login.login.tab-login-mobile' })}>
{status === 'error' &&
loginType === 'mobile' &&
!submitting &&
this.renderMessage(
formatMessage({ id: 'user-login.login.message-invalid-verification-code' }),
)}
<Mobile
name="mobile"
placeholder={formatMessage({ id: 'user-login.phone-number.placeholder' })}
rules={[
{
required: true,
message: formatMessage({ id: 'user-login.phone-number.required' }),
},
{
pattern: /^1\d{10}$/,
message: formatMessage({ id: 'user-login.phone-number.wrong-format' }),
},
]}
/>
<Captcha
name="captcha"
placeholder={formatMessage({ id: 'user-login.verification-code.placeholder' })}
countDown={120}
onGetCaptcha={this.onGetCaptcha}
getCaptchaButtonText={formatMessage({ id: 'user-login.form.get-captcha' })}
getCaptchaSecondText={formatMessage({ id: 'user-login.captcha.second' })}
rules={[
{
required: true,
message: formatMessage({ id: 'user-login.verification-code.required' }),
},
]}
/>
</Tab>
<div>
<Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
<FormattedMessage id="user-login.login.remember-me" />
</Checkbox>
<a style={{ float: 'right' }} href="">
<FormattedMessage id="user-login.login.forgot-password" />
</a>
</div>
<Submit loading={submitting}>
<FormattedMessage id="user-login.login.login" />
</Submit>
<div className={styles.other}>
<FormattedMessage id="user-login.login.sign-in-with" />
<Icon type="alipay-circle" className={styles.icon} theme="outlined" />
<Icon type="taobao-circle" className={styles.icon} theme="outlined" />
<Icon type="weibo-circle" className={styles.icon} theme="outlined" />
<Link className={styles.register} to="/user/register">
<FormattedMessage id="user-login.login.signup" />
</Link>
</div>
</LoginComponents>
</div>
);
}
}
export default Login;
src/pages/user/login/locales/en-US.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-login.login.userName': 'userName',
'user-login.login.password': 'password',
'user-login.login.message-invalid-credentials':
'Invalid username or password（admin/ant.design）',
'user-login.login.message-invalid-verification-code': 'Invalid verification code',
'user-login.login.tab-login-credentials': 'Credentials',
'user-login.login.tab-login-mobile': 'Mobile number',
'user-login.login.remember-me': 'Remember me',
'user-login.login.forgot-password': 'Forgot your password?',
'user-login.login.sign-in-with': 'Sign in with',
'user-login.login.signup': 'Sign up',
'user-login.login.login': 'Login',
'user-login.register.register': 'Register',
'user-login.register.get-verification-code': 'Get code',
'user-login.register.sign-in': 'Already have an account?',
'user-login.register-result.msg': 'Account：registered at {email}',
'user-login.register-result.activation-email':
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
'user-login.register-result.back-home': 'Back to home',
'user-login.register-result.view-mailbox': 'View mailbox',
'user-login.email.required': 'Please enter your email!',
'user-login.email.wrong-format': 'The email address is in the wrong format!',
'user-login.userName.required': 'Please enter your userName!',
'user-login.password.required': 'Please enter your password!',
'user-login.password.twice': 'The passwords entered twice do not match!',
'user-login.strength.msg':
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
'user-login.strength.strong': 'Strength: strong',
'user-login.strength.medium': 'Strength: medium',
'user-login.strength.short': 'Strength: too short',
'user-login.confirm-password.required': 'Please confirm your password!',
'user-login.phone-number.required': 'Please enter your phone number!',
'user-login.phone-number.wrong-format': 'Malformed phone number!',
'user-login.verification-code.required': 'Please enter the verification code!',
'user-login.title.required': 'Please enter a title',
'user-login.date.required': 'Please select the start and end date',
'user-login.goal.required': 'Please enter a description of the goal',
'user-login.standard.required': 'Please enter a metric',
'user-login.form.get-captcha': 'Get Captcha',
'user-login.captcha.second': 'sec',
'user-login.form.optional': ' (optional) ',
'user-login.form.submit': 'Submit',
'user-login.form.save': 'Save',
'user-login.email.placeholder': 'Email',
'user-login.password.placeholder': 'Password',
'user-login.confirm-password.placeholder': 'Confirm password',
'user-login.phone-number.placeholder': 'Phone number',
'user-login.verification-code.placeholder': 'Verification code',
'user-login.title.label': 'Title',
'user-login.title.placeholder': 'Give the target a name',
'user-login.date.label': 'Start and end date',
'user-login.placeholder.start': 'Start date',
'user-login.placeholder.end': 'End date',
'user-login.goal.label': 'Goal description',
'user-login.goal.placeholder': 'Please enter your work goals',
'user-login.standard.label': 'Metrics',
'user-login.standard.placeholder': 'Please enter a metric',
'user-login.client.label': 'Client',
'user-login.label.tooltip': 'Target service object',
'user-login.client.placeholder':
'Please describe your customer service, internal customers directly @ Name / job number',
'user-login.invites.label': 'Inviting critics',
'user-login.invites.placeholder':
'Please direct @ Name / job number, you can invite up to 5 people',
'user-login.weight.label': 'Weight',
'user-login.weight.placeholder': 'Please enter weight',
'user-login.public.label': 'Target disclosure',
'user-login.label.help': 'Customers and invitees are shared by default',
'user-login.radio.public': 'Public',
'user-login.radio.partially-public': 'Partially public',
'user-login.radio.private': 'Private',
'user-login.publicUsers.placeholder': 'Open to',
'user-login.option.A': 'Colleague A',
'user-login.option.B': 'Colleague B',
'user-login.option.C': 'Colleague C',
'user-login.navBar.lang': 'Languages',
};
src/pages/user/login/locales/zh-CN.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-login.login.userName': '用户名',
'user-login.login.password': '密码',
'user-login.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
'user-login.login.message-invalid-verification-code': '验证码错误',
'user-login.login.tab-login-credentials': '账户密码登录',
'user-login.login.tab-login-mobile': '手机号登录',
'user-login.login.remember-me': '自动登录',
'user-login.login.forgot-password': '忘记密码',
'user-login.login.sign-in-with': '其他登录方式',
'user-login.login.signup': '注册账户',
'user-login.login.login': '登录',
'user-login.register.register': '注册',
'user-login.register.get-verification-code': '获取验证码',
'user-login.register.sign-in': '使用已有账户登录',
'user-login.register-result.msg': '你的账户：{email} 注册成功',
'user-login.register-result.activation-email':
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
'user-login.register-result.back-home': '返回首页',
'user-login.register-result.view-mailbox': '查看邮箱',
'user-login.email.required': '请输入邮箱地址！',
'user-login.email.wrong-format': '邮箱地址格式错误！',
'user-login.userName.required': '请输入用户名!',
'user-login.password.required': '请输入密码！',
'user-login.password.twice': '两次输入的密码不匹配!',
'user-login.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
'user-login.strength.strong': '强度：强',
'user-login.strength.medium': '强度：中',
'user-login.strength.short': '强度：太短',
'user-login.confirm-password.required': '请确认密码！',
'user-login.phone-number.required': '请输入手机号！',
'user-login.phone-number.wrong-format': '手机号格式错误！',
'user-login.verification-code.required': '请输入验证码！',
'user-login.title.required': '请输入标题',
'user-login.date.required': '请选择起止日期',
'user-login.goal.required': '请输入目标描述',
'user-login.standard.required': '请输入衡量标准',
'user-login.form.get-captcha': '获取验证码',
'user-login.captcha.second': '秒',
'user-login.form.optional': '（选填）',
'user-login.form.submit': '提交',
'user-login.form.save': '保存',
'user-login.email.placeholder': '邮箱',
'user-login.password.placeholder': '至少6位密码，区分大小写',
'user-login.confirm-password.placeholder': '确认密码',
'user-login.phone-number.placeholder': '手机号',
'user-login.verification-code.placeholder': '验证码',
'user-login.title.label': '标题',
'user-login.title.placeholder': '给目标起个名字',
'user-login.date.label': '起止日期',
'user-login.placeholder.start': '开始日期',
'user-login.placeholder.end': '结束日期',
'user-login.goal.label': '目标描述',
'user-login.goal.placeholder': '请输入你的阶段性工作目标',
'user-login.standard.label': '衡量标准',
'user-login.standard.placeholder': '请输入衡量标准',
'user-login.client.label': '客户',
'user-login.label.tooltip': '目标的服务对象',
'user-login.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
'user-login.invites.label': '邀评人',
'user-login.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
'user-login.weight.label': '权重',
'user-login.weight.placeholder': '请输入',
'user-login.public.label': '目标公开',
'user-login.label.help': '客户、邀评人默认被分享',
'user-login.radio.public': '公开',
'user-login.radio.partially-public': '部分公开',
'user-login.radio.private': '不公开',
'user-login.publicUsers.placeholder': '公开给',
'user-login.option.A': '同事甲',
'user-login.option.B': '同事乙',
'user-login.option.C': '同事丙',
'user-login.navBar.lang': '语言',
};
src/pages/user/login/locales/zh-TW.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-login.login.userName': '賬戶',
'user-login.login.password': '密碼',
'user-login.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
'user-login.login.message-invalid-verification-code': '驗證碼錯誤',
'user-login.login.tab-login-credentials': '賬戶密碼登錄',
'user-login.login.tab-login-mobile': '手機號登錄',
'user-login.login.remember-me': '自動登錄',
'user-login.login.forgot-password': '忘記密碼',
'user-login.login.sign-in-with': '其他登錄方式',
'user-login.login.signup': '註冊賬戶',
'user-login.login.login': '登錄',
'user-login.register.register': '註冊',
'user-login.register.get-verification-code': '獲取驗證碼',
'user-login.register.sign-in': '使用已有賬戶登錄',
'user-login.register-result.msg': '妳的賬戶：{email} 註冊成功',
'user-login.register-result.activation-email':
'激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。',
'user-login.register-result.back-home': '返回首頁',
'user-login.register-result.view-mailbox': '查看郵箱',
'user-login.email.required': '請輸入郵箱地址！',
'user-login.email.wrong-format': '郵箱地址格式錯誤！',
'user-login.userName.required': '請輸入賬戶!',
'user-login.password.required': '請輸入密碼！',
'user-login.password.twice': '兩次輸入的密碼不匹配!',
'user-login.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
'user-login.strength.strong': '強度：強',
'user-login.strength.medium': '強度：中',
'user-login.strength.short': '強度：太短',
'user-login.confirm-password.required': '請確認密碼！',
'user-login.phone-number.required': '請輸入手機號！',
'user-login.phone-number.wrong-format': '手機號格式錯誤！',
'user-login.verification-code.required': '請輸入驗證碼！',
'user-login.title.required': '請輸入標題',
'user-login.date.required': '請選擇起止日期',
'user-login.goal.required': '請輸入目標描述',
'user-login.standard.required': '請輸入衡量標淮',
'user-login.form.get-captcha': '獲取驗證碼',
'user-login.captcha.second': '秒',
'user-login.form.optional': '（選填）',
'user-login.form.submit': '提交',
'user-login.form.save': '保存',
'user-login.email.placeholder': '郵箱',
'user-login.password.placeholder': '至少6位密碼，區分大小寫',
'user-login.confirm-password.placeholder': '確認密碼',
'user-login.phone-number.placeholder': '手機號',
'user-login.verification-code.placeholder': '驗證碼',
'user-login.title.label': '標題',
'user-login.title.placeholder': '給目標起個名字',
'user-login.date.label': '起止日期',
'user-login.placeholder.start': '開始日期',
'user-login.placeholder.end': '結束日期',
'user-login.goal.label': '目標描述',
'user-login.goal.placeholder': '請輸入妳的階段性工作目標',
'user-login.standard.label': '衡量標淮',
'user-login.standard.placeholder': '請輸入衡量標淮',
'user-login.client.label': '客戶',
'user-login.label.tooltip': '目標的服務對象',
'user-login.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
'user-login.invites.label': '邀評人',
'user-login.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
'user-login.weight.label': '權重',
'user-login.weight.placeholder': '請輸入',
'user-login.public.label': '目標公開',
'user-login.label.help': '客戶、邀評人默認被分享',
'user-login.radio.public': '公開',
'user-login.radio.partially-public': '部分公開',
'user-login.radio.private': '不公開',
'user-login.publicUsers.placeholder': '公開給',
'user-login.option.A': '同事甲',
'user-login.option.B': '同事乙',
'user-login.option.C': '同事丙',
'user-login.navBar.lang': '語言',
};
src/pages/user/login/model.ts deleted 100644 → 0
View file @ 55cb4bfd
import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { routerRedux } from 'dva/router';
import { fakeAccountLogin, getFakeCaptcha } from './service';
import { getPageQuery, setAuthority } from './utils/utils';
export interface StateType {
status?: 'ok' | 'error';
type?: string;
currentAuthority?: 'user' | 'guest' | 'admin';
}
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;
export interface ModelType {
namespace: string;
state: StateType;
effects: {
login: Effect;
getCaptcha: Effect;
};
reducers: {
changeLoginStatus: Reducer<StateType>;
};
}
const Model: ModelType = {
namespace: 'userLogin',
state: {
status: undefined,
},
effects: {
*login({ payload }, { call, put }) {
const response = yield call(fakeAccountLogin, payload);
yield put({
type: 'changeLoginStatus',
payload: response,
});
// Login successfully
if (response.status === 'ok') {
const urlParams = new URL(window.location.href);
const params = getPageQuery();
let { redirect } = params as { redirect: string };
if (redirect) {
const redirectUrlParams = new URL(redirect);
if (redirectUrlParams.origin === urlParams.origin) {
redirect = redirect.substr(urlParams.origin.length);
if (redirect.match(/^\/.*#/)) {
redirect = redirect.substr(redirect.indexOf('#') + 1);
}
} else {
window.location.href = redirect;
return;
}
}
yield put(routerRedux.replace(redirect || '/'));
}
},
*getCaptcha({ payload }, { call }) {
yield call(getFakeCaptcha, payload);
},
},
reducers: {
changeLoginStatus(state, { payload }) {
setAuthority(payload.currentAuthority);
return {
...state,
status: payload.status,
type: payload.type,
};
},
},
};
export default Model;
src/pages/user/login/models/index.js 0 → 100644
View file @ 89bacb35
import { login } from '../services';
const initData = {};
export default {
namespace: 'UserLogin',
state: {
...initData,
},
effects: {
*login({ payload }, { call }) {
const res = yield call(login, payload);
return res;
},
},
reducers: {
clearData: () => ({ ...initData }),
},
};
src/pages/user/login/service.ts deleted 100644 → 0
View file @ 55cb4bfd
import { get } from '@/utils/request';
import { FromDataType } from './index';
export async function fakeAccountLogin(params: FromDataType) {
return get('/api/login/account', {
method: 'POST',
data: params,
});
}
export async function getFakeCaptcha(mobile: string) {
return get(`/api/login/captcha?mobile=${mobile}`);
}
src/pages/user/login/services/index.js 0 → 100644
View file @ 89bacb35
import { post } from '@/utils/request';
export const login = data => post('/api/v1/login', data);
src/pages/user/login/style.less deleted 100644 → 0
View file @ 55cb4bfd
@import '~antd/es/style/themes/default.less';
.main {
width: 368px;
margin: 0 auto;
@media screen and (max-width: @screen-sm) {
width: 95%;
}
.icon {
margin-left: 16px;
color: rgba(0, 0, 0, 0.2);
font-size: 24px;
vertical-align: middle;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @primary-color;
}
}
.other {
margin-top: 24px;
line-height: 22px;
text-align: left;
.register {
float: right;
}
}
:global {
.antd-pro-login-submit {
width: 100%;
margin-top: 24px;
}
}
}
src/pages/user/login/utils/utils.ts deleted 100644 → 0
View file @ 55cb4bfd
import { parse } from 'qs';
export function getPageQuery() {
return parse(window.location.href.split('?')[1]);
}
export function setAuthority(authority: string | string[]) {
const proAuthority = typeof authority === 'string' ? [authority] : authority;
return localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
}
src/pages/user/register-result/Result/index.less deleted 100644 → 0
View file @ 55cb4bfd
@import '~antd/es/style/themes/default.less';
.result {
width: 72%;
margin: 0 auto;
text-align: center;
@media screen and (max-width: @screen-xs) {
width: 100%;
}
.icon {
margin-bottom: 24px;
font-size: 72px;
line-height: 72px;
& > .success {
color: @success-color;
}
& > .error {
color: @error-color;
}
}
.title {
margin-bottom: 16px;
color: @heading-color;
font-weight: 500;
font-size: 24px;
line-height: 32px;
}
.description {
margin-bottom: 24px;
color: @text-color-secondary;
font-size: 14px;
line-height: 22px;
}
.extra {
padding: 24px 40px;
text-align: left;
background: @background-color-light;
border-radius: @border-radius-sm;
@media screen and (max-width: @screen-xs) {
padding: 18px 20px;
}
}
.actions {
margin-top: 32px;
button:not(:last-child) {
margin-right: 8px;
}
}
}
src/pages/user/register-result/Result/index.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Icon } from 'antd';
import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
export interface ResultProps {
actions?: React.ReactNode;
className?: string;
description?: React.ReactNode;
extra?: React.ReactNode;
style?: React.CSSProperties;
title?: React.ReactNode;
type: 'success' | 'error';
}
const Result: React.SFC<ResultProps> = ({
className,
type,
title,
description,
extra,
actions,
...restProps
}) => {
const iconMap = {
error: <Icon className={styles.error} type="close-circle" theme="filled" />,
success: <Icon className={styles.success} type="check-circle" theme="filled" />,
};
const clsString = classNames(styles.result, className);
return (
<div className={clsString} {...restProps}>
<div className={styles.icon}>{iconMap[type]}</div>
<div className={styles.title}>{title}</div>
{description && <div className={styles.description}>{description}</div>}
{extra && <div className={styles.extra}>{extra}</div>}
{actions && <div className={styles.actions}>{actions}</div>}
</div>
);
};
export default Result;
src/pages/user/register-result/index.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { Button } from 'antd';
import Link from 'umi/link';
import React from 'react';
import { RouteChildrenProps } from 'react-router';
import Result from './Result';
import styles from './style.less';
const actions = (
<div className={styles.actions}>
<a href="">
<Button size="large" type="primary">
<FormattedMessage id="user-register-result.register-result.view-mailbox" />
</Button>
</a>
<Link to="/">
<Button size="large">
<FormattedMessage id="user-register-result.register-result.back-home" />
</Button>
</Link>
</div>
);
const RegisterResult: React.SFC<RouteChildrenProps> = ({ location }) => (
<Result
className={styles.registerResult}
type="success"
title={
<div className={styles.title}>
<FormattedMessage
id="user-register-result.register-result.msg"
values={{ email: location.state ? location.state.account : 'AntDesign@example.com' }}
/>
</div>
}
description={formatMessage({ id: 'user-register-result.register-result.activation-email' })}
actions={actions}
style={{ marginTop: 56 }}
/>
);
export default RegisterResult;
src/pages/user/register-result/locales/en-US.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-register-result.login.userName': 'userName',
'user-register-result.login.password': 'password',
'user-register-result.login.message-invalid-credentials':
'Invalid username or password（admin/ant.design）',
'user-register-result.login.message-invalid-verification-code': 'Invalid verification code',
'user-register-result.login.tab-login-credentials': 'Credentials',
'user-register-result.login.tab-login-mobile': 'Mobile number',
'user-register-result.login.remember-me': 'Remember me',
'user-register-result.login.forgot-password': 'Forgot your password?',
'user-register-result.login.sign-in-with': 'Sign in with',
'user-register-result.login.signup': 'Sign up',
'user-register-result.login.login': 'Login',
'user-register-result.register.register': 'Register',
'user-register-result.register.get-verification-code': 'Get code',
'user-register-result.register.sign-in': 'Already have an account?',
'user-register-result.register-result.msg': 'Account：registered at {email}',
'user-register-result.register-result.activation-email':
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
'user-register-result.register-result.back-home': 'Back to home',
'user-register-result.register-result.view-mailbox': 'View mailbox',
'user-register-result.navBar.lang': 'Languages',
};
src/pages/user/register-result/locales/zh-CN.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-register-result.login.userName': '用户名',
'user-register-result.login.password': '密码',
'user-register-result.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
'user-register-result.login.message-invalid-verification-code': '验证码错误',
'user-register-result.login.tab-login-credentials': '账户密码登录',
'user-register-result.login.tab-login-mobile': '手机号登录',
'user-register-result.login.remember-me': '自动登录',
'user-register-result.login.forgot-password': '忘记密码',
'user-register-result.login.sign-in-with': '其他登录方式',
'user-register-result.login.signup': '注册账户',
'user-register-result.login.login': '登录',
'user-register-result.register.register': '注册',
'user-register-result.register.get-verification-code': '获取验证码',
'user-register-result.register.sign-in': '使用已有账户登录',
'user-register-result.register-result.msg': '你的账户：{email} 注册成功',
'user-register-result.register-result.activation-email':
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
'user-register-result.register-result.back-home': '返回首页',
'user-register-result.register-result.view-mailbox': '查看邮箱',
'user-register-result.navBar.lang': '语言',
};
src/pages/user/register-result/locales/zh-TW.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-register-result.login.userName': '賬戶',
'user-register-result.login.password': '密碼',
'user-register-result.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
'user-register-result.login.message-invalid-verification-code': '驗證碼錯誤',
'user-register-result.login.tab-login-credentials': '賬戶密碼登錄',
'user-register-result.login.tab-login-mobile': '手機號登錄',
'user-register-result.login.remember-me': '自動登錄',
'user-register-result.login.forgot-password': '忘記密碼',
'user-register-result.login.sign-in-with': '其他登錄方式',
'user-register-result.login.signup': '註冊賬戶',
'user-register-result.login.login': '登錄',
'user-register-result.register.register': '註冊',
'user-register-result.register.get-verification-code': '獲取驗證碼',
'user-register-result.register.sign-in': '使用已有賬戶登錄',
'user-register-result.register-result.msg': '妳的賬戶：{email} 註冊成功',
'user-register-result.register-result.activation-email':
'激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。',
'user-register-result.register-result.back-home': '返回首頁',
'user-register-result.register-result.view-mailbox': '查看郵箱',
'user-register-result.navBar.lang': '語言',
};
src/pages/user/register-result/style.less deleted 100644 → 0
View file @ 55cb4bfd
.registerResult {
:global {
.anticon {
font-size: 64px;
}
}
.title {
margin-top: 32px;
font-size: 20px;
line-height: 28px;
}
.actions {
margin-top: 40px;
a + a {
margin-left: 8px;
}
}
}
src/pages/user/register/_mock.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'POST /api/register': (
req: any,
res: { send: (arg0: { status: string; currentAuthority: string }) => void },
) => {
res.send({ status: 'ok', currentAuthority: 'user' });
},
};
src/pages/user/register/index.tsx deleted 100644 → 0
View file @ 55cb4bfd
import { Button, Col, Form, Input, Popover, Progress, Row, Select, message } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import Link from 'umi/link';
import { connect } from 'dva';
import router from 'umi/router';
import { StateType } from './model';
import styles from './style.less';
const FormItem = Form.Item;
const { Option } = Select;
const InputGroup = Input.Group;
const passwordStatusMap = {
ok: (
<div className={styles.success}>
<FormattedMessage id="user-register.strength.strong" />
</div>
),
pass: (
<div className={styles.warning}>
<FormattedMessage id="user-register.strength.medium" />
</div>
),
poor: (
<div className={styles.error}>
<FormattedMessage id="user-register.strength.short" />
</div>
),
};
const passwordProgressMap: {
ok: 'success';
pass: 'normal';
poor: 'exception';
} = {
ok: 'success',
pass: 'normal',
poor: 'exception',
};
interface UserRegisterProps extends FormComponentProps {
dispatch: Dispatch<any>;
userRegister: StateType;
submitting: boolean;
}
interface UserRegisterState {
count: number;
confirmDirty: boolean;
visible: boolean;
help: string;
prefix: string;
}
export interface UserRegisterParams {
mail: string;
password: string;
confirm: string;
mobile: string;
captcha: string;
prefix: string;
}
@connect(
({
userRegister,
loading,
}: {
userRegister: StateType;
loading: {
effects: {
[key: string]: string;
};
};
}) => ({
userRegister,
submitting: loading.effects['userRegister/submit'],
}),
)
class Register extends Component<UserRegisterProps, UserRegisterState> {
state: UserRegisterState = {
count: 0,
confirmDirty: false,
visible: false,
help: '',
prefix: '86',
};
interval: number | undefined = undefined;
componentDidUpdate() {
const { userRegister, form } = this.props;
const account = form.getFieldValue('mail');
if (userRegister.status === 'ok') {
message.success('注册成功！');
router.push({
pathname: '/user/register-result',
state: {
account,
},
});
}
}
componentWillUnmount() {
clearInterval(this.interval);
}
onGetCaptcha = () => {
let count = 59;
this.setState({ count });
this.interval = window.setInterval(() => {
count -= 1;
this.setState({ count });
if (count === 0) {
clearInterval(this.interval);
}
}, 1000);
};
getPasswordStatus = () => {
const { form } = this.props;
const value = form.getFieldValue('password');
if (value && value.length > 9) {
return 'ok';
}
if (value && value.length > 5) {
return 'pass';
}
return 'poor';
};
handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const { form, dispatch } = this.props;
form.validateFields({ force: true }, (err, values) => {
if (!err) {
const { prefix } = this.state;
dispatch({
type: 'userRegister/submit',
payload: {
...values,
prefix,
},
});
}
});
};
checkConfirm = (rule: any, value: string, callback: (messgae?: string) => void) => {
const { form } = this.props;
if (value && value !== form.getFieldValue('password')) {
callback(formatMessage({ id: 'user-register.password.twice' }));
} else {
callback();
}
};
checkPassword = (rule: any, value: string, callback: (messgae?: string) => void) => {
const { visible, confirmDirty } = this.state;
if (!value) {
this.setState({
help: formatMessage({ id: 'user-register.password.required' }),
visible: !!value,
});
callback('error');
} else {
this.setState({
help: '',
});
if (!visible) {
this.setState({
visible: !!value,
});
}
if (value.length < 6) {
callback('error');
} else {
const { form } = this.props;
if (value && confirmDirty) {
form.validateFields(['confirm'], { force: true });
}
callback();
}
}
};
changePrefix = (value: string) => {
this.setState({
prefix: value,
});
};
renderPasswordProgress = () => {
const { form } = this.props;
const value = form.getFieldValue('password');
const passwordStatus = this.getPasswordStatus();
return value && value.length ? (
<div className={styles[`progress-${passwordStatus}`]}>
<Progress
status={passwordProgressMap[passwordStatus]}
className={styles.progress}
strokeWidth={6}
percent={value.length * 10 > 100 ? 100 : value.length * 10}
showInfo={false}
/>
</div>
) : null;
};
render() {
const { form, submitting } = this.props;
const { getFieldDecorator } = form;
const { count, prefix, help, visible } = this.state;
return (
<div className={styles.main}>
<h3>
<FormattedMessage id="user-register.register.register" />
</h3>
<Form onSubmit={this.handleSubmit}>
<FormItem>
{getFieldDecorator('mail', {
rules: [
{
required: true,
message: formatMessage({ id: 'user-register.email.required' }),
},
{
type: 'email',
message: formatMessage({ id: 'user-register.email.wrong-format' }),
},
],
})(
<Input
size="large"
placeholder={formatMessage({ id: 'user-register.email.placeholder' })}
/>,
)}
</FormItem>
<FormItem help={help}>
<Popover
getPopupContainer={node => {
if (node && node.parentNode) {
return node.parentNode as HTMLElement;
}
return node;
}}
content={
<div style={{ padding: '4px 0' }}>
{passwordStatusMap[this.getPasswordStatus()]}
{this.renderPasswordProgress()}
<div style={{ marginTop: 10 }}>
<FormattedMessage id="user-register.strength.msg" />
</div>
</div>
}
overlayStyle={{ width: 240 }}
placement="right"
visible={visible}
>
{getFieldDecorator('password', {
rules: [
{
validator: this.checkPassword,
},
],
})(
<Input
size="large"
type="password"
placeholder={formatMessage({ id: 'user-register.password.placeholder' })}
/>,
)}
</Popover>
</FormItem>
<FormItem>
{getFieldDecorator('confirm', {
rules: [
{
required: true,
message: formatMessage({ id: 'user-register.confirm-password.required' }),
},
{
validator: this.checkConfirm,
},
],
})(
<Input
size="large"
type="password"
placeholder={formatMessage({ id: 'user-register.confirm-password.placeholder' })}
/>,
)}
</FormItem>
<FormItem>
<InputGroup compact>
<Select
size="large"
value={prefix}
onChange={this.changePrefix}
style={{ width: '20%' }}
>
<Option value="86">+86</Option>
<Option value="87">+87</Option>
</Select>
{getFieldDecorator('mobile', {
rules: [
{
required: true,
message: formatMessage({ id: 'user-register.phone-number.required' }),
},
{
pattern: /^\d{11}$/,
message: formatMessage({ id: 'user-register.phone-number.wrong-format' }),
},
],
})(
<Input
size="large"
style={{ width: '80%' }}
placeholder={formatMessage({ id: 'user-register.phone-number.placeholder' })}
/>,
)}
</InputGroup>
</FormItem>
<FormItem>
<Row gutter={8}>
<Col span={16}>
{getFieldDecorator('captcha', {
rules: [
{
required: true,
message: formatMessage({ id: 'user-register.verification-code.required' }),
},
],
})(
<Input
size="large"
placeholder={formatMessage({
id: 'user-register.verification-code.placeholder',
})}
/>,
)}
</Col>
<Col span={8}>
<Button
size="large"
disabled={!!count}
className={styles.getCaptcha}
onClick={this.onGetCaptcha}
>
{count
? `${count} s`
: formatMessage({ id: 'user-register.register.get-verification-code' })}
</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Button
size="large"
loading={submitting}
className={styles.submit}
type="primary"
htmlType="submit"
>
<FormattedMessage id="user-register.register.register" />
</Button>
<Link className={styles.login} to="/user/login">
<FormattedMessage id="user-register.register.sign-in" />
</Link>
</FormItem>
</Form>
</div>
);
}
}
export default Form.create<UserRegisterProps>()(Register);
src/pages/user/register/locales/en-US.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-register.login.userName': 'userName',
'user-register.login.password': 'password',
'user-register.login.message-invalid-credentials':
'Invalid username or password（admin/ant.design）',
'user-register.login.message-invalid-verification-code': 'Invalid verification code',
'user-register.login.tab-login-credentials': 'Credentials',
'user-register.login.tab-login-mobile': 'Mobile number',
'user-register.login.remember-me': 'Remember me',
'user-register.login.forgot-password': 'Forgot your password?',
'user-register.login.sign-in-with': 'Sign in with',
'user-register.login.signup': 'Sign up',
'user-register.login.login': 'Login',
'user-register.register.register': 'Register',
'user-register.register.get-verification-code': 'Get code',
'user-register.register.sign-in': 'Already have an account?',
'user-register.register-result.msg': 'Account：registered at {email}',
'user-register.register-result.activation-email':
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
'user-register.register-result.back-home': 'Back to home',
'user-register.register-result.view-mailbox': 'View mailbox',
'user-register.email.required': 'Please enter your email!',
'user-register.email.wrong-format': 'The email address is in the wrong format!',
'user-register.userName.required': 'Please enter your userName!',
'user-register.password.required': 'Please enter your password!',
'user-register.password.twice': 'The passwords entered twice do not match!',
'user-register.strength.msg':
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
'user-register.strength.strong': 'Strength: strong',
'user-register.strength.medium': 'Strength: medium',
'user-register.strength.short': 'Strength: too short',
'user-register.confirm-password.required': 'Please confirm your password!',
'user-register.phone-number.required': 'Please enter your phone number!',
'user-register.phone-number.wrong-format': 'Malformed phone number!',
'user-register.verification-code.required': 'Please enter the verification code!',
'user-register.title.required': 'Please enter a title',
'user-register.date.required': 'Please select the start and end date',
'user-register.goal.required': 'Please enter a description of the goal',
'user-register.standard.required': 'Please enter a metric',
'user-register.form.get-captcha': 'Get Captcha',
'user-register.captcha.second': 'sec',
'user-register.form.optional': ' (optional) ',
'user-register.form.submit': 'Submit',
'user-register.form.save': 'Save',
'user-register.email.placeholder': 'Email',
'user-register.password.placeholder': 'Password',
'user-register.confirm-password.placeholder': 'Confirm password',
'user-register.phone-number.placeholder': 'Phone number',
'user-register.verification-code.placeholder': 'Verification code',
'user-register.title.label': 'Title',
'user-register.title.placeholder': 'Give the target a name',
'user-register.date.label': 'Start and end date',
'user-register.placeholder.start': 'Start date',
'user-register.placeholder.end': 'End date',
'user-register.goal.label': 'Goal description',
'user-register.goal.placeholder': 'Please enter your work goals',
'user-register.standard.label': 'Metrics',
'user-register.standard.placeholder': 'Please enter a metric',
'user-register.client.label': 'Client',
'user-register.label.tooltip': 'Target service object',
'user-register.client.placeholder':
'Please describe your customer service, internal customers directly @ Name / job number',
'user-register.invites.label': 'Inviting critics',
'user-register.invites.placeholder':
'Please direct @ Name / job number, you can invite up to 5 people',
'user-register.weight.label': 'Weight',
'user-register.weight.placeholder': 'Please enter weight',
'user-register.public.label': 'Target disclosure',
'user-register.label.help': 'Customers and invitees are shared by default',
'user-register.radio.public': 'Public',
'user-register.radio.partially-public': 'Partially public',
'user-register.radio.private': 'Private',
'user-register.publicUsers.placeholder': 'Open to',
'user-register.option.A': 'Colleague A',
'user-register.option.B': 'Colleague B',
'user-register.option.C': 'Colleague C',
'user-register.navBar.lang': 'Languages',
};
src/pages/user/register/locales/zh-CN.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-register.login.userName': '用户名',
'user-register.login.password': '密码',
'user-register.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
'user-register.login.message-invalid-verification-code': '验证码错误',
'user-register.login.tab-login-credentials': '账户密码登录',
'user-register.login.tab-login-mobile': '手机号登录',
'user-register.login.remember-me': '自动登录',
'user-register.login.forgot-password': '忘记密码',
'user-register.login.sign-in-with': '其他登录方式',
'user-register.login.signup': '注册账户',
'user-register.login.login': '登录',
'user-register.register.register': '注册',
'user-register.register.get-verification-code': '获取验证码',
'user-register.register.sign-in': '使用已有账户登录',
'user-register.register-result.msg': '你的账户：{email} 注册成功',
'user-register.register-result.activation-email':
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
'user-register.register-result.back-home': '返回首页',
'user-register.register-result.view-mailbox': '查看邮箱',
'user-register.email.required': '请输入邮箱地址！',
'user-register.email.wrong-format': '邮箱地址格式错误！',
'user-register.userName.required': '请输入用户名!',
'user-register.password.required': '请输入密码！',
'user-register.password.twice': '两次输入的密码不匹配!',
'user-register.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
'user-register.strength.strong': '强度：强',
'user-register.strength.medium': '强度：中',
'user-register.strength.short': '强度：太短',
'user-register.confirm-password.required': '请确认密码！',
'user-register.phone-number.required': '请输入手机号！',
'user-register.phone-number.wrong-format': '手机号格式错误！',
'user-register.verification-code.required': '请输入验证码！',
'user-register.title.required': '请输入标题',
'user-register.date.required': '请选择起止日期',
'user-register.goal.required': '请输入目标描述',
'user-register.standard.required': '请输入衡量标准',
'user-register.form.get-captcha': '获取验证码',
'user-register.captcha.second': '秒',
'user-register.form.optional': '（选填）',
'user-register.form.submit': '提交',
'user-register.form.save': '保存',
'user-register.email.placeholder': '邮箱',
'user-register.password.placeholder': '至少6位密码，区分大小写',
'user-register.confirm-password.placeholder': '确认密码',
'user-register.phone-number.placeholder': '手机号',
'user-register.verification-code.placeholder': '验证码',
'user-register.title.label': '标题',
'user-register.title.placeholder': '给目标起个名字',
'user-register.date.label': '起止日期',
'user-register.placeholder.start': '开始日期',
'user-register.placeholder.end': '结束日期',
'user-register.goal.label': '目标描述',
'user-register.goal.placeholder': '请输入你的阶段性工作目标',
'user-register.standard.label': '衡量标准',
'user-register.standard.placeholder': '请输入衡量标准',
'user-register.client.label': '客户',
'user-register.label.tooltip': '目标的服务对象',
'user-register.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
'user-register.invites.label': '邀评人',
'user-register.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
'user-register.weight.label': '权重',
'user-register.weight.placeholder': '请输入',
'user-register.public.label': '目标公开',
'user-register.label.help': '客户、邀评人默认被分享',
'user-register.radio.public': '公开',
'user-register.radio.partially-public': '部分公开',
'user-register.radio.private': '不公开',
'user-register.publicUsers.placeholder': '公开给',
'user-register.option.A': '同事甲',
'user-register.option.B': '同事乙',
'user-register.option.C': '同事丙',
'user-register.navBar.lang': '语言',
};
src/pages/user/register/locales/zh-TW.ts deleted 100644 → 0
View file @ 55cb4bfd
export default {
'user-register.login.userName': '賬戶',
'user-register.login.password': '密碼',
'user-register.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
'user-register.login.message-invalid-verification-code': '驗證碼錯誤',
'user-register.login.tab-login-credentials': '賬戶密碼登錄',
'user-register.login.tab-login-mobile': '手機號登錄',
'user-register.login.remember-me': '自動登錄',
'user-register.login.forgot-password': '忘記密碼',
'user-register.login.sign-in-with': '其他登錄方式',
'user-register.login.signup': '註冊賬戶',
'user-register.login.login': '登錄',
'user-register.register.register': '註冊',
'user-register.register.get-verification-code': '獲取驗證碼',
'user-register.register.sign-in': '使用已有賬戶登錄',
'user-register.register-result.msg': '妳的賬戶：{email} 註冊成功',
'user-register.register-result.activation-email':
'激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。',
'user-register.register-result.back-home': '返回首頁',
'user-register.register-result.view-mailbox': '查看郵箱',
'user-register.email.required': '請輸入郵箱地址！',
'user-register.email.wrong-format': '郵箱地址格式錯誤！',
'user-register.userName.required': '請輸入賬戶!',
'user-register.password.required': '請輸入密碼！',
'user-register.password.twice': '兩次輸入的密碼不匹配!',
'user-register.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
'user-register.strength.strong': '強度：強',
'user-register.strength.medium': '強度：中',
'user-register.strength.short': '強度：太短',
'user-register.confirm-password.required': '請確認密碼！',
'user-register.phone-number.required': '請輸入手機號！',
'user-register.phone-number.wrong-format': '手機號格式錯誤！',
'user-register.verification-code.required': '請輸入驗證碼！',
'user-register.title.required': '請輸入標題',
'user-register.date.required': '請選擇起止日期',
'user-register.goal.required': '請輸入目標描述',
'user-register.standard.required': '請輸入衡量標淮',
'user-register.form.get-captcha': '獲取驗證碼',
'user-register.captcha.second': '秒',
'user-register.form.optional': '（選填）',
'user-register.form.submit': '提交',
'user-register.form.save': '保存',
'user-register.email.placeholder': '郵箱',
'user-register.password.placeholder': '至少6位密碼，區分大小寫',
'user-register.confirm-password.placeholder': '確認密碼',
'user-register.phone-number.placeholder': '手機號',
'user-register.verification-code.placeholder': '驗證碼',
'user-register.title.label': '標題',
'user-register.title.placeholder': '給目標起個名字',
'user-register.date.label': '起止日期',
'user-register.placeholder.start': '開始日期',
'user-register.placeholder.end': '結束日期',
'user-register.goal.label': '目標描述',
'user-register.goal.placeholder': '請輸入妳的階段性工作目標',
'user-register.standard.label': '衡量標淮',
'user-register.standard.placeholder': '請輸入衡量標淮',
'user-register.client.label': '客戶',
'user-register.label.tooltip': '目標的服務對象',
'user-register.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
'user-register.invites.label': '邀評人',
'user-register.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
'user-register.weight.label': '權重',
'user-register.weight.placeholder': '請輸入',
'user-register.public.label': '目標公開',
'user-register.label.help': '客戶、邀評人默認被分享',
'user-register.radio.public': '公開',
'user-register.radio.partially-public': '部分公開',
'user-register.radio.private': '不公開',
'user-register.publicUsers.placeholder': '公開給',
'user-register.option.A': '同事甲',
'user-register.option.B': '同事乙',
'user-register.option.C': '同事丙',
'user-register.navBar.lang': '語言',
};
src/pages/user/register/model.ts deleted 100644 → 0
View file @ 55cb4bfd
import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { fakeRegister } from './service';
export interface StateType {
status?: 'ok' | 'error';
currentAuthority?: 'user' | 'guest' | 'admin';
}
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;
export interface ModelType {
namespace: string;
state: StateType;
effects: {
submit: Effect;
};
reducers: {
registerHandle: Reducer<StateType>;
};
}
const Model: ModelType = {
namespace: 'userRegister',
state: {
status: undefined,
},
effects: {
*submit({ payload }, { call, put }) {
const response = yield call(fakeRegister, payload);
yield put({
type: 'registerHandle',
payload: response,
});
},
},
reducers: {
registerHandle(state, { payload }) {
return {
...state,
status: payload.status,
};
},
},
};
export default Model;
src/pages/user/register/service.ts deleted 100644 → 0
View file @ 55cb4bfd
import { get } from '@/utils/request';
import { UserRegisterParams } from './index';
export async function fakeRegister(params: UserRegisterParams) {
return get('/api/register', {
method: 'POST',
data: params,
});
}
src/pages/user/register/style.less deleted 100644 → 0
View file @ 55cb4bfd
@import '~antd/es/style/themes/default.less';
.main {
width: 368px;
margin: 0 auto;
:global {
.ant-form-item {
margin-bottom: 24px;
}
}
h3 {
margin-bottom: 20px;
font-size: 16px;
}
.getCaptcha {
display: block;
width: 100%;
}
.submit {
width: 50%;
}
.login {
float: right;
line-height: @btn-height-lg;
}
}
.success,
.warning,
.error {
transition: color 0.3s;
}
.success {
color: @success-color;
}
.warning {
color: @warning-color;
}
.error {
color: @error-color;
}
.progress-pass > .progress {
:global {
.ant-progress-bg {
background-color: @warning-color;
}
}
}
src/typings.d.ts
View file @ 89bacb35
......@@ -22,11 +22,11 @@ declare module 'webpack-theme-color-replacer';
declare module 'webpack-theme-color-replacer/client';
// src/typings.d.ts
// declare module 'umi-plugin-react/locale' {
// export default interface MessageDescriptor {
// id: string;
// } /* eslint-disable-line */
// }
declare module 'umi-plugin-react/locale' {
export default interface MessageDescriptor {
id: string;
} /* eslint-disable-line */
}
declare let ga: Function;
......
src/utils/store.js
View file @ 89bacb35
......@@ -5,8 +5,6 @@ import localStorage from 'store/storages/localStorage';
import defaults from 'store/plugins/defaults';
import expire from 'store/plugins/expire';
console.log(config);
const { storeNameSpace } = config;
const storages = [localStorage];
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment