first commit

src/routes/login/components/Login.js

@@ -0,0 +1,222 @@
+import React from 'react';
+// import { withFormsy } from 'formsy-react';
+import APPCONFIG from 'constants/Config';
+import FlatButton from 'material-ui/FlatButton';
+import TextField from 'material-ui/TextField';
+import QueueAnim from 'rc-queue-anim';
+import Dialog from 'material-ui/Dialog';
+
+import Instance from '../../../components/Connection';
+
+class Login extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.setCookie('token', null, 0);
+    this.state = {
+      email: '',
+      pass: '',
+      message: '',
+      open: false,
+      errors: {
+        email: "",
+        pass: ""
+      },
+    }
+
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+
+  setCookie(cname, cvalue, date) {
+    var d = new Date(date * 1000);
+    var expires = "expires=" + d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  }
+
+  componentDidMount() {
+    this.setState(Object.assign(this.state, { email: '', pass: '' }));
+  }
+
+  handleLogin(event, state) {
+    event.preventDefault();
+    var newErrors;
+    var newErrors;
+    var formIsValid;
+
+    if (this.state.pass === "") {
+      Object.assign(this.state, {
+        newErrors: Object.assign(this.state.errors, { pass: "Password is required" })
+      }
+      );
+      formIsValid = false;
+    }
+    else {
+      newErrors: Object.assign(this.state.errors, { pass: "" })
+    }
+
+    if (this.state.email === "") {
+      Object.assign(this.state, {
+        newErrors: Object.assign(this.state.errors, { email: "Email is required" })
+      }
+      );
+      formIsValid = false;
+    }
+    else {
+      newErrors: Object.assign(this.state.errors, { email: "" })
+    }
+
+    if (formIsValid != false) {
+      Instance.setToken(null).post('/v1/authenticate/portal', {
+        email: state.state.email,
+        pass: state.state.pass,
+      }).then(function (res) {
+        let auth = res.data;
+        state.setCookie('token', auth.token, auth.valid_time);
+        localStorage.setItem('loggedUser', JSON.stringify(auth.user));
+
+        Instance.setToken(auth.token);
+
+        location.href = '/#/';
+      }).catch(function (err) {
+        state.setState(Object.assign(state.state, {
+          message: (err.response.data.message),
+          open: true,
+        }));
+      });
+    }
+  }
+
+  handleEmail(event, state) {
+    event.preventDefault();
+    state.setState(Object.assign(state.state, { email: event.currentTarget.value }));
+
+    if (this.state.email === "") {
+      // alert('yup')
+      Object.assign(this.state, {
+        newErrors: Object.assign(this.state.errors, { email: "Email is required" })
+      }
+      );
+      // formIsValid = false;   
+    }
+    else {
+      newErrors: Object.assign(this.state.errors, { email: "" })
+    }
+  }
+
+  handlePass(event, state) {
+    event.preventDefault();
+    state.setState(Object.assign(state.state, { pass: btoa(event.currentTarget.value) }));
+
+    var NewErrors;
+    if (this.state.pass === "") {
+      // alert('yup')
+      Object.assign(this.state, {
+        newErrors: Object.assign(this.state.errors, { pass: "Password is required" })
+      }
+      );
+      // formIsValid = false;   
+    }
+    else {
+      newErrors: Object.assign(this.state.errors, { pass: "" })
+    }
+  }
+
+  handleOpen = () => {
+    // this.setState({ open: true });
+
+    this.setState(Object.assign(this.state, { open: true }));
+  };
+
+  handleClose = () => {
+    this.setState(Object.assign(this.state, { open: false }));
+    // this.setState({ open: false });
+  };
+
+  render() {
+    const actions = [
+      <FlatButton
+        label="Dismiss"
+        primary={true}
+        onClick={this.handleClose}
+      />,
+    ];
+
+    return (
+      <div className="body-inner">
+        <div className="card bg-white">
+          <div className="card-content">
+
+            <section className="logo text-center">
+              <h1><a href="#/">CHM Hub<sup>®</sup></a></h1>
+            </section>
+
+            <form className="form-horizontal">
+              <fieldset>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Email"
+                    errorText={this.state.errors.email}
+                    type="email"
+                    fullWidth
+                    ref="email"
+
+                    onBlur={(event) => this.handleEmail(event, this)}
+                  />
+                </div>
+                <div className="form-group">
+                  <TextField
+                    floatingLabelText="Password"
+
+                    errorText={this.state.errors.pass}
+
+                    // errorText="Use at least 8 characters, including both an uppercase letter and a special character"
+                    type="password"
+                    fullWidth
+                    ref="pass"
+                    onBlur={(event) => this.handlePass(event, this)}
+                  />
+                </div>
+              </fieldset>
+            </form>
+          </div>
+          <div className="card-action no-border text-right">
+            <a href="#/" className="color-primary" onClick={(event) => this.handleLogin(event, this)}>Login</a>
+          </div>
+        </div>
+
+        <div className="additional-info">
+          {/* <a href="#/sign-up">Sign up</a>
+          <span className="divider-h" /> */}
+          <a href="#/forgot-password">Forgot your password?</a>
+        </div>
+
+        <Dialog
+          title="Login Error"
+          actions={actions}
+          modal={false}
+          open={this.state.open}
+          onRequestClose={this.handleClose}
+        >
+          {this.state.message}
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+const Page = () => (
+  <div className="page-login">
+    <div className="main-body">
+      <QueueAnim type="bottom" className="ui-animate">
+        <div key="1">
+
+          <Login />
+        </div>
+      </QueueAnim>
+    </div>
+  </div>
+);
+
+module.exports = Page;