Skip to content

M
Moecube Accounts Web
Commit 92f6c5fb authored by nano's avatar nano
Browse files
Options

update

parent 8e5147ef
Hide whitespace changes
Inline Side-by-side
Showing with 990 additions and 121 deletions
src/components/EmailForm.js 0 → 100644
View file @ 92f6c5fb
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'
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 15 },
}
class EmailForm extends React.Component {
onUpdateEmail = (e) => {
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 }})
}
});
}
render(){
const {form, dispatch, data, checkEmail, isEmailExists} = this.props
const {getFieldDecorator} = form
const {id, email} = data
const emailProps = {
fromItem: {
label: "email",
hasFeedback: true,
validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : '',
...formItemLayout
},
decorator: {
initialValue: email
},
input: {
placeholder: "email"
}
}
const passwordProps = {
fromItem: {
label: "passwrod",
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }
]
},
input: {
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} })}/>
)}
</FormItem>
<FormItem {...passwordProps.fromItem}>
{getFieldDecorator(`password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
)}
</FormItem>
<FormItem>
<SubmitButton />
</FormItem>
</Form>
);
}
}
function mapStateToProps(state, props) {
const {
user: {data},
auth: {isEmailExists, checkEmail}
} = state
return {
data,
checkEmail,
isEmailExists
};
}
const WrapperEmailForm = Form.create()(EmailForm)
export default connect(mapStateToProps)(WrapperEmailForm);
src/components/PasswordForm.js 0 → 100644
View file @ 92f6c5fb
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'
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
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 }})
}
});
}
render(){
const {form } = this.props
const {getFieldDecorator} = form
const passwordProps = {
fromItem: {
label: "passwrod",
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
{ validator: this.checkConfirm }
]
},
input: {
placeholder: "password",
type: 'password'
}
}
const confirmProps = {
fromItem: {
label: "comfirm",
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/},
{ validator: this.checkPassword}
]
},
input: {
placeholder: "confirm",
type: 'password'
}
}
return (
<Form onSubmit={this.onSubmit}>
<FormItem {...passwordProps.fromItem} label="old password">
{getFieldDecorator(`old_password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
)}
</FormItem>
<FormItem {...passwordProps.fromItem} label="new password">
{getFieldDecorator(`new_password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
)}
</FormItem>
<FormItem {...confirmProps.fromItem}>
{getFieldDecorator(`confirm`, {...confirmProps.decorator})(
<Input {...confirmProps.input} />
)}
</FormItem>
<FormItem>
<SubmitButton />
</FormItem>
</Form>
);
}
}
function mapStateToProps(state, props) {
const {
user: {data}
} = state
return {
data,
};
}
const WrapperEmailForm = Form.create()(EmailForm)
export default connect(mapStateToProps)(WrapperEmailForm);
src/components/SubmitButton.css 0 → 100644
View file @ 92f6c5fb
.wrapSubmit{
display: flex;
justify-content: center;
}
\ No newline at end of file
src/components/SubmitButton.js 0 → 100644
View file @ 92f6c5fb
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>
);
}
export default SubmitButton;
src/components/UserNameForm.js 0 → 100644
View file @ 92f6c5fb
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'
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 15 },
}
class EmailForm extends React.Component {
onSubmit = (e) => {
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 }})
}
});
}
render(){
const {form, dispatch, data, checkUsername, isUserNameExists} = this.props
const {getFieldDecorator} = form
const {id, username} = data
const usernameProps = {
fromItem: {
label: "username",
hasFeedback: true,
validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : '',
...formItemLayout
},
decorator: {
initialValue: username
},
input: {
placeholder: "username",
onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
}
}
const passwordProps = {
fromItem: {
label: "passwrod",
...formItemLayout
},
decorator: {
rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
]
},
input: {
placeholder: "password",
type: 'password'
}
}
return (
<Form onSubmit={this.onSubmit}>
<FormItem {...usernameProps.fromItem}>
{getFieldDecorator(`username`, {...usernameProps.decorator})(
<Input {...usernameProps.input}/>
)}
</FormItem>
<FormItem {...passwordProps.fromItem}>
{getFieldDecorator(`password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} />
)}
</FormItem>
<FormItem>
<SubmitButton />
</FormItem>
</Form>
);
}
}
function mapStateToProps(state, props) {
const {
user: {data},
auth: {isUserNameExists, checkUsername}
} = state
return {
data,
checkUsername,
isUserNameExists
};
}
const WrapperEmailForm = Form.create()(EmailForm)
export default connect(mapStateToProps)(WrapperEmailForm);
src/config.js
View file @ 92f6c5fb
export default { export default {
apiRoot: 'http://localhost:8081', apiRoot: 'http://localhost:3000',
} }
\ No newline at end of file
src/models/auth.js
View file @ 92f6c5fb
import { login, forgot, register, reset } from '../services/auth' import { login, forgot, register, reset, activate, checkUserExists } from '../services/auth'
import { message } from 'antd' import { message } from 'antd'
export default { export default {
namespace: 'auth', namespace: 'auth',
state: { state: {
isSubmit: false, activateState: false,
register:{} checkEmail: '',
checkUsername: '',
isEmailExists: false,
isUserNameExists: false,
isRegisterSubmit: false,
isLoginSubmit: false,
isForgotSubmit: false,
isSpinSubmit: false,
register: {}
}, },
reducers: { reducers: {
change(state, action) { change(state, action) {
return { return {
...state, ...action.payload ...state, ...action.payload
} }
} },
checkEmail(state, action) {
return {
...state, ...{
checkEmail: 'validating'
}
}
},
checkUsername(state, action) {
return {
...state, ...{
checkUsername: 'validating'
}
}
},
activate(state, action) {
return {
...state, ...{
activateState: true
}
}
},
check(state, action) {
return {
...state, ...action.payload
}
},
register(state, action) {
return {
...state, ...{
isRegisterSubmit: true
}
}
},
registerSuccess(state, action) {
return {
...state, ...{
isRegisterSubmit: false
}
}
},
registerFail(state, action) {
return {
...state, ...{
isRegisterSubmit: false
}
}
},
login(state, action) {
return {
...state, ...{
isLoginSubmit: true
}
}
},
loginSuccess(state, action) {
return {
...state, ...{
isLoginSubmit: false
}
}
},
loginFail(state, action) {
return {
...state, ...{
isLoginSubmit: false
}
}
},
forgot(state, action) {
return {
...state, ...{
isForgotSubmit: true
}
}
},
forgotSuccess(state, action) {
return {
...state, ...{
isForgotSubmit: false
}
}
},
forgotFail(state, action) {
return {
...state, ...{
isForgotSubmit: false
}
}
},
reset(state, action) {
return {
...state, ...{
isResetSubmit: true
}
}
},
resetSuccess(state, action) {
return {
...state, ...{
isResetSubmit: false
}
}
},
resetFail(state, action) {
return {
...state, ...{
isResetSubmit: false
}
}
},
}, },
effects: { effects: {
*activate({ payload }, { call, put }) {
const { data } = yield call(activate, payload)
},
*checkEmail({ payload }, { call, put }) {
const { data } = yield call(checkUserExists, payload)
if(data) {
yield put({ type: 'check', payload: { isEmailExists: true , checkEmail: 'warning'}})
} else {
yield put({ type: 'check', payload: { isEmailExists: false , checkEmail: 'success'}})
}
},
*checkUsername({ payload }, { call, put }) {
const { data } = yield call(checkUserExists, payload)
if(data) {
yield put({ type: 'check', payload: { isUserNameExists: true , checkUsername: 'warning'}})
} else {
yield put({ type: 'check', payload: { isUserNameExists: false , checkUsername: 'success'}})
}
},
*login({ payload }, { call, put }) { *login({ payload }, { call, put }) {
const {data} = yield call(login, payload) const {data} = yield call(login, payload)
if(data){ if(data){
yield put({ type: 'loginSuccess'}) yield put({ type: 'loginSuccess' })
message.info(data["message"]) yield put({ type: 'user/loginSuccess', payload: { data } })
message.info("登录成功")
} else { } else {
yield put({ type: 'loginFail'}) yield put({ type: 'loginFail' })
message.error("登陆失败") message.error("登陆失败")
} }
}, },
*forgot({ payload }, { call, put }) { *forgot({ payload }, { call, put }) {
const { data } = yield call(forgot, payload) const { data } = yield call(forgot, payload)
if(data) if(data){
{ yield put({ type: 'forgotSuccess' })
yield put({ type: 'forgotSuccess'}) message.info("已发送密码重置邮件")
message.info(data["message"])
}else { }else {
yield put({ type: 'forgotFail' }) yield put({ type: 'forgotFail' })
message.error("邮件发送失败") message.error("密码重置邮件发送失败")
} }
}, },
*register({ payload }, { call, put }) { *register({ payload }, { call, put }) {
const { data } = yield call(register, payload) const {data} = yield call(register, payload)
if(data) { if(data) {
yield put({ type: 'change', payload: { register: data}}) yield put({ type: 'registerSuccess'})
message.info("注册成功")
} else {
yield put({ type: 'registerFail' })
message.error("注册失败")
} }
// if(data){
// yield put({ type: 'registerSuccess' })
// message.info(data["message"])
// }
}, },
*reset({ payload }, { call, put }) { *reset({ payload }, { call, put }) {
const { data } = yield call(reset, payload) const { data } = yield call(reset, payload)
if(data) if(data){
{
yield put({ type: 'resetSuccess' }) yield put({ type: 'resetSuccess' })
message.info(data["message"]) message.info("重置成功")
}else{ }else{
yield put({ type: 'resetFail' }) yield put({ type: 'resetFail' })
message.error("重置失败") message.error("重置失败")
......
src/models/user.js
View file @ 92f6c5fb
import { routerRedux } from 'dva/router'
import { updateProfile, updateAccount } from '../services/user'
import { message } from 'antd'
export default { export default {
namespace: 'user', namespace: 'user',
state: { state: {
data: {},
isUpdateSubmit: false
},
reducers: {
loginFromStorage(state, action) {
return {
...state, ...action.payload
}
},
loginSuccess(state, action) {
return {
...state, ...action.payload
}
},
updateProfile(state, action) {
return {
...state, ...{
isUpdateSubmit: true
}
}
},
updateProfileSuccess(state, action) {
return {
...state, ...action.payload, ...{
isUpdateSubmit: false
}
}
},
updateProfileFail(state, action) {
return {
...state, ...{
isUpdateSubmit: false
}
}
},
updateAccount(state, action) {
return {
...state, ...{
isUpdateSubmit: true
}
}
},
updateAccountSuccess(state, action) {
return {
...state, ...action.payload, ...{
isUpdateSubmit: false
}
}
},
updateAccountFail(state, action) {
return {
...state, ...{
isUpdateSubmit: false
}
}
},
}, },
reducers: {},
effects: { effects: {
*loginSuccess({ payload }, { call, put }) {
localStorage.setItem("user", JSON.stringify(payload.data))
yield put(routerRedux.replace("/profiles"))
},
*preLogin({ payload }, { call, put }) {
let user = localStorage.getItem("user")
if(!user){
yield put(routerRedux.replace("/login"))
}
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("更新失败")
}
},
*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("更新失败")
}
},
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, query}) => {
if(pathname == '/profiles') {
dispatch({ type: 'preLogin', payload: query})
}
})
}
}, },
subscriptions: {},
}; };
src/router.js
View file @ 92f6c5fb
...@@ -12,6 +12,8 @@ import Reset from "./routes/Reset.js"; ...@@ -12,6 +12,8 @@ import Reset from "./routes/Reset.js";
import Profiles from "./routes/Profiles.js"; import Profiles from "./routes/Profiles.js";
import Active from "./routes/Activate.js";
function RouterConfig({ history }) { function RouterConfig({ history }) {
return ( return (
<Router history={history}> <Router history={history}>
...@@ -23,6 +25,7 @@ function RouterConfig({ history }) { ...@@ -23,6 +25,7 @@ function RouterConfig({ history }) {
<Route path="/reset" component={Reset} /> <Route path="/reset" component={Reset} />
<Route path="/profiles" component={Profiles} /> <Route path="/profiles" component={Profiles} />
</Route> </Route>
<Route path="/activate" component={Active} />
</Router> </Router>
); );
} }
......
src/routes/Activate.js 0 → 100644
View file @ 92f6c5fb
import React from 'react';
import { connect } from 'dva';
import styles from './Activate.css';
import { Button } from 'antd';
class Active extends React.Component {
handleClick = () => {
const { dispatch, location: { query: { key } } } = this.props
dispatch({ type: 'auth/active', payload: { key }})
}
render() {
const { activateState } = this.props
return (
<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
return {
activateState
};
}
export default connect(mapStateToProps)(Active);
src/routes/Forgot.js
View file @ 92f6c5fb
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router'
import styles from './Login.less'; import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd'; import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -30,22 +30,24 @@ class Login extends React.Component { ...@@ -30,22 +30,24 @@ class Login extends React.Component {
const {email} = values const {email} = values
dispatch({type: "auth/forgot", payload: {account: email}})
dispatch({type: "auth/forgot", payload: {emailOrUsername: email}})
} }
}); });
} }
render() { render() {
const { getFieldDecorator, dispatch } = this.props.form; const { getFieldDecorator, dispatch } = this.props.form;
const {isForgotSubmit=false} = this.props
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
<Spin spinning={isForgotSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem> <FormItem>
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your email!' }], rules: [{ required: true, message: 'Please input your username or email!' }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="email" /> <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="username or email" />
)} )}
</FormItem> </FormItem>
...@@ -54,13 +56,19 @@ class Login extends React.Component { ...@@ -54,13 +56,19 @@ class Login extends React.Component {
</Button> </Button>
Or <Link to="/login">Sign In</Link> Or <Link to="/login">Sign In</Link>
</Form> </Form>
</Spin>
</div> </div>
) )
} }
} }
function mapStateToProps() { function mapStateToProps(state) {
return {}; const {
auth: {isForgotSubmit}
} = state
return {
isForgotSubmit
};
} }
const WrapperLogin = Form.create()(Login) const WrapperLogin = Form.create()(Login)
......
src/routes/Login.js
View file @ 92f6c5fb
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router'
import styles from './Login.less'; import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd'; import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
...@@ -28,22 +28,25 @@ class Login extends React.Component { ...@@ -28,22 +28,25 @@ class Login extends React.Component {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const {username, password} = values const {account, password} = values
dispatch({type: "auth/login", payload: {emailOrUsername: username, password}}) dispatch({type: "auth/login", payload: {account: account, password}})
} }
}); });
} }
render() { render() {
const { getFieldDecorator, dispatch } = this.props.form; const { getFieldDecorator, dispatch} = this.props.form;
const { isLoginSubmit=false } = this.props
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
<Spin spinning={isLoginSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem> <FormItem>
{getFieldDecorator('username', { {getFieldDecorator('account', {
rules: [{ required: true, message: 'Please input your username!' }], rules: [{ required: true, message: 'Please input your account!' }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" /> <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
)} )}
...@@ -69,13 +72,19 @@ class Login extends React.Component { ...@@ -69,13 +72,19 @@ class Login extends React.Component {
Or <Link to="/register">register now!</Link> Or <Link to="/register">register now!</Link>
</FormItem> </FormItem>
</Form> </Form>
</Spin>
</div> </div>
) )
} }
} }
function mapStateToProps() { function mapStateToProps(state) {
return {}; const {
auth: {isLoginSubmit}
} = state
return {
isLoginSubmit
};
} }
const WrapperLogin = Form.create()(Login) const WrapperLogin = Form.create()(Login)
......
src/routes/Profiles.js
View file @ 92f6c5fb
import React from 'react'; import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import styles from './Profiles.css'; import { Link } from 'dva/router'
import styles from './Profiles.less';
function Profiles({ dispatch, text }) { import { Form, Input, Icon, Radio, Tag, Tooltip, Button, Select, Tabs, Upload, Modal, Table, Popconfirm, Row, Col, Card, Spin } from 'antd'
return ( const FormItem = Form.Item;
<div className={styles.normal} onClick={() => dispatch({type: 'haha/change', payload: { text: Math.random() }})}> const RadioButton = Radio.Button;
Route Component: {text} const RadioGroup = Radio.Group;
</div> 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 },
} }
function mapStateToProps(state) { class Profiles extends React.Component {
onUpdateSubmit = (e) => {
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
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 nicknameProps = {
fromItem: {
label: "nickname",
...formItemLayout
},
decorator: {
initialValue: nickname
},
input: {
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}>
<FormItem {...nicknameProps.fromItem}>
{getFieldDecorator(`nickname`, {...nicknameProps.decorator})(
<Input {...nicknameProps.input}/>
)}
</FormItem>
<FormItem>
<div className={styles.wrapSubmit}>
<Button type="primary" htmlType="submit" size="large">提交</Button>
</div>
</FormItem>
</Form>
</TabPane>
<TabPane tab={<span><Icon type="setting" /> 账户信息 </span>} key="2">
<Tabs type="card" className="app-detail-nav">
<TabPane tab={"修改用户名"} key={0}>
<UserNameForm />
</TabPane>
<TabPane tab={"修改邮箱"} key={1}>
<EmailForm />
</TabPane>
<TabPane tab={"修改密码"} key={2}>
<PasswordForm />
</TabPane>
</Tabs>
</TabPane>
</Tabs>
</Spin>
)
}
}
function mapStateToProps(state, props) {
const { const {
haha: {text} user: {data, isUpdateSubmit},
auth: {checkUsername, isEmailExists, isUserNameExists,}
} = state } = state
return { return {
text data,
checkUsername,
isEmailExists,
isUserNameExists,
isUpdateSubmit
}; };
} }
export default connect(mapStateToProps)(Profiles); const WrapperProfiles = Form.create()(Profiles)
export default connect(mapStateToProps)(WrapperProfiles);
src/routes/Profiles.less 0 → 100644
View file @ 92f6c5fb
: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
src/routes/Register.js
View file @ 92f6c5fb
...@@ -2,27 +2,15 @@ import React from 'react'; ...@@ -2,27 +2,15 @@ import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router'
import styles from './Login.less'; import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd'; import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
const formItemLayout = { class Register extends React.Component {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
},
};
class Login extends React.Component {
onSubmitLogin = (e) => { onSubmitLogin = (e) => {
const { form, dispatch, isSubmit, params: { id }} = this.props const { form, dispatch, params: { id }} = this.props
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
...@@ -32,15 +20,16 @@ class Login extends React.Component { ...@@ -32,15 +20,16 @@ class Login extends React.Component {
const {email, username, nickname, password, confirm} = values const {email, username, nickname, password, confirm} = values
dispatch({type: "auth/register", payload: {email, username, nickname, password, password2: confirm, submit: isSubmit}}) dispatch({type: "auth/register", payload: {email, username, nickname, password }})
} }
}); });
} }
checkPassword = (rule, value, callback) => { checkPassword = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
if (value && value !== form.getFieldValue('password')) { if (value && value !== form.getFieldValue('password')) {
callback('Two passwords that you enter is inconsistent!'); callback('两次密码输入不符');
} else { } else {
callback(); callback();
} }
...@@ -54,49 +43,58 @@ class Login extends React.Component { ...@@ -54,49 +43,58 @@ class Login extends React.Component {
callback(); callback();
} }
checkUsername = (rule, value, callback) => { render() {
const { form, dispatch } = this.props 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' : ''
}
callback(); const emailInputProps = {
} onBlur: () => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue()} }),
placeholder: "Email",
}
checkEmail= (rule, value, callback) => { const usernameProps = {
const form = this.props.form; hasFeedback: true,
if (value && value !== form.getFieldValue('password')) { validateStatus: checkUsername,
callback('Two passwords that you enter is inconsistent!'); help: isUserNameExists ? 'username exists' : ''
} else { }
callback();
} const usernameInputProps = {
} onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue()} }),
placeholder: "Username"
}
render() {
const { getFieldDecorator, dispatch } = this.props.form;
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
<Spin spinning={isRegisterSubmit} delay={500}>
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<FormItem hasFeedback > <FormItem {...emailProps} >
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your email!' }], rules: [{ required: true, message: '邮箱格式不对!', pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ }],
}, { }, {
validator: this.checkEmail
})( })(
<Input placeholder="Email" /> <Input {...emailInputProps} />
)} )}
</FormItem> </FormItem>
<FormItem hasFeedback > <FormItem {...usernameProps}>
{getFieldDecorator('username', { {getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your 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 }],
}, { }, {
validator: this.checkUsername
})( })(
<Input placeholder="Username" />
<Input {...usernameInputProps}/>
)} )}
</FormItem> </FormItem>
<FormItem hasFeedback > <FormItem >
{getFieldDecorator('nickname', { {getFieldDecorator('nickname', {
rules: [{ required: true, message: 'Please input your nickname!' }],
})( })(
<Input placeholder="nickname[optional]" /> <Input placeholder="nickname[optional]" />
)} )}
...@@ -104,23 +102,30 @@ class Login extends React.Component { ...@@ -104,23 +102,30 @@ class Login extends React.Component {
<FormItem hasFeedback > <FormItem hasFeedback >
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }], rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }],
}, { }, {
validator: this.checkConfirm validator: this.checkConfirm
})( })(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" /> <Input
prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password"
placeholder="Password" />
)} )}
</FormItem> </FormItem>
<FormItem hasFeedback > <FormItem hasFeedback >
{getFieldDecorator('confirm', { {getFieldDecorator('confirm', {
rules: [{ rules: [{
required: true, message: 'Please confirm your password!', required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/
}, { }, {
validator: this.checkPassword, validator: this.checkPassword,
}], }],
})( })(
<Input type="password" onBlur={this.handleConfirmBlur} placeholder="Password Again" /> <Input
prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
type="password"
onBlur={this.handleConfirmBlur}
placeholder="Password Again" />
)} )}
</FormItem> </FormItem>
...@@ -129,6 +134,7 @@ class Login extends React.Component { ...@@ -129,6 +134,7 @@ class Login extends React.Component {
</Button> </Button>
Or <Link to="/login">Sign in!</Link> Or <Link to="/login">Sign in!</Link>
</Form> </Form>
</Spin>
</div> </div>
) )
} }
...@@ -136,14 +142,18 @@ class Login extends React.Component { ...@@ -136,14 +142,18 @@ class Login extends React.Component {
function mapStateToProps(state) { function mapStateToProps(state) {
const { const {
auth: { isSubmit, register } auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit }
} = state } = state
return { return {
isSubmit, register,
register checkEmail,
checkUsername,
isEmailExists,
isUserNameExists,
isRegisterSubmit
}; };
} }
const WrapperLogin = Form.create()(Login) const WrapperRegister = Form.create()(Register)
export default connect(mapStateToProps)(WrapperLogin); export default connect(mapStateToProps)(WrapperRegister);
src/routes/Register.less 0 → 100644
View file @ 92f6c5fb
: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 @ 92f6c5fb
...@@ -2,26 +2,15 @@ import React from 'react'; ...@@ -2,26 +2,15 @@ import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router' import { Link } from 'dva/router'
import styles from './Login.less'; import styles from './Login.less';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd'; import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
},
};
class Reset extends React.Component { class Reset extends React.Component {
onSubmitReset = (e) => { onSubmitReset = (e) => {
const { form, dispatch, location: { query: { key, user_id }}} = this.props const { form, dispatch, location: { query: { key, user_id }} } = this.props
e && e.preventDefault(); e && e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
...@@ -53,9 +42,11 @@ class Reset extends React.Component { ...@@ -53,9 +42,11 @@ class Reset extends React.Component {
} }
render() { render() {
const { getFieldDecorator, dispatch } = this.props.form; const { getFieldDecorator } = this.props.form;
const { isResetSubmit=false } = this.props
return ( return (
<div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}> <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
<Spin spinning={isResetSubmit} delay={500}>
<Form onSubmit={this.onSubmitReset} className="login-form"> <Form onSubmit={this.onSubmitReset} className="login-form">
<FormItem> <FormItem>
...@@ -84,13 +75,19 @@ class Reset extends React.Component { ...@@ -84,13 +75,19 @@ class Reset extends React.Component {
Submit Submit
</Button> </Button>
</Form> </Form>
</Spin>
</div> </div>
) )
} }
} }
function mapStateToProps(state, props) { function mapStateToProps(state, props) {
return {}; const {
auth: {isResetSubmit}
} = state
return {
isResetSubmit
};
} }
const WrapperReset = Form.create()(Reset) const WrapperReset = Form.create()(Reset)
......
src/services/auth.js
View file @ 92f6c5fb
...@@ -2,32 +2,60 @@ import request from '../utils/request'; ...@@ -2,32 +2,60 @@ import request from '../utils/request';
import config from '../config' import config from '../config'
export async function login(params) { export async function login(params) {
return request(`/sign_in.php`, { return request(`/signin`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params)
}) })
} }
export async function forgot(params) { export async function forgot(params) {
return request(`/forgot_password.php`, { return request(`/forgot`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params)
}) })
} }
export async function register(params) { export async function register(params) {
return request(`/sign_up.php`, { return request(`/signup`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params)
}) })
} }
export async function reset(params) { export async function reset(params) {
return request(`/reset_password.php`, { return request(`/reset`, {
method: 'PATCH',
body: JSON.stringify(params)
})
}
export async function activate(params) {
return request(`/activate`, {
method: 'POST', method: 'POST',
body: JSON.stringify(params) body: JSON.stringify(params)
}) })
} }
// deprecated
export async function getUserByEmail(params) {
return request(`/user/${params.email}`, {
method: 'GET'
})
}
// deprecated
export async function getUserByUsername(params) {
return request(`/user/${params.username}`, {
method: 'GET'
})
}
export async function checkUserExists(params) {
return request(`/user/exists`, {
method: "POST",
body: JSON.stringify(params)
})
}
src/services/user.js 0 → 100644
View file @ 92f6c5fb
import request from '../utils/request';
import config from '../config'
export async function updateProfile(params) {
return request(`/user/profiles`, {
method: 'PATCH',
body: JSON.stringify(params)
})
}
export async function updateAccount(params) {
return request(`/user/account`, {
method: 'PATCH',
body: JSON.stringify(params)
})
}
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