Merge pull request #40 from Arquisoft/UserInterfacePaths#12

LGTM!
Arquisoft · Feb 1, 2024 · f48bb71 · f48bb71
2 parents a43d8e8 + 9c87f60
commit f48bb71
Show file tree

Hide file tree

Showing 18 changed files with 140 additions and 71 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -12,7 +12,9 @@
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
+    "tailwindcss": "^3.4.1",
     "web-vitals": "^3.5.1"
   },
   "scripts": {
@@ -51,6 +53,7 @@
     "mongodb-memory-server": "^9.1.4",
     "puppeteer": "^21.7.0",
     "serve": "^14.2.1",
-    "start-server-and-test": "^2.0.3"
+    "start-server-and-test": "^2.0.3",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -9,12 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +18,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>WIQ</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/webapp/public/logo192.png b/webapp/public/logo192.png
diff --git a/webapp/public/logo512.png b/webapp/public/logo512.png
diff --git a/webapp/public/manifest.json b/webapp/public/manifest.json
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -1,37 +1,32 @@
-import React, { useState } from 'react';
-import AddUser from './components/AddUser';
-import Login from './components/Login';
-import CssBaseline from '@mui/material/CssBaseline';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
+import React from 'react';
 
-function App() {
-  const [showLogin, setShowLogin] = useState(true);
+import router from './routers/AppRouter';
+import { RouterProvider } from 'react-router-dom';
 
-  const handleToggleView = () => {
-    setShowLogin(!showLogin);
-  };
 
+function App() {
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to wiq_es1c
-      </Typography>
-      {showLogin ? <Login /> : <AddUser />}
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            Don't have an account? Register here.
-          </Link>
-        ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
-        )}
-      </Typography>
-    </Container>
+    <RouterProvider router={ router } />
+    /*<Container className='min-h-screen'>
+      <Container className='bg-white p-5' component="main" maxWidth="xs">
+        <CssBaseline />
+        <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+          Welcome to wiq_es1c
+        </Typography>
+          {showLogin ? <Login /> : <AddUser />}
+        <Typography component="div" align="center" sx={{ marginTop: 2 }}>
+          {showLogin ? (
+            <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
+              Don't have an account? Register here.
+            </Link>
+          ) : (
+            <Link component="button" variant="body2" onClick={handleToggleView}>
+              Already have an account? Login here.
+            </Link>
+          )}
+        </Typography>
+      </Container>
+    </Container>*/
   );
 }
 

diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
+  /*render(<App />);
   const linkElement = screen.getByText(/Welcome to wiq_es1c/i);
-  expect(linkElement).toBeInTheDocument();
+  expect(linkElement).toBeInTheDocument();*/
 });
diff --git a/webapp/src/components/error/Error404.js b/webapp/src/components/error/Error404.js
@@ -0,0 +1,13 @@
+import image from './error404.svg';
+
+const Error404 = () =>
+{
+    return (
+        <div className='min-w-full min-h-screen flex justify-center flex-col items-center'>
+            <img src={ image } alt={ image } className="sm:w-1/2 w-2/3" />
+            <h1 className='text-white text-5xl text-center'>Página no encontrada</h1>
+        </div>
+    );
+}
+
+export default Error404;
diff --git a/webapp/src/components/error/error404.svg b/webapp/src/components/error/error404.svg
diff --git a/webapp/src/components/Login.js → webapp/src/components/login/Login.js b/webapp/src/components/Login.js → webapp/src/components/login/Login.js
@@ -34,7 +34,7 @@ const Login = () => {
   };
 
   return (
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+    <Container className='text-white' component="main" maxWidth="xs" sx={{ marginTop: 0 }}>
       {loginSuccess ? (
         <div>
           <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>

diff --git a/webapp/src/components/Login.test.js → webapp/src/components/login/Login.test.js b/webapp/src/components/Login.test.js → webapp/src/components/login/Login.test.js
diff --git a/webapp/src/components/AddUser.js → webapp/src/components/register/AddUser.js b/webapp/src/components/AddUser.js → webapp/src/components/register/AddUser.js
diff --git a/webapp/src/components/AddUser.test.js → ...p/src/components/register/AddUser.test.js b/webapp/src/components/AddUser.test.js → ...p/src/components/register/AddUser.test.js
diff --git a/webapp/src/index.css b/webapp/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+import App from './App';
+import './index.css';
+
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <div className='bg-white dark:bg-dark-mode min-h-screen'>
+      <App />
+    </div>
   </React.StrictMode>
 );
 

diff --git a/webapp/src/routers/AppRouter.js b/webapp/src/routers/AppRouter.js
@@ -0,0 +1,23 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import Login from "../components/login/Login";
+import AddUser from "../components/register/AddUser";
+import Error404 from "../components/error/Error404";
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <h1 className="text-white text-5xl text-center">Pantalla del juego</h1>,
+        errorElement: <Error404 />
+    },
+    {
+        path: "/login",
+        element: <Login />
+    },
+    {
+        path: "/register",
+        element: <AddUser />
+    }
+]);
+
+export default router;
diff --git a/webapp/tailwind.config.js b/webapp/tailwind.config.js
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      backgroundColor: {
+        'dark-mode': '#171717'
+      },
+    },
+  },
+  plugins: [],
+}
+