Skip to content

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

reformat code

parent 26b58b53
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 765 additions and 700 deletions
.idea/workspace.xml
View file @ d1e78c3d
This diff is collapsed.
src/components/EmailForm.js
View file @ d1e78c3d
import { Form, Input } from 'antd';
import React, { PropTypes } from 'react'; import React, { PropTypes } 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 {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: {id} } = this.props const { form, dispatch, 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 { email, password } = values const { email, password } = values;
dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }}) dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } });
} }
}); });
} };
render(){
const {form, dispatch, user, checkEmail, isEmailExists} = this.props render() {
const {getFieldDecorator} = form const { form, dispatch, user, checkEmail, isEmailExists } = this.props;
const {id, email} = user; const { getFieldDecorator } = form;
const { intl: {messages} } = this.context; const { id, email } = user;
const { intl: { messages } } = this.context;
const emailProps = { const emailProps = {
...@@ -45,45 +43,50 @@ class EmailForm extends React.Component { ...@@ -45,45 +43,50 @@ class EmailForm extends React.Component {
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: messages.email placeholder: messages.email,
} },
} };
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: messages.password, label: messages.password,
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ } {
] required: true,
message: messages['Password-length-must-be-between-8-and-24-characters.'],
pattern: /^.{8,24}$/,
},
],
}, },
input: { input: {
placeholder: messages.password, placeholder: messages.password,
type: 'password' type: 'password',
} },
} };
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
<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')( {getFieldDecorator('password')(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />,
)} )}
</FormItem> </FormItem>
...@@ -96,20 +99,19 @@ class EmailForm extends React.Component { ...@@ -96,20 +99,19 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
user: {user}, user: { user },
auth: {isEmailExists, checkEmail} auth: { isEmailExists, checkEmail },
} = state } = state;
return { return {
user, user,
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/PasswordForm.js
View file @ d1e78c3d
import { Form, Input } from 'antd';
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import styles from './EmailForm.css'; import { connect } from 'react-redux';
import {connect} from 'react-redux'
import { Form, Input, Icon, Button } from 'antd';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
...@@ -11,14 +10,14 @@ const FormItem = Form.Item; ...@@ -11,14 +10,14 @@ 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 {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
checkPassword = (rule, value, callback) => { checkPassword = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
const { intl: { messages } } = this.context; const { intl: { messages } } = this.context;
...@@ -27,7 +26,7 @@ class EmailForm extends React.Component { ...@@ -27,7 +26,7 @@ class EmailForm 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;
...@@ -35,84 +34,91 @@ class EmailForm extends React.Component { ...@@ -35,84 +34,91 @@ class EmailForm extends React.Component {
form.validateFields(['confirm'], { force: true }); form.validateFields(['confirm'], { force: true });
} }
callback(); callback();
} };
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: {id} } = this.props const { form, dispatch, 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 { new_password, password } = values const { new_password, password } = values;
dispatch({type: "user/updateAccount", payload: { new_password, password, user_id: id }}) dispatch({ type: 'user/updateAccount', payload: { new_password, password, user_id: id } });
} }
}); });
} };
render(){
const {form } = this.props render() {
const {getFieldDecorator} = form; const { form } = this.props;
const { intl: { messages } } = this.context const { getFieldDecorator } = form;
const { intl: { messages } } = this.context;
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: 'old passwrod', label: 'old passwrod',
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }, {
{ validator: this.checkConfirm } required: true,
message: messages['Password-length-must-be-between-8-and-24-characters.'],
pattern: /^.{8,24}$/,
},
{ validator: this.checkConfirm },
], ],
}, },
input: { input: {
placeholder: messages['old-password'], placeholder: messages['old-password'],
type: 'password' type: 'password',
}, },
input2: { input2: {
placeholder: messages['new-password'], placeholder: messages['new-password'],
type: 'password' type: 'password',
} },
} };
const confirmProps = { const confirmProps = {
fromItem: { fromItem: {
label: messages['password-again'], label: messages['password-again'],
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/}, {
{ validator: this.checkPassword} required: true,
message: messages['Password-length-must-be-between-8-and-24-characters.'],
pattern: /^.{8,24}$/,
},
{ validator: this.checkPassword },
], ],
}, },
input: { input: {
placeholder: messages['password-again'], placeholder: messages['password-again'],
type: 'password' type: 'password',
} },
} };
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
<FormItem {...passwordProps.fromItem} label={messages['old-password']}> <FormItem {...passwordProps.fromItem} label={messages['old-password']}>
{getFieldDecorator('password')( {getFieldDecorator('password')(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />,
)} )}
</FormItem> </FormItem>
<FormItem {...passwordProps.fromItem} label={messages['new-password']}> <FormItem {...passwordProps.fromItem} label={messages['new-password']}>
{getFieldDecorator('new_password', {...passwordProps.decorator})( {getFieldDecorator('new_password', { ...passwordProps.decorator })(
<Input {...passwordProps.input2} /> <Input {...passwordProps.input2} />,
)} )}
</FormItem> </FormItem>
<FormItem {...confirmProps.fromItem}> <FormItem {...confirmProps.fromItem}>
{getFieldDecorator(`confirm`, {...confirmProps.decorator})( {getFieldDecorator('confirm', { ...confirmProps.decorator })(
<Input {...confirmProps.input} /> <Input {...confirmProps.input} />,
)} )}
</FormItem> </FormItem>
...@@ -125,18 +131,16 @@ class EmailForm extends React.Component { ...@@ -125,18 +131,16 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
user: {user} user: { user },
} = state } = state;
return { return {
user, user,
}; };
} }
const WrapperEmailForm = Form.create()(EmailForm) const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm); export default connect(mapStateToProps)(WrapperEmailForm);
src/components/SendEmail.js
View file @ d1e78c3d
import { Form, Input } from 'antd';
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import styles from './EmailForm.css'; import { connect } from 'react-redux';
import { connect } from 'react-redux'
import { Form, Input, Icon, Button, Modal } from 'antd';
const FormItem = Form.Item;
import SubmitButton from './SubmitButton'; 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 {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: { id } } = this.props const { form, dispatch, 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 { email, password } = values const { email, password } = values;
dispatch({ type: "user/updateEmail", payload: { email, password, user_id: id } }) dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } });
} }
}); });
} };
render() { render() {
const { form, dispatch, user, checkEmail, isEmailExists } = this.props;
const { form, dispatch, user, checkEmail, isEmailExists, isSendEmailActive } = this.props
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { id, email } = data; const { id, email } = user;
const { intl: { messages } } = this.context; const { intl: { messages } } = this.context;
const emailProps = { const emailProps = {
...@@ -45,31 +42,16 @@ class EmailForm extends React.Component { ...@@ -45,31 +42,16 @@ class EmailForm extends React.Component {
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: messages.email placeholder: messages.email,
}
}
const passwordProps = {
fromItem: {
label: messages.passwrod,
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }
]
}, },
input: { };
placeholder: messages.password,
type: 'password'
}
}
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
...@@ -77,7 +59,7 @@ class EmailForm extends React.Component { ...@@ -77,7 +59,7 @@ class EmailForm extends React.Component {
{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>
...@@ -90,21 +72,20 @@ class EmailForm extends React.Component { ...@@ -90,21 +72,20 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
user: { user }, user: { user },
auth: { isEmailExists, checkEmail, isSendEmailActive } auth: { isEmailExists, checkEmail, isSendEmailActive },
} = state } = state;
return { return {
user, user,
checkEmail, checkEmail,
isEmailExists, isEmailExists,
isSendEmailActive isSendEmailActive,
}; };
} }
const WrapperEmailForm = Form.create()(EmailForm) const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm); export default connect(mapStateToProps)(WrapperEmailForm);
src/components/SubmitButton.js
View file @ d1e78c3d
import { Button } from 'antd'; import { Button } from 'antd';
import React from 'react'; import React from 'react';
import styles from './SubmitButton.css';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
import styles from './SubmitButton.css';
function SubmitButton(props) { function SubmitButton(props) {
return ( return (
<div className={styles.wrapSubmit}> <div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large" {...props} ><Format id="save" /></Button> <Button type="primary" htmlType="submit" size="large" {...props} ><Format id="save"/></Button>
</div> </div>
); );
} }
......
src/components/UserNameForm.js
View file @ d1e78c3d
...@@ -14,7 +14,7 @@ class EmailForm extends React.Component { ...@@ -14,7 +14,7 @@ class EmailForm extends React.Component {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: { id } } = this.props; const { form, dispatch, user: { id } } = this.props;
...@@ -31,7 +31,6 @@ class EmailForm extends React.Component { ...@@ -31,7 +31,6 @@ class EmailForm extends React.Component {
}; };
render() { render() {
const { form, dispatch, user, checkUsername, isUserNameExists } = this.props; const { form, dispatch, user, checkUsername, isUserNameExists } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { id, username } = user; const { id, username } = user;
...@@ -43,7 +42,7 @@ class EmailForm extends React.Component { ...@@ -43,7 +42,7 @@ class EmailForm extends React.Component {
hasFeedback: true, hasFeedback: true,
validateStatus: checkUsername, validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : '', help: isUserNameExists ? 'username exists' : '',
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
initialValue: username, initialValue: username,
...@@ -57,11 +56,15 @@ class EmailForm extends React.Component { ...@@ -57,11 +56,15 @@ class EmailForm extends React.Component {
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: messages.password, label: messages.password,
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }, {
required: true,
message: messages['Password-length-must-be-between-8-and-24-characters.'],
pattern: /^.{8,24}$/,
},
], ],
}, },
input: { input: {
...@@ -93,7 +96,7 @@ class EmailForm extends React.Component { ...@@ -93,7 +96,7 @@ class EmailForm extends React.Component {
} }
function mapStateToProps(state, props) { function mapStateToProps(state) {
const { const {
user: { user }, user: { user },
auth: { isUserNameExists, checkUsername }, auth: { isUserNameExists, checkUsername },
......
src/index.js
View file @ d1e78c3d
import { message } from 'antd'; import { message } from 'antd';
import dva from 'dva'; import dva from 'dva';
import createLoading from 'dva-loading';
import { browserHistory } from 'dva/router'; import { browserHistory } from 'dva/router';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import createLoading from 'dva-loading';
import { addLocaleData, IntlProvider } from 'react-intl'; import { addLocaleData, IntlProvider } from 'react-intl';
import en from 'react-intl/locale-data/en'; import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh'; import zh from 'react-intl/locale-data/zh';
import localeData from '../i18n.json'; import localeData from '../i18n.json';
import './index.less'; import './index.less';
// 1. Initialize // 1. Initialize
const app = dva({ const app = dva({
onError: (error, dispatch) => { onError: (error, dispatch) => {
...@@ -20,12 +18,12 @@ const app = dva({ ...@@ -20,12 +18,12 @@ const app = dva({
history: browserHistory, history: browserHistory,
}); });
app.use(createLoading()) app.use(createLoading());
app.model(require('./models/user')); app.model(require('./models/user'));
app.model(require("./models/upload")); app.model(require('./models/upload'));
app.model(require('./models/auth')); app.model(require('./models/auth'));
...@@ -48,10 +46,9 @@ app.router(require('./router')); ...@@ -48,10 +46,9 @@ app.router(require('./router'));
// 5. Start // 5. Start
addLocaleData([...en, ...zh]); addLocaleData([...en, ...zh]);
/*eslint-disable */ /*eslint-disable */
let language =localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage; let language = localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
/*eslint-enable */ /*eslint-enable */
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0]; const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
......
src/models/auth.js
View file @ d1e78c3d
...@@ -23,10 +23,10 @@ export default { ...@@ -23,10 +23,10 @@ export default {
reducers: { reducers: {
change(state, action) { change(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload,
}; };
}, },
checkEmail(state, action) { checkEmail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
}, },
}; };
}, },
checkUsername(state, action) { checkUsername(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
}, },
}; };
}, },
activate(state, action) { activate(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -52,18 +52,18 @@ export default { ...@@ -52,18 +52,18 @@ export default {
}, },
check(state, action) { check(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload,
}; };
}, },
register(state, action) { register(state) {
return { return {
...state, ...state,
...{ ...{
isRegisterSubmit: true, isRegisterSubmit: true,
} },
}; };
}, },
registerSuccess(state, action) { registerSuccess(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -71,7 +71,7 @@ export default { ...@@ -71,7 +71,7 @@ export default {
}, },
}; };
}, },
registerFail(state, action) { registerFail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
}, },
}; };
}, },
login(state, action) { login(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -96,7 +96,7 @@ export default { ...@@ -96,7 +96,7 @@ export default {
}, },
}; };
}, },
loginFail(state, action) { loginFail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -104,7 +104,7 @@ export default { ...@@ -104,7 +104,7 @@ export default {
}, },
}; };
}, },
forgot(state, action) { forgot(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -112,7 +112,7 @@ export default { ...@@ -112,7 +112,7 @@ export default {
}, },
}; };
}, },
forgotSuccess(state, action) { forgotSuccess(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -120,7 +120,7 @@ export default { ...@@ -120,7 +120,7 @@ export default {
}, },
}; };
}, },
forgotFail(state, action) { forgotFail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -128,7 +128,7 @@ export default { ...@@ -128,7 +128,7 @@ export default {
}, },
}; };
}, },
reset(state, action) { reset(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -136,7 +136,7 @@ export default { ...@@ -136,7 +136,7 @@ export default {
}, },
}; };
}, },
resetSuccess(state, action) { resetSuccess(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -144,7 +144,7 @@ export default { ...@@ -144,7 +144,7 @@ export default {
}, },
}; };
}, },
resetFail(state, action) { resetFail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -154,7 +154,7 @@ export default { ...@@ -154,7 +154,7 @@ export default {
}, },
}, },
effects: { effects: {
*activate({ payload }, { call, put, select }) { *activate({ payload }, { call, select }) {
const { messages } = yield select(state => state.common); const { messages } = yield select(state => state.common);
try { try {
const { data } = yield call(activate, payload); const { data } = yield call(activate, payload);
......
src/models/common.js
View file @ d1e78c3d
import i18n from '../../i18n.json' import i18n from '../../i18n.json';
export default { export default {
namespace: 'common', namespace: 'common',
state: { state: {
language: 'zh-CN', language: 'zh-CN',
messages: {} messages: {},
}, },
reducers: { reducers: {
init(state, action){ init(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload,
} };
} },
}, },
effects: {}, effects: {},
subscriptions: { subscriptions: {
setup({ dispatch, history }) { setup({ dispatch }) {
let language =localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage; let language = localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0]; const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
const messages = i18n[languageWithoutRegionCode] const messages = i18n[languageWithoutRegionCode];
dispatch({type: "init", payload: { language: languageWithoutRegionCode, messages }}) dispatch({ type: 'init', payload: { language: languageWithoutRegionCode, messages } });
} },
}, },
}; };
src/models/upload.js
View file @ d1e78c3d
import { uploadImage } from '../services/upload' import { message } from 'antd';
import { message } from 'antd' import { uploadImage } from '../services/upload';
export default { export default {
namespace: 'upload', namespace: 'upload',
state: { state: {
imageUrl: "", imageUrl: '',
isUpload: false, isUpload: false,
uploadedImage: {} uploadedImage: {},
}, },
reducers: { reducers: {
start(state, action) { start(state) {
return { return {
...state, ...{ ...state,
isUpload: true ...{
} isUpload: true,
} },
};
}, },
getfile(state, action) { getfile(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload,
} };
}, },
uploadSuccess(state, action) { uploadSuccess(state, action) {
return { return {
...state, ...action.payload, ...{ ...state,
isUpload: false ...action.payload,
} ...{
} isUpload: false,
} },
};
},
}, },
effects: { effects: {
*upload({ payload }, { call, put }) { *upload({ payload }, { call, put }) {
try { try {
const { data } = yield call(uploadImage, payload) const { data } = yield call(uploadImage, payload);
if(data){ if (data) {
const [ image ] = data const [image] = data;
yield put({ type: 'uploadSuccess', payload: { uploadedImage : image } }) yield put({ type: 'uploadSuccess', payload: { uploadedImage: image } });
const {user_id} = payload const { user_id } = payload;
yield put({ type: 'user/updateProfile', payload: { avatar: image["Key"], user_id }}) yield put({ type: 'user/updateProfile', payload: { avatar: image.Key, user_id } });
}
} catch (error) {
yield put({ type: 'uploadFail' })
message.error(error.message)
} }
} catch (error) {
yield put({ type: 'uploadFail' });
message.error(error.message);
}
}, },
}, },
subscriptions: { subscriptions: {},
},
}; };
src/models/user.js
View file @ d1e78c3d
...@@ -15,15 +15,15 @@ export default { ...@@ -15,15 +15,15 @@ export default {
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.data ...state, ...action.payload.data,
}; };
}, },
updateProfile(state, action) { updateProfile(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
}, },
}; };
}, },
updateProfileFail(state, action) { updateProfileFail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -48,7 +48,7 @@ export default { ...@@ -48,7 +48,7 @@ export default {
}, },
}; };
}, },
updateAccount(state, action) { updateAccount(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
}, },
}; };
}, },
updateAccountFail(state, action) { updateAccountFail(state) {
return { return {
...state, ...state,
...{ ...{
...@@ -90,10 +90,8 @@ export default { ...@@ -90,10 +90,8 @@ export default {
}, },
}, },
effects: { effects: {
*loginSuccess({ payload }, { call, put }) { *loginSuccess({ payload }, { put }) {
const { data: { user, token } } = payload; const { data: { user, token } } = payload;
if (!payload.data) { if (!payload.data) {
message.error('error '); message.error('error ');
} }
...@@ -116,20 +114,20 @@ export default { ...@@ -116,20 +114,20 @@ export default {
} }
} }
}, },
*getAuthUser({ payload }, { call, put, select }) { *getAuthUser({ payload }, { call, put }) {
const { token } = payload; const { token } = payload;
try { try {
let { data } = yield call(getAuthUser, { token }) let { data } = yield call(getAuthUser, { token });
if(data) { if (data) {
yield put({ type: 'getAuthUserSuccess', payload: { user: data, token }}) yield put({ type: 'getAuthUserSuccess', payload: { user: data, token } });
} }
}catch(error) { } catch (error) {
yield put({ type: 'getAuthUserFail'}) yield put({ type: 'getAuthUserFail' });
// message.error(error.message) // message.error(error.message)
} }
}, },
*preLogin({ payload }, { call, put, select }) { *preLogin({ payload }, { call, put }) {
const { token } = payload; const { token } = payload;
if (!token) { if (!token) {
...@@ -150,8 +148,8 @@ export default { ...@@ -150,8 +148,8 @@ export default {
} }
} }
} catch (error) { } catch (error) {
yield put(routerRedux.replace("/signin")) yield put(routerRedux.replace('/signin'));
// message.error(error.message) // message.error(error.message)
} }
}, },
*updateProfile({ payload }, { call, put, select }) { *updateProfile({ payload }, { call, put, select }) {
...@@ -160,12 +158,10 @@ export default { ...@@ -160,12 +158,10 @@ export default {
let token = yield select(state => state.user.token); let token = yield select(state => state.user.token);
let { messages } = yield select(state => state.common); let { messages } = yield select(state => state.common);
try { try {
let { data } = yield call(updateProfile, { ...payload, token }); let { data } = yield call(updateProfile, { ...payload, token });
if (data) { if (data) {
yield put({ type: 'updateProfileSuccess', payload: { user: data, token } }); yield put({ type: 'updateProfileSuccess', payload: { user: data, token } });
message.info(messages.update_success); message.info(messages.update_success);
} }
} catch (error) { } catch (error) {
...@@ -178,7 +174,6 @@ export default { ...@@ -178,7 +174,6 @@ export default {
try { try {
let token = yield select(state => state.user.token); let token = yield select(state => state.user.token);
let { data } = yield call(updateAccount, { ...payload, token }); let { data } = yield call(updateAccount, { ...payload, token });
if (data) { if (data) {
yield put({ type: 'updateAccountSuccess', payload: { user: data, token } }); yield put({ type: 'updateAccountSuccess', payload: { user: data, token } });
message.info(messages['A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.']); message.info(messages['A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.']);
...@@ -194,7 +189,6 @@ export default { ...@@ -194,7 +189,6 @@ export default {
try { try {
let token = yield select(state => state.user.token); let token = yield select(state => state.user.token);
let { data } = yield call(updateAccount, { ...payload, token }); let { data } = yield call(updateAccount, { ...payload, token });
if (data) { if (data) {
yield put({ type: 'updateAccountSuccess', payload: { user: data, token } }); yield put({ type: 'updateAccountSuccess', payload: { user: data, token } });
message.info(messages.update_success); message.info(messages.update_success);
...@@ -208,12 +202,10 @@ export default { ...@@ -208,12 +202,10 @@ export default {
subscriptions: { subscriptions: {
setup({ dispatch, history }) { setup({ dispatch, history }) {
let token = localStorage.getItem('token'); let token = localStorage.getItem('token');
if (token) { if (token) {
dispatch({ type: 'getAuthUser', payload: { token } }); dispatch({ type: 'getAuthUser', payload: { token } });
} }
history.listen(({ pathname }) => {
history.listen(({ pathname, query }) => {
if (pathname == '/') { if (pathname == '/') {
dispatch({ type: 'preLogin', payload: { token } }); dispatch({ type: 'preLogin', payload: { token } });
} }
......
src/router.js
View file @ d1e78c3d
import { Redirect, Route, Router } from 'dva/router'; import { Route, Router } from 'dva/router';
import QueueAnim from 'rc-queue-anim'
import React from 'react'; import React from 'react';
import Active from './routes/Activate.js'; import Active from './routes/Activate.js';
import Forgot from './routes/Forgot.js'; import Forgot from './routes/Forgot.js';
import Index from './routes/Index.js';
import Login from './routes/Login.js'; import Login from './routes/Login.js';
import Profiles from './routes/Profiles.js'; import Profiles from './routes/Profiles.js';
...@@ -14,21 +15,19 @@ import Register from './routes/Register.js'; ...@@ -14,21 +15,19 @@ import Register from './routes/Register.js';
import Reset from './routes/Reset.js'; import Reset from './routes/Reset.js';
import Verify from "./routes/Verify.js"; import Verify from './routes/Verify.js';
import Index from "./routes/Index.js";
function RouterConfig({ history }) { function RouterConfig({ history }) {
return ( return (
<Router history={history}> <Router history={history}>
<Route path="/" component={Index} > <Route path="/" component={Index}>
<Route path="/signin" component={Login}/> <Route path="/signin" component={Login}/>
<Route path="/forgot" component={Forgot}/> <Route path="/forgot" component={Forgot}/>
<Route path="/signup" component={Register}/> <Route path="/signup" component={Register}/>
<Route path="/reset" component={Reset}/> <Route path="/reset" component={Reset}/>
<Route path="/profiles" component={Profiles}/> <Route path="/profiles" component={Profiles}/>
<Route path="/activate" component={Active}/> <Route path="/activate" component={Active}/>
<Route path="/verify" component={Verify} /> <Route path="/verify" component={Verify}/>
</Route> </Route>
</Router> </Router>
); );
......
src/routes/Activate.js
View file @ d1e78c3d
...@@ -16,7 +16,7 @@ class Active extends React.Component { ...@@ -16,7 +16,7 @@ class Active extends React.Component {
return ( return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Button type="primary" icon="poweroff" loading={loading} onClick={this.handleClick}> <Button type="primary" icon="poweroff" loading={loading} onClick={this.handleClick}>
<Format id={'verify-email'} /> <Format id={'verify-email'}/>
</Button> </Button>
</div> </div>
); );
...@@ -24,10 +24,9 @@ class Active extends React.Component { ...@@ -24,10 +24,9 @@ class Active extends React.Component {
} }
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {} = state;
} = state;
const loading = state.loading.global || false const loading = state.loading.global || false;
return { return {
loading, loading,
......
src/routes/Forgot.js
View file @ d1e78c3d
...@@ -5,26 +5,13 @@ import React, { PropTypes } from 'react'; ...@@ -5,26 +5,13 @@ import React, { PropTypes } from 'react';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Step = Steps.Step;
const Step = Steps.Step
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 {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch, params: { id } } = this.props; const { form, dispatch, params: { id } } = this.props;
...@@ -42,35 +29,35 @@ class Login extends React.Component { ...@@ -42,35 +29,35 @@ class Login extends React.Component {
}; };
render() { render() {
const { getFieldDecorator, dispatch } = this.props.form; const { getFieldDecorator } = this.props.form;
const { loading } = this.props; const { loading } = this.props;
const { intl: { messages } } = this.context; const { intl: { messages } } = this.context;
return ( return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1}}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Spin spinning={loading} delay={100}> <Spin spinning={loading} delay={100}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<Steps size="large" current={0}> <Steps size="large" current={0}>
<Step title={messages['send-email']} icon={<Icon type="solution" />} /> <Step title={messages['send-email']} icon={<Icon type="solution"/>}/>
<Step title={messages['verify-email']} icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail"/>}/>
</Steps> </Steps>
<FormItem style={{ marginTop: '28px' }}> <FormItem style={{ marginTop: '28px' }}>
{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={messages['email-address-or-username']} />, <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder={messages['email-address-or-username']}/>,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'send-email'} /> <Format id={'send-email'}/>
</Button> </Button>
</FormItem> </FormItem>
<div> <div>
<Link to="/signin"><Format id={'sign-in'} /></Link> <Link to="/signin"><Format id={'sign-in'}/></Link>
</div> </div>
</Form> </Form>
</Spin> </Spin>
...@@ -79,12 +66,12 @@ class Login extends React.Component { ...@@ -79,12 +66,12 @@ class Login extends React.Component {
} }
} }
function mapStateToProps(state, props) { function mapStateToProps(state) {
const { const {
auth: { isForgotSubmit }, auth: { isForgotSubmit },
} = state; } = state;
const loading = state.loading.global || false const loading = state.loading.global || false;
return { return {
loading, loading,
......
src/routes/Index.js
View file @ d1e78c3d
import React from 'react'; import { Layout, Menu } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import styles from './Index.less'; import { Link } from 'dva/router';
import Particles from 'react-particles-js' import React from 'react';
import DocumentTitle from 'react-document-title' import DocumentTitle from 'react-document-title';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
import { Layout, Button, Menu } from 'antd'; import Particles from 'react-particles-js';
import { Link } from 'dva/router' import logo from '../assets/MoeCube.png';
import logo from '../assets/MoeCube.png'
const { Header, Footer, Sider, Content } = Layout; const { Header, Footer, Sider, Content } = Layout;
const particleConfig = { const particleConfig = {
'particles': { particles: {
'number': { number: {
'value': 20, value: 20,
'density': { density: {
'enable': true, enable: true,
'value_area': 1000 value_area: 1000,
} },
}, },
'color': { color: {
'value': '#888', value: '#888',
'opacity': 0.4 opacity: 0.4,
}, },
'shape': { shape: {
'type': 'circle', type: 'circle',
'stroke': { stroke: {
'width': 4, width: 4,
'color': '#888', color: '#888',
'opacity': 0.4 opacity: 0.4,
},
polygon: {
nb_sides: 5,
}, },
'polygon': { image: {
'nb_sides': 5 src: 'img/github.svg',
width: 100,
height: 100,
}, },
'image': {
'src': 'img/github.svg',
'width': 100,
'height': 100
}
}, },
'opacity': { opacity: {
'value': 0.5, value: 0.5,
'random': false, random: false,
'anim': { anim: {
'enable': false, enable: false,
'speed': 1, speed: 1,
'opacity_min': 0.1, opacity_min: 0.1,
'sync': false sync: false,
} },
}, },
'size': { size: {
'value': 3, value: 3,
'random': true, random: true,
'anim': { anim: {
'enable': false, enable: false,
'speed': 1, speed: 1,
'size_min': 0.1, size_min: 0.1,
'sync': false sync: false,
} },
}, },
'line_linked': { line_linked: {
'enable': true, enable: true,
'distance': 150, distance: 150,
'color': '#888', color: '#888',
'opacity': 0.4, opacity: 0.4,
'width': 1 width: 1,
},
move: {
enable: true,
speed: 1,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200,
},
}, },
'move': {
'enable': true,
'speed': 1,
'direction': 'none',
'random': false,
'straight': false,
'out_mode': 'out',
'bounce': false,
'attract': {
'enable': false,
'rotateX': 600,
'rotateY': 1200
}
}
}, },
'interactivity': { interactivity: {
'detect_on': 'canvas', detect_on: 'canvas',
'events': { events: {
'onhover': { onhover: {
'enable': true, enable: true,
'mode': 'grab', mode: 'grab',
'nb': 2 nb: 2,
}, },
'onclick': { onclick: {
'enable': true, enable: true,
'mode': 'push' mode: 'push',
}, },
'resize': true resize: true,
}, },
'modes': { modes: {
'grab': { grab: {
'distance': 400, distance: 400,
'line_linked': { line_linked: {
'opacity': 0.4 opacity: 0.4,
} },
},
bubble: {
distance: 400,
size: 20,
duration: 2,
opacity: 8,
speed: 1,
}, },
'bubble': { repulse: {
'distance': 400, distance: 200,
'size': 20, duration: 0.4,
'duration': 2,
'opacity': 8,
'speed': 1
}, },
'repulse': { push: {
'distance': 200, particles_nb: 4,
'duration': 0.4
}, },
'push': { remove: {
'particles_nb': 4 particles_nb: 2,
}, },
'remove': { },
'particles_nb': 2
}
}
}, },
'retina_detect': true retina_detect: true,
} };
function Index({ dispatch, children, messages }) { function Index({ children, messages }) {
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', flex: 1, height: '100vh' }}> <div style={{ display: 'flex', flexDirection: 'column', flex: 1, height: '100vh' }}>
<DocumentTitle title={messages['title'] || 'Moe Cube'} /> <DocumentTitle title={messages.title || 'Moe Cube'}/>
<Header style={{ display: 'flex', alignItems: 'center'}}> <Header style={{ display: 'flex', alignItems: 'center' }}>
<Link to="/" style={{ marginTop: '20px'}}> <Link to="/" style={{ marginTop: '20px' }}>
<img src={logo} style={{ width: '140px', height: '44px'}}/> <img src={logo} style={{ width: '140px', height: '44px' }}/>
</Link> </Link>
<Menu <Menu
theme="dark" theme="dark"
mode="horizontal" mode="horizontal"
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
style={{ lineHeight: '64px' }}> style={{ lineHeight: '64px' }}
>
<Menu.Item key="1"> <Menu.Item key="1">
<Link to="/"> <Link to="/">
<Format id="Home"/> <Format id="Home"/>
...@@ -150,12 +150,21 @@ function Index({ dispatch, children, messages }) { ...@@ -150,12 +150,21 @@ function Index({ dispatch, children, messages }) {
<Particles <Particles
params={particleConfig} params={particleConfig}
style={{ style={{
position: "fixed" position: 'fixed',
}} }}
/> />
{children} {children}
<Footer style={{ position: 'absolute', width: '100%', bottom: 0, left: 0, display: 'flex', justifyContent: 'space-between' }}> <Footer
style={{
position: 'absolute',
width: '100%',
bottom: 0,
left: 0,
display: 'flex',
justifyContent: 'space-between',
}}
>
<div>© MoeCube 2017 all right reserved.</div> <div>© MoeCube 2017 all right reserved.</div>
</Footer> </Footer>
</div> </div>
...@@ -164,10 +173,10 @@ function Index({ dispatch, children, messages }) { ...@@ -164,10 +173,10 @@ function Index({ dispatch, children, messages }) {
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {
common: { messages } common: { messages },
} = state } = state;
return { return {
messages messages,
}; };
} }
......
src/routes/Login.js
View file @ d1e78c3d
import { Button, Checkbox, Form, Icon, Input, Spin } from 'antd'; import { Button, 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 React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
import logo from '../assets/MoeCube.png'
import './Login.less'; import './Login.less';
const FormItem = Form.Item; const FormItem = Form.Item;
...@@ -13,7 +12,7 @@ class Login extends React.Component { ...@@ -13,7 +12,7 @@ class Login extends React.Component {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch } = this.props; const { form, dispatch } = this.props;
...@@ -33,7 +32,7 @@ class Login extends React.Component { ...@@ -33,7 +32,7 @@ class Login extends React.Component {
render() { render() {
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const { loading } = this.props; const { loading } = this.props;
const { intl: { messages } } = this.context const { intl: { messages } } = this.context;
return ( return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
...@@ -44,26 +43,26 @@ class Login extends React.Component { ...@@ -44,26 +43,26 @@ class Login extends React.Component {
{getFieldDecorator('account', { {getFieldDecorator('account', {
rules: [{ required: true, message: messages['Please input your account!'] }], rules: [{ required: true, message: messages['Please input your account!'] }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder={messages['email-address-or-username']} />, <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder={messages['email-address-or-username']}/>,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: messages['Please-input-your-Password!'] }], rules: [{ required: true, message: messages['Please-input-your-Password!'] }],
})( })(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder={messages.password} />, <Input prefix={<Icon type="lock" style={{ fontSize: 13 }}/>} type="password" placeholder={messages.password}/>,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'sign-in'} /> <Format id={'sign-in'}/>
</Button> </Button>
</FormItem> </FormItem>
<div> <div>
<Link to="/signup"><Format id={'sign-up'} /></Link> <Link to="/signup"><Format id={'sign-up'}/></Link>
<Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link> <Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'}/></Link>
</div> </div>
</Form> </Form>
</Spin> </Spin>
...@@ -77,7 +76,7 @@ function mapStateToProps(state) { ...@@ -77,7 +76,7 @@ function mapStateToProps(state) {
common: { language }, common: { language },
} = state; } = state;
const loading = state.loading.global || false const loading = state.loading.global || false;
return { return {
loading, loading,
......
src/routes/Profiles.js
View file @ d1e78c3d
import { Button, Form, Icon, Input, Spin, Tabs, Upload, message } from 'antd'; import { Button, Form, Icon, Input, Spin, Tabs } from 'antd';
import { connect } from 'dva';
import Cropper from 'react-cropper'
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css';
import { connect } from 'dva';
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import Cropper from 'react-cropper';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
import EmailForm from '../components/EmailForm'; import EmailForm from '../components/EmailForm';
import PasswordForm from '../components/PasswordForm'; import PasswordForm from '../components/PasswordForm';
import UserNameForm from '../components/UserNameForm'; import UserNameForm from '../components/UserNameForm';
import styles from './Profiles.less'; import styles from './Profiles.less';
import config from '../config'
const FormItem = Form.Item; const FormItem = Form.Item;
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
const defaultAvatar = require("../../public/default_avatar.jpg") const defaultAvatar = require('../../public/default_avatar.jpg');
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
...@@ -30,20 +29,20 @@ class Profiles extends React.Component { ...@@ -30,20 +29,20 @@ class Profiles extends React.Component {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
handleUpload = () => { handleUpload = () => {
if (typeof this.cropper.getCroppedCanvas() === 'undefined') { if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
return; return;
} }
const { user: {id} } = this.props const { user: { id } } = this.props;
this.cropper.getCroppedCanvas().toBlob(blob => { this.cropper.getCroppedCanvas().toBlob(blob => {
console.log(blob) console.log(blob);
this.props.dispatch({ type: 'upload/upload', payload: { image: blob, user_id: id}}) this.props.dispatch({ type: 'upload/upload', payload: { image: blob, user_id: id } });
}) });
} };
onGetFile = (e) => { onGetFile = (e) => {
...@@ -57,11 +56,11 @@ class Profiles extends React.Component { ...@@ -57,11 +56,11 @@ class Profiles extends React.Component {
reader.onload = () => { reader.onload = () => {
this.props.dispatch({ type: 'upload/getfile', payload: { imageUrl: reader.result } }); this.props.dispatch({ type: 'upload/getfile', payload: { imageUrl: reader.result } });
}; };
reader.readAsDataURL(files[0]) reader.readAsDataURL(files[0]);
} };
onUpdateSubmit = (e) => { onUpdateSubmit = (e) => {
const { form, dispatch, user: { id }, } = this.props; const { form, dispatch, user: { id }, } = this.props;
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
...@@ -70,85 +69,90 @@ class Profiles extends React.Component { ...@@ -70,85 +69,90 @@ class Profiles extends React.Component {
const { username, name, password } = values; const { username, name, password } = values;
dispatch({ type: "user/updateProfile", payload: { username, name, password, user_id: id } }) dispatch({ type: 'user/updateProfile', payload: { username, name, password, user_id: id } });
} }
}); });
}; };
render() { render() {
const { dispatch, form, user, loading, progress, status, imageUrl, isUpload, uploadedImage } = this.props const { dispatch, form, user, loading, progress, status, imageUrl, isUpload, uploadedImage } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { username, name, id, avatar } = user; const { username, name, id, avatar } = user;
const { intl: { messages } } = this.context; const { intl: { messages } } = this.context;
const nameProps = { const nameProps = {
fromItem: { fromItem: {
label: messages['nickname'], label: messages.nickname,
...formItemLayout ...formItemLayout,
}, },
decorator: { decorator: {
initialValue: name initialValue: name,
}, },
input: { input: {
placeholder: messages['nickname'], placeholder: messages.nickname,
} },
} };
const crop = { const crop = {
maxHeight: 80, maxHeight: 80,
width: 30, width: 30,
aspect: 16 / 16 aspect: 16 / 16,
} };
return ( return (
<Spin spinning={loading} delay={100}> <Spin spinning={loading} delay={100}>
<Tabs defaultActiveKey="1" className="app-detail-nav"> <Tabs defaultActiveKey="1" className="app-detail-nav">
<TabPane tab={<span><Icon type="user" /><Format id={'user-info'} /> </span>} key="1"> <TabPane tab={<span><Icon type="user"/><Format id={'user-info'}/> </span>} key="1">
<Form onSubmit={this.onUpdateSubmit}> <Form onSubmit={this.onUpdateSubmit}>
<FormItem style={{ display: 'flex', justifyContent: 'center' }}> <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
{ {
isUpload ? isUpload ?
<div> <div>
<Cropper <Cropper
ref={cropper => { this.cropper = cropper }} ref={cropper => {
this.cropper = cropper;
}}
src={ imageUrl || defaultAvatar} src={ imageUrl || defaultAvatar}
style={{height: '20vw', width: '20vw' }} style={{ height: '20vw', width: '20vw' }}
aspectRatio={1 / 1} aspectRatio={1 / 1}
guides={true} guides={true}
/> />
<Button> <Button>
<label > <label >
<Icon type="plus"/> add file <Icon type="plus"/> add file
<input type="file" onChange={this.onGetFile} ref={file => { this.file = file}} style={{ display: "none" }}/> <input type="file" onChange={this.onGetFile} ref={file => {
</label> this.file = file;
</Button> }} style={{ display: 'none' }}/>
<Button type="primary" onClick={ this.handleUpload}> </label>
<Icon type="upload" /> upload </Button>
</Button> <Button type="primary" onClick={ this.handleUpload}>
<Icon type="upload"/> upload
</Button>
</div> </div>
: :
<img src={ avatar || imageUrl || defaultAvatar } onClick={() => dispatch({ type: "upload/start" })} /> <img src={ avatar || imageUrl || defaultAvatar }
} onClick={() => dispatch({ type: 'upload/start' })}/>
}
</FormItem> </FormItem>
<FormItem {...nameProps.fromItem}> <FormItem {...nameProps.fromItem}>
{getFieldDecorator(`name`, { ...nameProps.decorator })( {getFieldDecorator(`name`, { ...nameProps.decorator })(
<Input {...nameProps.input} /> <Input {...nameProps.input} />,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
<div className={styles.wrapSubmit}> <div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large"><Format id={'save'} /></Button> <Button type="primary" htmlType="submit" size="large"><Format id={'save'}/></Button>
</div> </div>
</FormItem> </FormItem>
</Form> </Form>
</TabPane> </TabPane>
<TabPane tab={<span><Icon type="setting" /><Format id={'account-info'} /></span>} key="2"> <TabPane tab={<span><Icon type="setting"/><Format id={'account-info'}/></span>} key="2">
<Tabs type="card" className="app-detail-nav"> <Tabs type="card" className="app-detail-nav">
<TabPane tab={messages['reset-username']} key={0}> <TabPane tab={messages['reset-username']} key={0}>
...@@ -175,15 +179,15 @@ function mapStateToProps(state) { ...@@ -175,15 +179,15 @@ function mapStateToProps(state) {
const { const {
user: { user, isUpdateSubmit }, user: { user, isUpdateSubmit },
auth: { checkUsername, isEmailExists, isUserNameExists }, auth: { checkUsername, isEmailExists, isUserNameExists },
upload: {imageUrl, isUpload, uploadedImage } upload: { imageUrl, isUpload, uploadedImage },
} = state; } = state;
const loading = state.loading.global || false const loading = state.loading.global || false;
return { return {
user, user,
loading, loading,
imageUrl, imageUrl,
isUpload, isUpload,
checkUsername, checkUsername,
uploadedImage, uploadedImage,
......
src/routes/Register.js
View file @ d1e78c3d
...@@ -3,17 +3,17 @@ import { connect } from 'dva'; ...@@ -3,17 +3,17 @@ import { connect } from 'dva';
import { Link } from 'dva/router'; import { Link } from 'dva/router';
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
import styles from './Register.less'
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
const Step = Steps.Step const Step = Steps.Step;
class Register extends React.Component { class Register extends React.Component {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch, params: { id } } = this.props; const { form, dispatch, params: { id } } = this.props;
...@@ -77,12 +77,13 @@ class Register extends React.Component { ...@@ -77,12 +77,13 @@ class Register extends React.Component {
}; };
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1 }}> <div
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Spin spinning={loading} delay={100}> <Spin spinning={loading} delay={100}>
<Steps size="large" current={0}> <Steps size="large" current={0}>
<Step title={messages['sign-up']} icon={<Icon type="solution" />} /> <Step title={messages['sign-up']} icon={<Icon type="solution"/>}/>
<Step title={messages['verify-email']} icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail"/>}/>
</Steps> </Steps>
<Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px' }}> <Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px' }}>
...@@ -112,41 +113,47 @@ class Register extends React.Component { ...@@ -112,41 +113,47 @@ class Register extends React.Component {
<FormItem hasFeedback> <FormItem hasFeedback>
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }], rules: [{
required: true,
message: messages['Password-length-must-be-between-8-and-24-characters.'],
pattern: /^.{8,24}$/,
}],
}, { }, {
validator: this.checkConfirm, validator: this.checkConfirm,
})( })(
<Input <Input
prefix={<Icon type="lock" style={{ fontSize: 13 }} />} prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
type="password" type="password"
placeholder={messages.password} />, placeholder={messages.password}/>,
)} )}
</FormItem> </FormItem>
<FormItem hasFeedback> <FormItem hasFeedback>
{getFieldDecorator('confirm', { {getFieldDecorator('confirm', {
rules: [{ rules: [{
required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/, required: true,
message: messages['Password-length-must-be-between-8-and-24-characters.'],
pattern: /^.{8,24}$/,
}, { }, {
validator: this.checkPassword, validator: this.checkPassword,
}], }],
})( })(
<Input <Input
prefix={<Icon type="lock" style={{ fontSize: 13 }} />} prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
type="password" type="password"
onBlur={this.handleConfirmBlur} onBlur={this.handleConfirmBlur}
placeholder={messages['password-again']} />, placeholder={messages['password-again']}/>,
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'sign-up'} /> <Format id={'sign-up'}/>
</Button> </Button>
</FormItem> </FormItem>
<div> <div>
<Link to="/signin"><Format id={'sign-in'} /></Link> <Link to="/signin"><Format id={'sign-in'}/></Link>
</div> </div>
</Form> </Form>
</Spin> </Spin>
...@@ -160,7 +167,7 @@ function mapStateToProps(state) { ...@@ -160,7 +167,7 @@ function mapStateToProps(state) {
auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit }, auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit },
} = state; } = state;
const loading = state.loading.global || false const loading = state.loading.global || false;
return { return {
loading, loading,
......
src/routes/Verify.js
View file @ d1e78c3d
import React, { PropTypes } from 'react'; import { Alert, Form, Icon, Input, Spin, Steps, Tag } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import React, { PropTypes } from 'react';
import { FormattedMessage as Format } from 'react-intl'; import { FormattedMessage as Format } from 'react-intl';
import styles from './Verify.css';
import { Form, Input, Steps, Icon, Spin, Alert, Tag } from 'antd';
import { routerRedux } from 'dva/router'
const FormItem = Form.Item;
import SubmitButton from '../components/SubmitButton'; import SubmitButton from '../components/SubmitButton';
const FormItem = Form.Item;
const Step = Steps.Step const Step = Steps.Step;
class Verify extends React.Component { class Verify extends React.Component {
static contextTypes = { static contextTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
} };
state = { state = {
isChangeEmail: false isChangeEmail: false,
} };
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, input: { password }, user: { id }} = this.props; const { form, dispatch, input: { password }, 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 { email } = values const { email } = values;
dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } }); dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } });
} }
...@@ -34,7 +33,7 @@ class Verify extends React.Component { ...@@ -34,7 +33,7 @@ class Verify extends React.Component {
}; };
onReSend = (e) => { onReSend = (e) => {
const { dispatch, input: { password }, user: { id, email }} = this.props; const { dispatch, input: { password }, user: { id, email } } = this.props;
e && e.preventDefault(); e && e.preventDefault();
...@@ -42,10 +41,10 @@ class Verify extends React.Component { ...@@ -42,10 +41,10 @@ class Verify extends React.Component {
}; };
render(select) { render(select) {
const { form, dispatch, user, checkEmail, isEmailExists, loading, input } = this.props const { form, dispatch, user, checkEmail, isEmailExists, loading, input } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { id, email } = user; const { id, email } = user;
const { intl: { messages } } = this.context const { intl: { messages } } = this.context;
const emailProps = { const emailProps = {
fromItem: { fromItem: {
...@@ -55,50 +54,52 @@ class Verify extends React.Component { ...@@ -55,50 +54,52 @@ class Verify extends React.Component {
help: isEmailExists ? messages.email_exists : '', help: isEmailExists ? messages.email_exists : '',
}, },
decorator: { decorator: {
initialValue: email initialValue: email,
}, },
input: { input: {
placeholder: messages.email, placeholder: messages.email,
} },
} };
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1 }}> <div
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Spin spinning={loading} delay={100}> <Spin spinning={loading} delay={100}>
<Steps size="large" current={1}> <Steps size="large" current={1}>
<Step title={messages['sign-up']} icon={<Icon type="solution" />} /> <Step title={messages['sign-up']} icon={<Icon type="solution"/>}/>
<Step title={messages['verify-email']} icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail"/>}/>
</Steps> </Steps>
{id && input["password"] ? {id && input['password'] ?
<Alert <Alert
style={{ marginTop: '24px' }} style={{ marginTop: '24px' }}
message={ message={
<div> <div>
<span style={{marginRight: '10px'}}><Format id={'Your-account-has-been-created.'} /></span> <span style={{ marginRight: '10px' }}><Format id={'Your-account-has-been-created.'}/></span>
<Tag color="blue" onClick={this.onReSend}><Format id={'send-email2'} /></Tag> <Tag color="blue" onClick={this.onReSend}><Format id={'send-email2'}/></Tag>
<Tag color="orange" onClick={() => this.setState({ isChangeEmail: true })}> <Tag color="orange" onClick={() => this.setState({ isChangeEmail: true })}>
<Format id={'reset-email'} /> <Format id={'reset-email'}/>
</Tag> </Tag>
</div> </div>
} }
type="warning" type="warning"
showIcon showIcon
/> />
: :
<Alert <Alert
style={{ marginTop: '24px' }} style={{ marginTop: '24px' }}
message={ message={
<div> <div>
<span style={{marginRight: '10px'}}><Format id={'Please-sign-in'} /></span> <span style={{ marginRight: '10px' }}><Format id={'Please-sign-in'}/></span>
<Tag color="blue" onClick={ () => dispatch(routerRedux.replace("/signin"))}><Format id={'sign-in'} /></Tag> <Tag color="blue" onClick={ () => dispatch(routerRedux.replace('/signin'))}><Format
</div> id={'sign-in'}/></Tag>
} </div>
type="warning" }
showIcon type="warning"
/> showIcon
/>
} }
{ {
...@@ -108,12 +109,12 @@ class Verify extends React.Component { ...@@ -108,12 +109,12 @@ class Verify extends React.Component {
{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> <FormItem>
<SubmitButton disabled={isEmailExists} /> <SubmitButton disabled={isEmailExists}/>
</FormItem> </FormItem>
</Form> </Form>
} }
...@@ -126,11 +127,11 @@ class Verify extends React.Component { ...@@ -126,11 +127,11 @@ class Verify extends React.Component {
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
const { const {
user: { user } , user: { user },
auth: { input, isEmailExists, checkEmail } auth: { input, isEmailExists, checkEmail },
} = state } = state;
const loading = state.loading.global || false const loading = state.loading.global || false;
return { return {
input, input,
......
src/services/auth.js
View file @ d1e78c3d
...@@ -61,7 +61,7 @@ export async function getAuthUser(params) { ...@@ -61,7 +61,7 @@ export async function getAuthUser(params) {
return request(`/authUser`, { return request(`/authUser`, {
method: 'GET', method: 'GET',
headers: { headers: {
Authorization: `Bearer ${params.token}` Authorization: `Bearer ${params.token}`,
} },
}) });
} }
\ No newline at end of file
src/services/upload.js
View file @ d1e78c3d
...@@ -2,16 +2,15 @@ import request from '../utils/request'; ...@@ -2,16 +2,15 @@ import request from '../utils/request';
export async function uploadImage(params) { export async function uploadImage(params) {
console.log(params) console.log(params);
let data = new FormData() let data = new FormData();
data.append("file", params["image"]) data.append('file', params['image']);
return request('/upload/image', { return request('/upload/image', {
method: 'POST', method: 'POST',
body: data, body: data,
headers: { headers: {},
}
}); });
} }
src/services/user.js
View file @ d1e78c3d
import request from '../utils/request'; import request from '../utils/request';
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),
headers: { headers: {
Authorization: `Bearer ${params.token}`, Authorization: `Bearer ${params.token}`,
"content-type": "application/json" 'content-type': 'application/json',
} },
}); });
} }
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),
headers: { headers: {
Authorization: `Bearer ${params.token}`, Authorization: `Bearer ${params.token}`,
"content-type": "application/json" 'content-type': 'application/json',
} },
}); });
} }
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