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 @@
# misc
.DS_Store
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 styles from './EmailForm.css';
import {connect} from 'react-redux'
import { Form, Input, Icon, Button } from 'antd'
const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
import { connect } from 'react-redux';
import SubmitButton from './SubmitButton';
const FormItem = Form.Item;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 15 },
}
};
class EmailForm extends React.Component {
onUpdateEmail = (e) => {
const { form, dispatch, data: {id} } = this.props
const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
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 {getFieldDecorator} = form
const {id, email} = data
const { form, dispatch, data, checkEmail, isEmailExists } = this.props;
const { getFieldDecorator } = form;
const { id, email } = data;
const emailProps = {
fromItem: {
label: "email",
label: 'email',
hasFeedback: true,
validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : '',
...formItemLayout
},
decorator: {
initialValue: email
initialValue: email,
},
input: {
placeholder: "email"
}
}
placeholder: 'email',
},
};
const passwordProps = {
fromItem: {
label: "passwrod",
...formItemLayout
label: 'passwrod',
...formItemLayout,
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }
]
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
],
},
input: {
placeholder: "password",
type: 'password'
}
}
placeholder: 'password',
type: 'password',
},
};
return (
<Form onSubmit={this.onUpdateEmail}>
<FormItem {...emailProps.fromItem}>
{getFieldDecorator(`email`, {...emailProps.decorator})(
<Input
{...emailProps.input}
onBlur = {() => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id} })}/>
{getFieldDecorator(`email`, { ...emailProps.decorator })(
<Input
{...emailProps.input}
onBlur={() => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id } })}/>,
)}
</FormItem>
<FormItem {...passwordProps.fromItem}>
{getFieldDecorator(`password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
{getFieldDecorator('password', { ...passwordProps.decorator })(
<Input {...passwordProps.input} />,
)}
</FormItem>
......@@ -92,20 +92,19 @@ class EmailForm extends React.Component {
}
function mapStateToProps(state, props) {
function mapStateToProps(state) {
const {
user: {data},
auth: {isEmailExists, checkEmail}
} = state
user: { data },
auth: { isEmailExists, checkEmail },
} = state;
return {
data,
checkEmail,
isEmailExists
isEmailExists,
};
}
const WrapperEmailForm = Form.create()(EmailForm)
const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm);
src/components/Example.js
View file @ 900bf08f
......@@ -8,7 +8,6 @@ const Example = () => {
);
};
Example.propTypes = {
};
Example.propTypes = {};
export default Example;
src/components/PasswordForm.js
View file @ 900bf08f
import { Form, Input } from 'antd';
import React from 'react';
import styles from './EmailForm.css';
import {connect} from 'react-redux'
import { Form, Input, Icon, Button } from 'antd'
import { connect } from 'react-redux';
import SubmitButton from './SubmitButton';
const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 15 },
}
};
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) => {
const { form, dispatch, data: {id} } = this.props
const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
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 {getFieldDecorator} = form
const { form } = this.props;
const { getFieldDecorator } = form;
const passwordProps = {
fromItem: {
label: "passwrod",
label: 'passwrod',
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
{ validator: this.checkConfirm }
]
{ validator: this.checkConfirm },
],
},
input: {
placeholder: "password",
type: 'password'
}
}
placeholder: 'password',
type: 'password',
},
};
const confirmProps = {
fromItem: {
label: "comfirm",
label: 'comfirm',
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/},
{ validator: this.checkPassword}
]
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
{ validator: this.checkPassword },
],
},
input: {
placeholder: "confirm",
type: 'password'
}
}
placeholder: 'confirm',
type: 'password',
},
};
return (
<Form onSubmit={this.onSubmit}>
<Form onSubmit={this.onSubmit}>
<FormItem {...passwordProps.fromItem} label="old password">
{getFieldDecorator(`old_password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
{getFieldDecorator(`old_password`, { ...passwordProps.decorator })(
<Input {...passwordProps.input} />,
)}
</FormItem>
<FormItem {...passwordProps.fromItem} label="new password">
{getFieldDecorator(`new_password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
{getFieldDecorator(`new_password`, { ...passwordProps.decorator })(
<Input {...passwordProps.input} />,
)}
</FormItem>
<FormItem {...confirmProps.fromItem}>
{getFieldDecorator(`confirm`, {...confirmProps.decorator})(
<Input {...confirmProps.input} />
{getFieldDecorator(`confirm`, { ...confirmProps.decorator })(
<Input {...confirmProps.input} />,
)}
</FormItem>
......@@ -113,18 +113,16 @@ class EmailForm extends React.Component {
}
function mapStateToProps(state, props) {
const {
user: {data}
} = state
user: { data },
} = state;
return {
data,
};
}
const WrapperEmailForm = Form.create()(EmailForm)
const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm);
src/components/SubmitButton.css
View file @ 900bf08f
.wrapSubmit{
display: flex;
justify-content: center;
}
\ No newline at end of file
.wrapSubmit {
display: flex;
justify-content: center;
}
src/components/SubmitButton.js
View file @ 900bf08f
import { Button } from 'antd';
import React from 'react';
import styles from './SubmitButton.css';
import {Button} from 'antd'
function SubmitButton() {
return (
<div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large">提交</Button>
</div>
<div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large">提交</Button>
</div>
);
}
......
src/components/UserNameForm.js
View file @ 900bf08f
import { Form, Input } from 'antd';
import React from 'react';
import styles from './EmailForm.css';
import {connect} from 'react-redux'
import { Form, Input, Icon, Button } from 'antd'
import { connect } from 'react-redux';
import SubmitButton from './SubmitButton';
const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 15 },
}
};
class EmailForm extends React.Component {
onSubmit = (e) => {
const { form, dispatch, data: {id} } = this.props
const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
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 {getFieldDecorator} = form
const {id, username} = data
const { form, dispatch, data, checkUsername, isUserNameExists } = this.props;
const { getFieldDecorator } = form;
const { id, username } = data;
const usernameProps = {
fromItem: {
label: "username",
label: 'username',
hasFeedback: true,
validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : '',
...formItemLayout
},
decorator: {
initialValue: username
initialValue: username,
},
input: {
placeholder: "username",
onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
}
}
placeholder: 'username',
onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
},
};
const passwordProps = {
fromItem: {
label: "passwrod",
label: 'passwrod',
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
]
],
},
input: {
placeholder: "password",
type: 'password'
}
}
placeholder: 'password',
type: 'password',
},
};
return (
<Form onSubmit={this.onSubmit}>
<FormItem {...usernameProps.fromItem}>
{getFieldDecorator(`username`, {...usernameProps.decorator})(
<Input {...usernameProps.input}/>
{getFieldDecorator(`username`, { ...usernameProps.decorator })(
<Input {...usernameProps.input}/>,
)}
</FormItem>
<FormItem {...passwordProps.fromItem}>
{getFieldDecorator(`password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
{getFieldDecorator(`password`, { ...passwordProps.decorator })(
<Input {...passwordProps.input} />,
)}
</FormItem>
......@@ -90,20 +89,19 @@ class EmailForm extends React.Component {
}
function mapStateToProps(state, props) {
const {
user: {data},
auth: {isUserNameExists, checkUsername}
} = state
user: { data },
auth: { isUserNameExists, checkUsername },
} = state;
return {
data,
checkUsername,
isUserNameExists
isUserNameExists,
};
}
const WrapperEmailForm = Form.create()(EmailForm)
const WrapperEmailForm = Form.create()(EmailForm);
export default connect(mapStateToProps)(WrapperEmailForm);
src/config.js
View file @ 900bf08f
export default {
apiRoot: 'http://localhost:3000',
}
\ No newline at end of file
// apiRoot: 'http://localhost:3000',
apiRoot: 'http://192.168.1.107:3000',
};
src/index.js
View file @ 900bf08f
import dva from 'dva';
import { browserHistory } from 'dva/router';
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 { IntlProvider, addLocaleData } from 'react-intl';
// 1. Initialize
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/common"));
app.model(require('./models/common'));
// 2. Plugins
......@@ -32,23 +35,21 @@ app.model(require("./models/common"));
app.router(require('./router'));
// 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;
/*eslint-enable */
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;
const App = app.start()
const App = app.start();
ReactDOM.render(
<IntlProvider locale={ language } messages={ messages }>
<App />
</IntlProvider>,
document.getElementById("root")
)
</IntlProvider>,
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 {
......@@ -14,191 +14,197 @@ export default {
isLoginSubmit: false,
isForgotSubmit: false,
isSpinSubmit: false,
register: {}
register: {},
},
reducers: {
change(state, action) {
return {
...state, ...action.payload
}
};
},
checkEmail(state, action) {
return {
...state, ...{
checkEmail: 'validating'
checkEmail: 'validating',
}
}
};
},
checkUsername(state, action) {
return {
...state, ...{
checkUsername: 'validating'
checkUsername: 'validating',
}
}
};
},
activate(state, action) {
return {
...state, ...{
activateState: true
activateState: true,
}
}
};
},
check(state, action) {
return {
...state, ...action.payload
}
};
},
register(state, action) {
return {
...state, ...{
isRegisterSubmit: true
isRegisterSubmit: true,
}
}
};
},
registerSuccess(state, action) {
return {
...state, ...{
isRegisterSubmit: false
isRegisterSubmit: false,
}
}
};
},
registerFail(state, action) {
return {
...state, ...{
isRegisterSubmit: false
isRegisterSubmit: false,
}
}
};
},
login(state, action) {
return {
...state, ...{
isLoginSubmit: true
isLoginSubmit: true,
}
}
};
},
loginSuccess(state, action) {
return {
...state, ...{
isLoginSubmit: false
isLoginSubmit: false,
}
}
};
},
loginFail(state, action) {
return {
...state, ...{
isLoginSubmit: false
isLoginSubmit: false,
}
}
};
},
forgot(state, action) {
return {
...state, ...{
isForgotSubmit: true
isForgotSubmit: true,
}
}
};
},
forgotSuccess(state, action) {
return {
...state, ...{
isForgotSubmit: false
isForgotSubmit: false,
}
}
};
},
forgotFail(state, action) {
return {
...state, ...{
isForgotSubmit: false
isForgotSubmit: false,
}
}
};
},
reset(state, action) {
return {
...state, ...{
isResetSubmit: true
isResetSubmit: true,
}
}
};
},
resetSuccess(state, action) {
return {
...state, ...{
isResetSubmit: false
isResetSubmit: false,
}
}
};
},
resetFail(state, action) {
return {
...state, ...{
isResetSubmit: false
isResetSubmit: false,
}
}
};
},
},
effects: {
*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 }) {
const { data } = yield call(checkUserExists, payload)
const { data } = yield call(checkUserExists, payload);
if(data) {
yield put({ type: 'check', payload: { isEmailExists: true , checkEmail: 'warning'}})
if (data) {
yield put({ type: 'check', payload: { isEmailExists: true, checkEmail: 'warning' } });
} else {
yield put({ type: 'check', payload: { isEmailExists: false , checkEmail: 'success'}})
yield put({ type: 'check', payload: { isEmailExists: false, checkEmail: 'success' } });
}
},
*checkUsername({ payload }, { call, put }) {
const { data } = yield call(checkUserExists, payload)
const { data } = yield call(checkUserExists, payload);
if(data) {
yield put({ type: 'check', payload: { isUserNameExists: true , checkUsername: 'warning'}})
if (data) {
yield put({ type: 'check', payload: { isUserNameExists: true, checkUsername: 'warning' } });
} else {
yield put({ type: 'check', payload: { isUserNameExists: false , checkUsername: 'success'}})
yield put({ type: 'check', payload: { isUserNameExists: false, checkUsername: 'success' } });
}
},
*login({ payload }, { call, put }) {
const {data} = yield call(login, payload)
if(data){
yield put({ type: 'loginSuccess' })
yield put({ type: 'user/loginSuccess', payload: { data } })
message.info("登录成功")
} else {
yield put({ type: 'loginFail' })
message.error("登陆失败")
}
const { data } = yield call(login, payload);
if (data) {
yield put({ type: 'loginSuccess' });
yield put({ type: 'user/loginSuccess', payload: { data } });
message.info('登录成功');
} else {
yield put({ type: 'loginFail' });
message.error('登陆失败');
}
},
*forgot({ payload }, { call, put }) {
const { data } = yield call(forgot, payload)
if(data){
yield put({ type: 'forgotSuccess' })
message.info("已发送密码重置邮件")
}else {
yield put({ type: 'forgotFail' })
message.error("密码重置邮件发送失败")
}
const { data } = yield call(forgot, payload);
if (data) {
yield put({ type: 'forgotSuccess' });
message.info('已发送密码重置邮件');
} else {
yield put({ type: 'forgotFail' });
message.error('密码重置邮件发送失败');
}
},
*register({ payload }, { call, put }) {
const {data} = yield call(register, payload)
const { data } = yield call(register, payload);
if(data) {
yield put({ type: 'registerSuccess'})
message.info("注册成功")
} else {
yield put({ type: 'registerFail' })
message.error("注册失败")
}
if (data) {
yield put({ type: 'registerSuccess' });
message.info('注册成功');
} else {
yield put({ type: 'registerFail' });
message.error('注册失败');
}
},
*reset({ payload }, { call, put }) {
const { data } = yield call(reset, payload)
if(data){
yield put({ type: 'resetSuccess' })
message.info("重置成功")
}else{
yield put({ type: 'resetFail' })
message.error("重置失败")
}
const { data } = yield call(reset, payload);
if (data) {
yield put({ type: 'resetSuccess' });
message.info('重置成功');
} else {
yield put({ type: 'resetFail' });
message.error('重置失败');
}
},
},
subscriptions: {},
......
src/models/common.js
View file @ 900bf08f
export default {
namespace: 'common',
state: {
},
reducers: {
},
state: {},
reducers: {},
effects: {},
subscriptions: {},
};
src/models/example.js
View file @ 900bf08f
export default {
namespace: 'example',
......
src/models/haha.js
View file @ 900bf08f
export default {
namespace: 'haha',
state: {
text: '123213213'
text: '123213213',
},
reducers: {
change(state, action) {
return {
...state, ...action.payload
}
}
...state, ...action.payload
};
},
},
effects: {},
subscriptions: {},
......
src/models/user.js
View file @ 900bf08f
import { routerRedux } from 'dva/router'
import { updateProfile, updateAccount } from '../services/user'
import { message } from 'antd'
import { message } from 'antd';
import { routerRedux } from 'dva/router';
import { updateAccount, updateProfile } from '../services/user';
export default {
namespace: 'user',
state: {
data: {},
isUpdateSubmit: false
isUpdateSubmit: false,
},
reducers: {
loginFromStorage(state, action) {
return {
...state, ...action.payload
}
};
},
loginSuccess(state, action) {
return {
...state, ...action.payload
}
};
},
updateProfile(state, action) {
return {
...state, ...{
isUpdateSubmit: true
isUpdateSubmit: true,
}
}
};
},
updateProfileSuccess(state, action) {
return {
...state, ...action.payload, ...{
isUpdateSubmit: false
isUpdateSubmit: false,
}
}
};
},
updateProfileFail(state, action) {
return {
...state, ...{
isUpdateSubmit: false
isUpdateSubmit: false,
}
}
};
},
updateAccount(state, action) {
return {
...state, ...{
isUpdateSubmit: true
isUpdateSubmit: true,
}
}
};
},
updateAccountSuccess(state, action) {
return {
...state, ...action.payload, ...{
isUpdateSubmit: false
isUpdateSubmit: false,
}
}
};
},
updateAccountFail(state, action) {
return {
...state, ...{
isUpdateSubmit: false
isUpdateSubmit: false,
}
}
};
},
},
effects: {
*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 }) {
let user = localStorage.getItem("user")
let user = localStorage.getItem('user');
if(!user){
yield put(routerRedux.replace("/login"))
if (!user) {
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 }) {
let { data } = yield call(updateProfile, payload )
if(data){
yield put({ type: 'updateProfileSuccess', payload: { data } })
message.info("更新成功")
}else {
yield put({ type: 'updateProfileFail' })
message.error("更新失败")
}
let { data } = yield call(updateProfile, payload);
if (data) {
yield put({ type: 'updateProfileSuccess', payload: { data } });
message.info('更新成功');
} else {
yield put({ type: 'updateProfileFail' });
message.error('更新失败');
}
},
*updateAccount({ payload }, { call, put }) {
let { data } = yield call(updateAccount, payload )
if(data){
yield put({ type: 'updateAccountSuccess', payload: { data } })
message.info("更新成功")
}else {
yield put({ type: 'updateAccountFail' })
message.error("更新失败")
}
let { data } = yield call(updateAccount, payload);
if (data) {
yield put({ type: 'updateAccountSuccess', payload: { data } });
message.info('更新成功');
} else {
yield put({ type: 'updateAccountFail' });
message.error('更新失败');
}
},
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, query}) => {
if(pathname == '/profiles') {
return history.listen(({ pathname, query }) => {
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 { 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 }) {
return (
<Router history={history}>
<Redirect from="/" to="/login"/>
<Route path="/">
<Route path="/login" component={Login} />
<Route path="/forgot" component={Forgot} />
<Route path="/register" component={Register} />
<Route path="/reset" component={Reset} />
<Route path="/profiles" component={Profiles} />
<Route path="/login" component={Login}/>
<Route path="/forgot" component={Forgot}/>
<Route path="/register" component={Register}/>
<Route path="/reset" component={Reset}/>
<Route path="/profiles" component={Profiles}/>
</Route>
<Route path="/activate" component={Active} />
<Route path="/activate" component={Active}/>
</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 { connect } from 'dva';
import React from 'react';
class Active extends React.Component {
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() {
const { activateState } = this.props
const { activateState } = this.props;
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>
</div>
)
);
}
}
function mapStateToProps(state) {
const {
auth: { activateState }
} = state
auth: { activateState },
} = state;
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 { Link } from 'dva/router'
import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
import { Link } from 'dva/router';
import React from 'react';
const FormItem = Form.Item;
const Option = Select.Option;
......@@ -21,56 +20,56 @@ const formItemLayout = {
class Login extends React.Component {
onSubmitLogin = (e) => {
const { form, dispatch, params: { id }} = this.props
const { form, dispatch, params: { id } } = this.props;
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
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() {
const { getFieldDecorator, dispatch } = this.props.form;
const {isForgotSubmit=false} = this.props
const { isForgotSubmit = false } = this.props;
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}>
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem>
{getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your username or email!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="username or email" />
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
Send
</Button>
Or <Link to="/login">Sign In</Link>
</Form>
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem>
{getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your username or email!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder="username or email"/>,
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
Send
</Button>
Or <Link to="/login">Sign In</Link>
</Form>
</Spin>
</div>
)
);
}
}
function mapStateToProps(state) {
const {
auth: {isForgotSubmit}
} = state
auth: { isForgotSubmit },
} = state;
return {
isForgotSubmit
isForgotSubmit,
};
}
const WrapperLogin = Form.create()(Login)
const WrapperLogin = Form.create()(Login);
export default connect(mapStateToProps)(WrapperLogin);
src/routes/IndexPage.js
View file @ 900bf08f
import React from 'react';
import { connect } from 'dva';
import React from 'react';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} />
<div className={styles.welcome}/>
<ul className={styles.list}>
<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>
......@@ -15,7 +15,6 @@ function IndexPage() {
);
}
IndexPage.propTypes = {
};
IndexPage.propTypes = {};
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 { Link } from 'dva/router'
import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import { Link } from 'dva/router';
import React from 'react';
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 {
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) => {
if (!err) {
console.log('Received values of form: ', values);
const {account, password} = values
dispatch({type: "auth/login", payload: {account: account, password}})
const { account, password } = values;
dispatch({ type: 'auth/login', payload: { account, password } });
}
});
}
};
render() {
const { getFieldDecorator, dispatch} = this.props.form;
const { isLoginSubmit=false } = this.props
const { getFieldDecorator } = this.props.form;
const { isLoginSubmit = false } = this.props;
return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
<Spin spinning={isLoginSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem>
{getFieldDecorator('account', {
rules: [{ required: true, message: 'Please input your account!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>
)}
<Link to="/forgot" className="login-form-forgot">Forgot password</Link>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <Link to="/register">register now!</Link>
</FormItem>
</Form>
</Spin>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
<Spin spinning={isLoginSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem>
{getFieldDecorator('account', {
rules: [{ required: true, message: 'Please input your account!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />,
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />,
)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>,
)}
<Link to="/forgot" className="login-form-forgot">Forgot password</Link>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <Link to="/register">register now!</Link>
</FormItem>
</Form>
</Spin>
</div>
)
);
}
}
function mapStateToProps(state) {
const {
auth: {isLoginSubmit}
} = state
auth: { isLoginSubmit },
} = state;
return {
isLoginSubmit
isLoginSubmit,
};
}
const WrapperLogin = Form.create()(Login)
const WrapperLogin = Form.create()(Login);
export default connect(mapStateToProps)(WrapperLogin);
src/routes/Login.less
View file @ 900bf08f
:global {
.login-form {
max-width: 300px;
}
.login-form-forgot {
float: right;
}
.login-form-button {
width: 100%;
}
}
.normal {
}
:global {
.login-form {
max-width: 300px;
}
.login-form-forgot {
float: right;
}
.login-form-button {
width: 100%;
}
}
.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 { 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 { Form, Input, Icon, Radio, Tag, Tooltip, Button, Select, Tabs, Upload, Modal, Table, Popconfirm, Row, Col, Card, Spin } from 'antd'
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;
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 = {
labelCol: { span: 4 },
wrapperCol: { span: 15 },
}
};
class Profiles extends React.Component {
onUpdateSubmit = (e) => {
const { form, dispatch, data: {id}} = this.props
const { form, dispatch, data: { id } } = this.props;
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
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() {
const { dispatch, form, data, isUpdateSubmit=false, checkUsername, isUserNameExists } = this.props
const { getFieldDecorator } = form;
const { username, nickname, id } = data
const { form, data, isUpdateSubmit = false } = this.props;
const { getFieldDecorator } = form;
const { nickname } = data;
const nicknameProps = {
fromItem: {
label: "nickname",
label: 'nickname',
...formItemLayout
},
decorator: {
initialValue: nickname
initialValue: nickname,
},
input: {
placeholder: "nickname",
}
}
placeholder: 'nickname',
},
};
return (
<Spin spinning={isUpdateSubmit} delay={500}>
<Tabs defaultActiveKey="1" className="app-detail-nav">
<TabPane tab={<span><Icon type="setting" /> 基本信息 </span>} key="1">
<Form onSubmit={this.onUpdateSubmit}>
<Form onSubmit={this.onUpdateSubmit}>
<FormItem {...nicknameProps.fromItem}>
{getFieldDecorator(`nickname`, {...nicknameProps.decorator})(
<Input {...nicknameProps.input}/>
{getFieldDecorator('nickname', { ...nicknameProps.decorator })(
<Input {...nicknameProps.input} />,
)}
</FormItem>
<FormItem>
<div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large">提交</Button>
<Button type="primary" htmlType="submit" size="large">提交</Button>
</div>
</FormItem>
</Form>
......@@ -79,40 +74,40 @@ class Profiles extends React.Component {
<TabPane tab={<span><Icon type="setting" /> 账户信息 </span>} key="2">
<Tabs type="card" className="app-detail-nav">
<TabPane tab={"修改用户名"} key={0}>
<TabPane tab={'修改用户名'} key={0}>
<UserNameForm />
</TabPane>
</TabPane>
<TabPane tab={"修改邮箱"} key={1}>
<TabPane tab={'修改邮箱'} key={1}>
<EmailForm />
</TabPane>
</TabPane>
<TabPane tab={"修改密码"} key={2}>
<TabPane tab={'修改密码'} key={2}>
<PasswordForm />
</TabPane>
</TabPane>
</Tabs>
</TabPane>
</Tabs>
</Spin>
)
</Spin>
);
}
}
function mapStateToProps(state, props) {
function mapStateToProps(state) {
const {
user: {data, isUpdateSubmit},
auth: {checkUsername, isEmailExists, isUserNameExists,}
} = state
user: { data, isUpdateSubmit },
auth: { checkUsername, isEmailExists, isUserNameExists, },
} = state;
return {
data,
data,
checkUsername,
isEmailExists,
isEmailExists,
isUserNameExists,
isUpdateSubmit
isUpdateSubmit,
};
}
const WrapperProfiles = Form.create()(Profiles)
const WrapperProfiles = Form.create()(Profiles);
export default connect(mapStateToProps)(WrapperProfiles);
src/routes/Profiles.less
View file @ 900bf08f
:global {
.app-detail-nav{
}
.ant-card {
margin: 2vh 0;
}
.app-detail-nav .ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
.ant-upload-select-picture-card i {
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
font-size: 12px;
color: #666;
}
}
.wrapSubmit{
display: flex;
justify-content: center;
}
\ No newline at end of file
:global {
.app-detail-nav {
}
.ant-card {
margin: 2vh 0;
}
.app-detail-nav .ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
.ant-upload-select-picture-card i {
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
font-size: 12px;
color: #666;
}
}
.wrapSubmit {
display: flex;
justify-content: center;
}
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 { Link } from 'dva/router'
import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
import { Link } from 'dva/router';
import React from 'react';
const FormItem = Form.Item;
const Option = Select.Option;
......@@ -10,21 +9,21 @@ const Option = Select.Option;
class Register extends React.Component {
onSubmitLogin = (e) => {
const { form, dispatch, params: { id }} = this.props
const { form, dispatch, params: { id } } = this.props;
e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
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) => {
const form = this.props.form;
......@@ -33,7 +32,7 @@ class Register extends React.Component {
} else {
callback();
}
}
};
checkConfirm = (rule, value, callback) => {
const form = this.props.form;
......@@ -41,119 +40,123 @@ class Register extends React.Component {
form.validateFields(['confirm'], { force: true });
}
callback();
}
};
render() {
const { dispatch, register, form, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit } = this.props
const { getFieldDecorator, } = form
const {email={}, username={}, password={} } = register
const { dispatch, register, form, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit } = this.props;
const { getFieldDecorator, } = form;
const { email = {}, username = {}, password = {} } = register;
const emailProps = {
hasFeedback: true,
validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : ''
}
help: isEmailExists ? 'email exists' : '',
};
const emailInputProps = {
onBlur: () => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue()} }),
placeholder: "Email",
}
onBlur: () => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue() } }),
placeholder: 'Email',
};
const usernameProps = {
hasFeedback: true,
validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : ''
}
help: isUserNameExists ? 'username exists' : '',
};
const usernameInputProps = {
onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue()} }),
placeholder: "Username"
}
onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue() } }),
placeholder: 'Username',
};
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}>
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem {...emailProps} >
{getFieldDecorator('email', {
rules: [{ required: true, message: '邮箱格式不对!', pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ }],
}, {
})(
<Input {...emailInputProps} />
)}
</FormItem>
<FormItem {...usernameProps}>
{getFieldDecorator('username', {
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 }],
}, {
})(
<Input {...usernameInputProps}/>
)}
</FormItem>
<FormItem >
{getFieldDecorator('nickname', {
})(
<Input placeholder="nickname[optional]" />
)}
</FormItem>
<FormItem hasFeedback >
{getFieldDecorator('password', {
rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }],
}, {
validator: this.checkConfirm
})(
<Input
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}$/
<Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem {...emailProps} >
{getFieldDecorator('email', {
rules: [{
required: true,
message: '邮箱格式不对!',
pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
}],
}, {})(
<Input {...emailInputProps} />,
)}
</FormItem>
<FormItem {...usernameProps}>
{getFieldDecorator('username', {
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,
}],
}, {})(
<Input {...usernameInputProps}/>,
)}
</FormItem>
<FormItem >
{getFieldDecorator('nickname', {})(
<Input placeholder="nickname[optional]"/>,
)}
</FormItem>
<FormItem hasFeedback>
{getFieldDecorator('password', {
rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }],
}, {
validator: this.checkPassword,
}],
})(
<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>
validator: this.checkConfirm,
})(
<Input
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,
}],
})(
<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>
</div>
)
);
}
}
function mapStateToProps(state) {
const {
auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit }
} = state
auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit },
} = state;
return {
register,
checkEmail,
checkUsername,
isEmailExists,
isEmailExists,
isUserNameExists,
isRegisterSubmit
isRegisterSubmit,
};
}
const WrapperRegister = Form.create()(Register)
const WrapperRegister = Form.create()(Register);
export default connect(mapStateToProps)(WrapperRegister);
src/routes/Register.less
View file @ 900bf08f
:global {
.app-detail-nav{
}
.ant-card {
margin: 2vh 0;
}
.app-detail-nav .ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
.ant-upload-select-picture-card i {
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
font-size: 12px;
color: #666;
}
}
:global {
.app-detail-nav {
}
.ant-card {
margin: 2vh 0;
}
.app-detail-nav .ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
.ant-upload-select-picture-card i {
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
font-size: 12px;
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 { Link } from 'dva/router'
import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
import React from 'react';
const FormItem = Form.Item;
const Option = Select.Option;
......@@ -10,19 +8,19 @@ const Option = Select.Option;
class Reset extends React.Component {
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();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
const {password} = values
console.log(this.props)
dispatch({type: "auth/reset", payload: { password, key, user_id}})
const { password } = values;
console.log(this.props);
dispatch({ type: 'auth/reset', payload: { password, key, user_id } });
}
});
}
};
checkPassword = (rule, value, callback) => {
const form = this.props.form;
......@@ -31,7 +29,7 @@ class Reset extends React.Component {
} else {
callback();
}
}
};
checkConfirm = (rule, value, callback) => {
const form = this.props.form;
......@@ -39,57 +37,57 @@ class Reset extends React.Component {
form.validateFields(['confirm'], { force: true });
}
callback();
}
};
render() {
const { getFieldDecorator } = this.props.form;
const { isResetSubmit=false } = this.props
const { isResetSubmit = false } = this.props;
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}>
<Form onSubmit={this.onSubmitReset} className="login-form">
<Form onSubmit={this.onSubmitReset} className="login-form">
<FormItem>
{getFieldDecorator('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!',
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
}, {
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>
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,
}],
})(
<Input type="password" onBlur={this.handleConfirmBlur} placeholder="Password Again"/>,
)}
</FormItem>
<Button type="primary" htmlType="submit" className="login-form-button">
Submit
</Button>
</Form>
</Spin>
</div>
)
);
}
}
function mapStateToProps(state, props) {
const {
auth: {isResetSubmit}
} = state
auth: { isResetSubmit },
} = state;
return {
isResetSubmit
isResetSubmit,
};
}
const WrapperReset = Form.create()(Reset)
const WrapperReset = Form.create()(Reset);
export default connect(mapStateToProps)(WrapperReset);
src/services/auth.js
View file @ 900bf08f
import request from '../utils/request';
import config from '../config'
export async function login(params) {
return request(`/signin`, {
method: 'POST',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
export async function forgot(params) {
return request(`/forgot`, {
method: 'POST',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
export async function register(params) {
return request(`/signup`, {
method: 'POST',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
export async function reset(params) {
return request(`/reset`, {
method: 'PATCH',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
export async function activate(params) {
return request(`/activate`, {
method: 'POST',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
// deprecated
export async function getUserByEmail(params) {
return request(`/user/${params.email}`, {
method: 'GET'
})
method: 'GET',
});
}
// deprecated
export async function getUserByUsername(params) {
return request(`/user/${params.username}`, {
method: 'GET'
})
method: 'GET',
});
}
export async function checkUserExists(params) {
return request(`/user/exists`, {
method: "POST",
body: JSON.stringify(params)
})
method: 'POST',
body: JSON.stringify(params),
});
}
......
src/services/user.js
View file @ 900bf08f
import request from '../utils/request';
import config from '../config'
export async function updateProfile(params) {
return request(`/user/profiles`, {
method: 'PATCH',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
export async function updateAccount(params) {
return request(`/user/account`, {
method: 'PATCH',
body: JSON.stringify(params)
})
body: JSON.stringify(params),
});
}
src/utils/request.js
View file @ 900bf08f
......@@ -23,16 +23,16 @@ function checkStatus(response) {
* @return {object} An object containing either "data" or "err"
*/
export default function request(url, options) {
url = `${config.apiRoot}${url}`
if(options && !options.headers && (options.method == 'POST' || options.method == 'PATCH')) {
url = `${config.apiRoot}${url}`;
if (options && !options.headers && (options.method == 'POST' || options.method == 'PATCH')) {
options.headers = {
"content-type": "application/json"
}
'content-type': 'application/json',
};
}
console.log(options)
console.log(options);
return fetch(url, options)
.then(checkStatus)
.then(parseJSON)
.then(data => ({ data }))
.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