146 lines
4.0 KiB
JavaScript
146 lines
4.0 KiB
JavaScript
import React, { useState } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { connect } from "react-redux"
|
|
import Loader from "../loader/loader"
|
|
import { Map } from "immutable"
|
|
|
|
import {
|
|
updateUser, getUserInfos,
|
|
getUserTokens, getUserModules
|
|
} from "../../actions/users"
|
|
import Modules from "../modules/modules"
|
|
|
|
const mapStateToProps = (state) => ({
|
|
isLoading: state.userStore.get("loading"),
|
|
token: state.userStore.get("polochonToken"),
|
|
url: state.userStore.get("polochonUrl"),
|
|
modules : state.userStore.get("modules"),
|
|
modulesLoading : state.userStore.get("modulesLoading"),
|
|
});
|
|
|
|
const mapDispatchToProps = {
|
|
updateUser, getUserInfos,
|
|
getUserTokens, getUserModules
|
|
}
|
|
|
|
const UserProfile = (props) => {
|
|
const [fetched, setIsFetched] = useState(false);
|
|
if (!fetched) {
|
|
props.getUserInfos();
|
|
props.getUserModules();
|
|
setIsFetched(true);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<UserEdit
|
|
isLoading={props.isLoading}
|
|
token={props.token}
|
|
url={props.url}
|
|
updateUser={props.updateUser}
|
|
/>
|
|
<Modules
|
|
modules={props.modules}
|
|
isLoading={props.modulesLoading}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
UserProfile.propTypes = {
|
|
isLoading: PropTypes.bool.isRequired,
|
|
token: PropTypes.string,
|
|
url: PropTypes.string,
|
|
updateUser: PropTypes.func.isRequired,
|
|
getUserInfos: PropTypes.func.isRequired,
|
|
getUserModules: PropTypes.func.isRequired,
|
|
modules: PropTypes.instanceOf(Map),
|
|
modulesLoading: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
const UserEdit = (props) => {
|
|
if (props.isLoading) {
|
|
return <Loader />
|
|
}
|
|
|
|
const [url, setUrl] = useState(props.url);
|
|
const [token, setToken] = useState(props.token);
|
|
const [password, setPassword] = useState("");
|
|
const [passwordConfirm, setPasswordConfirm] = useState("");
|
|
|
|
const handleSubmit = (ev) => {
|
|
ev.preventDefault();
|
|
props.updateUser({
|
|
"polochon_url": url,
|
|
"polochon_token": token,
|
|
"password": password,
|
|
"password_confirm": passwordConfirm,
|
|
});
|
|
}
|
|
|
|
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) => handleSubmit(ev)}>
|
|
<div className="form-group">
|
|
<label className="control-label">Polochon URL</label>
|
|
<input
|
|
className="form-control"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">Polochon token</label>
|
|
<input
|
|
className="form-control"
|
|
value={token}
|
|
onChange={(e) => setToken(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">Password</label>
|
|
<input
|
|
className="form-control"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">Confirm Password</label>
|
|
<input
|
|
className="form-control"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={passwordConfirm}
|
|
onChange={(e) => setPasswordConfirm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="submit" className="btn btn-primary pull-right" value="Update"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
UserEdit.propTypes = {
|
|
isLoading: PropTypes.bool.isRequired,
|
|
token: PropTypes.string,
|
|
url: PropTypes.string,
|
|
updateUser: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);
|