First Commit

account/src/client/User/SendResetPassword.js

@@ -0,0 +1,115 @@
+import React, { Component } from "react";
+import {
+  Container,
+  Header,
+  Form,
+  Grid,
+  Segment,
+  Input,
+  Button,
+  Message,
+  Icon
+} from "semantic-ui-react";
+import { Link } from "react-router-dom";
+
+const returnStyle = {
+  marginTop: "30px"
+};
+
+class SendResetPassword extends Component {
+
+  constructor(props) {
+    super(props);
+    this.handleSendResetPassword = this.handleSendResetPassword.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+  state = {
+    checkInputMessages: "",
+    email: "",
+    emailError: false,
+    sentReset: false
+  };
+
+  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
+
+  handleSendResetPassword(event) {
+
+
+    if (this.state.email === "") {
+      this.setState({ emailError: true, checkInputMessages:  "Email is required"});
+
+    } else {
+      this.setState({ emailError: false });
+
+      this.props.sendResetPassword({email: this.state.email}).then(resetMessage => {
+        if (resetMessage) {
+          // report to the user is there was a problem during login
+
+          this.setState({resetSent: false, checkInputMessages: resetMessage, emailError: true});
+        } else {
+        this.setState({resetSent: true});
+      }
+      });
+    }
+  }
+  render() {
+    var resetMessage = "";
+    if (this.state.checkInputMessages.length) {
+      resetMessage = (
+        <Message compact warning icon>
+          <Icon name="lightning" />
+          <Message.Content>
+            <Message.Header>Problems...</Message.Header>
+
+              {this.state.checkInputMessages}
+
+          </Message.Content>
+        </Message>
+      );
+    }
+    return (
+
+
+          <Grid verticalAlign='middle'  centered>
+    <Grid.Row>
+
+      <Grid.Column width="6">
+        { !this.state.resetSent ? (
+<div>
+        <h2>Forgot your password?</h2>
+        <Form className="raised padding segment" onSubmit={this.handleSubmit}>
+          Enter the email address for your account.
+          <Form.Field>
+            <Form.Input
+              type="text"
+              name="email"
+              onChange={this.handleInputChange}
+              error={this.state.emailError}
+              label="Email"
+              placeholder="Email..."
+            />
+          </Form.Field>
+          <Button
+            size="large"
+            content="Reset Password"
+            onClick={this.handleSendResetPassword}
+            fluid
+          />
+        </Form>
+        {resetMessage}
+        </div>
+      )
+            :( <Segment raised padded='very'>
+              <h2>Reset Link Sent </h2>
+              <div>An email with a link to reset your password was sent to: {this.state.email}</div>
+              <Link to="/" style={returnStyle}><Icon name="left arrow"/>Back to OpenMHz</Link>
+              </Segment>
+            )}
+      </Grid.Column>
+    </Grid.Row>
+  </Grid>
+    );
+  }
+}
+
+export default SendResetPassword;