Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/models/common.js
#	src/routes/Index.js
#	src/routes/Register.js

src/models/common.js

+import i18n from '../../i18n.json';
+
+
+export default {
+  namespace: 'common',
+  state: {
+    client: '',
+    language: 'zh-CN',
+    messages: {},
+  },
+  reducers: {
+    init(state, action) {
+      return {
+        ...state, ...action.payload,
+      };
+    },
+    changeLanguage(state, { payload: id }) {
+      localStorage.setItem('locale', id.id);
+      history.go(0);
+      return state;
+    },
+  },
+  effects: {},
+  subscriptions: {
+    setup({ dispatch }) {
+      let client;
+      const language = localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
+
+      const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
+      const messages = i18n[languageWithoutRegionCode];
+
+      const { userAgent } = navigator;
+
+      if (userAgent.includes('Electron')) {
+        client = 'electron';
+      }
+
+      dispatch({ type: 'init', payload: { language: languageWithoutRegionCode, messages, client } });
+    },
+  },
+};

src/routes/Index.js

@@ -122,7 +122,7 @@ const particleConfig = {
   retina_detect: true,
 };
 
-function Index({ children, messages, dispatch }) {
+function Index({ children, messages, dispatch, client }) {
   const language = localStorage.getItem('locale') || navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage || navigator.browserLanguage || 'zh-CN';
   const menu = (
     <Menu style={{ transform: 'translateX(-16px)' }}>
@@ -148,6 +148,7 @@ function Index({ children, messages, dispatch }) {
     <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '100%' }}>
       <DocumentTitle title={messages.title || 'Moe Cube'}/>
 
+      {client !== 'electron' &&
       <Header style={{ display: 'flex', alignItems: 'center' }}>
         <Link to="/" style={{ marginTop: '20px' }}>
           <img alt="logo" src={logo} style={{ width: '140px', height: '44px' }}/>
@@ -185,6 +186,7 @@ function Index({ children, messages, dispatch }) {
         </Menu>
 
       </Header>
+      }
 
       <Particles
         params={particleConfig}
@@ -197,9 +199,9 @@ function Index({ children, messages, dispatch }) {
       <Footer style={{ width: '100%', justifyContent: 'space-between', display: 'flex', zIndex: 100 }}>
         <div><Dropdown overlay={menu} trigger={['click']}>
           {language === 'en-US' ?
-            <a className="ant-dropdown-link changelanguage" href="#">
+            <a className="ant-dropdown-link changelanguage">
               &nbsp;English <Icon type="down" className="flag"/>
-            </a> : <a className="ant-dropdown-link changelanguage" href="#">
+            </a> : <a className="ant-dropdown-link changelanguage">
               &nbsp;中文 <Icon type="down" className="flag"/>
             </a>
           }
@@ -212,10 +214,11 @@ function Index({ children, messages, dispatch }) {
 
 function mapStateToProps(state) {
   const {
-    common: { messages },
+    common: { messages, client },
   } = state;
   return {
     messages,
+    client,
   };
 }
 

src/routes/Register.js

+import { Button, Form, Icon, Input, Spin, Steps } from 'antd';
+import { connect } from 'dva';
+import { Link } from 'dva/router';
+import React, { PropTypes } from 'react';
+import { FormattedMessage as Format } from 'react-intl';
+
+const FormItem = Form.Item;
+const Step = Steps.Step;
+
+
+class Register extends React.Component {
+
+  static contextTypes = {
+    intl: PropTypes.object.isRequired,
+  };
+
+  onSubmitLogin = (e) => {
+    const { form, dispatch } = this.props;
+
+    if (e) {
+      e.preventDefault();
+    }
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+
+        const { email, username, password } = values;
+
+        dispatch({ type: 'auth/register', payload: { email, username, password } });
+      }
+    });
+  };
+
+
+  checkPassword = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('password')) {
+      callback(this.context.intl.messages['Incorrect-password.2']);
+    } else {
+      callback();
+    }
+  };
+
+  checkConfirm = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value) {
+      form.validateFields(['confirm'], { force: true });
+    }
+    callback();
+  };
+
+  render() {
+    const {
+      dispatch, form, checkEmail, checkUsername,
+      isEmailExists, isUserNameExists, loading,
+    } = this.props;
+    const { getFieldDecorator } = form;
+    const { intl: { messages } } = this.context;
+
+    const emailProps = {
+      hasFeedback: true,
+      validateStatus: checkEmail,
+      extra: isEmailExists ? messages.i_email_exists : '',
+    };
+
+
+    const emailInputProps = {
+      onBlur: () => !form.getFieldError('email') && dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue() } }),
+      placeholder: messages.email,
+    };
+
+    const usernameProps = {
+      hasFeedback: true,
+      validateStatus: checkUsername,
+      extra: isUserNameExists ? 'username exists' : '',
+    };
+
+    const usernameInputProps = {
+      onBlur: () => !form.getFieldError('username') && dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue() } }),
+      placeholder: messages.username,
+    };
+
+    return (
+      <div style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+
+        <Spin spinning={loading} delay={100}>
+          <Steps size="large" current={0}>
+            <Step title={messages['sign-up']} icon={<Icon type="solution"/>}/>
+            <Step title={messages['verify-email']} icon={<Icon type="mail"/>}/>
+          </Steps>
+
+          <Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px' }}>
+            <FormItem {...emailProps} >
+              {getFieldDecorator('email', {
+                rules: [{
+                  required: true,
+                  message: messages['Please-use-a-correct-E-Mail-address.'],
+                  pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
+                }],
+              }, {})(
+                <Input {...emailInputProps} />,
+              )}
+            </FormItem>
+
+            <FormItem {...usernameProps}>
+              {getFieldDecorator('username', {
+                rules: [{
+                  required: true,
+                  message: messages['You-can-not-use-this-username.'],
+                  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,
+                }],
+              }, {})(
+                <Input {...usernameInputProps} />,
+              )}
+            </FormItem>
+
+            <FormItem hasFeedback>
+              {getFieldDecorator('password', {
+                rules: [{
+                  required: true,
+                  message: messages['Password-length-must-be-between-8-and-24-characters.'],
+                  pattern: /^.{8,24}$/,
+                }],
+              }, {
+                validator: this.checkConfirm,
+              })(
+                <Input
+                  prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
+                  type="password"
+                  placeholder={messages.password}
+                />,
+              )}
+            </FormItem>
+
+            <FormItem hasFeedback>
+              {getFieldDecorator('confirm', {
+                rules: [{
+                  required: true,
+                  message: messages['Password-length-must-be-between-8-and-24-characters.'],
+                  pattern: /^.{8,24}$/,
+                }, {
+                  validator: this.checkPassword,
+                }],
+              })(
+                <Input
+                  prefix={<Icon type="lock" style={{ fontSize: 13 }}/>}
+                  type="password"
+                  onBlur={this.handleConfirmBlur}
+                  placeholder={messages['password-again']}
+                />,
+              )}
+            </FormItem>
+
+            <FormItem>
+              <Button type="primary" htmlType="submit" className="login-form-button">
+                <Format id={'sign-up'}/>
+              </Button>
+            </FormItem>
+
+            <div>
+              <Link to="/signin"><Format id={'sign-in'}/></Link>
+            </div>
+          </Form>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  const {
+    auth: {
+      register, checkEmail, checkUsername, isEmailExists,
+      isUserNameExists, isRegisterSubmit,
+    },
+  } = state;
+
+  const loading = state.loading.global || false;
+
+  return {
+    loading,
+    register,
+    checkEmail,
+    checkUsername,
+    isEmailExists,
+    isUserNameExists,
+    isRegisterSubmit,
+  };
+}
+
+const WrapperRegister = Form.create()(Register);
+
+export default connect(mapStateToProps)(WrapperRegister);