Merge pull request #80 from Arquisoft/mergesession

Authentication frontend
Arquisoft · Mar 29, 2024 · 40e51ba · 40e51ba
2 parents 4d928bc + 3c7d5de
commit 40e51ba
Show file tree

Hide file tree

Showing 49 changed files with 1,163 additions and 490 deletions.
diff --git a/users/userservice/src/controllers/user-controller.ts b/users/userservice/src/controllers/user-controller.ts
@@ -11,6 +11,8 @@ import User from '../models/user-model';
 
 const addUser = async (req: Request, res: Response) => {
   try {
+    console.log(req.body.username.toString());
+    console.log(req.body.password.toString());
     validateRequiredFields(req, ['username', 'password']);
     validateNotEmpty(req, ['username']);
     validateRequiredLength(req, ['password'], 8);

diff --git a/webapp/.prettierrc b/webapp/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": false
+}
diff --git a/webapp/public/KaW.png b/webapp/public/KaW.png
diff --git a/webapp/public/KaWIco.ico b/webapp/public/KaWIco.ico
diff --git a/webapp/public/KaWIco.png b/webapp/public/KaWIco.png
diff --git a/webapp/public/KaW_old.png b/webapp/public/KaW_old.png
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/KaWIco.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Know and Win</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -1,128 +1,50 @@
-import { useState, useEffect } from "react"
-import { Route, Routes } from "react-router-dom"
-
-//Components
-import Header from "./components/Header/Header"
-import Nav from "./components/Nav/Nav"
-
-//Pages
-import Game from "./pages/Game/Game"
-import Profile from "./pages/Profile/Profile"
-import Leaderboard from "./pages/Leaderboard/Leaderboard"
-import Settings from "./pages/Settings/Settings"
-import Home from "./pages/Home/Home"
-
-const apiEndpoint = "http://20.117.173.161:8000"
+import { Route, Routes } from 'react-router-dom'
+
+import Game from './pages/Game/Game'
+import Profile from './pages/Profile/Profile'
+import Leaderboard from './pages/Leaderboard/Leaderboard'
+import Home from './pages/Home/Home'
+import AppLayout from './pages/AppLayout'
+import Settings from './pages/Settings/Settings'
+import Login from './pages/Login/Login'
+import Register from './pages/Register/Register'
+import { ProtectedRoute } from './components/ProtectedRoute'
+import { AuthProvider } from './context/AuthContext'
+import Logout from './pages/Logout/Logout'
+import { SettingsProvider } from './context/SettingsContext'
 
 function App() {
-  //State for opening and closing the navigation
-  const [openNav, setOpenNav] = useState(false)
-
-  const [questions, setQuestions] = useState([])
-
-  useEffect(() => {
-    ; (async () => {
-      const questions = await getQuestions()
-      setQuestions(questions)
-      console.log(questions)
-    })()
-  }, [])
-
-  //State for the theme
-  const [theme, setTheme] = useState("light")
-
-  //State for the timer value
-  const [timerValue, setTimerValue] = useState(15)
-
-  //Check if the theme is saved in the local storage
-  useEffect(() => {
-    if (localStorage.getItem("theme")) {
-      setTheme(localStorage.getItem("theme"))
-    }
-  }, [theme])
-
-  //Function to open and close the navigation
-  const toggleNavHandler = () => {
-    setOpenNav(prevState => {
-      return !prevState
-    })
-  }
-
-  const changeThemeHandler = () => {
-    setTheme(prevState => {
-      return prevState === "light" ? "dark" : "light"
-    })
-
-    localStorage.setItem("theme", theme === "light" ? "dark" : "light")
-  }
-
-  const changeTimerValueHandler = e => {
-    setTimerValue(e.target.value)
-  }
-
-  const getQuestions = async () => {
-    const response = await fetch(apiEndpoint + "/questions?size=3")
-    console.log(response)
-    const data = await response.json()
-
-    data.forEach(question => {
-      question.answers = shuffle(question.answers)
-    })
-
-    return data
-  }
-
-  function shuffle(array) {
-    let currentIndex = array.length,
-      randomIndex
-
-    // While there remain elements to shuffle.
-    while (currentIndex > 0) {
-      // Pick a remaining element.
-      randomIndex = Math.floor(Math.random() * currentIndex)
-      currentIndex--
-
-        // And swap it with the current element.
-        ;[array[currentIndex], array[randomIndex]] = [
-          array[randomIndex],
-          array[currentIndex]
-        ]
-    }
-
-    return array
-  }
-
   return (
-    <div className={theme}>
-      <Header
-        onToggleNav={toggleNavHandler}
-        onChangeTheme={changeThemeHandler}
-        theme={theme}
-      />
-
-      <Nav openNav={openNav} onToggleNav={toggleNavHandler} />
-
-      <main>
+    <SettingsProvider>
+      <AuthProvider>
         <Routes>
-          <Route path="home" element={<Home />}></Route>
-          <Route
-            path="game"
-            element={<Game quizData={questions} timerValue={timerValue} />}
-          ></Route>
-          <Route path="profile" element={<Profile />}></Route>
-          <Route path="leaderboard" element={<Leaderboard />}></Route>
-          <Route
-            path="settings"
-            element={
-              <Settings
-                onChangeTimerValue={changeTimerValueHandler}
-                timerValue={timerValue}
-              />
-            }
-          ></Route>
+          <Route element={<AppLayout />}>
+            <Route path="/" index element={<Home />}></Route>
+            <Route path="/login" element={<Login />}></Route>
+            <Route path="/register" element={<Register />}></Route>
+            <Route path="/logout" element={<Logout />} />
+            <Route
+              path="game"
+              element={
+                <ProtectedRoute>
+                  <Game />
+                </ProtectedRoute>
+              }
+            ></Route>
+            <Route
+              path="profile"
+              element={
+                <ProtectedRoute>
+                  <Profile />
+                </ProtectedRoute>
+              }
+            ></Route>
+            <Route path="leaderboard" element={<Leaderboard />}></Route>
+            <Route path="settings" element={<Settings />}></Route>
+          </Route>
         </Routes>
-      </main>
-    </div>
+      </AuthProvider>
+    </SettingsProvider>
   )
 }
 

diff --git a/webapp/src/assets/testData.json → webapp/src/assets/data.json b/webapp/src/assets/testData.json → webapp/src/assets/data.json
diff --git a/webapp/src/assets/login-solid.svg b/webapp/src/assets/login-solid.svg
diff --git a/webapp/src/assets/logout-solid.svg b/webapp/src/assets/logout-solid.svg
diff --git a/webapp/src/components/AddUser/AddUser.css b/webapp/src/components/AddUser/AddUser.css
@@ -0,0 +1,21 @@
+.register {
+  max-width: 400px;
+  background: #fff;
+  border: 1px solid #dddfe2;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
+  border-radius: 8px;
+  padding: 1rem 2rem;
+  align-items: center;
+  text-align: center;
+}
+
+.register > form input {
+  border-radius: 8px;
+  border: 2px solid lightgrey;
+  outline: none;
+  color: #1d2129;
+  margin: 2% 0;
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+}