tdameros · tdameros · Jan 24, 2024 · Jan 24, 2024
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -4,15 +4,16 @@ name: transcendence
 
 services:
     # Front
-    front:
-        extends:
-            file: front/docker/docker-compose.yaml
-            service: front
     front-nginx:
         extends:
             file: front/docker/docker-compose.yaml
             service: front-nginx
 
+    front-vite:
+        extends:
+            file: front/docker/docker-compose.yaml
+            service: front-vite
+
     # User management
     user-management:
         extends:
@@ -75,7 +76,14 @@ volumes:
         driver_opts:
             type: none
             o: bind
-            device: front/src/
+            device: front/app/
+
+    front_dist:
+        driver: local
+        driver_opts:
+            type: none
+            o: bind
+            device: front/app/dist/
 
     # User management
     user_management_postgres_volume:

diff --git a/front/app/index.html b/front/app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Transcendence App</title>
+  </head>
+  <body class="bg-body-secondary">
+    <div id="app"></div>
+    <script defer type="module" src="src/js/main.js"></script>
+  </body>
+</html>
diff --git a/front/app/package.json b/front/app/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.3"
+  }
+}
diff --git a/front/src/front/static/favicon.png → front/app/public/favicon.png b/front/src/front/static/favicon.png → front/app/public/favicon.png
diff --git a/...ont/static/fonts/JetBrainsMono-Bold.woff2 → ...app/public/fonts/JetBrainsMono-Bold.woff2 b/...ont/static/fonts/JetBrainsMono-Bold.woff2 → ...app/public/fonts/JetBrainsMono-Bold.woff2
diff --git a/...nt/static/fonts/JetBrainsMono-Light.woff2 → ...pp/public/fonts/JetBrainsMono-Light.woff2 b/...nt/static/fonts/JetBrainsMono-Light.woff2 → ...pp/public/fonts/JetBrainsMono-Light.woff2
diff --git a/.../static/fonts/JetBrainsMono-Regular.woff2 → .../public/fonts/JetBrainsMono-Regular.woff2 b/.../static/fonts/JetBrainsMono-Regular.woff2 → .../public/fonts/JetBrainsMono-Regular.woff2
diff --git a/front/src/front/static/img/tdameros.jpg → front/app/public/img/tdameros.jpg b/front/src/front/static/img/tdameros.jpg → front/app/public/img/tdameros.jpg
diff --git a/front/src/front/static/css/style.css → front/app/src/css/style.css b/front/src/front/static/css/style.css → front/app/src/css/style.css
@@ -1,20 +1,20 @@
 @font-face {
     font-family: 'JetBrains Mono';
-    src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('truetype');
+    src: url('/fonts/JetBrainsMono-Regular.woff2') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'JetBrains Mono Bold';
-    src: url('/static/fonts/JetBrainsMono-Bold.woff2') format('truetype');
+    src: url('/fonts/JetBrainsMono-Bold.woff2') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'JetBrains Mono Light';
-    src: url('/static/fonts/JetBrainsMono-Light.woff2') format('truetype');
+    src: url('/fonts/JetBrainsMono-Light.woff2') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

diff --git a/front/src/front/static/js/Cookies.js → front/app/src/js/Cookies.js b/front/src/front/static/js/Cookies.js → front/app/src/js/Cookies.js
diff --git a/front/src/front/static/js/Router.js → front/app/src/js/Router.js b/front/src/front/static/js/Router.js → front/app/src/js/Router.js
diff --git a/front/src/front/static/js/Theme.js → front/app/src/js/Theme.js b/front/src/front/static/js/Theme.js → front/app/src/js/Theme.js
diff --git a/...c/front/static/js/components/Component.js → front/app/src/js/components/Component.js b/...c/front/static/js/components/Component.js → front/app/src/js/components/Component.js
diff --git a/front/src/front/static/js/components/Home.js → front/app/src/js/components/Home.js b/front/src/front/static/js/components/Home.js → front/app/src/js/components/Home.js
diff --git a/...front/static/js/components/Multiplayer.js → front/app/src/js/components/Multiplayer.js b/...front/static/js/components/Multiplayer.js → front/app/src/js/components/Multiplayer.js
diff --git a/.../src/front/static/js/components/Navbar.js → front/app/src/js/components/Navbar.js b/.../src/front/static/js/components/Navbar.js → front/app/src/js/components/Navbar.js
@@ -79,12 +79,14 @@ export class Navbar extends Component {
                         ${this.generateNavLink('tournaments')}
                     </li>
                 </ul>
-                <div class="d-flex">
+                <div class="d-flex mb-2 mb-lg-0">
                     <theme-button-component></theme-button-component>
                     <form class="d-flex" role="search">
                         <input class="form-control ms-2 me-2" type="search"
                                placeholder="Search" aria-label="Search">
                     </form>
+                </div>
+                <div class="d-flex">
                     ${this.logNavPart()}
                 </div>
             </div>
@@ -97,12 +99,12 @@ export class Navbar extends Component {
     return (`
       <div id="log-part"  class="d-flex align-items-center">
           <a class="mx-2">
-              <i class="fas fa-bell text-dark-emphasis"></i>
+            <i class="bi bi-bell-fill text-dark-emphasis"></i>
           </a>
           <div class="dropdown mx-2">
               <span class="dropdown-toggle" id="dropdownMenuLink"
                     data-bs-toggle="dropdown" aria-expanded="false">
-                  <img id="nav-profile-img" src="/static/img/tdameros.jpg" alt="profile image"
+                  <img id="nav-profile-img" src="/img/tdameros.jpg" alt="profile image"
                        class="rounded-circle"
                        style="width: 40px; height: 40px;">
                   <span id="nav-username">@username</span>

diff --git a/...ont/static/js/components/ResetPassword.js → front/app/src/js/components/ResetPassword.js b/...ont/static/js/components/ResetPassword.js → front/app/src/js/components/ResetPassword.js
@@ -14,7 +14,7 @@ export class ResetPassword extends Component {
             <h2 class="card-title text-center m-5">Reset password</h2>
             <form>
                 <div class="d-flex justify-content-center mb-4">
-                    <i id="email-icon" class="fa fa-envelope fa-5x"></i>
+                    <i class="bi bi-envelope-at-fill" style="font-size: 7rem;"></i>
                 </div>
                 <div class="form-group mb-4">
                     <input type="email" class="form-control" id="email"

diff --git a/.../src/front/static/js/components/Signin.js → front/app/src/js/components/Signin.js b/.../src/front/static/js/components/Signin.js → front/app/src/js/components/Signin.js
diff --git a/.../src/front/static/js/components/Signup.js → front/app/src/js/components/Signup.js b/.../src/front/static/js/components/Signup.js → front/app/src/js/components/Signup.js
@@ -55,8 +55,8 @@ export class Signup extends Component {
     } else {
       this.password.setAttribute('type', 'password');
     }
-    this.passwordEyeIcon.children[0].classList.toggle('fa-eye-slash');
-    this.passwordEyeIcon.children[0].classList.toggle('fa-eye');
+    this.passwordEyeIcon.children[0].classList.toggle('bi-eye-fill');
+    this.passwordEyeIcon.children[0].classList.toggle('bi-eye-slash-fill');
     this.passwordHiden = !this.passwordHiden;
   }
 
@@ -66,8 +66,8 @@ export class Signup extends Component {
     } else {
       this.confirmPassword.setAttribute('type', 'password');
     }
-    this.confirmPasswordEyeIcon.children[0].classList.toggle('fa-eye-slash');
-    this.confirmPasswordEyeIcon.children[0].classList.toggle('fa-eye');
+    this.confirmPasswordEyeIcon.children[0].classList.toggle('bi-eye-fill');
+    this.confirmPasswordEyeIcon.children[0].classList.toggle('bi-eye-slash-fill');
     this.confirmPasswordHiden = !this.confirmPasswordHiden;
   }
 
@@ -126,7 +126,7 @@ export class Signup extends Component {
                         <input type="password" class="form-control" id="password"
                                placeholder="Password">
                         <span  id="password-eye" class="input-group-text eye-box">
-                            <span class="fa fa-fw fa-eye field-icon"></span>
+                            <i class="bi bi-eye-fill"></i>
                         </span>
                         <div id="password-feedback" class="invalid-feedback">
                             Invalid password.
@@ -138,7 +138,7 @@ export class Signup extends Component {
                         <input type="password" class="form-control"
                                id="confirm-password" placeholder="Confirm Password">
                         <span id="confirm-password-eye" class="input-group-text eye-box">
-                                <span class="fa fa-fw fa-eye field-icon"></span>
+                            <i class="bi bi-eye-fill"></i>
                         </span>
                         <div class="invalid-feedback">
                             Passwords do not match.

diff --git a/...ront/static/js/components/Singleplayer.js → front/app/src/js/components/Singleplayer.js b/...ront/static/js/components/Singleplayer.js → front/app/src/js/components/Singleplayer.js
diff --git a/...front/static/js/components/ThemeButton.js → front/app/src/js/components/ThemeButton.js b/...front/static/js/components/ThemeButton.js → front/app/src/js/components/ThemeButton.js
diff --git a/...front/static/js/components/Tournaments.js → front/app/src/js/components/Tournaments.js b/...front/static/js/components/Tournaments.js → front/app/src/js/components/Tournaments.js
diff --git a/front/src/front/static/js/main.js → front/app/src/js/main.js b/front/src/front/static/js/main.js → front/app/src/js/main.js
@@ -1,3 +1,9 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import '../css/style.css';
+
+import * as bootstrap from 'bootstrap'
+
 import { Router, Route } from './Router.js';
 import { Home } from "./components/Home.js";
 import { Navbar } from "./components/Navbar.js";
@@ -10,6 +16,7 @@ import {Signin} from "./components/Signin.js";
 import {Signup} from "./components/Signup.js";
 import {ResetPassword} from "./components/ResetPassword.js";
 
+
 Theme.init();
 
 customElements.define('home-component', Home);

diff --git a/...c/front/static/js/utils/BootstrapUtils.js → front/app/src/js/utils/BootstrapUtils.js b/...c/front/static/js/utils/BootstrapUtils.js → front/app/src/js/utils/BootstrapUtils.js
diff --git a/...c/front/static/js/utils/InputValidator.js → front/app/src/js/utils/InputValidator.js b/...c/front/static/js/utils/InputValidator.js → front/app/src/js/utils/InputValidator.js
diff --git a/front/app/vite.config.js b/front/app/vite.config.js
@@ -0,0 +1,6 @@
+export default {
+  server: {
+    port: 8080,
+    hot: true
+  },
+}
diff --git a/front/docker/Dockerfile b/front/docker/Dockerfile
diff --git a/front/docker/docker-compose.yaml b/front/docker/docker-compose.yaml
@@ -1,4 +1,5 @@
 services:
+
     front-nginx:
         networks:
             - transcendence
@@ -7,26 +8,18 @@ services:
             context: nginx
             dockerfile: Dockerfile
         ports:
-            - "80:80"
             - "443:443"
         depends_on:
-            - front
+            - front-vite
         volumes:
-            - front_code:/app/src/
-        restart: on-failure
-
+            - front_dist:/transcendence/
 
-    front:
+    front-vite:
+        image: node:21-bookworm
         networks:
             - front
-            - transcendence
-        build:
-            context: .
-            dockerfile: Dockerfile
-        command: sh -c "python3 src/manage.py collectstatic --noinput &&
-                        gunicorn --chdir src/ front.wsgi:application -w 4 -b 0.0.0.0:8000"
+        working_dir: /app
         volumes:
-            - front_code:/app/src/
-        expose:
-            - "8000"
+            - front_code:/app
+        command: sh -c "npm install && npm run build"
         restart: on-failure
diff --git a/front/docker/nginx/nginx.conf b/front/docker/nginx/nginx.conf
@@ -22,14 +22,9 @@ http {
         include /etc/nginx/mime.types;
 
         location / {
-            proxy_pass http://front:8000;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        }
-
-        location /static/ {
-            alias /app/src/staticfiles/;
+            root /transcendence/;
+            index index.html;
+            try_files $uri $uri/ /index.html;
         }
     }
 }
diff --git a/front/src/__init__.py b/front/src/__init__.py
diff --git a/front/src/front/__init__.py b/front/src/front/__init__.py
diff --git a/front/src/front/asgi.py b/front/src/front/asgi.py