135 lines
3.8 KiB
JavaScript
135 lines
3.8 KiB
JavaScript
import React, { useState, useEffect } from "react"
|
|
import PropTypes from "prop-types"
|
|
import { connect } from "react-redux"
|
|
import Loader from "../loader/loader"
|
|
import { List } from "immutable"
|
|
|
|
import { getUserInfos, updateUser } from "../../actions/users"
|
|
import { getPolochons } from "../../actions/polochon"
|
|
|
|
import { FormInput } from "../forms/input"
|
|
|
|
const mapStateToProps = (state) => ({
|
|
loading: state.userStore.get("loading"),
|
|
publicPolochons: state.polochon.get("public"),
|
|
polochonId: state.userStore.get("polochonId"),
|
|
polochonToken: state.userStore.get("polochonToken"),
|
|
polochonActivated: state.userStore.get("polochonActivated"),
|
|
});
|
|
|
|
const mapDispatchToProps = {
|
|
updateUser, getPolochons, getUserInfos,
|
|
}
|
|
|
|
const UserEditConnect = ({
|
|
loading,
|
|
polochonId,
|
|
polochonToken,
|
|
polochonActivated,
|
|
updateUser,
|
|
getPolochons,
|
|
getUserInfos,
|
|
publicPolochons,
|
|
}) => {
|
|
const [id, setId] = useState(polochonId);
|
|
const [token, setToken] = useState(polochonToken);
|
|
const [password, setPassword] = useState("");
|
|
const [passwordConfirm, setPasswordConfirm] = useState("");
|
|
|
|
useEffect(() => {
|
|
getPolochons();
|
|
getUserInfos();
|
|
}, [getPolochons, getUserInfos])
|
|
|
|
useEffect(() => {
|
|
setId(polochonId);
|
|
setToken(polochonToken);
|
|
}, [polochonToken, polochonId])
|
|
|
|
const handleSubmit = (ev) => {
|
|
ev.preventDefault();
|
|
updateUser({
|
|
"password": password,
|
|
"password_confirm": passwordConfirm,
|
|
"polochon_id": id,
|
|
"polochon_token": token,
|
|
});
|
|
}
|
|
|
|
if (loading) { return (<Loader />) }
|
|
|
|
return (
|
|
<div className="row mb-3">
|
|
<div className="col-12 col-md-6 offset-md-3">
|
|
<h2>Edit user</h2>
|
|
<hr />
|
|
<form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
|
|
<div className="form-group">
|
|
<label className="control-label">
|
|
Polochon
|
|
{polochonActivated ||
|
|
<span className="ml-1 text text-primary">(Needs activation from admin)</span>
|
|
}
|
|
</label>
|
|
<select
|
|
className="form-control"
|
|
value={id}
|
|
onChange={(e) => setId(e.target.options[e.target.selectedIndex].value)}
|
|
>
|
|
{publicPolochons.map((el, index) => (
|
|
<option
|
|
value={el.get("id")}
|
|
key={index}>
|
|
{el.get("name")} ({el.get("url")})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<FormInput label="token" value={token} updateValue={setToken} />
|
|
|
|
<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>
|
|
);
|
|
}
|
|
UserEditConnect.propTypes = {
|
|
loading: PropTypes.bool.isRequired,
|
|
polochonId: PropTypes.string,
|
|
polochonToken: PropTypes.string,
|
|
polochonActivated: PropTypes.bool,
|
|
updateUser: PropTypes.func,
|
|
getPolochons: PropTypes.func,
|
|
getUserInfos: PropTypes.func,
|
|
publicPolochons: PropTypes.instanceOf(List),
|
|
};
|
|
|
|
export const UserEdit = connect(mapStateToProps, mapDispatchToProps)(UserEditConnect);
|