frontend/smart-hut/src/views/Forgot-password.js

108 lines
2.6 KiB
JavaScript

import React, { Component } from "react";
import {
Button,
Form,
Grid,
Header,
Image,
Icon,
Message,
} from "semantic-ui-react";
import { Redirect } from "react-router-dom";
import { call } from "../client_server";
export default class ForgotPass extends Component {
constructor(props) {
super(props);
this.state = {
user: "",
error: {
state: false,
message: "",
},
success: false,
};
}
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
handleSendEmail = (e) => {
e.preventDefault();
const params = {
email: this.state.user,
};
call
.initResetPassword(params)
.then((res) => {
console.log(res);
if (res.status === 200) {
this.setState({ success: true });
}
if (res.status === "Errore") {
this.setState({ error: { state: true, message: "Errore" } });
}
//set a message that an email has been sent
})
.catch((err) => {
console.log(err);
});
};
render() {
if (this.state.success) {
return <Redirect to="sent-email" />;
}
return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Reset Password
</Header>
<Form
size="large"
style={{ marginTop: "2em" }}
error={this.state.error.state}
>
<Message
error
header="Send E-mail Error"
content={this.state.error.message}
/>
<Form.Input
icon="address card outline"
iconPosition="left"
placeholder="Username or E-mail"
name="user"
type="text"
onChange={this.onChangeHandler}
required
/>
<Button
color="blue"
fluid
size="large"
onClick={this.handleSendEmail}
>
Send E-mail
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
);
}
}