Search⌘ K
Home
Courses
Beginning Node.js, Express & MongoDB Development

Creating the Login Component

Learn how to set up login functionality in React.

We'll cover the following...

In this lesson, we’ll learn how to implement the login functionality for our application. It should be noted that we won’t be doing a full-featured authentication system in this lesson, but the lesson will serve as a template for us to fill in our own full-fledged authentication implementation.

import React, {useState, useEffect } from 'react'
import MovieDataService from "../services/movies"
import { Link } from "react-router-dom"
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Container from 'react-bootstrap/Container';
import Card from 'react-bootstrap/Card';

const MoviesList = props => { 
  
  const [movies, setMovies] = useState([])
  const [searchTitle, setSearchTitle] = useState("")
  const [searchRating, setSearchRating] = useState("")
  const [ratings, setRatings] = useState(["All Ratings"])




  useEffect(() =>{ 
    retrieveMovies()
    retrieveRatings()
  },[])




  const retrieveMovies = () =>{
    MovieDataService.getAll()
      .then(response =>{
        console.log(response.data)
        setMovies(response.data.movies) 
      })
      .catch( e =>{
        console.log(e)
      })
  }

  const retrieveRatings = () =>{
    MovieDataService.getRatings()
      .then(response =>{
        console.log(response.data)
 	  //start with 'All ratings' if user doesn't specify any ratings
        setRatings(["All Ratings"].concat(response.data)) 
      })
      .catch( e =>{
        console.log(e)
      })
  }  

  const onChangeSearchTitle = e => {
    const searchTitle = e.target.value
    setSearchTitle(searchTitle);
  }

  const onChangeSearchRating = e => {
    const searchRating = e.target.value
    setSearchRating(searchRating);
  }  

  const find =(query, by) =>{
    MovieDataService.find(query,by)
      .then(response =>{
        console.log(response.data)
        setMovies(response.data.movies)
      })
      .catch(e =>{
        console.log(e)
      })
  }

  const findByTitle = () => {
    find(searchTitle, "title")    
  }
  const findByRating = () => {
    if(searchRating === "All Ratings"){
      retrieveMovies()
    }
    else{
      find(searchRating, "rated")
    }
  }  

  return (
    <div className="App">   
      <Container>
        <Form>        
          <Row>
            <Col>
              <Form.Group>          
                <Form.Control 
                  type="text" 
                  placeholder="Search by title" 
                  value={searchTitle} 
                  onChange={onChangeSearchTitle} 
                />
              </Form.Group>        
              <Button 
                variant="primary" 
                type="button" 
                onClick={findByTitle}
              > 
                Search         
              </Button>
            </Col>
            <Col>
              <Form.Group>
                <Form.Control as="select" onChange={onChangeSearchRating} >
                  {ratings.map(rating =>{
                    return(
                      <option value={rating}>{rating}</option>
                    )
                  })}
                </Form.Control>       
              </Form.Group>    
              <Button 
                  variant="primary" 
                  type="button" 
                  onClick={findByRating}
              > 
                Search         
              </Button>  
            </Col>
          </Row>              
        </Form> 
        <Row>
            {movies.map((movie) =>{
              return(
                <Col>
                  <Card style={{ width: '18rem' }}>
                    <Card.Img src={movie.poster+"/100px180"} />
                    <Card.Body>
                      <Card.Title>{movie.title}</Card.Title>
                      <Card.Text>
                        Rating: {movie.rated}                        
                      </Card.Text>
                      <Card.Text>{movie.plot}</Card.Text>                                            
                      <Link to={"/movies/"+movie._id} >View Reviews</Link>
                    </Card.Body>
                  </Card>            
                </Col>                
              )
            })}
        </Row>          
      </Container>        
    </div>
  );

}

export default MoviesList;
Initial files we will build on

Setting up the Login component

Fill in the login.js file with the following code:

C++
import React, {useState} from 'react'
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
 
const Login = props => {
  
  const [name, setName] = useState("")
  const [id, setId] = useState("")  
  const onChangeName = e => {
    const name = e.target.value
    setName(name);
  }  
  const onChangeId = e => {
    const id = e.target.value
    setId(id);
  }  
  const login = () => {
    props.login({name: name, id: id})
    props.history.push('/')
  }  
  return(
    <div>
      <Form>
        <Form.Group>
          <Form.Label>Username</Form.Label>
          <Form.Control 
            type="text" 
            placeholder="Enter username" 
            value={name} 
            onChange={onChangeName}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>ID</Form.Label>
          <Form.Control 
            type="text" 
            placeholder="Enter id" 
            value={id} 
            onChange={onChangeId}
          />
        </Form.Group>        
        <Button variant="primary" onClick={login}>
          Submit
        </Button>
      </Form>    
    </div>
  )
}
export default Login;

Lines 7–8: We ...