Feature: frontend add update user

frontend/.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env
+note_dev.txt
+object.json

frontend/package-lock.json

@@ -11,10 +11,14 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.7",
         "bootstrap": "^5.3.3",
+        "js-cookie": "^3.0.5",
+        "jsonwebtoken": "^9.0.2",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.5",
         "react-dom": "^18.3.1",
+        "react-image-crop": "^11.0.7",
         "react-router-dom": "^6.27.0",
         "react-scripts": "5.0.1",
         "validator": "^13.12.0",
@@ -5870,6 +5874,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -6402,6 +6431,12 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -7812,6 +7847,15 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -13187,6 +13231,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13350,6 +13403,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -13365,6 +13440,27 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -13513,6 +13609,42 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "license": "MIT"
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -13525,6 +13657,12 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "license": "MIT"
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -15955,6 +16093,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -16356,6 +16500,15 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-image-crop": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-11.0.7.tgz",
+      "integrity": "sha512-ZciKWHDYzmm366JDL18CbrVyjnjH0ojufGDmScfS4ZUqLHg4nm6ATY+K62C75W4ZRNt4Ii+tX0bSjNk9LQ2xzQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

frontend/package.json

@@ -6,10 +6,14 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
+    "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.5",
     "react-dom": "^18.3.1",
+    "react-image-crop": "^11.0.7",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "validator": "^13.12.0",

frontend/src/index.js

@@ -10,6 +10,8 @@ import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import NewsPage from './pages/NewsPage';
 import MenuPage from './pages/MenuPage';
+import CartPage from './pages/CartPage';
+import UserInfoPage from './pages/UserInfoPage';
 
 const router = createBrowserRouter([
   {
@@ -35,6 +37,16 @@ const router = createBrowserRouter([
   {
     path: "/menu",
     element: <MenuPage/>
+  },
+  {
+    path: "/cart",
+    element: <CartPage/>,
+    errorElement: <ErrorPage/>
+  },
+  {
+    path: "/userinfo",
+    element: <UserInfoPage/>,
+    errorElement: <ErrorPage/>
   }
 ]);
 

frontend/src/molecules/Navbar.js

@@ -1,23 +1,23 @@
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import Button from 'react-bootstrap/Button';
-import { Stack } from 'react-bootstrap';
+import {Container, Nav, Navbar, Button, Stack} from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom';
+import DataStorage from '../organisms/DataStorage';
 
 export default function ANavbar() {
 
     const navigate = useNavigate();
-    
+
     function handleLogout() {
-        sessionStorage.setItem('isLoggedIn','false');
-        sessionStorage.removeItem('username');
-        sessionStorage.removeItem('cart');
+        DataStorage.set('isLoggedIn','false');
+        DataStorage.remove('accessToken');
+        DataStorage.remove('role');
+        DataStorage.remove('username');
+        DataStorage.remove('cart');
+        DataStorage.remove('expiryDate');
         navigate('/');
     }
 
-    let username = sessionStorage.getItem('username');
-    let isLoggedIn = sessionStorage.getItem('isLoggedIn');
+    let username = DataStorage.get('username');
+    let isLoggedIn = DataStorage.get('isLoggedIn');
 
     let userContent;
     if (isLoggedIn === 'true') {
@@ -26,7 +26,9 @@ export default function ANavbar() {
                 <Button href="/userinfo" variant='primary'>
                     Xin chào, {username}
                 </Button>
-                {' '}
+                <Button href="/cart" variant='outline-primary'>
+                    Giỏ hàng
+                </Button>
                 <Button onClick={handleLogout} variant='outline-primary'>
                     Đăng xuất
                 </Button>

frontend/src/organisms/DataStorage.js

@@ -0,0 +1,91 @@
+import Cookies from 'js-cookie';
+
+export default class DataStorage {
+    static storageMethod = process.env.REACT_APP_STORAGE_METHOD;
+
+    // Get data
+    static get(key) {
+        if (this.storageMethod === 'session') {
+            return sessionStorage.getItem(key);
+        } else if (this.storageMethod === 'cookie') {
+            return Cookies.get(key);
+        }
+        return null;
+    }
+
+    // Set data
+    static set(key, value, param = { expiryDate: null }) {
+        if (this.storageMethod === 'session') {
+            sessionStorage.setItem(key, value);
+        } else if (this.storageMethod === 'cookie') {
+            if (param.expiryDate) {
+                const expiryDate = new Date(param.expiryDate * 1000);
+                Cookies.set(key, value, { expires: expiryDate })
+            } else if (Cookies.get('expiryDate')) {
+                const expiryDate = new Date(Cookies.get('expiryDate') * 1000);
+                Cookies.set(key, value, { expires: expiryDate }); 
+            } else Cookies.set(key, value, { expires: 7 })// Expires in 7 by default
+        }
+    }
+
+    // Remove data
+    static remove(key) {
+        if (this.storageMethod === 'session') {
+            sessionStorage.removeItem(key);
+        } else if (this.storageMethod === 'cookie') {
+            Cookies.remove(key);
+        }
+    }
+
+    // Get all data
+    static getAll() {
+        const data = {};
+        if (this.storageMethod === 'session') {
+            for (let i = 0; i < sessionStorage.length; i++) {
+                const key = sessionStorage.key(i);
+                data[key] = sessionStorage.getItem(key);
+            }
+        } else if (this.storageMethod === 'cookie') {
+            const cookies = Cookies.get();
+            Object.keys(cookies).forEach(key => {
+                data[key] = cookies[key];
+            });
+        }
+        return data;
+    }
+
+    // Clear all data
+    static clearAll() {
+        if (this.storageMethod === 'session') {
+            sessionStorage.clear();
+        } else if (this.storageMethod === 'cookie') {
+            const cookies = Cookies.get();
+            Object.keys(cookies).forEach(key => {
+                Cookies.remove(key);
+            });
+        }
+    }
+
+    // Check if a key exists
+    static hasKey(key) {
+        if (this.storageMethod === 'session') {
+            return sessionStorage.getItem(key) !== null;
+        } else if (this.storageMethod === 'cookie') {
+            return Cookies.get(key) !== undefined;
+        }
+        return false;
+    }
+
+    // Get all keys
+    static getKeys() {
+        const keys = [];
+        if (this.storageMethod === 'session') {
+            for (let i = 0; i < sessionStorage.length; i++) {
+                keys.push(sessionStorage.key(i));
+            }
+        } else if (this.storageMethod === 'cookie') {
+            keys.push(...Object.keys(Cookies.get()));
+        }
+        return keys;
+    }
+}

frontend/src/organisms/MenuSection.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Container, Carousel, Row, Col } from 'react-bootstrap';
+import { Container, Carousel, Row, Col, Button } from 'react-bootstrap';
 import MenuItem from '../molecules/MenuItem';
 
 function MenuSection() {
@@ -20,7 +20,7 @@ function MenuSection() {
   return (
     <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">
+      <Carousel 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%' }}>
@@ -33,7 +33,7 @@ function MenuSection() {
             </div>
 
             <Carousel.Caption>
-              <div >
+              <div className='my-5'>
                 <Row md={3} className="g-4">
                   {menuItems.map((item, idx) => (
                     <Col key={idx}>
@@ -45,6 +45,7 @@ function MenuSection() {
                     </Col>
                   ))}
                 </Row>
+                <Button as='a' href='/menu' className='mt-5'> Xem thêm các món </Button>
               </div>
             </Carousel.Caption>
           </Carousel.Item>

frontend/src/organisms/jwtDecoder.js

@@ -0,0 +1,22 @@
+function decodeBase64Url(base64Url) {
+    // Thay các ký tự theo chuẩn Base64 URL thành chuẩn Base64 thông thường
+    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    // Thêm padding nếu thiếu
+    base64 += '='.repeat((4 - base64.length % 4) % 4);
+    // Giải mã từ Base64 sang chuỗi JSON
+    return JSON.parse(atob(base64));
+}
+
+export default function jwtDecoder(jwtToken) {
+    const [header, payload, _] = jwtToken.split('.');
+
+    // Giải mã Header và Payload
+    const decodedHeader = decodeBase64Url(header);
+    const decodedPayload = decodeBase64Url(payload);
+    console.log("Signature:", _);
+
+    console.log("Header:", decodedHeader);
+    console.log("Payload:", decodedPayload);
+    return {"header": decodedHeader, "payload": decodedPayload}
+}
+

frontend/src/pages/CartPage.js

@@ -0,0 +1,72 @@
+import BasicTemplate from "../templates/BasicTemplate";
+import { Container, Row, Col, Card, Button } from "react-bootstrap";
+import { useState, useEffect } from "react";
+import DataStorage from "../organisms/DataStorage";
+
+export default function CartPage() {
+
+    const [cartItems, setCartItems] = useState([]);
+
+    useEffect(() => {
+        // Lấy giỏ hàng từ sessionStorage
+        const cart = JSON.parse(DataStorage.get('cart')) || {};
+
+        // Chuyển cart thành mảng chứa các món có số lượng > 0
+        const items = Object.entries(cart)
+            .filter(([name, amount]) => amount > 0)
+            .map(([name, amount]) => ({
+                name,
+                imageSrc: '/placeholder3.jpg',
+                price: 100, // Thêm đơn giá của món ăn (giả sử ở đây là 100 cho mỗi món)
+                amount
+            }));
+
+        setCartItems(items);
+    }, []);
+
+
+    return (
+        <BasicTemplate content={
+            (
+                <Container className="d-flex align-items-center justify-content-center my-5" style={{ 'min-height': '70vh' }}>
+                    {cartItems.length > 0 ? (
+                        <div className="text-center">
+                            <h2 className="text-center mb-4">Giỏ hàng của bạn</h2>
+                            <Row className="g-3">
+                                {cartItems.map((item, idx) => (
+                                    <Col md={12} key={idx} className="my-3">
+                                        <Card className="shadow-sm" style={{ display: 'flex', flexDirection: 'row' }}>
+                                            <Card.Img
+                                                variant="left"
+                                                src={item.imageSrc}
+                                                style={{ width: '150px', objectFit: 'cover' }}
+                                            />
+                                            <Card.Body>
+                                                <Row xs={4} className="align-items-center justify-content-center">
+                                                    <Card.Title as='Col'>{item.name}</Card.Title>
+                                                    <Card.Text as='Col'>Đơn giá: {item.price} VND</Card.Text>
+                                                    <Card.Text as='Col'>Số lượng: {item.amount}</Card.Text>
+                                                    <Card.Text as='Col'>
+                                                        Tổng cộng: {item.price * item.amount} VND
+                                                    </Card.Text>
+                                                </Row>
+                                            </Card.Body>
+                                        </Card>
+                                    </Col>
+                                ))}
+                            </Row>
+                            <Button as='a' href='/payment' className='my-3'>
+                            Thanh toán
+                            </Button>
+                        </div>
+                    ) : (
+                        <div className="text-center">
+                            <p className="text-center my-3">Giỏ hàng của bạn hiện đang trống.</p>
+                            <Button as='a' href='/menu'>Xem menu</Button>
+                        </div>
+                    )}
+                </Container>
+            )
+        } />
+    )
+}

frontend/src/pages/LoginPage.js

@@ -2,9 +2,14 @@ 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";
+import axios from 'axios';
+import jwtDecoder from "../organisms/jwtDecoder";
+import DataStorage from "../organisms/DataStorage";
 
 export default function LoginPage() {
 
+    const domain = process.env.REACT_APP_API_URL;
+
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');
@@ -16,16 +21,43 @@ export default function LoginPage() {
         // Validate password and confirm password match
         if (password.length === 0) {
             setError('Hãy nhập mật khẩu');
-        } else if (username.length === 0) {
+        } else if (username.trim().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('/');
+
+            let data = {
+                'username': username,
+                'password': password
+            }
+
+            axios.post(domain + '/authentication/login', data)
+                .then((response) => {
+                    if (response.status === 200) {
+                        // setError(JSON.stringify(jwtDecoder(response.data.access_token)));
+                        const decodedToken = jwtDecoder(response.data.access_token);
+                        const full_name = decodedToken.payload.username;
+                        const role = decodedToken.payload.roles;
+                        const expiryTime = decodedToken.payload.exp;
+                        DataStorage.set('expiryDate', expiryTime, {expiryDate:expiryTime});
+                        DataStorage.set('username', full_name);
+                        DataStorage.set('role', role);
+                        DataStorage.set('isLoggedIn', 'true');
+                        DataStorage.set('accessToken', response.data.access_token);
+                        DataStorage.set('cart', '{}');
+                        navigate('/');
+                    } else {
+                        setError(JSON.stringify(response));
+                    }
+                })
+                .catch((error) => {
+                    if (error.status === 400) {
+                        setError('Lỗi đăng nhập, vui lòng kiểm tra lại tài khoản và mật khẩu');
+                    } else if (error.status === 500) {
+                        setError('Server đang tạm gặp vấn đề');
+                    }
+                })
+
         }
     };
 

frontend/src/pages/MenuPage.js

@@ -1,16 +1,55 @@
 import { useState } from 'react';
-import { Modal, Button, Container, Row, Col, Tab, Tabs } from 'react-bootstrap';
+import { Modal, Button, Container, Row, Col, Tab, Tabs, Form, InputGroup } from 'react-bootstrap';
 import MenuItem from '../molecules/MenuItem';
 import BasicTemplate from '../templates/BasicTemplate';
+import DataStorage from '../organisms/DataStorage';
+
 function MenuPage() {
     const [key, setKey] = useState('cat1');
     const [selectedDish, setSelectedDish] = useState(null);
     const [show, setShow] = useState(false);
+    const [cartAmount, setCartAmount] = useState(0);
+
+    function handleClose() {
+        const cart = JSON.parse(DataStorage.get('cart')) || {};  // Đảm bảo cart không null
+        cart[selectedDish.name] = cartAmount;
+        const filteredCart = Object.fromEntries(
+            Object.entries(cart).filter(([key, value]) => value > 0)
+        );    
+        DataStorage.set('cart', JSON.stringify(filteredCart));
+        // console.log(JSON.stringify(filteredCart));
+        setShow(false);
+    }
+
+    function notLoggedInClose() {
+        setShow(false);
+    }
 
-    const handleClose = () => setShow(false);
     function handleShow(dish) {
-        setSelectedDish(dish);  // Set the selected dish to state
-        setShow(true);          // Show the modal
+        if (DataStorage.get('isLoggedIn') === null) {
+            setShow(true);
+            return;
+        } else {
+            setSelectedDish(dish);  // Đặt selectedDish ngay lập tức
+
+            // Sau khi cập nhật selectedDish, lấy dữ liệu từ cart theo tên món ăn mới
+            const cart = JSON.parse(DataStorage.get('cart')) || {};
+
+            // Kiểm tra số lượng món ăn trong cart
+            const amount = cart[dish.name] !== undefined ? cart[dish.name] : 0;
+            setCartAmount(amount);  // Cập nhật số lượng
+            setShow(true);          // Hiển thị modal
+        }
+    }
+
+    function setIncrease() {
+        setCartAmount(cartAmount + 1);
+    }
+
+    function setDecrease() {
+        if (cartAmount > 0) {
+            setCartAmount(cartAmount - 1);
+        }
     }
 
     const menuItems1 = [
@@ -35,23 +74,65 @@ function MenuPage() {
         { name: 'Món 6 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
     ];
 
+    let modalContent;
+
+    if (DataStorage.get('isLoggedIn') === null) {
+        modalContent = (
+            <Modal show={show} onHide={notLoggedInClose} className='text-center align-items-center'>
+                <Modal.Header closeButton className='text-center'>
+                    <Modal.Title>Bạn chưa đăng nhập</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    Vui lòng đăng nhập để xem chi tiết món và đặt hàng
+                </Modal.Body>
+                <Modal.Footer>
+                <Button variant="primary" as='a' href='/login'>
+                    Đăng nhập
+                </Button>
+                <Button variant="secondary" onClick={notLoggedInClose}>
+                    Đóng
+                </Button>
+            </Modal.Footer>
+            </Modal>
+        )
+    }
+    else {
+        modalContent = (<Modal show={show} onHide={handleClose} className='text-center'>
+            <Modal.Header closeButton className='text-center'>
+                <Modal.Title >{selectedDish?.name}</Modal.Title> {/* Dish name in the title */}
+            </Modal.Header>
+            <Modal.Body>
+                <img src={selectedDish?.imageSrc} alt={selectedDish?.name} style={{ width: '100%' }} />  {/* Dish image */}
+                <p>{selectedDish?.description}</p>  {/* Dish description */}
+
+                <Row className='mb-5'>
+                    <Col md={2}></Col>
+                    <Col md={8}>
+                        <Form.Label>Số lượng</Form.Label>
+                        <InputGroup as='row' mb={4} className='mb-3'>
+                            <InputGroup.Text as='button' onClick={setDecrease}>-</InputGroup.Text>
+                            <Form.Control
+                                value={cartAmount}
+                                aria-label="Amount"
+                                onChange={(e) => setCartAmount(e.target.value)} />
+                            <InputGroup.Text as='button' onClick={setIncrease}>+</InputGroup.Text>
+                        </InputGroup></Col>
+                    <Col md={2}></Col>
+                </Row>
+
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                    Đóng
+                </Button>
+            </Modal.Footer>
+        </Modal>);
+    }
+
     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>
+                {modalContent}
             </>
             <h1 className='text-center mb-5'>Thực đơn</h1>
             <Row>

frontend/src/pages/RegisterPage.js

@@ -19,7 +19,7 @@ const RegisterPage = () => {
         // 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)) {
+        } else if (!validator.isMobilePhone(phone_number, 'vi-VN')) {
             setError('Số điện thoại không hợp lệ');        
         } else if (!validator.isEmail(email)) {
             setError('Email không hợp lệ');

frontend/src/pages/UserInfoPage.js

@@ -0,0 +1,257 @@
+import BasicTemplate from "../templates/BasicTemplate";
+import { Container, Form, Row, Col, Card, Alert, Button, Image } from "react-bootstrap";
+import React, { useState, useEffect } from "react";
+import validator from "validator";
+import axios from "axios";
+import DataStorage from "../organisms/DataStorage";
+
+export default function UserInfoPage() {
+
+    // fetch data:
+
+    const [error, setErrors] = useState("");
+    const [initialData, setInitialData] = useState(null);
+    const [formData, setFormData] = useState({
+        avatar: "/default_avatar.jpg",
+        full_name: "",
+        phone_number: "",
+        address: "",
+        email: "",
+        password: "",
+        confirmPassword: "",
+    });
+
+    useEffect(() => {
+        axios
+            .get(process.env.REACT_APP_API_URL + '/authentication/profile', {
+                headers: {
+                    Authorization: `Bearer ${DataStorage.get('accessToken')}`,
+                },
+            })
+            .then((response) => {
+                if (response.status === 401) {
+                    // phiên hết hạn
+                    setErrors(JSON.stringify(response));
+                } else {
+                    const { avatar, full_name, address, phone_number, email } = response.data;
+                    const fetchedData = {
+                        avatar: avatar || "/default_avatar.jpg",
+                        full_name: full_name || "",
+                        phone_number: phone_number || "",
+                        address: address || "",
+                        email: email || "",
+                        password: "",
+                        confirmPassword: "",
+                    };
+
+                    if (fetchedData.full_name !== DataStorage.get('username')) DataStorage.set('username', fetchedData.full_name)
+                    setInitialData(fetchedData);
+                    setFormData(fetchedData);
+                }
+            })
+            .catch((error) => {
+                setErrors(JSON.stringify(error));
+            });
+    }, []);
+
+    // console.log('formdata', formData);
+    // console.log('initialdata', initialData);
+    // State để hiển thị lỗi khi validation
+
+    const [isChanged, setChanged] = useState(false);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+    };
+
+    // Hàm xử lý thay đổi avatar
+    const handleAvatarChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            setFormData((prevData) => ({
+              ...prevData,
+              avatar: reader.result // Cập nhật ảnh đại diện
+            }));
+          };
+          reader.readAsDataURL(file);
+          setChanged(true);
+        }
+      };
+
+    useEffect(() => {
+        const hasChanges = () => {
+            if (initialData) {
+                for (let key in formData) {
+                    if (formData[key] !== initialData[key]) {
+                        return true;
+                    }
+                }
+                return false;
+            } else {
+                return false;
+            }
+        };
+        setChanged(hasChanges());
+    }, [formData, initialData]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setChanged(false); // prevent another click
+        if (formData.phone_number.trim() !== "" && !validator.isMobilePhone(formData.phone_number, 'vi-VN')) setErrors("Số điện thoại không hợp lệ");
+        else if (formData.email.trim() !== "" && !validator.isEmail(formData.email)) setErrors("Email không hợp lệ");
+        else if (formData.password !== "" && formData.confirmPassword !== formData.password) setErrors("Mật khẩu không khớp");
+        else {
+
+            // let avatarBase64 = null;
+
+            // if (formData.avatar) {
+            //     // Chuyển ảnh đại diện thành chuỗi Base64
+            //     avatarBase64 = await new Promise((resolve, reject) => {
+            //         const reader = new FileReader();
+            //         reader.onloadend = () => resolve(reader.result.split(",")[1]); // Chỉ lấy phần Base64
+            //         reader.onerror = (error) => reject(error);
+            //         reader.readAsDataURL(formData.avatar);
+            //     });
+            // }
+
+            let data = {};
+
+            // if (avatarBase64) data.avatar = avatarBase64;
+            if (formData.full_name.trim() !== "" && formData.full_name.trim() !== initialData.full_name) data.full_name = formData.full_name.trim();
+            if (formData.phone_number.trim() !== "" && formData.phone_number.trim() !== initialData.phone_number) data.phone_number = formData.phone_number.trim();
+            if (formData.address.trim() !== "" && formData.address.trim() !== initialData.address) data.address = formData.address.trim();
+            if (formData.email.trim() !== "" && formData.email.trim() !== initialData.email) data.email = formData.email.trim();
+            if (formData.password.trim() !== "") data.hash_password = formData.password;
+
+            // gửi request ở đây
+            axios.post(process.env.REACT_APP_API_URL + '/users/updateUser', data, {
+                headers: {
+                    Authorization: `Bearer ${DataStorage.get('accessToken')}`,
+                }
+            }).then((response) => {
+                if (response.status === 200 || response.status === 201) {
+                    window.location.reload(); // cập nhật lại thông tin
+                } else {
+                    setErrors(JSON.stringify(response));
+                }
+            }).catch((error) => setErrors(JSON.stringify(error)));
+        }
+    };
+
+    return <BasicTemplate content={
+        (
+            <Container fluid className="d-flex align-items-center 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'>Thông tin khách hàng</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+
+                                <Form onSubmit={handleSubmit}>
+                                    {error && <Alert variant="danger">{error}</Alert>}
+                                    <Row className="mb-3">
+                                        <Col xs={12} md={6} className="text-center">
+                                            {/*Image*/}
+                                            <Image
+                                                src={formData.avatar} // Hiển thị ảnh đại diện từ formData
+                                                alt="User Avatar"
+                                                roundedCircle
+                                                width={120}
+                                                height={120}
+                                            />
+                                            <Form.Group controlId="formAvatar">
+                                                <Form.Label>Ảnh đại diện</Form.Label>
+                                                <Form.Control type="file" accept="image/*" onChange={handleAvatarChange} />
+                                            </Form.Group>
+                                        </Col>
+                                        <Col xs={12} md={6}>
+                                            <Form.Group controlId="formUsername">
+                                                <Form.Label>Họ tên người dùng</Form.Label>
+                                                <Form.Control
+                                                    type="text"
+                                                    name="full_name"
+                                                    placeholder="Họ tên người dùng"
+                                                    value={formData.full_name}
+                                                    onChange={handleChange}
+                                                />
+                                            </Form.Group>
+                                        </Col>
+                                    </Row>
+
+                                    <Form.Group controlId="formPhone" className="mb-3">
+                                        <Form.Label>Số điện thoại</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            name="phone_number"
+                                            placeholder="Số điện thoại"
+                                            value={formData.phone_number}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formAddress" className="mb-3">
+                                        <Form.Label>Địa chỉ giao hàng mặc định</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            name="address"
+                                            placeholder="Địa chỉ giao hàng"
+                                            value={formData.address}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formEmail" className="mb-3">
+                                        <Form.Label>Email</Form.Label>
+                                        <Form.Control
+                                            type="text"
+                                            name="email"
+                                            placeholder="Email"
+                                            value={formData.email}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formPassword" className="mb-3">
+                                        <Form.Label>Password</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            name="password"
+                                            placeholder="********"
+                                            value={formData.password}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Form.Group controlId="formConfirmPassword" className="mb-3">
+                                        <Form.Label>Nhập lại Password</Form.Label>
+                                        <Form.Control
+                                            type="password"
+                                            name="confirmPassword"
+                                            placeholder="********"
+                                            value={formData.confirmPassword}
+                                            onChange={handleChange}
+                                        />
+                                    </Form.Group>
+
+                                    <Button variant="primary" type="submit" disabled={!isChanged}>
+                                        Cập nhật
+                                    </Button>
+                                </Form>
+                            </Card.Body>
+                        </Card>
+
+                    </Col>
+                    <Col xs={1} md={2}></Col>
+                </Row>
+
+
+            </Container>
+        )
+    } />
+}