ReactJS: Viết Login Form đơn giản

Chúng ta cùng viết một màn hình đơn giản cho phép người dùng đăng nhập hoặc đăng ký vào một ứng dụng như sau:

Khi nhấn vào nút Login hay Register chúng ta sẽ có thể nhập username và password:

Hiện tại hai Form chưa được style, đơn giản chúng ta chỉ lên sườn cho HTML và các elements trước như sau:

import '@reach/dialog/styles.css'
import * as React from 'react'
import ReactDOM from 'react-dom'
import {Dialog} from '@reach/dialog'

import {Logo} from './components/logo'

function Form({onSubmit, buttonText}) {
  const handleSubmit = e => {
    e.preventDefault()
    // lấy value của các element trong một form
    const {username, password} = e.target.elements
    onSubmit({username: username.value, password: password.value})
  }
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username</label>
        <input id="username" type="text" />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input id="password" type="password" />
      </div>
      <div>
        <button type="submit">{buttonText}</button>
      </div>
    </form>
  )
}

function App() {
  const [modalOpen, setModalOpen] = React.useState('none')

  const login = data => {
    console.log(data)
  }

  const register = data => {
    console.log(data)
  }

  return (
    <div>
      <Logo width="80" height="80" />
      <h1>My Listing</h1>
      <div>
        <button
          onClick={() => {
            setModalOpen('login')
          }}
        >
          Login
        </button>
      </div>
      <div>
        <button
          onClick={() => {
            setModalOpen('register')
          }}
        >
          Register
        </button>
      </div>
      <Dialog aria-label="Form" isOpen={modalOpen === 'login'}>
        <div>
          <button
            onClick={() => {
              setModalOpen('none')
            }}
          >
            Close
          </button>
        </div>
        <h3>Login</h3>
        <Form onSubmit={login} buttonText="Login" />
      </Dialog>
      <Dialog aria-label="Form" isOpen={modalOpen === 'register'}>
        <div>
          <button
            onClick={() => {
              setModalOpen('none')
            }}
          >
            Close
          </button>
        </div>
        <h3>Register</h3>
        <Form onSubmit={register} buttonText="Register" />
      </Dialog>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Sử dụng @reach Dialog để mở Modal Dialog khi người dùng nhấn nút Login hoặc Register.

Ở bài sau chúng ta sẽ bắt đầu style cho trang Login đẹp hơn với @emotion styled component.

Tham khảo: Bookshelf của Kent C.Dodds