Skip to content

M
Moecube Accounts Web
Commit 900bf08f authored by 2breakegg's avatar 2breakegg
Browse files
Options

'lint'

parent 92f6c5fb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1656 additions and 703 deletions
.gitignore
View file @ 900bf08f
...@@ -9,3 +9,4 @@ ...@@ -9,3 +9,4 @@
# misc # misc
.DS_Store .DS_Store
npm-debug.log* npm-debug.log*
.idea/codeStyleSettings.xml 0 → 100644
View file @ 900bf08f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectCodeStyleSettingsManager">
<option name="PER_PROJECT_SETTINGS">
<value />
</option>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</component>
</project>
\ No newline at end of file
.idea/inspectionProfiles/Project_Default.xml 0 → 100644
View file @ 900bf08f
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
</profile>
</component>
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ 900bf08f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 900bf08f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/mycard-account-web.iml" filepath="$PROJECT_DIR$/.idea/mycard-account-web.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/mycard-account-web.iml 0 → 100644
View file @ 900bf08f
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/typescript-compiler.xml 0 → 100644
View file @ 900bf08f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="TypeScriptCompiler">
<option name="useConfig" value="true" />
<option name="useService" value="false" />
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 900bf08f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
.idea/workspace.xml 0 → 100644
View file @ 900bf08f
This diff is collapsed.
src/components/EmailForm.js
View file @ 900bf08f
import { Form, Input } from 'antd';
import React from 'react'; import React from 'react';
import styles from './EmailForm.css'; import { connect } from 'react-redux';
import {connect} from 'react-redux' import SubmitButton from './SubmitButton';
import { Form, Input, Icon, Button } from 'antd'
const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
const FormItem = Form.Item;
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 15 }, wrapperCol: { span: 15 },
} };
class EmailForm extends React.Component { class EmailForm extends React.Component {
onUpdateEmail = (e) => { onUpdateEmail = (e) => {
const { form, dispatch, data: {id} } = this.props const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { email, password } = values
dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }}) const { email, password } = values;
dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } });
} }
}); });
} };
render(){ render() {
const {form, dispatch, data, checkEmail, isEmailExists} = this.props const { form, dispatch, data, checkEmail, isEmailExists } = this.props;
const {getFieldDecorator} = form const { getFieldDecorator } = form;
const {id, email} = data const { id, email } = data;
const emailProps = { const emailProps = {
fromItem: { fromItem: {
label: "email", label: 'email',
hasFeedback: true, hasFeedback: true,
validateStatus: checkEmail, validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : '', help: isEmailExists ? 'email exists' : '',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
initialValue: email initialValue: email,
}, },
input: { input: {
placeholder: "email" placeholder: 'email',
} },
} };
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: "passwrod", label: 'passwrod',
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ } { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
] ],
}, },
input: { input: {
placeholder: "password", placeholder: 'password',
type: 'password' type: 'password',
} },
} };
return ( return (
<Form onSubmit={this.onUpdateEmail}> <Form onSubmit={this.onUpdateEmail}>
<FormItem {...emailProps.fromItem}> <FormItem {...emailProps.fromItem}>
{getFieldDecorator(`email`, {...emailProps.decorator})( {getFieldDecorator(`email`, { ...emailProps.decorator })(
<Input <Input
{...emailProps.input} {...emailProps.input}
onBlur = {() => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id} })}/> onBlur={() => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id } })}/>,
)} )}
</FormItem> </FormItem>
<FormItem {...passwordProps.fromItem}> <FormItem {...passwordProps.fromItem}>
{getFieldDecorator(`password`, {...passwordProps.decorator})( {getFieldDecorator('password', { ...passwordProps.decorator })(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />,
)} )}
</FormItem> </FormItem>
...@@ -92,20 +92,19 @@ class EmailForm extends React.Component { ...@@ -92,20 +92,19 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state) {
function mapStateToProps(state, props) {
const { const {
user: {data}, user: { data },
auth: {isEmailExists, checkEmail} auth: { isEmailExists, checkEmail },
} = state } = state;
return { return {
data, data,
checkEmail, checkEmail,
isEmailExists isEmailExists,
}; };
} }
const WrapperEmailForm = Form.create()(EmailForm) const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm); export default connect(mapStateToProps)(WrapperEmailForm);
src/components/Example.js
View file @ 900bf08f
...@@ -8,7 +8,6 @@ const Example = () => { ...@@ -8,7 +8,6 @@ const Example = () => {
); );
}; };
Example.propTypes = { Example.propTypes = {};
};
export default Example; export default Example;
src/components/PasswordForm.js
View file @ 900bf08f
import { Form, Input } from 'antd';
import React from 'react'; import React from 'react';
import styles from './EmailForm.css'; import { connect } from 'react-redux';
import {connect} from 'react-redux' import SubmitButton from './SubmitButton';
import { Form, Input, Icon, Button } from 'antd'
const FormItem = Form.Item; const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 15 }, wrapperCol: { span: 15 },
} };
class EmailForm extends React.Component { class EmailForm extends React.Component {
checkPassword = (rule, value, callback) => {
const form = this.props.form;
if (value && value !== form.getFieldValue('new_password')) {
callback('两次密码输入不符');
} else {
callback();
}
}
checkConfirm = (rule, value, callback) => {
const form = this.props.form;
if (value) {
form.validateFields(['confirm'], { force: true });
}
callback();
}
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, data: {id} } = this.props const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { email, password } = values
// dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }}) const { email, password } = values;
dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } });
} }
}); });
} };
render(){ checkConfirm = (rule, value, callback) => {
const form = this.props.form;
if (value) {
form.validateFields(['confirm'], { force: true });
}
callback();
};
checkPassword = (rule, value, callback) => {
const form = this.props.form;
if (value && value !== form.getFieldValue('new_password')) {
callback('两次密码输入不符');
} else {
callback();
}
};
render() {
const {form } = this.props const { form } = this.props;
const {getFieldDecorator} = form const { getFieldDecorator } = form;
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: "passwrod", label: 'passwrod',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }, { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
{ validator: this.checkConfirm } { validator: this.checkConfirm },
] ],
}, },
input: { input: {
placeholder: "password", placeholder: 'password',
type: 'password' type: 'password',
} },
} };
const confirmProps = { const confirmProps = {
fromItem: { fromItem: {
label: "comfirm", label: 'comfirm',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/}, { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
{ validator: this.checkPassword} { validator: this.checkPassword },
] ],
}, },
input: { input: {
placeholder: "confirm", placeholder: 'confirm',
type: 'password' type: 'password',
} },
} };
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
<FormItem {...passwordProps.fromItem} label="old password"> <FormItem {...passwordProps.fromItem} label="old password">
{getFieldDecorator(`old_password`, {...passwordProps.decorator})( {getFieldDecorator(`old_password`, { ...passwordProps.decorator })(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />,
)} )}
</FormItem> </FormItem>
<FormItem {...passwordProps.fromItem} label="new password"> <FormItem {...passwordProps.fromItem} label="new password">
{getFieldDecorator(`new_password`, {...passwordProps.decorator})( {getFieldDecorator(`new_password`, { ...passwordProps.decorator })(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />,
)} )}
</FormItem> </FormItem>
<FormItem {...confirmProps.fromItem}> <FormItem {...confirmProps.fromItem}>
{getFieldDecorator(`confirm`, {...confirmProps.decorator})( {getFieldDecorator(`confirm`, { ...confirmProps.decorator })(
<Input {...confirmProps.input} /> <Input {...confirmProps.input} />,
)} )}
</FormItem> </FormItem>
...@@ -113,18 +113,16 @@ class EmailForm extends React.Component { ...@@ -113,18 +113,16 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
user: {data} user: { data },
} = state } = state;
return { return {
data, data,
}; };
} }
const WrapperEmailForm = Form.create()(EmailForm) const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm); export default connect(mapStateToProps)(WrapperEmailForm);
src/components/SubmitButton.css
View file @ 900bf08f
.wrapSubmit{ .wrapSubmit {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
\ No newline at end of file
src/components/SubmitButton.js
View file @ 900bf08f
import { Button } from 'antd';
import React from 'react'; import React from 'react';
import styles from './SubmitButton.css'; import styles from './SubmitButton.css';
import {Button} from 'antd'
function SubmitButton() { function SubmitButton() {
return ( return (
<div className={styles.wrapSubmit}> <div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large">提交</Button> <Button type="primary" htmlType="submit" size="large">提交</Button>
</div> </div>
); );
} }
......
src/components/UserNameForm.js
View file @ 900bf08f
import { Form, Input } from 'antd';
import React from 'react'; import React from 'react';
import styles from './EmailForm.css'; import { connect } from 'react-redux';
import {connect} from 'react-redux' import SubmitButton from './SubmitButton';
import { Form, Input, Icon, Button } from 'antd'
const FormItem = Form.Item; const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 15 }, wrapperCol: { span: 15 },
} };
class EmailForm extends React.Component { class EmailForm extends React.Component {
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, data: {id} } = this.props const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { username, password } = values
dispatch({type: "user/updateAccount", payload: { username, password, user_id: id }}) const { username, password } = values;
dispatch({ type: 'user/updateAccount', payload: { username, password, user_id: id } });
} }
}); });
} };
render(){ render() {
const {form, dispatch, data, checkUsername, isUserNameExists} = this.props const { form, dispatch, data, checkUsername, isUserNameExists } = this.props;
const {getFieldDecorator} = form const { getFieldDecorator } = form;
const {id, username} = data const { id, username } = data;
const usernameProps = { const usernameProps = {
fromItem: { fromItem: {
label: "username", label: 'username',
hasFeedback: true, hasFeedback: true,
validateStatus: checkUsername, validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : '', help: isUserNameExists ? 'username exists' : '',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
initialValue: username initialValue: username,
}, },
input: { input: {
placeholder: "username", placeholder: 'username',
onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }), onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
} },
} };
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: "passwrod", label: 'passwrod',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }, { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
] ],
}, },
input: { input: {
placeholder: "password", placeholder: 'password',
type: 'password' type: 'password',
} },
} };
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
<FormItem {...usernameProps.fromItem}> <FormItem {...usernameProps.fromItem}>
{getFieldDecorator(`username`, {...usernameProps.decorator})( {getFieldDecorator(`username`, { ...usernameProps.decorator })(
<Input {...usernameProps.input}/> <Input {...usernameProps.input}/>,
)} )}
</FormItem> </FormItem>
<FormItem {...passwordProps.fromItem}> <FormItem {...passwordProps.fromItem}>
{getFieldDecorator(`password`, {...passwordProps.decorator})( {getFieldDecorator(`password`, { ...passwordProps.decorator })(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />,
)} )}
</FormItem> </FormItem>
...@@ -90,20 +89,19 @@ class EmailForm extends React.Component { ...@@ -90,20 +89,19 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
user: {data}, user: { data },
auth: {isUserNameExists, checkUsername} auth: { isUserNameExists, checkUsername },
} = state } = state;
return { return {
data, data,
checkUsername, checkUsername,
isUserNameExists isUserNameExists,
}; };
} }
const WrapperEmailForm = Form.create()(EmailForm) const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm); export default connect(mapStateToProps)(WrapperEmailForm);
src/config.js
View file @ 900bf08f
export default { export default {
apiRoot: 'http://localhost:3000', // apiRoot: 'http://localhost:3000',
} apiRoot: 'http://192.168.1.107:3000',
\ No newline at end of file };
src/index.js
View file @ 900bf08f
import dva from 'dva'; import dva from 'dva';
import { browserHistory } from 'dva/router';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { browserHistory } from 'dva/router' import { addLocaleData, IntlProvider } from 'react-intl';
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
import localeData from '../i18n.json';
import './index.css'; import './index.css';
import { IntlProvider, addLocaleData } from 'react-intl';
// 1. Initialize // 1. Initialize
const app = dva({ const app = dva({
history: browserHistory history: browserHistory,
}); });
app.model(require("./models/user")); app.model(require('./models/user'));
app.model(require("./models/auth")); app.model(require('./models/auth'));
app.model(require("./models/haha")); app.model(require('./models/haha'));
// app.model(require("./models/login")); // app.model(require("./models/login"));
app.model(require("./models/common")); app.model(require('./models/common'));
// 2. Plugins // 2. Plugins
...@@ -32,23 +35,21 @@ app.model(require("./models/common")); ...@@ -32,23 +35,21 @@ app.model(require("./models/common"));
app.router(require('./router')); app.router(require('./router'));
// 5. Start // 5. Start
import en from 'react-intl/locale-data/en'
import zh from 'react-intl/locale-data/zh'
import localeData from '../i18n.json'
addLocaleData([...en, ...zh]) addLocaleData([...en, ...zh]);
/*eslint-disable */
const language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage; const language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
/*eslint-enable */
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0]; const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh; const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;
const App = app.start() const App = app.start();
ReactDOM.render( ReactDOM.render(
<IntlProvider locale={ language } messages={ messages }> <IntlProvider locale={ language } messages={ messages }>
<App /> <App />
</IntlProvider>, </IntlProvider>,
document.getElementById("root") document.getElementById('root'),
) );
src/models/auth.js
View file @ 900bf08f
import { login, forgot, register, reset, activate, checkUserExists } from '../services/auth' import { message } from 'antd';
import { message } from 'antd' import { activate, checkUserExists, forgot, login, register, reset } from '../services/auth';
export default { export default {
...@@ -14,191 +14,197 @@ export default { ...@@ -14,191 +14,197 @@ export default {
isLoginSubmit: false, isLoginSubmit: false,
isForgotSubmit: false, isForgotSubmit: false,
isSpinSubmit: false, isSpinSubmit: false,
register: {} register: {},
}, },
reducers: { reducers: {
change(state, action) { change(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload
} };
}, },
checkEmail(state, action) { checkEmail(state, action) {
return { return {
...state, ...{ ...state, ...{
checkEmail: 'validating' checkEmail: 'validating',
} }
} };
}, },
checkUsername(state, action) { checkUsername(state, action) {
return { return {
...state, ...{ ...state, ...{
checkUsername: 'validating' checkUsername: 'validating',
} }
} };
}, },
activate(state, action) { activate(state, action) {
return { return {
...state, ...{ ...state, ...{
activateState: true activateState: true,
} }
} };
}, },
check(state, action) { check(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload
} };
}, },
register(state, action) { register(state, action) {
return { return {
...state, ...{ ...state, ...{
isRegisterSubmit: true isRegisterSubmit: true,
} }
} };
}, },
registerSuccess(state, action) { registerSuccess(state, action) {
return { return {
...state, ...{ ...state, ...{
isRegisterSubmit: false isRegisterSubmit: false,
} }
} };
}, },
registerFail(state, action) { registerFail(state, action) {
return { return {
...state, ...{ ...state, ...{
isRegisterSubmit: false isRegisterSubmit: false,
} }
} };
}, },
login(state, action) { login(state, action) {
return { return {
...state, ...{ ...state, ...{
isLoginSubmit: true isLoginSubmit: true,
} }
} };
}, },
loginSuccess(state, action) { loginSuccess(state, action) {
return { return {
...state, ...{ ...state, ...{
isLoginSubmit: false isLoginSubmit: false,
} }
} };
}, },
loginFail(state, action) { loginFail(state, action) {
return { return {
...state, ...{ ...state, ...{
isLoginSubmit: false isLoginSubmit: false,
} }
} };
}, },
forgot(state, action) { forgot(state, action) {
return { return {
...state, ...{ ...state, ...{
isForgotSubmit: true isForgotSubmit: true,
} }
} };
}, },
forgotSuccess(state, action) { forgotSuccess(state, action) {
return { return {
...state, ...{ ...state, ...{
isForgotSubmit: false isForgotSubmit: false,
} }
} };
}, },
forgotFail(state, action) { forgotFail(state, action) {
return { return {
...state, ...{ ...state, ...{
isForgotSubmit: false isForgotSubmit: false,
} }
} };
}, },
reset(state, action) { reset(state, action) {
return { return {
...state, ...{ ...state, ...{
isResetSubmit: true isResetSubmit: true,
} }
} };
}, },
resetSuccess(state, action) { resetSuccess(state, action) {
return { return {
...state, ...{ ...state, ...{
isResetSubmit: false isResetSubmit: false,
} }
} };
}, },
resetFail(state, action) { resetFail(state, action) {
return { return {
...state, ...{ ...state, ...{
isResetSubmit: false isResetSubmit: false,
} }
} };
}, },
}, },
effects: { effects: {
*activate({ payload }, { call, put }) { *activate({ payload }, { call, put }) {
const { data } = yield call(activate, payload) const { data } = yield call(activate, payload);
if (data) {
yield put({ type: 'check', payload: { activateState: false } });
}
}, },
*checkEmail({ payload }, { call, put }) { *checkEmail({ payload }, { call, put }) {
const { data } = yield call(checkUserExists, payload) const { data } = yield call(checkUserExists, payload);
if(data) { if (data) {
yield put({ type: 'check', payload: { isEmailExists: true , checkEmail: 'warning'}}) yield put({ type: 'check', payload: { isEmailExists: true, checkEmail: 'warning' } });
} else { } else {
yield put({ type: 'check', payload: { isEmailExists: false , checkEmail: 'success'}}) yield put({ type: 'check', payload: { isEmailExists: false, checkEmail: 'success' } });
} }
}, },
*checkUsername({ payload }, { call, put }) { *checkUsername({ payload }, { call, put }) {
const { data } = yield call(checkUserExists, payload) const { data } = yield call(checkUserExists, payload);
if(data) { if (data) {
yield put({ type: 'check', payload: { isUserNameExists: true , checkUsername: 'warning'}}) yield put({ type: 'check', payload: { isUserNameExists: true, checkUsername: 'warning' } });
} else { } else {
yield put({ type: 'check', payload: { isUserNameExists: false , checkUsername: 'success'}}) yield put({ type: 'check', payload: { isUserNameExists: false, checkUsername: 'success' } });
} }
}, },
*login({ payload }, { call, put }) { *login({ payload }, { call, put }) {
const {data} = yield call(login, payload) const { data } = yield call(login, payload);
if(data){ if (data) {
yield put({ type: 'loginSuccess' }) yield put({ type: 'loginSuccess' });
yield put({ type: 'user/loginSuccess', payload: { data } }) yield put({ type: 'user/loginSuccess', payload: { data } });
message.info("登录成功") message.info('登录成功');
} else { } else {
yield put({ type: 'loginFail' }) yield put({ type: 'loginFail' });
message.error("登陆失败") message.error('登陆失败');
} }
}, },
*forgot({ payload }, { call, put }) { *forgot({ payload }, { call, put }) {
const { data } = yield call(forgot, payload) const { data } = yield call(forgot, payload);
if(data){ if (data) {
yield put({ type: 'forgotSuccess' }) yield put({ type: 'forgotSuccess' });
message.info("已发送密码重置邮件") message.info('已发送密码重置邮件');
}else { } else {
yield put({ type: 'forgotFail' }) yield put({ type: 'forgotFail' });
message.error("密码重置邮件发送失败") message.error('密码重置邮件发送失败');
} }
}, },
*register({ payload }, { call, put }) { *register({ payload }, { call, put }) {
const {data} = yield call(register, payload) const { data } = yield call(register, payload);
if(data) { if (data) {
yield put({ type: 'registerSuccess'}) yield put({ type: 'registerSuccess' });
message.info("注册成功") message.info('注册成功');
} else { } else {
yield put({ type: 'registerFail' }) yield put({ type: 'registerFail' });
message.error("注册失败") message.error('注册失败');
} }
}, },
*reset({ payload }, { call, put }) { *reset({ payload }, { call, put }) {
const { data } = yield call(reset, payload) const { data } = yield call(reset, payload);
if(data){ if (data) {
yield put({ type: 'resetSuccess' }) yield put({ type: 'resetSuccess' });
message.info("重置成功") message.info('重置成功');
}else{ } else {
yield put({ type: 'resetFail' }) yield put({ type: 'resetFail' });
message.error("重置失败") message.error('重置失败');
} }
}, },
}, },
subscriptions: {}, subscriptions: {},
......
src/models/common.js
View file @ 900bf08f
export default { export default {
namespace: 'common', namespace: 'common',
state: { state: {},
reducers: {},
},
reducers: {
},
effects: {}, effects: {},
subscriptions: {}, subscriptions: {},
}; };
src/models/example.js
View file @ 900bf08f
export default { export default {
namespace: 'example', namespace: 'example',
......
src/models/haha.js
View file @ 900bf08f
export default { export default {
namespace: 'haha', namespace: 'haha',
state: { state: {
text: '123213213' text: '123213213',
}, },
reducers: { reducers: {
change(state, action) { change(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload
} };
} },
}, },
effects: {}, effects: {},
subscriptions: {}, subscriptions: {},
......
src/models/user.js
View file @ 900bf08f
import { routerRedux } from 'dva/router' import { message } from 'antd';
import { updateProfile, updateAccount } from '../services/user' import { routerRedux } from 'dva/router';
import { message } from 'antd' import { updateAccount, updateProfile } from '../services/user';
export default { export default {
namespace: 'user', namespace: 'user',
state: { state: {
data: {}, data: {},
isUpdateSubmit: false isUpdateSubmit: false,
}, },
reducers: { reducers: {
loginFromStorage(state, action) { loginFromStorage(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload
} };
}, },
loginSuccess(state, action) { loginSuccess(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload
} };
}, },
updateProfile(state, action) { updateProfile(state, action) {
return { return {
...state, ...{ ...state, ...{
isUpdateSubmit: true isUpdateSubmit: true,
} }
} };
}, },
updateProfileSuccess(state, action) { updateProfileSuccess(state, action) {
return { return {
...state, ...action.payload, ...{ ...state, ...action.payload, ...{
isUpdateSubmit: false isUpdateSubmit: false,
} }
} };
}, },
updateProfileFail(state, action) { updateProfileFail(state, action) {
return { return {
...state, ...{ ...state, ...{
isUpdateSubmit: false isUpdateSubmit: false,
} }
} };
}, },
updateAccount(state, action) { updateAccount(state, action) {
return { return {
...state, ...{ ...state, ...{
isUpdateSubmit: true isUpdateSubmit: true,
} }
} };
}, },
updateAccountSuccess(state, action) { updateAccountSuccess(state, action) {
return { return {
...state, ...action.payload, ...{ ...state, ...action.payload, ...{
isUpdateSubmit: false isUpdateSubmit: false,
} }
} };
}, },
updateAccountFail(state, action) { updateAccountFail(state, action) {
return { return {
...state, ...{ ...state, ...{
isUpdateSubmit: false isUpdateSubmit: false,
} }
} };
}, },
}, },
effects: { effects: {
*loginSuccess({ payload }, { call, put }) { *loginSuccess({ payload }, { call, put }) {
localStorage.setItem("user", JSON.stringify(payload.data)) localStorage.setItem('user', JSON.stringify(payload.data));
yield put(routerRedux.replace("/profiles")) yield put(routerRedux.replace('/profiles'));
}, },
*preLogin({ payload }, { call, put }) { *preLogin({ payload }, { call, put }) {
let user = localStorage.getItem("user") let user = localStorage.getItem('user');
if(!user){ if (!user) {
yield put(routerRedux.replace("/login")) yield put(routerRedux.replace('/login'));
} }
yield put({type: 'loginFromStorage', payload: { data: JSON.parse(user) }}) yield put({ type: 'loginFromStorage', payload: { data: JSON.parse(user) } });
}, },
*updateProfile({ payload }, { call, put }) { *updateProfile({ payload }, { call, put }) {
let { data } = yield call(updateProfile, payload ) let { data } = yield call(updateProfile, payload);
if(data){ if (data) {
yield put({ type: 'updateProfileSuccess', payload: { data } }) yield put({ type: 'updateProfileSuccess', payload: { data } });
message.info("更新成功") message.info('更新成功');
}else { } else {
yield put({ type: 'updateProfileFail' }) yield put({ type: 'updateProfileFail' });
message.error("更新失败") message.error('更新失败');
} }
}, },
*updateAccount({ payload }, { call, put }) { *updateAccount({ payload }, { call, put }) {
let { data } = yield call(updateAccount, payload ) let { data } = yield call(updateAccount, payload);
if(data){ if (data) {
yield put({ type: 'updateAccountSuccess', payload: { data } }) yield put({ type: 'updateAccountSuccess', payload: { data } });
message.info("更新成功") message.info('更新成功');
}else { } else {
yield put({ type: 'updateAccountFail' }) yield put({ type: 'updateAccountFail' });
message.error("更新失败") message.error('更新失败');
} }
}, },
}, },
subscriptions: { subscriptions: {
setup({ dispatch, history }) { setup({ dispatch, history }) {
return history.listen(({ pathname, query}) => { return history.listen(({ pathname, query }) => {
if(pathname == '/profiles') { if (pathname == '/profiles') {
dispatch({ type: 'preLogin', payload: query });
dispatch({ type: 'preLogin', payload: query})
} }
}) });
} },
}, },
}; };
src/router.js
View file @ 900bf08f
import { Redirect, Route, Router } from 'dva/router';
import React from 'react'; import React from 'react';
import { Router, Route, Redirect } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Login from "./routes/Login.js"; import Active from './routes/Activate.js';
import Forgot from "./routes/Forgot.js"; import Forgot from './routes/Forgot.js';
import Register from "./routes/Register.js"; import Login from './routes/Login.js';
import Reset from "./routes/Reset.js"; import Profiles from './routes/Profiles.js';
import Profiles from "./routes/Profiles.js"; import Register from './routes/Register.js';
import Active from "./routes/Activate.js"; import Reset from './routes/Reset.js';
function RouterConfig({ history }) { function RouterConfig({ history }) {
return ( return (
<Router history={history}> <Router history={history}>
<Redirect from="/" to="/login"/> <Redirect from="/" to="/login"/>
<Route path="/"> <Route path="/">
<Route path="/login" component={Login} /> <Route path="/login" component={Login}/>
<Route path="/forgot" component={Forgot} /> <Route path="/forgot" component={Forgot}/>
<Route path="/register" component={Register} /> <Route path="/register" component={Register}/>
<Route path="/reset" component={Reset} /> <Route path="/reset" component={Reset}/>
<Route path="/profiles" component={Profiles} /> <Route path="/profiles" component={Profiles}/>
</Route> </Route>
<Route path="/activate" component={Active} /> <Route path="/activate" component={Active}/>
</Router> </Router>
); );
} }
......
src/routes/Activate.js
View file @ 900bf08f
import React from 'react';
import { connect } from 'dva';
import styles from './Activate.css';
import { Button } from 'antd'; import { Button } from 'antd';
import { connect } from 'dva';
import React from 'react';
class Active extends React.Component { class Active extends React.Component {
handleClick = () => { handleClick = () => {
const { dispatch, location: { query: { key } } } = this.props const { dispatch, location: { query: { key } } } = this.props;
dispatch({ type: 'auth/active', payload: { key }}) dispatch({ type: 'auth/activate', payload: { key } });
} };
render() { render() {
const { activateState } = this.props const { activateState } = this.props;
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', minHeight: '100%'}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100%' }}>
<Button type="primary" icon="poweroff" loading={activateState} onClick={this.handleClick}> <Button type="primary" icon="poweroff" loading={activateState} onClick={this.handleClick}>
激活 激活
</Button> </Button>
</div> </div>
) );
} }
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {
auth: { activateState } auth: { activateState },
} = state } = state;
return { return {
activateState activateState,
}; };
} }
......
src/routes/Forgot.js
View file @ 900bf08f
import React from 'react'; import { Button, Form, Icon, Input, Select, Spin } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router';
import styles from './Login.less'; import React from 'react';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -21,56 +20,56 @@ const formItemLayout = { ...@@ -21,56 +20,56 @@ const formItemLayout = {
class Login extends React.Component { class Login extends React.Component {
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch, params: { id }} = this.props const { form, dispatch, params: { id } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const {email} = values
dispatch({type: "auth/forgot", payload: {account: email}}) const { email } = values;
dispatch({ type: 'auth/forgot', payload: { account: email } });
} }
}); });
} };
render() { render() {
const { getFieldDecorator, dispatch } = this.props.form; const { getFieldDecorator, dispatch } = this.props.form;
const {isForgotSubmit=false} = this.props const { isForgotSubmit = false } = this.props;
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Spin spinning={isForgotSubmit} delay={500}> <Spin spinning={isForgotSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem> <FormItem>
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your username or email!' }], rules: [{ required: true, message: 'Please input your username or email!' }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="username or email" /> <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder="username or email"/>,
)} )}
</FormItem> </FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
Send Send
</Button> </Button>
Or <Link to="/login">Sign In</Link> Or <Link to="/login">Sign In</Link>
</Form> </Form>
</Spin> </Spin>
</div> </div>
) );
} }
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {
auth: {isForgotSubmit} auth: { isForgotSubmit },
} = state } = state;
return { return {
isForgotSubmit isForgotSubmit,
}; };
} }
const WrapperLogin = Form.create()(Login) const WrapperLogin = Form.create()(Login);
export default connect(mapStateToProps)(WrapperLogin); export default connect(mapStateToProps)(WrapperLogin);
src/routes/IndexPage.js
View file @ 900bf08f
import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import React from 'react';
import styles from './IndexPage.css'; import styles from './IndexPage.css';
function IndexPage() { function IndexPage() {
return ( return (
<div className={styles.normal}> <div className={styles.normal}>
<h1 className={styles.title}>Yay! Welcome to dva!</h1> <h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} /> <div className={styles.welcome}/>
<ul className={styles.list}> <ul className={styles.list}>
<li>To get started, edit <code>src/index.js</code> and save to reload.</li> <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li> <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
...@@ -15,7 +15,6 @@ function IndexPage() { ...@@ -15,7 +15,6 @@ function IndexPage() {
); );
} }
IndexPage.propTypes = { IndexPage.propTypes = {};
};
export default connect()(IndexPage); export default connect()(IndexPage);
src/routes/Login.js
View file @ 900bf08f
import React from 'react'; import { Button, Checkbox, Form, Icon, Input, Spin } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router';
import styles from './Login.less'; import React from 'react';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const FormItem = Form.Item;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
},
};
class Login extends React.Component { class Login extends React.Component {
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch, params: { id }} = this.props const { form, dispatch } = this.props;
if (e) {
e.preventDefault();
}
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { account, password } = values;
const {account, password} = values dispatch({ type: 'auth/login', payload: { account, password } });
dispatch({type: "auth/login", payload: {account: account, password}})
} }
}); });
} };
render() { render() {
const { getFieldDecorator, dispatch} = this.props.form; const { getFieldDecorator } = this.props.form;
const { isLoginSubmit=false } = this.props const { isLoginSubmit = false } = this.props;
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Spin spinning={isLoginSubmit} delay={500}> <Spin spinning={isLoginSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem> <FormItem>
{getFieldDecorator('account', { {getFieldDecorator('account', {
rules: [{ required: true, message: 'Please input your account!' }], rules: [{ required: true, message: 'Please input your account!' }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" /> <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }], rules: [{ required: true, message: 'Please input your Password!' }],
})( })(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" /> <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
{getFieldDecorator('remember', { {getFieldDecorator('remember', {
valuePropName: 'checked', valuePropName: 'checked',
initialValue: true, initialValue: true,
})( })(
<Checkbox>Remember me</Checkbox> <Checkbox>Remember me</Checkbox>,
)} )}
<Link to="/forgot" className="login-form-forgot">Forgot password</Link> <Link to="/forgot" className="login-form-forgot">Forgot password</Link>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
Log in Log in
</Button> </Button>
Or <Link to="/register">register now!</Link> Or <Link to="/register">register now!</Link>
</FormItem> </FormItem>
</Form> </Form>
</Spin> </Spin>
</div> </div>
) );
} }
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {
auth: {isLoginSubmit} auth: { isLoginSubmit },
} = state } = state;
return { return {
isLoginSubmit isLoginSubmit,
}; };
} }
const WrapperLogin = Form.create()(Login) const WrapperLogin = Form.create()(Login);
export default connect(mapStateToProps)(WrapperLogin); export default connect(mapStateToProps)(WrapperLogin);
src/routes/Login.less
View file @ 900bf08f
:global { :global {
.login-form { .login-form {
max-width: 300px; max-width: 300px;
} }
.login-form-forgot { .login-form-forgot {
float: right; float: right;
} }
.login-form-button { .login-form-button {
width: 100%; width: 100%;
} }
} }
.normal {
} .normal {
}
src/routes/Profiles.js
View file @ 900bf08f
import React from 'react'; import { Button, Form, Icon, Input, Spin, Tabs } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import React from 'react';
import EmailForm from '../components/EmailForm';
import PasswordForm from '../components/PasswordForm';
import UserNameForm from '../components/UserNameForm';
import styles from './Profiles.less'; import styles from './Profiles.less';
import { Form, Input, Icon, Radio, Tag, Tooltip, Button, Select, Tabs, Upload, Modal, Table, Popconfirm, Row, Col, Card, Spin } from 'antd'
const FormItem = Form.Item; const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;
import EmailForm from '../components/EmailForm'
import PasswordForm from '../components/PasswordForm'
import UserNameForm from '../components/UserNameForm'
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 15 }, wrapperCol: { span: 15 },
} };
class Profiles extends React.Component { class Profiles extends React.Component {
onUpdateSubmit = (e) => { onUpdateSubmit = (e) => {
const { form, dispatch, data: {id}} = this.props const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { username, nickname, password } = values const { username, nickname, password } = values;
dispatch({type: "user/updateProfile", payload: { username, nickname, password, user_id: id }}) dispatch({ type: 'user/updateProfile', payload: { username, nickname, password, user_id: id } });
} }
}); });
} };
render() { render() {
const { dispatch, form, data, isUpdateSubmit=false, checkUsername, isUserNameExists } = this.props const { form, data, isUpdateSubmit = false } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { username, nickname, id } = data const { nickname } = data;
const nicknameProps = { const nicknameProps = {
fromItem: { fromItem: {
label: "nickname", label: 'nickname',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
initialValue: nickname initialValue: nickname,
}, },
input: { input: {
placeholder: "nickname", placeholder: 'nickname',
} },
} };
return ( return (
<Spin spinning={isUpdateSubmit} delay={500}> <Spin spinning={isUpdateSubmit} delay={500}>
<Tabs defaultActiveKey="1" className="app-detail-nav"> <Tabs defaultActiveKey="1" className="app-detail-nav">
<TabPane tab={<span><Icon type="setting" /> 基本信息 </span>} key="1"> <TabPane tab={<span><Icon type="setting" /> 基本信息 </span>} key="1">
<Form onSubmit={this.onUpdateSubmit}> <Form onSubmit={this.onUpdateSubmit}>
<FormItem {...nicknameProps.fromItem}> <FormItem {...nicknameProps.fromItem}>
{getFieldDecorator(`nickname`, {...nicknameProps.decorator})( {getFieldDecorator('nickname', { ...nicknameProps.decorator })(
<Input {...nicknameProps.input}/> <Input {...nicknameProps.input} />,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
<div className={styles.wrapSubmit}> <div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large">提交</Button> <Button type="primary" htmlType="submit" size="large">提交</Button>
</div> </div>
</FormItem> </FormItem>
</Form> </Form>
...@@ -79,40 +74,40 @@ class Profiles extends React.Component { ...@@ -79,40 +74,40 @@ class Profiles extends React.Component {
<TabPane tab={<span><Icon type="setting" /> 账户信息 </span>} key="2"> <TabPane tab={<span><Icon type="setting" /> 账户信息 </span>} key="2">
<Tabs type="card" className="app-detail-nav"> <Tabs type="card" className="app-detail-nav">
<TabPane tab={"修改用户名"} key={0}> <TabPane tab={'修改用户名'} key={0}>
<UserNameForm /> <UserNameForm />
</TabPane> </TabPane>
<TabPane tab={"修改邮箱"} key={1}> <TabPane tab={'修改邮箱'} key={1}>
<EmailForm /> <EmailForm />
</TabPane> </TabPane>
<TabPane tab={"修改密码"} key={2}> <TabPane tab={'修改密码'} key={2}>
<PasswordForm /> <PasswordForm />
</TabPane> </TabPane>
</Tabs> </Tabs>
</TabPane> </TabPane>
</Tabs> </Tabs>
</Spin> </Spin>
) );
} }
} }
function mapStateToProps(state, props) { function mapStateToProps(state) {
const { const {
user: {data, isUpdateSubmit}, user: { data, isUpdateSubmit },
auth: {checkUsername, isEmailExists, isUserNameExists,} auth: { checkUsername, isEmailExists, isUserNameExists, },
} = state } = state;
return { return {
data, data,
checkUsername, checkUsername,
isEmailExists, isEmailExists,
isUserNameExists, isUserNameExists,
isUpdateSubmit isUpdateSubmit,
}; };
} }
const WrapperProfiles = Form.create()(Profiles) const WrapperProfiles = Form.create()(Profiles);
export default connect(mapStateToProps)(WrapperProfiles); export default connect(mapStateToProps)(WrapperProfiles);
src/routes/Profiles.less
View file @ 900bf08f
:global { :global {
.app-detail-nav{ .app-detail-nav {
} }
.ant-card { .ant-card {
margin: 2vh 0; margin: 2vh 0;
} }
.app-detail-nav .ant-tabs-nav-scroll { .app-detail-nav .ant-tabs-nav-scroll {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.ant-upload-select-picture-card i { .ant-upload-select-picture-card i {
font-size: 28px; font-size: 28px;
color: #999; color: #999;
} }
.ant-upload-select-picture-card .ant-upload-text { .ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px; margin-top: 8px;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
} }
} }
.wrapSubmit{ .wrapSubmit {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
\ No newline at end of file
src/routes/Register.js
View file @ 900bf08f
import React from 'react'; import { Button, Form, Icon, Input, Select, Spin } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router';
import styles from './Login.less'; import React from 'react';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -10,21 +9,21 @@ const Option = Select.Option; ...@@ -10,21 +9,21 @@ const Option = Select.Option;
class Register extends React.Component { class Register extends React.Component {
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch, params: { id }} = this.props const { form, dispatch, params: { id } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const {email, username, nickname, password, confirm} = values
const { email, username, nickname, password, confirm } = values;
dispatch({type: "auth/register", payload: {email, username, nickname, password }})
dispatch({ type: 'auth/register', payload: { email, username, nickname, password } });
} }
}); });
} };
checkPassword = (rule, value, callback) => { checkPassword = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
...@@ -33,7 +32,7 @@ class Register extends React.Component { ...@@ -33,7 +32,7 @@ class Register extends React.Component {
} else { } else {
callback(); callback();
} }
} };
checkConfirm = (rule, value, callback) => { checkConfirm = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
...@@ -41,119 +40,123 @@ class Register extends React.Component { ...@@ -41,119 +40,123 @@ class Register extends React.Component {
form.validateFields(['confirm'], { force: true }); form.validateFields(['confirm'], { force: true });
} }
callback(); callback();
} };
render() { render() {
const { dispatch, register, form, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit } = this.props const { dispatch, register, form, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit } = this.props;
const { getFieldDecorator, } = form const { getFieldDecorator, } = form;
const {email={}, username={}, password={} } = register const { email = {}, username = {}, password = {} } = register;
const emailProps = { const emailProps = {
hasFeedback: true, hasFeedback: true,
validateStatus: checkEmail, validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : '' help: isEmailExists ? 'email exists' : '',
} };
const emailInputProps = { const emailInputProps = {
onBlur: () => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue()} }), onBlur: () => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue() } }),
placeholder: "Email", placeholder: 'Email',
} };
const usernameProps = { const usernameProps = {
hasFeedback: true, hasFeedback: true,
validateStatus: checkUsername, validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : '' help: isUserNameExists ? 'username exists' : '',
} };
const usernameInputProps = { const usernameInputProps = {
onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue()} }), onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue() } }),
placeholder: "Username" placeholder: 'Username',
} };
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Spin spinning={isRegisterSubmit} delay={500}> <Spin spinning={isRegisterSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem {...emailProps} > <FormItem {...emailProps} >
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ required: true, message: '邮箱格式不对!', pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ }], rules: [{
}, { required: true,
})( message: '邮箱格式不对!',
<Input {...emailInputProps} /> pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
)} }],
</FormItem> }, {})(
<Input {...emailInputProps} />,
<FormItem {...usernameProps}> )}
{getFieldDecorator('username', { </FormItem>
rules: [{ required: true, message: '用户名格式有误!', pattern: /^[A-Za-z0-9_\u4E00-\u9FD5\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2CEAF}\uF900–\uFAFF\u{2F800}-\u{2FA1D}\uAC00–\uD7AF\u3040-\u30FF\u31F0–\u31FF\u{1B000}–\u{1B0FF}\u3005]+$/u }],
}, { <FormItem {...usernameProps}>
})( {getFieldDecorator('username', {
rules: [{
<Input {...usernameInputProps}/> required: true,
)} message: '用户名格式有误!',
</FormItem> pattern: /^[A-Za-z0-9_\u4E00-\u9FD5\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2CEAF}\uF900–\uFAFF\u{2F800}-\u{2FA1D}\uAC00–\uD7AF\u3040-\u30FF\u31F0–\u31FF\u{1B000}–\u{1B0FF}\u3005]+$/u,
}],
<FormItem > }, {})(
{getFieldDecorator('nickname', { <Input {...usernameInputProps}/>,
})( )}
<Input placeholder="nickname[optional]" /> </FormItem>
)}
</FormItem> <FormItem >
{getFieldDecorator('nickname', {})(
<FormItem hasFeedback > <Input placeholder="nickname[optional]"/>,
{getFieldDecorator('password', { )}
rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }], </FormItem>
}, {
validator: this.checkConfirm <FormItem hasFeedback>
})( {getFieldDecorator('password', {
<Input rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }],
prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password"
placeholder="Password" />
)}
</FormItem>
<FormItem hasFeedback >
{getFieldDecorator('confirm', {
rules: [{
required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/
}, { }, {
validator: this.checkPassword, validator: this.checkConfirm,
}], })(
})( <Input
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password"
type="password" placeholder="Password"/>,
onBlur={this.handleConfirmBlur} )}
placeholder="Password Again" /> </FormItem>
)}
</FormItem> <FormItem hasFeedback>
{getFieldDecorator('confirm', {
<Button type="primary" htmlType="submit" className="login-form-button"> rules: [{
Register required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/,
</Button> }, {
Or <Link to="/login">Sign in!</Link> validator: this.checkPassword,
</Form> }],
})(
<Input
prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
type="password"
onBlur={this.handleConfirmBlur}
placeholder="Password Again"/>,
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
Register
</Button>
Or <Link to="/login">Sign in!</Link>
</Form>
</Spin> </Spin>
</div> </div>
) );
} }
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {
auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit } auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit },
} = state } = state;
return { return {
register, register,
checkEmail, checkEmail,
checkUsername, checkUsername,
isEmailExists, isEmailExists,
isUserNameExists, isUserNameExists,
isRegisterSubmit isRegisterSubmit,
}; };
} }
const WrapperRegister = Form.create()(Register) const WrapperRegister = Form.create()(Register);
export default connect(mapStateToProps)(WrapperRegister); export default connect(mapStateToProps)(WrapperRegister);
src/routes/Register.less
View file @ 900bf08f
:global { :global {
.app-detail-nav{ .app-detail-nav {
} }
.ant-card { .ant-card {
margin: 2vh 0; margin: 2vh 0;
} }
.app-detail-nav .ant-tabs-nav-scroll { .app-detail-nav .ant-tabs-nav-scroll {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.ant-upload-select-picture-card i { .ant-upload-select-picture-card i {
font-size: 28px; font-size: 28px;
color: #999; color: #999;
} }
.ant-upload-select-picture-card .ant-upload-text { .ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px; margin-top: 8px;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
} }
} }
src/routes/Reset.js
View file @ 900bf08f
import React from 'react'; import { Button, Form, Icon, Input, Select, Spin } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import React from 'react';
import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -10,19 +8,19 @@ const Option = Select.Option; ...@@ -10,19 +8,19 @@ const Option = Select.Option;
class Reset extends React.Component { class Reset extends React.Component {
onSubmitReset = (e) => { onSubmitReset = (e) => {
const { form, dispatch, location: { query: { key, user_id }} } = this.props const { form, dispatch, location: { query: { key, user_id } } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const {password} = values const { password } = values;
console.log(this.props) console.log(this.props);
dispatch({type: "auth/reset", payload: { password, key, user_id}}) dispatch({ type: 'auth/reset', payload: { password, key, user_id } });
} }
}); });
} };
checkPassword = (rule, value, callback) => { checkPassword = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
...@@ -31,7 +29,7 @@ class Reset extends React.Component { ...@@ -31,7 +29,7 @@ class Reset extends React.Component {
} else { } else {
callback(); callback();
} }
} };
checkConfirm = (rule, value, callback) => { checkConfirm = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
...@@ -39,57 +37,57 @@ class Reset extends React.Component { ...@@ -39,57 +37,57 @@ class Reset extends React.Component {
form.validateFields(['confirm'], { force: true }); form.validateFields(['confirm'], { force: true });
} }
callback(); callback();
} };
render() { render() {
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const { isResetSubmit=false } = this.props const { isResetSubmit = false } = this.props;
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Spin spinning={isResetSubmit} delay={500}> <Spin spinning={isResetSubmit} delay={500}>
<Form onSubmit={this.onSubmitReset} className="login-form"> <Form onSubmit={this.onSubmitReset} className="login-form">
<FormItem> <FormItem>
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }], rules: [{ required: true, message: 'Please input your Password!' }],
}, {
validator: this.checkConfirm
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('confirm', {
rules: [{
required: true, message: 'Please confirm your password!',
}, { }, {
validator: this.checkPassword, validator: this.checkConfirm,
}], })(
})( <Input prefix={<Icon type="lock" style={{ fontSize: 13 }}/>} type="password" placeholder="Password"/>,
<Input type="password" onBlur={this.handleConfirmBlur} placeholder="Password Again" /> )}
)} </FormItem>
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> {getFieldDecorator('confirm', {
Submit rules: [{
</Button> required: true, message: 'Please confirm your password!',
</Form> }, {
validator: this.checkPassword,
}],
})(
<Input type="password" onBlur={this.handleConfirmBlur} placeholder="Password Again"/>,
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
Submit
</Button>
</Form>
</Spin> </Spin>
</div> </div>
) );
} }
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
auth: {isResetSubmit} auth: { isResetSubmit },
} = state } = state;
return { return {
isResetSubmit isResetSubmit,
}; };
} }
const WrapperReset = Form.create()(Reset) const WrapperReset = Form.create()(Reset);
export default connect(mapStateToProps)(WrapperReset); export default connect(mapStateToProps)(WrapperReset);
src/services/auth.js
View file @ 900bf08f
import request from '../utils/request'; import request from '../utils/request';
import config from '../config'
export async function login(params) { export async function login(params) {
return request(`/signin`, { return request(`/signin`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
export async function forgot(params) { export async function forgot(params) {
return request(`/forgot`, { return request(`/forgot`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
export async function register(params) { export async function register(params) {
return request(`/signup`, { return request(`/signup`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
export async function reset(params) { export async function reset(params) {
return request(`/reset`, { return request(`/reset`, {
method: 'PATCH', method: 'PATCH',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
export async function activate(params) { export async function activate(params) {
return request(`/activate`, { return request(`/activate`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
// deprecated // deprecated
export async function getUserByEmail(params) { export async function getUserByEmail(params) {
return request(`/user/${params.email}`, { return request(`/user/${params.email}`, {
method: 'GET' method: 'GET',
}) });
} }
// deprecated // deprecated
export async function getUserByUsername(params) { export async function getUserByUsername(params) {
return request(`/user/${params.username}`, { return request(`/user/${params.username}`, {
method: 'GET' method: 'GET',
}) });
} }
export async function checkUserExists(params) { export async function checkUserExists(params) {
return request(`/user/exists`, { return request(`/user/exists`, {
method: "POST", method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
......
src/services/user.js
View file @ 900bf08f
import request from '../utils/request'; import request from '../utils/request';
import config from '../config'
export async function updateProfile(params) { export async function updateProfile(params) {
return request(`/user/profiles`, { return request(`/user/profiles`, {
method: 'PATCH', method: 'PATCH',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
export async function updateAccount(params) { export async function updateAccount(params) {
return request(`/user/account`, { return request(`/user/account`, {
method: 'PATCH', method: 'PATCH',
body: JSON.stringify(params) body: JSON.stringify(params),
}) });
} }
src/utils/request.js
View file @ 900bf08f
...@@ -23,16 +23,16 @@ function checkStatus(response) { ...@@ -23,16 +23,16 @@ function checkStatus(response) {
* @return {object} An object containing either "data" or "err" * @return {object} An object containing either "data" or "err"
*/ */
export default function request(url, options) { export default function request(url, options) {
url = `${config.apiRoot}${url}` url = `${config.apiRoot}${url}`;
if(options && !options.headers && (options.method == 'POST' || options.method == 'PATCH')) { if (options && !options.headers && (options.method == 'POST' || options.method == 'PATCH')) {
options.headers = { options.headers = {
"content-type": "application/json" 'content-type': 'application/json',
} };
} }
console.log(options) console.log(options);
return fetch(url, options) return fetch(url, options)
.then(checkStatus) .then(checkStatus)
.then(parseJSON) .then(parseJSON)
.then(data => ({ data })) .then(data => ({ data }))
.catch(err => ({ err })); .catch(err => ({ err }));
} };
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