Site icon Bệ Phóng Việt

ReactJS Bài 4: Login layout và xử lý đăng nhập

jphopeblog
hoc lap trinh reactjs
Advertisements

Trong bài này, chúng ta sẽ tiếp tục học cách sử dụng Layout cho các nhóm giao diện khác nhau. Ở các bài trước, ReactJS layout DefaultLayout đã được viết ở dưới dạng component. ReactJS cho phép chúng ta xử dụng layout này bất cứ lúc nào, điển hình trong ứng dụng này, chúng ta áp dụng nó cho màn hình Home và TodoList.

Nhưng vớ màn hình đăng nhập, ứng dụng thường dùng layout khác, đơn giản hơn. Trong bài này, chúng ta sẽ xây dựng 1 reactjs component mới cho layout này, gọi là SimpleLayout.

Xây dựng SimpleLayout

Tạo file src/layouts/SimpleLayout.js với nội dung code:

import React from "react";

const SimpleLayout = ({title = "Title", className, children}) => {
  return (
    <div className="d-flex justify-content-center align-items-center" style={{height: '100vh'}}>
      {children}
    </div>
  );
}

export default SimpleLayout

Screen Login.js

Tạo file src/screens/Login.js có đoạn code:

import React, { Component } from 'react';
import SimpleLayout from '../layouts/SimpleLayout';

const Login = () => {
  return (
    <SimpleLayout>
      <form>
        <h3>Please login.</h3>
          <div className="form-group">
            <label htmlFor="exampleInputEmail1">Email address</label>
            <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputPassword1">Password</label>
            <input type="password" className="form-control" id="exampleInputPassword1" />
          </div>
          <div className='form-group' style={{marginTop: '2vh'}}>
            <button type="submit" className="btn btn-primary">Submit</button>
            &nbsp; <a href="/">Back to Home</a>
          </div>
        </form>
      </SimpleLayout>
    );
}

export default Login;

Chú ý với screen component Login, chúng ta sử dụng const để khai báo reactjs component chứ không sử dụng component class. Điều này để phục vụ cho việc có thể sử dụng navigate để điều hướng người sử dụng sang trang home sau khi login thành công. Bạn có thể đọc thêm tại đây.

Khai báo Route

Để ứng dụng nhận biết được đường path truy cập cho trang Login, chúng ta cần thêm Route /login cho screen này. Bạn mở index.js ở thu mục gốc của dự án và thêm route này vào như sau:

...
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/home" element={<Home />} />
      <Route path="/to-do" element={<TodoList />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  </BrowserRouter>
...

Cập nhật MenuBar

Cuồi cùng, thêm item “Login” vào top menu bar của ứng dụng. Cập nhật reactjs component src/components/MenuBar.jsnhư sau:

<li className="nav-item">
  <a className="nav-link" href="/to-do">To-do</a>
</li>
<li className="nav-item">
  <a className="nav-link" href="/settings">Settings</a>
</li>
<li className="nav-item">
  <a className="nav-link" href="/login">Login</a>
</li>

Chạy thử

Trang mặc định của ứng dụng sẽ hiển thị như sau:

Khi click Login, bạn sẽ thấy form login với layout khác hoàn toàn:

Bạn có thể click “Back to Home” để quay trở về trang mặc định của ứng dụng.

Trong bài tiếp theo, bạn sẽ học cách gọi RESTful Web Service API để thực hiện đăng nhập: ReactJS Bài 5: Gọi API để xử lý đăng nhập user

Exit mobile version