improve: update code to main

Makefile

@@ -4,9 +4,10 @@ app:
 	docker compose -f docker-compose.yml up --build --detach --pull "always"; \
 	docker image prune -f
 
+# chạy tất cả các services development
 dev:
-	docker compose rm -sf; \
-	docker compose --profile "*" -f docker-compose-dev.yml up --build --detach; \
+	docker compose rm -sf && \
+	docker compose --profile "*" -f docker-compose-dev.yml up --build --detach && \
 	docker image prune -f
 
 log:
@@ -29,9 +30,11 @@ chatbash:
 chatdb:
 	docker exec -it database-chat-fmecg sh
 
+
+# chỉ run các services backend bao gồm db, node, chat (đồng thời run interactive shell của chat)
 chatdev:
-	docker compose rm -sf; \
-	docker compose --profile backend -f docker-compose-dev.yml up --build --detach; \
+	docker compose rm -sf && \
+	docker compose -f docker-compose-back-end.yml up --build --detach && \
 	docker exec -it chat-fmecg iex -S mix phx.server
 
 

docker-compose-back-end.yml

@@ -0,0 +1,82 @@
+
+services:
+  node-app:
+    container_name: node-fmecg
+    build:
+      dockerfile: Dockerfile
+      context: ./server-web
+    # profiles: ["backend"]
+    volumes:
+      - ./server-web/:/server/
+      - /server/node_modules
+    depends_on:
+      - database
+    env_file: ./server-web/.env.docker
+    networks:
+      - network-fmecg
+
+  proxy:
+    container_name: proxy-fmecg
+    build:
+      dockerfile: Dockerfile
+      context: ./proxy
+    # profiles: ["backend"]
+    restart: unless-stopped
+    depends_on:
+      - node-app
+      - chat-app
+    ports:
+      - 80:80
+    volumes:
+      - ./proxy/default_back_end.conf:/etc/nginx/conf.d/default.conf
+    networks:
+      - network-fmecg
+
+  database:
+    image: mysql:8.0
+    container_name: database-fmecg
+    restart: unless-stopped
+    # profiles: ["backend"]
+    ports:
+      - 3306:3306
+    expose:
+      - 3306
+    env_file: ./server-web/.env.docker
+    volumes:
+      - ./docker/data/mysql:/var/lib/mysql
+    networks:
+      - network-fmecg
+
+  chat-app:
+    container_name: chat-fmecg
+    build:
+      dockerfile: Dockerfile.dev
+      context: ./server_chat
+    # profiles: ["backend"]
+    # command: iex -S mix phx.server
+    restart: unless-stopped
+    depends_on:
+      - database-chat
+    env_file: ./server_chat/.env.docker
+    volumes:
+      - ./server_chat/:/app/
+    networks:
+      - network-fmecg
+
+  database-chat:
+    image: postgres:12.19
+    container_name: database-chat-fmecg
+    # profiles: ["backend"]
+    ports:
+      - 5432:5432
+    expose:
+      - 5432
+    restart: unless-stopped
+    env_file: ./server_chat/.env.docker
+    volumes:
+      - ./docker/data/postgresql:/var/lib/postgresql/data
+    networks:
+      - network-fmecg
+networks:
+  network-fmecg:
+    driver: bridge

frontend_web/Dockerfile.dev

@@ -3,6 +3,7 @@ FROM node:20-alpine AS node_builder
 WORKDIR /web/
 
 ENV PORT=3002
+ENV WATCHPACK_POLLING=true
 
 COPY package.json ./
 

frontend_web/bin/index.js

@@ -59,15 +59,30 @@ app.post("/login", async (req, res, next) => {
       if (result.ok) {
         const userInfo = await result.json();
         const isDevEnv = config.default_api_url.match("127.0.0.1:3000") != null
-        res.cookie("user", userInfo.metadata.id);
+        res.cookie("user", userInfo.metadata.id, {
+          maxAge: 60000 * userInfo.metadata.expired_time,
+          httpOnly: false,
+        });
         res.cookie("access_token", userInfo.metadata.access_token, {
           maxAge: 60000 * userInfo.metadata.expired_time,
           httpOnly: false,
         });
-        res.cookie("refresh_token", userInfo.metadata.refresh_token);
-        res.cookie("role", userInfo.metadata.role);
-        res.cookie("api", isDevEnv ? config.default_api_url : `${config.redirect_url}/api`);
-        res.cookie("redirect_api", isDevEnv ? `http://${config.default_app_host}:${config.default_app_port}/login` : `${config.redirect_url}/login`);
+        res.cookie("refresh_token", userInfo.metadata.refresh_token, {
+          maxAge: 60000 * userInfo.metadata.expired_time,
+          httpOnly: false,
+        });
+        res.cookie("role", userInfo.metadata.role, {
+          maxAge: 60000 * userInfo.metadata.expired_time,
+          httpOnly: false,
+        });
+        res.cookie("api", isDevEnv ? config.default_api_url : `${config.redirect_url}/api`, {
+          maxAge: 60000 * userInfo.metadata.expired_time,
+          httpOnly: false,
+        });
+        res.cookie("redirect_api", isDevEnv ? `http://${config.default_app_host}:${config.default_app_port}/login` : `${config.redirect_url}/login`, {
+          maxAge: 60000 * userInfo.metadata.expired_time,
+          httpOnly: false,
+        });
         return res.status(200).json("login successfully");
       }
       return res.status(400).json("login failed");

frontend_web/bin/views/index.ejs

@@ -9,8 +9,8 @@
   <style>
 
 :root {
-  --primary-color: #4ea685;
-  --secondary-color: #57b894;
+  --primary-color: #579cfd;
+  --secondary-color: #62ace4;
   --black: #000000;
   --white: #ffffff;
   --gray: #efefef;
@@ -25,7 +25,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
 
 * {
-  font-family: "Poppins", sans-serif;
+  font-family: sans-serif;
   margin: 0;
   box-sizing: border-box;
 }
@@ -377,8 +377,8 @@ select {
             <div class="form sign-up sign-up-form">
               <div class="input-group">
                 <i class="bx bxs-user"></i>
-                <label for="username-label">Username </label>
-                <input type="text" placeholder="Username" id="sign-up-username" class="sign-up-input" required />
+                <label for="username-label">Họ và tên </label>
+                <input type="text" placeholder="Họ và tên" id="sign-up-username" class="sign-up-input" required />
               </div>
               <div class="input-group">
                 <i class="bx bx-mail-send"></i>
@@ -387,54 +387,53 @@ select {
               </div>
               <div class="input-group">
                 <i class="bx bxs-lock-alt"></i>
-                <label for="passwor-label">Password </label>
-                <input type="password" placeholder="Password" id="sign-up-password" class="sign-up-input" required />
+                <label for="passwor-label">Mật khẩu </label>
+                <input type="password" placeholder="Mật khẩu" id="sign-up-password" class="sign-up-input" required />
                 <i class="fa-solid fa-eye" id="show-password"></i>
               </div>
               <div class="input-group">
                 <i class="bx bxs-lock-alt"></i>
-                <label for="cf-password-label">Confirm Password </label>
-                <input type="password" placeholder="Confirm Password" id="confirm-password" class="sign-up-input" required />
+                <label for="cf-password-label">Xác nhận mật khẩu </label>
+                <input type="password" placeholder="Xác nhận mật khẩu" id="confirm-password" class="sign-up-input" required />
                 <i class="fa-solid fa-eye" id="show-confirm-password"></i>
               </div>
               <div class="input-group">
                 <i class="bx bxs-gender"></i>
-                <label for="gender-label">Gender </label>
+                <label for="gender-label">Giới tính </label>
                   <select id="sign-up-gender">
-                    <option value="">Choose a gender</option>
-                    <option value="0">Male</option>
-                    <option value="1">Female</option>
+                    <option value="">Chọn giới tính</option>
+                    <option value="0">Nam</option>
+                    <option value="1">Nữ</option>
                   </select>
               </div>  
               <div class="input-group">
                 <i class="bx bxs-role"></i>
-                <label for="role-label">Role </label>
+                <label for="role-label">Chức vụ </label>
                   <select id="sign-up-role" required>
-                    <option value="">Choose a role</option>
-                    <option value="0">Admin</option>
-                    <option value="1">Doctor</option>
-                    <option value="2">Patient</option>
+                    <option value="">Chọn chức vụ</option>
+                    <option value="1">Bác sĩ</option>
+                    <option value="2">Bệnh nhân</option>
                   </select>
               </div>       
               <div class="input-group">
                 <i class="bx bxs-birth"></i>
-                <label for="birthday-label">Date of birth </label>
+                <label for="birthday-label">Ngày sinh </label>
                 <input type="date" id="sign-up-birth" class="sign-up-input" required/>
               </div>
               <div class="input-group">
                 <i class="bx bxs-phone"></i>
-                <label for="phone-number-label">Phone Number </label>
-                <input type="text" placeholder="Phone Number" class="sign-up-input" id="sign-up-phone-number" />
+                <label for="phone-number-label">Số điện thoại </label>
+                <input type="text" placeholder="Số điện thoại" class="sign-up-input" id="sign-up-phone-number" />
               </div>
               <div class="input-group">
                 <i class="bx bx-info"></i>
-                <label for="info-label">User information</label>
-                <input type="text" placeholder="User information" id="sign-up-info" class="sign-up-input" required />
+                <label for="info-label">Thông tin người dùng</label>
+                <input type="text" placeholder="Thông tin người dùng" id="sign-up-info" class="sign-up-input" required />
               </div>
-              <button onclick="signupFunction()" >Sign up</button>
+              <button onclick="signupFunction()" >Đăng ký</button>
               <p class="align-center">
-                <span> Already have an account? </span>
-                <b onclick="toggle()" class="pointer"> Sign in here </b>
+                <span> Bạn đã có tài khoản? </span>
+                <b onclick="toggle()" class="pointer"> Đâng nhập tại đây </b>
               </p>
             </div>
           </div>
@@ -446,32 +445,32 @@ select {
             <div class="form sign-in">
               <div class="input-group">
                 <i class="bx bxs-user"></i>
-                <label for="username-login">Username</label>
+                <label for="username-login">Tên đăng nhập</label>
                 <input
                   type="text"
-                  placeholder="Username"
+                  placeholder="Tên đăng nhập"
                   id="input-user-name"
                   class="sign-in-input"
                 />
               </div>
               <div class="input-group">
                 <i class="bx bxs-lock-alt"></i>
-                <label for="password-login">Password</label>
+                <label for="password-login">Mật khẩu</label>
                 <input
                   type="password"
-                  placeholder="Password"
+                  placeholder="Mật khẩu"
                   id="input-password"
                   class="sign-in-input"
                 />
                 <i class="fa-solid fa-eye" id="show-password-sign-in"></i>
               </div>
-              <button onclick="loginFunction()">Sign in</button>
+              <button onclick="loginFunction()">Đăng nhập</button>
               <p class="align-center">
-                <b> Forgot password? </b>
+                <b> Quên mật khẩu? </b>
               </p>
               <p class="align-center">
-                <span> Don't have an account? </span>
-                <b onclick="toggle()" class="pointer"> Sign up here </b>
+                <span> Bạn chưa có tài khoản? </span>
+                <b onclick="toggle()" class="pointer"> Đăng ký tại đây </b>
               </p>
             </div>
           </div>

frontend_web/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.3.7",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.16.5",
@@ -14,6 +15,7 @@
     "chartjs-plugin-zoom": "^2.0.1",
     "dayjs": "^1.11.10",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
     "react-cookie": "^7.1.0",
     "react-dom": "^18.2.0",

frontend_web/public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="ECG admin website"
-    />
+    <meta name="description" content="ECG admin website" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -53,29 +50,44 @@
         refresh_token: "",
         user_id: "",
       };
+
       const access_token = getCookie("access_token");
       if (access_token) {
         localStorage.setItem("user", getCookie("user"));
         localStorage.setItem("access_token", getCookie("access_token"));
         localStorage.setItem("refresh_token", getCookie("refresh_token"));
         localStorage.setItem("api", decodeURIComponent(getCookie("api")));
         localStorage.setItem("role", getCookie("role"));
-        localStorage.setItem("redirect_api",decodeURIComponent(getCookie("redirect_api")))
+        localStorage.setItem(
+          "redirect_api",
+          decodeURIComponent(getCookie("redirect_api"))
+        );
         cookieData = {
           access_token: localStorage.getItem("access_token"),
           refresh_token: localStorage.getItem("refresh_token"),
           user_id: localStorage.getItem("user"),
           role: localStorage.getItem("role"),
           api: localStorage.getItem("api"),
         };
+        console.log("hi");
+
       } else {
+        console.log("hi");
         cookieData = {
           access_token: "",
           refresh_token: "",
           user_id: "",
           api: "",
         };
+        var url = window.location.host;
         localStorage.clear();
+        window.location.href = "http://127.0.0.1:3001/login";
+
+        if (url !== "127.0.0.1:3002") {
+          window.location.href = "/login";
+        } else {
+          window.location.href = "http://127.0.0.1:3001/login";
+        }
       }
       // Set a global variable to indicate whether the cookie exists
       window.hasCookie = cookieData;