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

Commit 61fc3dd

Browse files
lisonglisong
committed
changepassword
1 parent 6ad1d8e commit 61fc3dd

17 files changed

Lines changed: 331 additions & 14 deletions

File tree

‎src/actions/actionTypes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export const LOGIN_CHANGE_PASSWORD_INPUT = 'LOGIN_CHANGE_PASSWORD_INPUT';
2929
export const REQUEST_LOGIN = 'REQUEST_LOGIN';
3030
export const RECEIVE_LOGIN = 'RECEIVE_LOGIN';
3131
export const RECEIVE_LOGIN_ERROR = 'RECEIVE_LOGIN_ERROR';
32+
33+
export const PASSWORD_CHANGE_OLD_INPUT = 'PASSWORD_CHANGE_OLD_INPUT';
34+
export const PASSWORD_CHANGE_NEW_INPUT = 'PASSWORD_CHANGE_NEW_INPUT';
35+
export const PASSWORD_CHANGE_NEW_CONFIRM_INPUT = 'PASSWORD_CHANGE_NEW_CONFIRM_INPUT';
3236
/*========= end usersActions ===========*/
3337

3438
/*========= begin registersActions ===========*/

‎src/actions/usersActions.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,24 @@ export function fetchLogin(account, password) {
5959
});
6060
};
6161
}
62+
63+
export function passwordChangeOldInput(oldPassword) {
64+
return {
65+
type: types.PASSWORD_CHANGE_OLD_INPUT,
66+
payload: oldPassword
67+
}
68+
}
69+
70+
export function passwordChangeNewInput(newPassword) {
71+
return {
72+
type: types.PASSWORD_CHANGE_NEW_INPUT,
73+
payload: newPassword
74+
}
75+
}
76+
77+
export function passwordChangeNewConfirmInput(newPasswordConfirm) {
78+
return {
79+
type: types.PASSWORD_CHANGE_NEW_CONFIRM_INPUT,
80+
payload: newPasswordConfirm
81+
}
82+
}

‎src/components/AccessKeys/AccessKeys.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ class AccessKeys extends Component {
8686
: null
8787
}
8888
<div className={s.container}>
89-
<h1>accessKey列表</h1>
89+
<h1>密钥列表</h1>
9090
<span style={{ float:'right', marginBottom:'20px', marginRight:'20px' }}>
9191
<button
9292
onClick={()=>{

‎src/components/ChangePassword/ChangePassword.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
@import '../../components/variables.css';
3+
4+
.root {
5+
padding-left: 20px;
6+
padding-right: 20px;
7+
}
8+
9+
.container {
10+
margin: 0 auto;
11+
padding: 0 0 40px;
12+
max-width: 380px;
13+
min-height: 480px;
14+
}
15+
16+
.formGroup {
17+
margin-bottom: 15px;
18+
}
19+
20+
.label {
21+
display: inline;
22+
margin-bottom: 5px;
23+
font-weight: 700;
24+
padding-right: 20px;
25+
width: 20%;
26+
}
27+
28+
.input {
29+
display: inline;
30+
box-sizing: border-box;
31+
padding: 10px 16px;
32+
width: 70%;
33+
height: 46px;
34+
outline: 0;
35+
border: 1px solid #ccc;
36+
border-radius: 0;
37+
background: #fff;
38+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
39+
color: #616161;
40+
font-size: 18px;
41+
line-height: 1.3333333;
42+
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
43+
}
44+
45+
.input:focus {
46+
border-color: #0074c2;
47+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
48+
}

‎src/components/ChangePassword/ChangePassword.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
2+
import React, { PropTypes, Component } from 'react';
3+
import withStyles from 'isomorphic-style-loader/lib/withStyles';
4+
import s from './ChangePassword.css';
5+
import _ from 'lodash';
6+
import Link from '../Link';
7+
import Button from '../Button';
8+
import moment from 'moment';
9+
10+
class ChangePassword extends Component {
11+
static propTypes = {
12+
isFetching: PropTypes.bool,
13+
oldPassword: PropTypes.string,
14+
oldPasswordInputChange: PropTypes.func,
15+
newPassword: PropTypes.string,
16+
newPasswordInputChange: PropTypes.func,
17+
newPasswordConfirm: PropTypes.string,
18+
newPasswordConfirmInputChange: PropTypes.func,
19+
submit: PropTypes.func,
20+
};
21+
22+
static defaultProps = {
23+
isFetching: false,
24+
oldPassword: '',
25+
oldPasswordInputChange: (oldPassword)=>{},
26+
newPassword: '',
27+
newPasswordInputChange: (newPassword)=>{},
28+
newPasswordConfirm: '',
29+
newPasswordConfirmInputChange: (newPasswordConfirm)=>{},
30+
submit: ()=>{},
31+
};
32+
33+
constructor(){
34+
super();
35+
this.setOldPassword = this.setOldPassword.bind(this);
36+
this.setNewPassword = this.setNewPassword.bind(this);
37+
this.setNewPasswordConfirm = this.setNewPasswordConfirm.bind(this);
38+
}
39+
40+
setOldPassword(event) {
41+
this.props.oldPasswordInputChange(event.target.value);
42+
}
43+
44+
setNewPassword(event) {
45+
this.props.newPasswordInputChange(event.target.value);
46+
}
47+
48+
setNewPasswordConfirm(event) {
49+
this.props.newPasswordConfirmInputChange(event.target.value);
50+
}
51+
52+
render() {
53+
return (
54+
<div className={s.root}>
55+
<div className={s.container}>
56+
<h1>修改密码</h1>
57+
<div className={s.formGroup}>
58+
<label className={s.label} htmlFor="oldPassword">
59+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旧密码:
60+
</label>
61+
<input
62+
className={s.input}
63+
onChange={this.setOldPassword}
64+
id="oldPassword"
65+
type="password"
66+
value={this.props.oldPassword}
67+
placeholder="请输入旧密码"
68+
autoFocus
69+
/>
70+
</div>
71+
<div className={s.formGroup}>
72+
<label className={s.label} htmlFor="newPassword">
73+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新密码:
74+
</label>
75+
<input
76+
className={s.input}
77+
onChange={this.setNewPassword}
78+
id="newPassword"
79+
type="password"
80+
value={this.props.newPassword}
81+
placeholder="请您输入新的密码"
82+
/>
83+
</div>
84+
<div className={s.formGroup}>
85+
<label className={s.label} htmlFor="newPasswordConfirm">
86+
确认新密码:
87+
</label>
88+
<input
89+
className={s.input}
90+
onChange={this.setNewPasswordConfirm}
91+
id="newPasswordConfirm"
92+
type="password"
93+
value={this.props.newPasswordConfirm}
94+
placeholder="请您再次输入新的密码"
95+
/>
96+
</div>
97+
<br/>
98+
<div className={s.formGroup}>
99+
<Button
100+
style={
101+
this.props.isChecking ?
102+
{ width:'71%', marginLeft: '27%', backgroundColor:'grey' }
103+
: { width:'71%', marginLeft: '27%' }
104+
}
105+
value="确认"
106+
onClick={()=>{
107+
if (self.props.isChecking) {
108+
return;
109+
}
110+
self.props.submit();
111+
}}/>
112+
</div>
113+
</div>
114+
</div>
115+
);
116+
}
117+
}
118+
export default withStyles(s)(ChangePassword);

‎src/components/ChangePassword/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "ChangePassword",
3+
"version": "0.0.0",
4+
"private": true,
5+
"main": "./ChangePassword.js"
6+
}

‎src/components/Navigation/Navigation.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55

66
.link {
77
display: inline-block;
8-
padding: 3px 8px;
8+
padding: 6px 10px;
99
text-decoration: none;
10-
font-size: 1.125em; /* ~18px */
10+
font-size: 1.4em; /* ~18px */
1111
}
1212

1313
.link,

‎src/components/Navigation/Navigation.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,23 @@ class Navigation extends Component {
1515
render() {
1616
let loginBtnView = (
1717
<span>
18-
<Link className={s.link} to="/login">Log in</Link>
18+
<Link className={s.link} to="/login">登录</Link>
1919
<span className={s.spacer}>or</span>
20-
<Link className={cx(s.link, s.highlight)} to="/register">Sign up</Link>
20+
<Link className={cx(s.link, s.highlight)} to="/register">注册</Link>
2121
</span>
2222
);
2323
if (_.get(this.props, 'isAuth') == true) {
24-
loginBtnView = <Link className={s.link} to="/logout">Log out</Link>
25-
24+
loginBtnView = <Link className={s.link} to="/logout">安全退出</Link>
2625
}
2726
return (
2827
<div className={cx(s.root, this.props.className)} role="navigation">
29-
<Link className={s.link} to="/apps">Apps</Link>
30-
<Link className={s.link} to="/accessKeys">AccessKeys</Link>
28+
<Link className={s.link} to="/apps">应用管理</Link>
29+
<Link className={s.link} to="/accessKeys">我的密钥</Link>
30+
{
31+
_.get(this.props, 'isAuth') == true ?
32+
<Link className={s.link} to="/users/settings">个人设置</Link>
33+
: null
34+
}
3135
<span className={s.spacer}> | </span>
3236
{loginBtnView}
3337
</div>

‎src/components/ProductList/ProductList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ class ProductList extends Component {
7272
return (
7373
<div className={s.root}>
7474
<div className={s.container}>
75-
<h1>App列表</h1>
75+
<h1>应用列表</h1>
7676
<table>
7777
<tbody>
7878
<tr>

‎src/containers/ChangePasswordContainer.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, {PropTypes, Component} from 'react';
2+
3+
import { connect } from 'react-redux';
4+
import { bindActionCreators } from 'redux';
5+
import _ from 'lodash';
6+
import * as usersActions from '../actions/usersActions';
7+
import * as authActions from '../actions/authActions';
8+
import * as routesActions from '../actions/routesActions';
9+
import ChangePassword from '../components/ChangePassword';
10+
import HeaderContainer from './HeaderContainer';
11+
import Footer from '../components/Footer';
12+
13+
class ChangePasswordContainer extends Component {
14+
componentDidMount() {
15+
if (!_.get(this.props, 'auth.isAuth')) {
16+
let path = location.pathname;
17+
if (!_.isEmpty(location.search)) {
18+
path += `?${location.search}`
19+
}
20+
this.props.actions.setBackHistory(path);
21+
this.props.actions.fetchAuth(true);
22+
}
23+
}
24+
25+
render() {
26+
const {password, actions} = this.props;
27+
return (
28+
<div>
29+
<HeaderContainer/>
30+
<ChangePassword
31+
oldPassword={_.get(password, 'oldPassword')}
32+
oldPasswordInputChange={actions.passwordChangeOldInput}
33+
newPassword={_.get(password, 'newPassword')}
34+
newPasswordInputChange={actions.passwordChangeNewInput}
35+
newPasswordConfirm={_.get(password, 'newPasswordConfirm')}
36+
newPasswordConfirmInputChange={actions.passwordChangeNewConfirmInput}
37+
/>
38+
<Footer/>
39+
</div>
40+
);
41+
}
42+
}
43+
44+
function mapStateToProps(state, ownProps) {
45+
return {password: _.get(state, 'password')};
46+
}
47+
48+
function mapDispatchToProps(dispatch, ownProps) {
49+
return {
50+
actions: bindActionCreators(Object.assign({}, usersActions, authActions, routesActions), dispatch)
51+
}
52+
}
53+
54+
export default connect(
55+
mapStateToProps,
56+
mapDispatchToProps
57+
)(ChangePasswordContainer)

0 commit comments

Comments
 (0)