Skip to content
This repository was archived by the owner on Aug 24, 2019. It is now read-only.

Commit fc70c4b

Browse files
lisonglisong
committed
change password
1 parent 61fc3dd commit fc70c4b

File tree

9 files changed

+116
-11
lines changed

9 files changed

+116
-11
lines changed

‎src/actions/actionTypes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export const RECEIVE_LOGIN_ERROR = 'RECEIVE_LOGIN_ERROR';
3333
export const PASSWORD_CHANGE_OLD_INPUT = 'PASSWORD_CHANGE_OLD_INPUT';
3434
export const PASSWORD_CHANGE_NEW_INPUT = 'PASSWORD_CHANGE_NEW_INPUT';
3535
export const PASSWORD_CHANGE_NEW_CONFIRM_INPUT = 'PASSWORD_CHANGE_NEW_CONFIRM_INPUT';
36+
37+
export const REQUEST_MODIFY_PASSWORD = 'REQUEST_MODIFY_PASSWORD';
38+
export const RECEIVE_MODIFY_PASSWORD = 'RECEIVE_MODIFY_PASSWORD';
39+
export const RECEIVE_MODIFY_PASSWORD_ERROR = 'RECEIVE_MODIFY_PASSWORD_ERROR';
3640
/*========= end usersActions ===========*/
3741

3842
/*========= begin registersActions ===========*/

‎src/actions/authActions.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,8 @@ export function patchAccessKey(name, friendlyName=null, ttl=0) {
124124
return restApi.patchAccessKey(name, friendlyName, ttl)
125125
.then(data => {
126126
dispatch(receivePatchAccessKey(name, data));
127+
}).catch(function(e){
128+
console.log(e);
127129
});
128130
};
129131
}

‎src/actions/usersActions.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as types from './actionTypes';
22
import restApi from '../network/RestApi';
33
import {saveAuth, deleteAuth} from './authActions';
4+
import {showLogin} from './routesActions';
45
import _ from 'lodash';
56

67
export function logout() {
@@ -80,3 +81,39 @@ export function passwordChangeNewConfirmInput(newPasswordConfirm) {
8081
payload: newPasswordConfirm
8182
}
8283
}
84+
85+
function requestModifyPassword() {
86+
return {
87+
type: types.REQUEST_MODIFY_PASSWORD,
88+
}
89+
}
90+
91+
function receiveModifyPassword(data) {
92+
return {
93+
type: types.RECEIVE_MODIFY_PASSWORD,
94+
payload: data,
95+
}
96+
}
97+
98+
function receiveModifyPasswordError(error) {
99+
return {
100+
type: types.RECEIVE_MODIFY_PASSWORD_ERROR,
101+
payload: error,
102+
}
103+
}
104+
105+
export function modifyPassword(oldPassword, newPassword) {
106+
return (dispatch) => {
107+
dispatch(requestModifyPassword());
108+
return restApi.password(oldPassword, newPassword)
109+
.then(data => {
110+
if (_.get(data, 'status') == "OK") {
111+
dispatch(deleteAuth());
112+
dispatch(receiveModifyPassword(data));
113+
dispatch(showLogin());
114+
} else {
115+
dispatch(receiveModifyPasswordError({message: _.get(data, 'message')}));
116+
}
117+
});
118+
};
119+
}

‎src/components/ChangePassword/ChangePassword.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
.container {
1010
margin: 0 auto;
11-
padding: 0 0 40px;
11+
padding: 4% 0 40px;
1212
max-width: 380px;
1313
min-height: 480px;
1414
}
@@ -46,3 +46,9 @@
4646
border-color: #0074c2;
4747
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
4848
}
49+
50+
.errorTip {
51+
color: red;
52+
margin-bottom: 20px;
53+
margin-left: 27%;
54+
}

‎src/components/ChangePassword/ChangePassword.js‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ class ChangePassword extends Component {
1717
newPasswordConfirm: PropTypes.string,
1818
newPasswordConfirmInputChange: PropTypes.func,
1919
submit: PropTypes.func,
20+
error: PropTypes.object,
2021
};
2122

2223
static defaultProps = {
@@ -28,10 +29,12 @@ class ChangePassword extends Component {
2829
newPasswordConfirm: '',
2930
newPasswordConfirmInputChange: (newPasswordConfirm)=>{},
3031
submit: ()=>{},
32+
error: {},
3133
};
3234

3335
constructor(){
3436
super();
37+
this.state = {field1: false, field2: false, field3: false};
3538
this.setOldPassword = this.setOldPassword.bind(this);
3639
this.setNewPassword = this.setNewPassword.bind(this);
3740
this.setNewPasswordConfirm = this.setNewPasswordConfirm.bind(this);
@@ -50,10 +53,26 @@ class ChangePassword extends Component {
5053
}
5154

5255
render() {
56+
let self = this;
57+
let isValidate = true;
58+
let oldPasswordTips = '';
59+
if (!this.props.oldPassword) {
60+
isValidate = false;
61+
oldPasswordTips = '请您输入旧密码';
62+
}
63+
let newPasswordTips = '';
64+
let newPasswordConfirmTips = '';
65+
if (this.props.newPassword.length < 6) {
66+
newPasswordTips = '请您输入6～22位字符或数字'
67+
}
68+
if (!_.eq(this.props.newPassword, this.props.newPasswordConfirm)) {
69+
isValidate = false;
70+
newPasswordConfirmTips = '两次输入的密码不一致'
71+
}
72+
5373
return (
5474
<div className={s.root}>
5575
<div className={s.container}>
56-
<h1>修改密码</h1>
5776
<div className={s.formGroup}>
5877
<label className={s.label} htmlFor="oldPassword">
5978
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旧密码:
@@ -66,8 +85,14 @@ class ChangePassword extends Component {
6685
value={this.props.oldPassword}
6786
placeholder="请输入旧密码"
6887
autoFocus
88+
onBlur={()=>this.setState({field1: true})}
6989
/>
7090
</div>
91+
{
92+
this.state.field1 ?
93+
<div className={s.errorTip}>{oldPasswordTips}</div>
94+
: null
95+
}
7196
<div className={s.formGroup}>
7297
<label className={s.label} htmlFor="newPassword">
7398
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新密码:
@@ -79,8 +104,14 @@ class ChangePassword extends Component {
79104
type="password"
80105
value={this.props.newPassword}
81106
placeholder="请您输入新的密码"
107+
onBlur={()=>this.setState({field2: true})}
82108
/>
83109
</div>
110+
{
111+
this.state.field2 ?
112+
<div className={s.errorTip}>{newPasswordTips}</div>
113+
: null
114+
}
84115
<div className={s.formGroup}>
85116
<label className={s.label} htmlFor="newPasswordConfirm">
86117
确认新密码:
@@ -92,19 +123,26 @@ class ChangePassword extends Component {
92123
type="password"
93124
value={this.props.newPasswordConfirm}
94125
placeholder="请您再次输入新的密码"
126+
onBlur={()=>this.setState({field3: true})}
95127
/>
96128
</div>
129+
{
130+
this.state.field3 ?
131+
<div className={s.errorTip}>{newPasswordConfirmTips}</div>
132+
: null
133+
}
97134
<br/>
135+
<div className={s.errorTip}>{_.get(this.props, 'error.message')}</div>
98136
<div className={s.formGroup}>
99137
<Button
100138
style={
101-
this.props.isChecking ?
139+
this.props.isFetching || !isValidate ?
102140
{ width:'71%', marginLeft: '27%', backgroundColor:'grey' }
103141
: { width:'71%', marginLeft: '27%' }
104142
}
105143
value="确认"
106144
onClick={()=>{
107-
if (self.props.isChecking) {
145+
if (self.props.isFetching || !isValidate) {
108146
return;
109147
}
110148
self.props.submit();

‎src/components/ProductList/ProductList.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ class ProductList extends Component {
3030
{
3131
_.map(_.get(rowData, 'collaborators'), function (item, email) {
3232
return (
33-
<li>
33+
<li key={email}>
3434
{email}
3535
<span className={s.permission}>
3636
(<em>{_.get(item, 'permission')}</em>)
@@ -53,7 +53,7 @@ class ProductList extends Component {
5353
{
5454
_.map(_.get(rowData, 'deployments'), function (item, email) {
5555
return (
56-
<li style={item == 'Production' ? {color: 'green'} : null} >
56+
<li key={email} style={item == 'Production' ? {color: 'green'} : null} >
5757
{item}
5858
</li>
5959
);

‎src/containers/ChangePasswordContainer.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,21 @@ class ChangePasswordContainer extends Component {
2424

2525
render() {
2626
const {password, actions} = this.props;
27+
let oldPassword = _.get(password, 'oldPassword');
28+
let newPassword = _.get(password, 'newPassword');
2729
return (
2830
<div>
2931
<HeaderContainer/>
3032
<ChangePassword
31-
oldPassword={_.get(password, 'oldPassword')}
33+
isFetching={_.get(password, 'isFetching')}
34+
oldPassword={oldPassword}
3235
oldPasswordInputChange={actions.passwordChangeOldInput}
33-
newPassword={_.get(password, 'newPassword')}
36+
newPassword={newPassword}
3437
newPasswordInputChange={actions.passwordChangeNewInput}
3538
newPasswordConfirm={_.get(password, 'newPasswordConfirm')}
3639
newPasswordConfirmInputChange={actions.passwordChangeNewConfirmInput}
40+
submit={()=>actions.modifyPassword(oldPassword, newPassword)}
41+
error={_.get(password, 'error')}
3742
/>
3843
<Footer/>
3944
</div>

‎src/network/RestApi.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ class RestApi {
7373
return this.post(`/users`, {email, password, token});
7474
}
7575

76+
password(oldPassword, newPassword) {
77+
return this.patch(`/users/password`, {oldPassword, newPassword});
78+
}
79+
7680
buildReadmeUrl() {
7781
return `${this.baseURI}/README.md`;
7882
}

‎src/reducers/users.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,22 @@ export function login(state = {}, action) {
4040
export function password(state = {}, action) {
4141
switch (action.type) {
4242
case types.PASSWORD_CHANGE_OLD_INPUT:
43-
return Object.assign({}, state, {oldPassword: _.get(action, 'payload')});
43+
return Object.assign({}, state, {oldPassword: _.get(action, 'payload'), error: null});
4444

4545
case types.PASSWORD_CHANGE_NEW_INPUT:
46-
return Object.assign({}, state, {newPassword: _.get(action, 'payload')});
46+
return Object.assign({}, state, {newPassword: _.get(action, 'payload'), error: null});
4747

4848
case types.PASSWORD_CHANGE_NEW_CONFIRM_INPUT:
49-
return Object.assign({}, state, {newPasswordConfirm: _.get(action, 'payload')});
49+
return Object.assign({}, state, {newPasswordConfirm: _.get(action, 'payload'), error: null});
50+
51+
case types.REQUEST_MODIFY_PASSWORD:
52+
return Object.assign({}, state, {isFetching: true});
53+
54+
case types.RECEIVE_MODIFY_PASSWORD:
55+
return {isFetching: false};
56+
57+
case types.RECEIVE_MODIFY_PASSWORD_ERROR:
58+
return Object.assign({}, state, {isFetching: false, error: _.get(action, 'payload')});
5059

5160
default:
5261
return state

0 commit comments

Comments
 (0)