Vidmark

Login.js

import React, { Component } from "react";
import firebase from "../config/firebase";
import {
  FormGroup,
  ControlLabel,
  FormControl,
  Button,
  Form
} from "react-bootstrap";
import "./components-css/login.css";

class LogIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      error: { message: "" }
    };
    // this.userLogin = this.userLogin.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({ [name]: value });
  }
  handleSubmit(e) {
    e.preventDefault();
    debugger;
    const { email, password } = this.state;
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(user => {
        console.log("logged in user", user);
      })
      .catch(error => {
        console.log("error", error);
      });
  }

  // handleSubmit = async e => {
  //     e.preventDefault();
  //     try {
  //         await firebase.signIn(this.state.email, this.state.password);
  //         this.props.userHasAuthenticated(true);
  //         this.props.history.push("/dashboard");
  //     } catch (e) {
  //         alert(e.message);
  //     }
  // }

  render() {
    return (
      <div className="Login">
        <Form onSubmit={this.handleSubmit}>
          <FormGroup controlId="email" bsSize="large">
            <ControlLabel>Email</ControlLabel>
            <FormControl
              type="email"
              name="email"
              onChange={this.handleChange}
            />
          </FormGroup>
          <FormGroup controlId="password" bsSize="large">
            <ControlLabel>Password</ControlLabel>
            <FormControl
              name="password"
              onChange={this.handleChange}
              type="password"
            />
          </FormGroup>
          <Button bsSize="large" type="submit">
            Login
          </Button>
        </Form>
      </div>
    );
  }
}

export default LogIn;

Navigation.js

import React from "react";
import { Link } from "react-router-dom";
import "./components-css/dashboard.css";

export default class Navigation extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-default" role="navigation">
        <div className="navbar-header navbar-left">
          <Link to="/" type="button" className="btn btn-default navbar-btn">
            <span className="glyphicon glyphicon-home" />Vidmark
          </Link>
        </div>
        <div className="navbar-header pull-right">
          <Link
            to="/register"
            type="button"
            className="btn second-button btn-default navbar-btn"
          >
            Register
          </Link>
          <Link
            to="/login"
            type="button"
            className="btn second-button btn-default navbar-btn"
          >
            Login
          </Link>
        </div>
      </nav>
    );
  }
}

Register.js

import React, { Component } from "react";
import firebase from "../config/firebase";
import {
  FormGroup,
  ControlLabel,
  FormControl,
  Button,
  Form
} from "react-bootstrap";
import "./components-css/login.css";

class LogIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      error: { message: "" }
    };
    // this.userLogin = this.userLogin.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({ [name]: value });
  }
  handleSubmit(e) {
    e.preventDefault();
    debugger;
    const { email, password } = this.state;
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(user => {
        console.log("logged in user", user);
      })
      .catch(error => {
        console.log("error", error);
      });
  }

  // handleSubmit = async e => {
  //     e.preventDefault();
  //     try {
  //         await firebase.signIn(this.state.email, this.state.password);
  //         this.props.userHasAuthenticated(true);
  //         this.props.history.push("/dashboard");
  //     } catch (e) {
  //         alert(e.message);
  //     }
  // }

  render() {
    return (
      <div className="Login">
        <Form onSubmit={this.handleSubmit}>
          <FormGroup controlId="email" bsSize="large">
            <ControlLabel>Email</ControlLabel>
            <FormControl
              type="email"
              name="email"
              onChange={this.handleChange}
            />
          </FormGroup>
          <FormGroup controlId="password" bsSize="large">
            <ControlLabel>Password</ControlLabel>
            <FormControl
              name="password"
              onChange={this.handleChange}
              type="password"
            />
          </FormGroup>
          <Button bsSize="large" type="submit">
            Register
          </Button>
        </Form>
      </div>
    );
  }
}

export default LogIn;