Fix to authManager and statistics frontend support

webapp/jsconfig.json

@@ -3,6 +3,8 @@
     "baseUrl": "./src",
     "checkJs": true,
     "jsx": "react",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "moduleResolution": "node"
   }
 }

webapp/package.json

@@ -11,13 +11,16 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "chart.js": "^4.4.2",
     "dotenv": "^16.4.1",
     "framer-motion": "^11.0.6",
     "i18next": "^23.8.2",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.3",
+    "jest-when": "^3.6.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",

webapp/public/locales/en/translation.json

@@ -5,7 +5,7 @@
         "statistics": {
             "title": "Statistics",
             "personal": "My statistics",
-            "general": "General statistics"
+            "general": "Leaderboard"
         },
         "play": "Play",
         "login": "Log in",
@@ -48,5 +48,18 @@
             "type": "Authorization Error: ",
             "message": "Incorrect password"
         }
+    },
+    "statistics": {
+        "position": "Position",
+        "username": "Username",
+        "rightAnswers": "Correct answers",
+        "wrongAnswers": "Wrong answers",
+        "totalAnswers": "Total answers",
+        "percentage": "Correct answer rate",
+        "texts": {
+            "personalRight": "{{right, number}} correct answers",
+            "personalWrong": "{{wrong, number}} wrong answers",
+            "personalRate": "{{rate, number}} %"
+        }
     }
 }

webapp/public/locales/es/translation.json

@@ -5,7 +5,7 @@
         "statistics": {
             "title": "Estadísticas",
             "personal": "Mis estadísticas",
-            "general": "Estadísticas generales"
+            "general": "Clasificación"
         },
         "play": "Jugar",
         "login": "Iniciar sesión",
@@ -48,5 +48,18 @@
             "type": "Error de Autorización: ",
             "message": "Contraseña incorrecta"
         }
+    },
+    "statistics": {
+        "position": "Posición",
+        "username": "Nombre de usuario",
+        "rightAnswers": "Respuestas correctas",
+        "wrongAnswers": "Respuestas erróneas",
+        "totalAnswers": "Respuestas totales",
+        "percentage": "Porcentaje de acierto",
+        "texts": {
+            "personalRight": "{{right, number}} respuestas correctas",
+            "personalWrong": "{{wrong, number}} respuestas incorrectas",
+            "personalRate": "{{rate, number}} %"
+        }
     }
 }

webapp/src/components/GoBack.jsx

@@ -0,0 +1,14 @@
+import { Button, Flex } from "@chakra-ui/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+
+export default function GoBack() {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+    return <Flex direction="row" justifyContent="center" alignItems="center">
+        <Button data-testid={"GoBack"} type="submit" colorScheme="blue" margin={"10px"} className={"custom-button effect1"} onClick={() => navigate("/dashboard")} w="100%">
+            {t("common.goBack")}
+        </Button>
+    </Flex>
+}

webapp/src/components/Router.jsx

@@ -8,7 +8,9 @@ import Rules from "../pages/Rules";
 import Signup from "../pages/Signup";
 import Game from "../pages/Game";
 import Results from "../pages/Results";
+import Statistics from "pages/Statistics";
 import ProtectedRoute from "./utils/ProtectedRoute";
+import Logout from "pages/Logout";
 
 
 export default createRoutesFromElements(
@@ -21,6 +23,8 @@ export default createRoutesFromElements(
       <Route path="/dashboard/rules" element={<Rules />}/>
       <Route path="/dashboard/game" element={<Game />}/>
       <Route path="/dashboard/game/results" element={<Results />}/>
+      <Route path="/dashboard/statistics" element={<Statistics />} />
+      <Route path="/logout" element={<Logout />} />
     </Route>
   </Route>
 )

webapp/src/components/auth/AuthManager.js

@@ -0,0 +1,121 @@
+import axios, { HttpStatusCode } from "axios";
+
+export default class AuthManager {
+
+  static #instance = null;
+  #isLoggedIn = false;
+  #axiosInstance = null;
+
+  constructor() {
+    if (!AuthManager.#instance) {
+      AuthManager.#instance = this;
+      AuthManager.#instance.#axiosInstance = axios.create();
+    }
+  }
+
+  getAxiosInstance() {
+    return AuthManager.#instance.#axiosInstance;
+  }
+
+  setLoggedIn(value) {
+    AuthManager.#instance.#isLoggedIn = value;
+  }
+
+  isLoggedIn() {
+    console.log(this.#isLoggedIn);
+    console.log(sessionStorage.getItem("jwtRefreshToken"))
+    if (!AuthManager.#instance.#isLoggedIn) {
+      if (sessionStorage.getItem("jwtRefreshToken")) {
+        this.#refresh();
+      }
+    }
+    return AuthManager.#instance.#isLoggedIn;
+  }
+
+  static getInstance() {
+    return AuthManager.#instance;
+  }
+
+  async login(loginData, onSuccess, onError) {
+    try {
+        let requestAnswer = await this.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/auth/login", loginData);
+        if (HttpStatusCode.Ok === requestAnswer.status) {
+            this.#saveToken(requestAnswer);
+            AuthManager.#instance.setLoggedIn(true);
+            onSuccess();
+        } else {
+            throw requestAnswer;
+        }
+    } catch (error) {
+        let errorType;
+        switch (error.response ? error.response.status : null) {
+            case 400:
+                errorType = { type: "error.validation.type", message: "error.validation.message"};
+                break;
+            case 401:
+                errorType = { type: "error.authorized.type", message: "error.authorized.message"};
+                break;
+            default:
+                errorType = { type: "error.unknown.type", message: "error.unknown.message"};
+                break;
+        }
+        onError(errorType);
+    }
+  }
+
+  reset() {
+    AuthManager.#instance = null;
+    AuthManager.#instance = new AuthManager();
+  }
+
+  async logout() {
+    try {
+      await this.getAxiosInstance().get(process.env.REACT_APP_API_ENDPOINT + "/auth/logout");
+      AuthManager.#instance.setLoggedIn(false);
+    } catch (error) {
+        console.error("Error logging out user: ", error);
+    }
+  }
+
+  #saveToken(requestAnswer) {
+    sessionStorage.setItem("jwtRefreshToken", requestAnswer.data.refresh_token);
+  }
+
+  async #refresh() {
+    try {
+        let response = await this.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/auth/refresh-token", {
+          "refreshToken": sessionStorage.getItem("jwtRefreshToken")
+        });
+        this.#saveToken(response);
+        AuthManager.#instance.setLoggedIn(true);
+    } catch (error) {
+        console.error("Error refreshing token: ", error);
+    }  
+  }
+
+  async register(registerData, onSuccess, onError) {
+    try {
+        let requestAnswer = await this.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/auth/register", registerData);
+        if (HttpStatusCode.Ok === requestAnswer.status) {
+            this.#saveToken(requestAnswer);
+            onSuccess();
+        } else {
+            throw requestAnswer;
+        }
+    } catch (error) {
+        let errorType;
+        switch (error.response ? error.response.status : null) {
+            case 400:
+                errorType = { type: "error.validation.type", message: "error.validation.message"};
+                break;
+            case 409:
+                errorType = { type: "error.conflict.type", message: "error.conflict.message"};
+                break;
+            default:
+                errorType = { type: "error.unknown.type", message: "error.unknown.message"};
+                break;
+        }
+        onError(errorType);
+    }
+}
+}

webapp/src/components/utils/ProtectedRoute.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Outlet, Navigate } from "react-router-dom";
-import AuthManager from "./AuthManager";
+import AuthManager from "../auth/AuthManager";
 
 const authManager = new AuthManager();