Feat/webapp/new signup

webapp/package.json

@@ -5,12 +5,14 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
     "dotenv": "^16.4.1",
-    "framer-motion": "^11.0.3",
+    "framer-motion": "^11.0.6",
     "i18next": "^23.8.2",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.3",

webapp/public/locales/en/translation.json

@@ -1,5 +1,5 @@
 {
-    "nav":{
+    "common": {
         "home": "Home",
         "api_docs": "API Documentation",
         "statistics": {
@@ -9,6 +9,13 @@
         },
         "play": "Play",
         "login": "Log in",
-        "register": "Register"
+        "register": "Register",
+        "submit": "Submit"
+    },
+    "session": {
+        "username": "Username",
+        "password": "Password",
+        "email": "Email",
+        "confirm_password": "Confirm password"
     }
 }

webapp/public/locales/es/translation.json

@@ -1,5 +1,5 @@
 {
-    "nav":{
+    "common":{
         "home": "Inicio",
         "api_docs": "Documentación de la API",
         "statistics": {
@@ -10,5 +10,11 @@
         "play": "Jugar",
         "login": "Iniciar sesión",
         "register": "Registrarse"
+    },
+    "session": {
+        "username": "Nombre de usuario",
+        "password": "Contraseña",
+        "email": "Correo electrónico",
+        "confirm_password": "Confirmar contraseña"
     }
-}
+}

webapp/src/components/Layout.jsx

@@ -34,15 +34,15 @@ export function TopBar() {
       { pages.map(page => parsePage(page)) }
       </GridItem>
       <GridItem as={Flex} justifyContent={"right"} key={"right-navbar"}>
-        <Button as={Link} mr={"1vw"}>{t("nav.login")}</Button>
-        <Button as={Link} mr={"1vw"}>{t("nav.register")}</Button>
+        <Button as={Link} href="/login" mr={"1vw"}>{t("nav.login")}</Button>
+        <Button as={Link} href="/register" mr={"1vw"}>{t("nav.register")}</Button>
       </GridItem>
     </Grid>
 }
 export default function Layout() {
   return <>
     <TopBar />
-    <Container bgColor="#DCF2F1" minW={"100%"} minH={"100%"}>
+    <Container minW={"100%"} minH={"100%"}>
       <Outlet />
     </Container>
   </>

webapp/src/components/Router.jsx

@@ -1,10 +1,11 @@
 import React from "react";
 import Root from "../pages/Root";
-import Layout from "./Layout";
-import { Route, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
+import Signup from "../pages/Signup";
+import { Route,createRoutesFromElements } from "react-router-dom";
 
 export default createRoutesFromElements(
-    <Route path="/" element={<Layout />} >
+    <Route path="/">
       <Route index element={<Root />} />
+      <Route path="/signup" element={<Signup />} />
     </Route>
-  )
+  )