text: import React from "react";
  import { Link } from "react-router-dom";
  import axios from 'axios';
  
  // reactstrap components
  import {
    Button,
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Container,
    Col,
  } from "reactstrap";
  
  // core components
  import ExamplesNavbar from "components/Navbars/ExamplesNavbar.js";
  import TransparentFooter from "components/Footers/TransparentFooter.js";
  import { stat } from "fs";
  
  function LoginPage() {
    const [items, setArray] = React.useState([]);
    const [state, setState] = React.useState({ username: "", password: "" });
    const handleSubmit = e => {
      e.preventDefault();
      var bodyFormData = new FormData();
      bodyFormData.append('username',''+state.username);
      bodyFormData.append('password',''+state.password);
  
  
        axios({
          method:'post',
          url: 'http://192.168.43.238:8000/userlogin',
          data: bodyFormData,
          headers: {'Content-Type': 'form-data' }
        })
            .then(function(response){
            console.log(response);
           // setArray(response.data.articles);
        })
            .catch(function(error){
            setArray([])
        });
      //console.log({body: bodyFormData});
    };
    const handleChange = e => {
      setState({
        ...state,
        [e.target.name]: e.target.value
      });
    };
    
  
    // function getList(e) {
    //   var bodyFormData = new FormData();
    //   bodyFormData.append('username',textEmail.current.value);
    //   bodyFormData.append('password',textPassword.current.value);
    //     axios({
    //       method:'post',
    //       url: 'http://localhost:8000/userlogin',
    //       data: bodyFormData
    //     })
    //         .then(function(response){
    //         console.log(response);
    //        // setArray(response.data.articles);
    //     })
    //         .catch(function(error){
    //         setArray([])
    //     });
      
    // }
  
  
    const [firstFocus, setFirstFocus] = React.useState(false);
    const [lastFocus, setLastFocus] = React.useState(false);
    React.useEffect(() => {
      document.body.classList.add("login-page");
      document.body.classList.add("sidebar-collapse");
      document.documentElement.classList.remove("nav-open");
      window.scrollTo(0, 0);
      document.body.scrollTop = 0;
      return function cleanup() {
        document.body.classList.remove("login-page");
        document.body.classList.remove("sidebar-collapse");
      };
    }, []);
    return (
      <>
        <ExamplesNavbar />
        <div className="page-header clear-filter" filter-color="blue">
          <div
            className="page-header-image"
            style={{
              backgroundImage: "url(" + require("assets/img/login.jpg") + ")",
            }}
          ></div>
          <div className="content">
            <Container>
              <Col className="ml-auto mr-auto" md="4">
                <Card className="card-login card-plain">
                  <Form action="" className="form" method="" onSubmit={handleSubmit}>
                    <CardHeader className="text-center">
                      <div className="logo-container">
                        
                      </div>
                    </CardHeader>
                    <CardBody>
                      <InputGroup
                        className={
                          "no-border input-lg" +
                          (firstFocus ? " input-group-focus" : "")
                        }
                      >
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="now-ui-icons ui-1_email-85"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input
                          placeholder="Email Address"
                          type="email"
                          name = "username"
                          onChange={handleChange}
                          onFocus={() => setFirstFocus(true)}
                          onBlur={() => setFirstFocus(false)}
                        ></Input>
                      </InputGroup>
                      <InputGroup
                        className={
                          "no-border input-lg" +
                          (lastFocus ? " input-group-focus" : "")
                        }
                      >
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="now-ui-icons text_caps-small"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input
                          placeholder="Password"
                          type="password"
                          name = "password"
                          onChange={handleChange}
                          onFocus={() => setLastFocus(true)}
                          onBlur={() => setLastFocus(false)}
                        ></Input>
                      </InputGroup>
                    </CardBody>
                    <CardFooter className="text-center">
                      <Button
                        block
                        className="btn-round"
                        color="info"
                        type = "submit"
                        size="lg"
                      >
                        Login
                      </Button>
                      <div className="pull-left">
                        <h6>
                          <Link
                            className="link"
                            to = "/signup-page"
                          >
                            Create Account
                          </Link>
                        </h6>
                      </div>
                      <div className="pull-right">
                        <h6>
                          <a
                            className="link"
                            onClick={(e) => e.preventDefault()}
                          >
                            Need Help?
                          </a>
                        </h6>
                      </div>
                    </CardFooter>
                  </Form>
                </Card>
              </Col>
            </Container>
          </div>
          <TransparentFooter />
        </div>
      </>
    );
  }
  
  export default LoginPage;
  