Login Page

LoginPage.jsx

import React, { useState } from "react"

// localhost
import { localhost } from '../../backendConstants'

// components
import CreateAccountModal from '../../components/Modals/CreateAccountModal'
import NeedHelpModal from '../../components/Modals/NeedHelpModal'

// third party packages
import axios from 'axios'

// reactstrap components
import {
  Button,
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Form,
  Input,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Container,
  Col
} from "reactstrap"

// core components
import IndexNavbar from '../../components/Navbars/IndexNavbar'
import TransparentFooter from "components/Footers/TransparentFooter"

function LoginPage (props) {
  const [firstFocus, setFirstFocus] = useState(false)
  const [lastFocus, setLastFocus] = useState(false)
  const [username, setUsername] = useState(null)
  const [password, setPassword] = useState(null)
  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
    document.title = 'LoginPage'
    return function cleanup () {
      document.body.classList.remove("login-page")
      document.body.classList.remove("sidebar-collapse")
    }
  })

  const handleUsernameChange = (e) => {
    setUsername(e.target.value)
  }

  const hanldePasswordChange = (e) => {
    setPassword(e.target.value)
  }

  const post = () => {
    axios.post(
      `${localhost}/authtoken/`,
      {
        username: username,
        password: password
      }
    )
      .then(
        (response) => {
          console.log(response)
          props.token(response.data)
          props.setIsLoggedIn()
          props.history.push('/')
        }
      )
      .catch(
        (error) => {
          console.log(error)
        }
      )
  }
  return (
    <>
      <IndexNavbar />
      <div className="page-header">
        <div
          className="page-header-image"
          style={{
            backgroundColor: 'black'
          }}
        ></div>
        <div className="content">
          <Container>
            <Col className="ml-auto mr-auto" md="4">
              <Card className="card-login card-plain">
                <Form action="" className="form" method="post">
                  <CardHeader className="text-center">
                    <div className="logo-container">
                      <img
                        alt="..."
                        src={require('assets/img/NerdRichLogo.svg')}
                      ></img>
                    </div>
                  </CardHeader>
                  <CardBody>
                    <InputGroup
                      className={
                        "no-border input-lg" +
                        (firstFocus ? " input-group-focus" : "")
                      }
                    >
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className='fas fa-user'></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input
                        placeholder="Username..."
                        type="text"
                        onFocus={() => setFirstFocus(true)}
                        onBlur={() => setFirstFocus(false)}
                        onChange={handleUsernameChange}
                      ></Input>
                    </InputGroup>
                    <InputGroup
                      className={
                        "no-border input-lg" +
                        (lastFocus ? " input-group-focus" : "")
                      }
                    >
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className='fas fa-key'></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input
                        placeholder="Password..."
                        type="text"
                        onFocus={() => setLastFocus(true)}
                        onBlur={() => setLastFocus(false)}
                        onChange={hanldePasswordChange}
                      ></Input>
                    </InputGroup>
                  </CardBody>
                  <CardFooter className="text-center">
                    <Button
                      block
                      className="btn-round"
                      color="info"
                      onClick={post}
                      size="lg"
                    >
                      Login
                    </Button>
                    <div className="pull-left">
                      <CreateAccountModal />
                    </div>
                    <div className="pull-right">
                      <NeedHelpModal />
                    </div>
                  </CardFooter>
                </Form>
              </Card>
            </Col>
          </Container>
        </div>
        <TransparentFooter />
      </div>
    </>
  )
}
export default LoginPage