//Login component

import React, { useState } from "react";
import axios from "axios";
import { Form, Button, Card } from "react-bootstrap";
import { withRouter } from "react-router-dom";

const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [token, setToken] = useState("");

  // onChange = event => {
  //   this.setState({ [event.target.name]: event.target.value });
  // };

  const logIn = props => {
    axios
      .post("https://localhost:44396/user/authenticate", {
        username: username,
        password: password
      })
      .then(response => {
        props.onTokenChange(response.data.token);
      });
  };

  return (
    <div className="p-3">
      <h1>Zaloguj</h1>
      <h2>{token}</h2>

      <div className="row">
        <div className="col-6 offset-2">
          <input
            name="email"
            onChange={e => setUsername(e.target.value)}
            placeholder="email"
            className="form-control"
          />
          <input
            name="password"
            onChange={e => setPassword(e.target.value)}
            placeholder="password"
            className="form-control"
          />
        </div>
        <div className="col-2">
          <button onClick={logIn} className="btn btn-success">
            Add Board
          </button>
        </div>
      </div>
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type="text"
            placeholder="Enter email"
            onChange={e => setUsername(e.target.value)}
          />
          <Form.Text className="text-muted">
            We'll never share your email with anyone else.
          </Form.Text>
        </Form.Group>
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            placeholder="Password"
            onChange={e => setPassword(e.target.value)}
          />
        </Form.Group>
      </Form>
      <Button variant="primary" type="submit" onClick={logIn}>
        Zaloguj
      </Button>
    </div>
  );
};

export default Login;


//App component

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Login from "./Components/Login";
import "./App.css";
import DataList from "./Components/DataList";
import Register from "./Components/Register";

const App = () => {
  const [token, setToken] = useState("Test");
  const handleChange = value => {
    setToken(value);
  };
  return (
    <div>
      {token}
      <Router>
        <Switch>
          <Route path="/login">
            <Login onTokenChange={handleChange} />
          </Route>
          <Route path="/visits">
            <DataList />
          </Route>
          <Route path="/register">
            <Register />
          </Route>
        </Switch>
      </Router>
    </div>
  );
};

export default App;