Feature: add authentication, feeds and menu page

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.27.0",
         "react-scripts": "5.0.1",
+        "validator": "^13.12.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -18988,6 +18989,15 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "validator": "^13.12.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import HomePage from './pages/HomePage';
+import BasicTemplate from './templates/BasicTemplate';
 import './styles/App.css';
 // index.js hoặc App.js
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -11,7 +12,9 @@ function App() {
     <Router>
       <Routes>
         {/* Định tuyến trang chủ */}
-        <Route path="/" element={<HomePage />} />
+        <Route path="/" element={<BasicTemplate/>} >
+          <Route path="*" element={<HomePage/>} />
+        </Route>
         {/* Có thể thêm các route khác nếu cần */}
       </Routes>
     </Router>

frontend/src/index.js

@@ -1,13 +1,47 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import './styles/index.css';
-import App from './App';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import ErrorPage from './pages/ErrorPage';
+import HomePage from './pages/HomePage';
 import reportWebVitals from './reportWebVitals';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from './pages/RegisterPage';
+import NewsPage from './pages/NewsPage';
+import MenuPage from './pages/MenuPage';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <HomePage />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/login",
+    element: <LoginPage />,
+    errorElement: <ErrorPage />
+  },
+  {
+    path: "/register",
+    element: <RegisterPage/>,
+    errorElement: <ErrorPage/>
+  },
+  {
+    path: "/news",
+    element: <NewsPage/>,
+    errorElement: <ErrorPage/>
+  },
+  {
+    path: "/menu",
+    element: <MenuPage/>
+  }
+]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router}/>
   </React.StrictMode>
 );
 

frontend/src/molecules/AboutUsSection.js

@@ -2,8 +2,8 @@ import { Container, Row, Col } from "react-bootstrap";
 
 export default function AboutUsSection () {
     return (<>
-    <Container id="about-us">
-        <h1 className="my-4">CATS Shop
+    <Container id="about-us" className="my-5">
+        <h1 className="my-4 text-cen">CATS Shop
         <small> - We code for fun </small>
         </h1>
 

frontend/src/molecules/ContactSection.js

@@ -2,8 +2,8 @@ import { Container, Row, Col } from "react-bootstrap";
 
 export default function ContactSection() {
     return (
-            <Container id="contact" className="align-items-center">
-                <h1>Thông tin liên hệ</h1>
+            <Container id="contact" className="my-5 align-items-center">
+                <h1 className="text-center mb-5">Thông tin liên hệ</h1>
                 <Row md={3}>
                     {/* Cột 1: Số điện thoại liên hệ */}
                     <Col>

frontend/src/molecules/Navbar.js

@@ -3,18 +3,31 @@ import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import Button from 'react-bootstrap/Button';
 import { Stack } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
 
-export default function ANavbar( {isLoggedIn = false, user} ) {
+export default function ANavbar() {
+
+    const navigate = useNavigate();
+    
+    function handleLogout() {
+        sessionStorage.setItem('isLoggedIn','false');
+        sessionStorage.removeItem('username');
+        sessionStorage.removeItem('cart');
+        navigate('/');
+    }
+
+    let username = sessionStorage.getItem('username');
+    let isLoggedIn = sessionStorage.getItem('isLoggedIn');
 
     let userContent;
-    if (isLoggedIn === true) {
+    if (isLoggedIn === 'true') {
         userContent = <>
             <Stack direction='horizontal' gap={2}>
                 <Button href="/userinfo" variant='primary'>
-                    Xin chào, {user.name}
+                    Xin chào, {username}
                 </Button>
                 {' '}
-                <Button href="/logout" variant='outline-primary'>
+                <Button onClick={handleLogout} variant='outline-primary'>
                     Đăng xuất
                 </Button>
             </Stack>
@@ -34,7 +47,7 @@ export default function ANavbar( {isLoggedIn = false, user} ) {
     }
 
     return (
-        <Navbar expand="lg" className="bg-body-tertiary" sticky='top' >
+        <Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' >
             <Container>
                 <Navbar.Brand href="/">
                     <img
@@ -50,12 +63,12 @@ export default function ANavbar( {isLoggedIn = false, user} ) {
                 <Navbar.Collapse id="basic-navbar-nav">
                     <Nav className="me-auto">
                         {/* These are the navigators */}
-                        <Nav.Link href="#home">Trang chủ</Nav.Link>
-                        <Nav.Link href="#about-us">Về chúng tôi</Nav.Link>
-                        <Nav.Link href="#news">Tin tức</Nav.Link>
-                        <Nav.Link href="#store">Chi nhánh</Nav.Link>
-                        <Nav.Link href="#menu">Menu</Nav.Link>
-                        <Nav.Link href="#contact">Liên hệ</Nav.Link>
+                        <Nav.Link href="/#home">Trang chủ</Nav.Link>
+                        <Nav.Link href="/#about-us">Về chúng tôi</Nav.Link>
+                        <Nav.Link href="/#news">Tin tức</Nav.Link>
+                        <Nav.Link href="/#store">Chi nhánh</Nav.Link>
+                        <Nav.Link href="/#menu">Menu</Nav.Link>
+                        <Nav.Link href="/#contact">Liên hệ</Nav.Link>
                     </Nav>
                     {userContent}
                 </Navbar.Collapse>

frontend/src/organisms/MenuSection.js

@@ -18,16 +18,16 @@ function MenuSection() {
   const countCarouselSlides = 4;
 
   return (
-    <Container id="menu" className="text-center justify-content-center align-items-center">
-      <h1>Menu</h1>
-      <Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
+    <Container id="menu" className="text-center justify-content-center align-items-center my-5">
+      <h1 className='mb-5'>Menu</h1>
+      <Carousel as='a' href='/menu' activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
         {Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (
           <Carousel.Item key={slideIndex}>
             <div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
               <img
                 className="img-fluid"
                 src="/placeholder4.jpg"
-                alt="a placeholder"
+                alt="a placeholder"                
                 style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
               />
             </div>

frontend/src/organisms/NewsSection.js

@@ -1,17 +1,26 @@
 import { Container, Col, Row } from 'react-bootstrap';
 import NewsItem from '../molecules/NewsItem';
 
-function NewsSection( {newsFeeds} ) {
+function NewsSection() {
+    
+    const newsFeeds = [
+        { title: 'Feed 1', text: 'This is the first feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
+        { title: 'Feed 2', text: 'This is the second feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
+        { title: 'Feed 3', text: 'This is the third feed', imageSrc: '/placeholder1.jpg', feedHref: ''}
+    ];
+   
     return (
-        <Container id="news" className="text-center justify-content-center align-items-center">
-            <h1>Tin tức</h1>
+        <Container id="news" className="text-center justify-content-center align-items-center my-5">
+            <h1 className='mb-5'>Tin tức</h1>
             <Row xs={1} md={2} xl={3} className="g-4">
                 {Array.from(newsFeeds).map((feed, idx) => (
                     <Col key={idx}>
                         <NewsItem title={feed.title}
                             text={feed.text}
                             imageSrc={feed.imageSrc}
-                            feedHref={feed.feedHref}>
+                            // feedHref={feed.feedHref}
+                            feedHref="/news" //demo
+                            >
                         </NewsItem>
                     </Col>
                 ))}

frontend/src/organisms/StoreSection.js

@@ -1,10 +1,17 @@
 import { Container, Col, Row } from 'react-bootstrap';
 import StoreItem from '../molecules/StoreItem';
 
-function StoreSection({ stores }) {
+function StoreSection() {
+    
+    const stores = [
+        { storeName: 'Store 1', address: 'Address 1', imageSrc: '/placeholder2.jpg' }, 
+        { storeName: 'Store 2', address: 'Address 2', imageSrc: '/placeholder2.jpg' },
+        { storeName: 'Store 3', address: 'Address 3', imageSrc: '/placeholder2.jpg' },
+    ];
+
     return (
-        <Container id="store" className="text-center justify-content-center align-items-center">
-            <h1>Các chi nhánh</h1>
+        <Container id="store" className="text-center justify-content-center align-items-center my-5">
+            <h1 className='mb-5'>Các chi nhánh</h1>
             <Row className="align-items-center">
                 <Col xs={12} md={4} className="d-flex justify-content-center align-items-center">
                     Đây là các chi nhánh đang mở, chưa mở, sắp mở và có thể là sẽ không mở

frontend/src/pages/ErrorPage.js

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

frontend/src/pages/HomePage.js

@@ -1,41 +1,28 @@
 // pages/HomePage.js
 // import React, { useState } from 'react';
-import ANavbar from '../molecules/Navbar';
 import AboutUsSection from '../molecules/AboutUsSection';
 import NewsSection from '../organisms/NewsSection';
 import StoreSection from '../organisms/StoreSection';
 import MenuSection from '../organisms/MenuSection';
-import ContactSection from '../molecules/ContactSection';
+import BasicTemplate from '../templates/BasicTemplate';
 
 function HomePage () {
     // const [isLoggedIn, setIsLoggedIn] = useState(false);
     // const [user, setUser] = useState({ name: 'User' });
 
-    const newsFeeds = [
-        { title: 'Feed 1', text: 'This is the first feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
-        { title: 'Feed 2', text: 'This is the second feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
-        { title: 'Feed 3', text: 'This is the third feed', imageSrc: '/placeholder1.jpg', feedHref: ''}
-    ];
-    const stores = [
-        { storeName: 'Store 1', address: 'Address 1', imageSrc: '/placeholder2.jpg' }, 
-        { storeName: 'Store 2', address: 'Address 2', imageSrc: '/placeholder2.jpg' },
-        { storeName: 'Store 3', address: 'Address 3', imageSrc: '/placeholder2.jpg' },
-    ];
-   
-
     return (
-        <>
-            <ANavbar id="home"></ANavbar>
+        <BasicTemplate content={
+            (<>
             <AboutUsSection></AboutUsSection>
             <br></br>
-            <NewsSection newsFeeds={newsFeeds}></NewsSection>
-            <br></br>
-            <StoreSection stores={stores}></StoreSection>
+            <NewsSection />
             <br></br>
-            <MenuSection></MenuSection>
+            <StoreSection />
             <br></br>
-            <ContactSection></ContactSection>
-        </>
+            <MenuSection />
+            </>)
+        }>
+        </BasicTemplate>
     );
 };
 

frontend/src/pages/LoginPage.js

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Alert, Container, Form, Row, Col, Button, Card } from "react-bootstrap";
+import BasicTemplate from "../templates/BasicTemplate";
+import { useNavigate } from "react-router-dom";
+
+export default function LoginPage() {
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+
+    const navigate = useNavigate();
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Validate password and confirm password match
+        if (password.length === 0) {
+            setError('Hãy nhập mật khẩu');
+        } else if (username.length === 0) {
+            setError('Tên đăng nhập không thể trống')
+        } else {
+            setError('');
+            sessionStorage.setItem('username','testUser');
+            sessionStorage.setItem('isLoggedIn','true');
+            sessionStorage.setItem('cart','{}');
+            // Xử lý submit form ở đây (ví dụ: gọi API đăng nhập)
+            console.log('Đăng nhập thành công', { username, password });
+            navigate('/');
+        }
+    };
+
+    return (
+        <BasicTemplate content={
+            (<Container fluid className="d-flex justify-content-center mt-5">
+                <Row>
+                    <Col xs={1} md={2}></Col>
+                    <Col xs={10} md={8}>
+                        <Card style={{ width: '30rem' }} className='justify-content-center'>
+                            <Card.Header>
+                                <Card.Title className='mt-1 text-center'>Đăng nhập</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+                                <Form onSubmit={handleSubmit} >
+                                    {error && <Alert variant="danger">{error}</Alert>}
+
+                                    <Form.Group controlId="username" className='mb-3'>
+                                        <Form.Label>Tên đăng nhập</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            placeholder="Tên đăng nhập"
+                                            onChange={(e) => setUsername(e.target.value)}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="password" className='mb-3'>
+                                        <Form.Label>Mật khẩu</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            placeholder="Mật khẩu"
+                                            onChange={(e) => setPassword(e.target.value)}
+                                        />
+                                    </Form.Group>
+                                    <div className='d-flex justify-content-between align-items-center'>
+                                        <a href="/register" className='me-2'>Đăng ký</a>
+                                        <Button type="submit" className='me-2'>Đăng nhập</Button>
+                                        <a href="/forgot-password" className='me-2'>Quên mật khẩu</a>
+                                    </div>
+
+                                </Form>
+                            </Card.Body>
+                        </Card>
+
+                    </Col>
+                    <Col xs={1} md={2}></Col>
+                </Row>
+            </Container>)
+        }>
+        </BasicTemplate>
+    );
+}

frontend/src/pages/MenuPage.js

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { Modal, Button, Container, Row, Col, Tab, Tabs } from 'react-bootstrap';
+import MenuItem from '../molecules/MenuItem';
+import BasicTemplate from '../templates/BasicTemplate';
+function MenuPage() {
+    const [key, setKey] = useState('cat1');
+    const [selectedDish, setSelectedDish] = useState(null);
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    function handleShow(dish) {
+        setSelectedDish(dish);  // Set the selected dish to state
+        setShow(true);          // Show the modal
+    }
+
+    const menuItems1 = [
+        { name: 'Món 1 thể loại 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 2 thể loại 1', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 3 thể loại 1', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
+    ];
+
+    const menuItems2 = [
+        { name: 'Món 1 thể loại 2', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 2 thể loại 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
+    ];
+
+    const menuItems3 = [
+        { name: 'Món 1 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 2 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 3 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 4 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 5 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
+        { name: 'Món 6 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
+    ];
+
+    return <BasicTemplate content={(
+        <Container fluid className='my-5'>
+            <>
+                <Modal show={show} onHide={handleClose}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>{selectedDish?.name}</Modal.Title> {/* Dish name in the title */}
+                    </Modal.Header>
+                    <Modal.Body>
+                        <p>{selectedDish?.description}</p>  {/* Dish description */}
+                        <img src={selectedDish?.imageSrc} alt={selectedDish?.name} style={{ width: '100%' }} />  {/* Dish image */}
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={handleClose}>
+                            Close
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+            </>
+            <h1 className='text-center mb-5'>Thực đơn</h1>
+            <Row>
+                <Col xs={1} md={2}></Col>
+                <Col xs={10} md={8}>
+                    <Tabs
+                        id="controlled-tab-example"
+                        activeKey={key}
+                        onSelect={(k) => setKey(k)}
+                        className="mb-3"
+                    >
+                        <Tab eventKey="cat1" title="Thể loại 1">
+                            <Container fluid className='my-5'>
+                                <Row md={3} className="g-4">
+                                    {menuItems1.map((item, idx) => (
+                                        <Col key={idx} >
+                                            <div onClick={() => handleShow(item)}>
+                                                <MenuItem
+                                                    dishName={item.name}
+                                                    description={item.description}
+                                                    imageSrc={item.imageSrc}
+                                                />
+                                            </div>
+
+                                        </Col>
+                                    ))}
+                                </Row>
+                            </Container>
+                        </Tab>
+                        <Tab eventKey="cat2" title="Thể loại 2">
+                            <Container fluid className='my-5'>
+                                <Row md={3} className="g-4">
+                                    {menuItems2.map((item, idx) => (
+                                        <Col key={idx}>
+                                            <div onClick={() => handleShow(item)}>
+                                                <MenuItem
+                                                    dishName={item.name}
+                                                    description={item.description}
+                                                    imageSrc={item.imageSrc}
+                                                />
+                                            </div>
+                                        </Col>
+                                    ))}
+                                </Row>
+                            </Container>
+                        </Tab>
+                        <Tab eventKey="cat3" title="Thể loại 3">
+                            <Container fluid className='my-5'>
+                                <Row md={3} className="g-4">
+                                    {menuItems3.map((item, idx) => (
+                                        <Col key={idx}>
+                                            <div onClick={() => handleShow(item)}>
+                                                <MenuItem
+                                                    dishName={item.name}
+                                                    description={item.description}
+                                                    imageSrc={item.imageSrc}
+                                                />
+                                            </div>
+                                        </Col>
+                                    ))}
+                                </Row>
+                            </Container>
+                        </Tab>
+                    </Tabs>
+                </Col>
+                <Col xs={1} md={2}></Col>
+            </Row>
+        </Container>
+
+    )} />
+}
+
+export default MenuPage;

frontend/src/pages/NewsPage.js

@@ -0,0 +1,28 @@
+import {Container, Row, Col} from "react-bootstrap";
+import BasicTemplate from "../templates/BasicTemplate";
+
+export default function NewsPage({newsTitle, newsContent, newsImageSrc}) {
+    
+    newsTitle = "This is a demo newstitle"
+    newsContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    newsImageSrc = "/placeholder3.jpg"
+
+    return (
+        <BasicTemplate content={
+            (<Container id="about-us" className="my-5">
+                <h1 className="mb-5 text-center">{newsTitle}
+                </h1>
+        
+                <Row className="align-items-center">
+                    <Col xs={12} md={6}>
+                    <img className="img-fluid" src={newsImageSrc} alt="" style={{width: "100%", height: "auto"}}></img>
+                    </Col>
+        
+                    <Col xs={12} md={6} className="d-flex justify-content-center align-items-center">
+                    {newsContent}
+                    </Col>
+                </Row>
+            </Container>)
+        }/>
+    )
+}

frontend/src/pages/RegisterPage.js

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import validator from 'validator';
+import { useNavigate } from 'react-router-dom';
+import { Container, Form, Button, Alert, Row, Col, Card } from 'react-bootstrap';
+import BasicTemplate from '../templates/BasicTemplate';
+
+const RegisterPage = () => {
+    const [full_name, setFullname] = useState('');
+    const [phone_number, setPhoneNumber] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [error, setError] = useState('');
+
+    const navigator = useNavigate();
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Validate password and confirm password match
+        if (full_name.length === 0) {
+            setError('Họ và tên không thể để trống');
+        } else if (!validator.isMobilePhone(phone_number)) {
+            setError('Số điện thoại không hợp lệ');        
+        } else if (!validator.isEmail(email)) {
+            setError('Email không hợp lệ');
+        } else if (password.length < 8) {
+            setError('Mật khẩu phải có tối thiểu 8 ký tự');
+        } else if (password !== confirmPassword) {
+            setError('Mật khẩu và xác nhận mật khẩu không khớp.');
+        } else {
+            setError('');
+            // gọi API đăng ký ở đây
+            console.log('Đăng ký thành công:',  {full_name, password });
+            navigator('/');
+        }
+    };
+
+    return (
+        <BasicTemplate content={
+            (<Container fluid className="d-flex justify-content-center mt-5">
+                <Row>
+                    <Col xs={1} md={2}></Col>
+                    <Col xs={10} md={8}>
+                        <Card style={{ width: '30rem' }} className='justify-content-center'>
+                            <Card.Header>
+                                <Card.Title className='mt-1 text-center'>Đăng ký</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+                                <Form onSubmit={handleSubmit}>
+                                    {/* full_name, phone_number, email, password */}
+                                    {error && <Alert variant="danger">{error}</Alert>}
+
+                                    <Form.Group controlId="full_name" className='mb-3'>
+                                        <Form.Label>Họ và tên</Form.Label>
+                                        <Form.Control
+                                            // id='full_name'
+                                            type="text"
+                                            placeholder="Họ và tên"
+                                            onChange={(e) => setFullname(e.target.value)}
+                                            
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="phone_number" className='mb-3'>
+                                        <Form.Label>Số điện thoại</Form.Label>
+                                        <Form.Control
+                                            // id='phone_number'
+                                            type="text"
+                                            placeholder="Số điện thoại"
+                                            onChange={(e) => setPhoneNumber(e.target.value)}
+                                            
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="email" className='mb-3'>
+                                        <Form.Label>Email</Form.Label>
+                                        <Form.Control
+                                            // id='email'
+                                            type="text"
+                                            placeholder="Email"
+                                            onChange={(e) => setEmail(e.target.value)}
+                                            
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="password" className='mb-3'>
+                                        <Form.Label>Mật khẩu</Form.Label>
+                                        <Form.Control
+                                            // id='password'
+                                            type="password"
+                                            placeholder="Nhập mật khẩu"
+                                            onChange={(e) => setPassword(e.target.value)}
+                                            
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="confirm_password" className='mb-3'>
+                                        <Form.Label>Xác nhận mật khẩu</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            placeholder="Xác nhận mật khẩu"
+                                            onChange={(e) => setConfirmPassword(e.target.value)}
+                                            
+                                        />
+                                    </Form.Group>
+                                    <div className='d-flex justify-content-between align-items-center'>
+                                        <Button variant="primary" type="submit" className='me-2'>
+                                            Đăng ký
+                                        </Button>
+                                        <a href="/login" className='me-2'>Đăng nhập</a>
+
+                                    </div>
+
+                                </Form>
+                            </Card.Body>
+                        </Card>
+
+                    </Col>
+                    <Col xs={1} md={2}></Col>
+                </Row>
+            </Container>
+            )
+        }>
+        </BasicTemplate>
+    );
+};
+
+export default RegisterPage;

frontend/src/templates/BasicTemplate.js

@@ -0,0 +1,19 @@
+// pages/HomePage.js
+// import React, { useState } from 'react';
+import ANavbar from '../molecules/Navbar';
+import ContactSection from '../molecules/ContactSection';
+
+function BasicTemplate ({content}) {
+    // const [isLoggedIn, setIsLoggedIn] = useState(false);
+    // const [user, setUser] = useState({ name: 'User' });
+
+    return (
+        <>
+            <ANavbar></ANavbar>
+            {content}
+            <ContactSection></ContactSection>
+        </>
+    );
+};
+
+export default BasicTemplate;