Isoporhode
137 lines
3.5 KiB
React
137 lines
3.5 KiB
React
import React, { useState, useEffect } from "react";
|
|
|
|
import Paper from "@material-ui/core/Paper";
|
|
import Button from "@material-ui/core/Button";
|
|
|
|
import TextField from "@material-ui/core/TextField";
|
|
|
|
const bodyDivStyle = {
|
|
margin: "auto",
|
|
textAlign: "center",
|
|
width: "768px",
|
|
};
|
|
|
|
const boxStyle = {
|
|
flex: "1",
|
|
marginLeft: "10px",
|
|
marginRight: "10px",
|
|
paddingLeft: "30px",
|
|
paddingRight: "30px",
|
|
paddingBottom: "30px",
|
|
paddingTop: "30px",
|
|
backgroundColor: "#e8eaf6",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
};
|
|
|
|
//const tmpdata = {
|
|
// "username": "frikky",
|
|
// "firstname": "fred",
|
|
// "lastname": "ode",
|
|
// "title": "topkek",
|
|
// "companyname": "company here",
|
|
// "email": "your email pls",
|
|
// "phone": "PHONE!!",
|
|
//}
|
|
|
|
// FIXME - add fetch for data fields
|
|
// FIXME - remove tmpdata
|
|
// FIXME: Use isLoggedIn :)
|
|
const Settings = (props) => {
|
|
const { globalUrl, isLoaded } = props;
|
|
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [newPassword2, setNewPassword2] = useState("");
|
|
const [passwordFormMessage, setPasswordFormMessage] = useState("");
|
|
|
|
const onPasswordChange = () => {
|
|
const data = {
|
|
newpassword: newPassword,
|
|
newpassword2: newPassword2,
|
|
reference: props.match.params.key,
|
|
};
|
|
const url = globalUrl + "/api/v1/passwordreset";
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then((response) =>
|
|
response.json().then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
setPasswordFormMessage(responseJson["reason"]);
|
|
}
|
|
})
|
|
)
|
|
.catch((error) => {
|
|
setPasswordFormMessage("Something went wrong.");
|
|
});
|
|
};
|
|
|
|
// This should "always" have data
|
|
useEffect(() => {});
|
|
|
|
// Random names for type & autoComplete. Didn't research :^)
|
|
const landingpageData = (
|
|
<div style={{ display: "flex", marginTop: "80px" }}>
|
|
<Paper style={boxStyle}>
|
|
<h2>Password Reset</h2>
|
|
<div style={{ flex: "1", display: "flex", flexDirection: "column" }}>
|
|
<TextField
|
|
required
|
|
style={{ flex: "1" }}
|
|
fullWidth={true}
|
|
placeholder="New password"
|
|
type="password"
|
|
id="standard-required"
|
|
autoComplete="password"
|
|
margin="normal"
|
|
variant="outlined"
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
/>
|
|
<TextField
|
|
required
|
|
style={{ flex: "1" }}
|
|
fullWidth={true}
|
|
type="password"
|
|
placeholder="Repeat new password"
|
|
id="standard-required"
|
|
margin="normal"
|
|
variant="outlined"
|
|
onChange={(e) => setNewPassword2(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button
|
|
disabled={
|
|
newPassword.length < 10 ||
|
|
newPassword2.length < 10 ||
|
|
newPassword !== newPassword2
|
|
}
|
|
style={{ width: "100%", height: "60px", marginTop: "10px" }}
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={() => onPasswordChange()}
|
|
>
|
|
Submit password change
|
|
</Button>
|
|
<h3>{passwordFormMessage}</h3>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
|
|
const loadedCheck = isLoaded ? (
|
|
<div style={bodyDivStyle}>{landingpageData}</div>
|
|
) : (
|
|
<div></div>
|
|
);
|
|
|
|
return <div>{loadedCheck}</div>;
|
|
};
|
|
export default Settings;
|