import React from "react"; import { withRouter } from "react-router-dom"; import "../style/login.css"; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; class Login extends React.Component { async login() { await fetch("/login", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify(this.state), }).then((result) => { if(result.status !== 200){ toast("Incorrect Username or Password"); }else{ result.json().then((res) => { localStorage.setItem("jwt", res.jwt); this.props.history.push("/uploadmusic"); window.location.reload(); }); } }); // if ( // localStorage.getItem("jwt") !== null && // localStorage.getItem("jwt") !== "undefined" // ) { // this.props.history.push("/uploadmusic"); // window.location.reload(); // } else { // this.props.history.push("/login"); // toast("Incorrect Username or Password"); // } } render() { return ( <div className="container-fluid column login"> <h2>Sign In To MusicHost</h2> <div className="container-sm shadow-1 br4 mx-auto pa4"> <div className="fontuser"> <i className="fas fa-user"></i> <input type="text" className="f6 br4 pa2 ba bg-transparent w-100 shadow-1" placeholder="Enter Username" onChange={(e) => { this.setState({ username: e.target.value }); }} /> </div> <br /> <div className="fontpassword"> <i className="fas fa-lock"></i> <input type="password" className="f6 br4 pa2 ba bg-transparent w-100 shadow-1" placeholder="Enter Password" onChange={(e) => { this.setState({ password: e.target.value }); }} /> </div> <br /> <button className="btn btn-primary btn-lg grow" onClick={() => this.login()} > {" "} Login{" "} </button> <ToastContainer position="top-center" autoClose={5000} hideProgressBar={false} newestOnTop={false} closeOnClick rtl={false} pauseOnFocusLoss draggable pauseOnHover /> <p> <a href="/login">Forgot Password ?</a> </p> </div> </div> ); } } export default withRouter(Login);