Hotfix

webapp/src/App.js

@@ -1,41 +1,38 @@
 import React, { useState } from 'react';
-import Authenticate from './pages/Authenticate/Authenticate.js';
-import Home from './pages/Home/Home.js';
-import Clasico from './pages/Clasico/Clasico.js';
-import WrongRoute from './pages/WrongRoute/WrongRoute.js';
-import './App.css';
+import Register from './components/Register/Register';
+import Login from './components/Login/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 {BrowserRouter, Routes, Route} from "react-router-dom";
-import AuthProvider from 'react-auth-kit';
-import AuthOutlet from '@auth-kit/react-router/AuthOutlet';
-import createStore from 'react-auth-kit/createStore';
+function App() {
+  const [showLogin, setShowLogin] = useState(true);
 
-const store = createStore({
-  authName:'_auth',
-  authType:'cookie',
-  cookieDomain: window.location.hostname,
-  cookieSecure: window.location.protocol === 'https:'
-})
-
- const App = () => {
-   return (
-     <AuthProvider store={store}>
-       <BrowserRouter>
-         <Routes>
-           {/** Rutas públicas */}
-           <Route path={'/'} element={<Authenticate />}/>
-
-           {/** Rutas privadas */}
-           <Route element={<AuthOutlet fallbackPath='/' />}>
-             <Route path='/home' element={<Home />} />
-             <Route path='/home/clasico' element={<Clasico />} />
-           </Route>
+  const handleToggleView = () => {
+    setShowLogin(!showLogin);
+  };
 
-           <Route path='*' element={<WrongRoute />} />
-         </Routes>
-       </BrowserRouter>
-     </AuthProvider>
-   );
- };
+  return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+        Welcome to wiq_es1a
+      </Typography>
+      {showLogin ? <Login /> : <Register />}
+      <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>
+  );
+}
 
-export default App;
+export default App;

webapp/src/App.test.js

@@ -3,6 +3,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/Welcome to the 2024 edition of the Software Architecture course/i);
+  const linkElement = screen.getByText(/Welcome to wiq_es1a/i);
   expect(linkElement).toBeInTheDocument();
-});
+});

webapp/src/components/Login/Login.js

@@ -2,48 +2,30 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
-import { useNavigate } from "react-router-dom";
-import useSignIn from 'react-auth-kit/hooks/useSignIn';
-import './Login.css';
 
 const Login = () => {
-  const signIn = useSignIn();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-  const [token, setToken] = useState('');
   const [error, setError] = useState('');
   const [loginSuccess, setLoginSuccess] = useState(false);
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
-  const navigate = useNavigate();
-
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const loginUser = async () => {
     try {
       const response = await axios.post(`${apiEndpoint}/login`, { username, password });
-      console.log(response);
+
       // Extract data from the response
       const { createdAt: userCreatedAt } = response.data;
-      setToken(response.data.token);
-
-      signIn({
-        auth: {
-          token: token
-        },
-        userState: {name: username}
-      })
 
       setCreatedAt(userCreatedAt);
       setLoginSuccess(true);
 
       setOpenSnackbar(true);
-
-      navigate('/home')
     } catch (error) {
-      //console.log(error);
-      //setError(error.response.data.error);
+      setError(error.response.data.error);
     }
   };
 
@@ -52,50 +34,47 @@ const Login = () => {
   };
 
   return (
-    <div className="login-container">
+    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       {loginSuccess ? (
         <div>
-          <h1 className="login-header">
+          <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
             Hello {username}!
-          </h1>
-          <p className="login-text">
+          </Typography>
+          <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
             Your account was created on {new Date(createdAt).toLocaleDateString()}.
-          </p>
+          </Typography>
         </div>
       ) : (
-        <>
-          <h1 className="login-header">Login</h1>
-          <input
-            className="login-input"
-            type="text"
-            placeholder="Username"
+        <div>
+          <Typography component="h1" variant="h5">
+            Login
+          </Typography>
+          <TextField
+            margin="normal"
+            fullWidth
+            label="Username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
           />
-          <input
-            className="login-input"
+          <TextField
+            margin="normal"
+            fullWidth
+            label="Password"
             type="password"
-            placeholder="Password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
-          <button className="login-button" onClick={loginUser}>
+          <Button variant="contained" color="primary" onClick={loginUser}>
             Login
-          </button>
-          {openSnackbar && (
-            <div className="login-snackbar">
-              Login successful
-            </div>
-          )}
+          </Button>
+          <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
           {error && (
-            <div className="login-error">
-              Error: {error}
-            </div>
+            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
           )}
-        </>
+        </div>
       )}
-      </div>
-    )
-}  
+    </Container>
+  );
+};
 
-export default Login;
+export default Login;

webapp/src/components/Login/Login.test.js

@@ -59,4 +59,4 @@ describe('Login component', () => {
     expect(screen.queryByText(/Hello testUser!/i)).toBeNull();
     expect(screen.queryByText(/Your account was created on/i)).toBeNull();
   });
-});
+});

webapp/src/components/Register/Register.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import AddUser from './AddUser';
+import Register from './Register';
 
 const mockAxios = new MockAdapter(axios);
 
@@ -12,7 +12,7 @@ describe('AddUser component', () => {
   });
 
   it('should add user successfully', async () => {
-    render(<AddUser />);
+    render(<Register />);
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
@@ -35,7 +35,7 @@ describe('AddUser component', () => {
   });
 
   it('should handle error when adding user', async () => {
-    render(<AddUser />);
+    render(<Register />);
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
@@ -56,4 +56,4 @@ describe('AddUser component', () => {
       expect(screen.getByText(/Error: Internal Server Error/i)).toBeInTheDocument();
     });
   });
-});
+});