104 lines
3.4 KiB
JavaScript

import React from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { updateUser } from "../../actions/users"
function mapStateToProps(state) {
return {
polochonToken: state.userStore.get("polochonToken"),
polochonUrl: state.userStore.get("polochonUrl"),
};
}
const mapDispatchToProps = (dispatch) =>
bindActionCreators({ updateUser }, dispatch)
class UserEdit extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
polochonToken: props.polochonToken,
polochonUrl: props.polochonUrl,
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleUrlInput = this.handleUrlInput.bind(this);
this.handleTokenInput = this.handleTokenInput.bind(this);
}
handleSubmit(ev) {
ev.preventDefault();
this.props.updateUser({
"polochon_url": this.refs.polochonUrl.value,
"polochon_token": this.refs.polochonToken.value,
"password": this.refs.newPassword.value,
"password_confirm": this.refs.newPasswordConfirm.value,
});
}
handleTokenInput() {
this.setState({ polochonToken: this.refs.polochonToken.value });
}
handleUrlInput() {
this.setState({ polochonUrl: this.refs.polochonUrl.value });
}
componentWillReceiveProps(nextProps) {
if ((nextProps.polochonUrl !== "")
&& (this.state.polochonUrl === "")
&& (nextProps.polochonToken !== "")
&& (this.state.polochonToken === "")) {
this.setState({
polochonToken: nextProps.polochonToken,
polochonUrl: nextProps.polochonUrl,
});
}
}
render() {
return (
<div className="container">
<div className="content-fluid">
<div className="col-md-6 col-md-offset-3 col-xs-12">
<h2>Edit user</h2>
<hr />
<form className="form-horizontal" onSubmit={(ev) => this.handleSubmit(ev)}>
<div className="form-group">
<label className="control-label">Polochon URL</label>
<input
className="form-control"
value={this.state.polochonUrl}
onChange={this.handleUrlInput}
ref="polochonUrl"
/>
</div>
<div className="form-group">
<label className="control-label">Polochon token</label>
<input
className="form-control"
value={this.state.polochonToken}
onChange={this.handleTokenInput}
ref="polochonToken"
/>
</div>
<hr />
<div className="form-group">
<label className="control-label">Password</label>
<input type="password" autoComplete="off" ref="newPassword" className="form-control"/>
</div>
<div className="form-group">
<label className="control-label">Confirm Password</label>
<input type="password" autoComplete="off" ref="newPasswordConfirm" className="form-control"/>
</div>
<div>
<input type="submit" className="btn btn-primary pull-right" value="Update"/>
</div>
</form>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(UserEdit);