Merge branch 'initial-modifications' into feat/spring-api

sonar-project.properties

@@ -10,7 +10,7 @@ sonar.host.url=https://sonarcloud.io
 sonar.language=js
 sonar.projectName=wiq_en2b
 
-sonar.coverage.exclusions=**/*.test.js
+sonar.coverage.exclusions=**/*.test.js,**/*.test.jsx
 sonar.sources=webapp/src/components,users/authservice,users/userservice,gatewayservice
 sonar.sourceEncoding=UTF-8
 sonar.exclusions=node_modules/**

webapp/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "checkJs": true,
+    "jsx": "react"
+  }
+}

webapp/package.json

@@ -10,8 +10,14 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "dotenv": "^16.4.1",
+    "i18next": "^23.8.2",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.21.3",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },

webapp/src/App.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import AddUser from './components/AddUser';
-import Login from './components/Login';
+import AddUser from './pages/Register';
+import Login from './pages/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';

webapp/src/components/Router.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {
+    createBrowserRouter
+  } from "react-router-dom";
+import Root from "../pages/Root";
+import Login from "../pages/Login";
+import Register from "../pages/Register";
+
+const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <Root />,
+    },
+    {
+      path: "/login",
+      element: <Login />
+    },
+    {
+      path: "/register",
+      element: <Register />
+    }
+  ]);
+
+export default router;

webapp/src/index.js

@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { RouterProvider } from 'react-router-dom';
+import router from 'components/Router';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 

webapp/src/components/AddUser.js → webapp/src/pages/Register.jsx

@@ -5,7 +5,7 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-const AddUser = () => {
+const Register = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -27,7 +27,7 @@ const AddUser = () => {
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       <Typography component="h1" variant="h5">
-        Add User
+        Register
       </Typography>
       <TextField
         name="username"
@@ -47,7 +47,7 @@ const AddUser = () => {
         onChange={(e) => setPassword(e.target.value)}
       />
       <Button variant="contained" color="primary" onClick={addUser}>
-        Add User
+        Register
       </Button>
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (
@@ -57,4 +57,4 @@ const AddUser = () => {
   );
 };
 
-export default AddUser;
+export default Register;

webapp/src/pages/Root.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Root() {
+    return <p>Proof of concept</p>
+}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import Login from './Login';
+import Login from '../pages/Login';
 
 const mockAxios = new MockAdapter(axios);
 

webapp/src/components/AddUser.test.js → webapp/src/tests/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 AddUser from '../pages/Register';
 
 const mockAxios = new MockAdapter(axios);
 
@@ -16,7 +16,7 @@ describe('AddUser component', () => {
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
-    const addUserButton = screen.getByRole('button', { name: /Add User/i });
+    const addUserButton = screen.getByRole('button', { name: /Register/i });
 
     // Mock the axios.post request to simulate a successful response
     mockAxios.onPost('http://localhost:8000/adduser').reply(200);
@@ -39,7 +39,7 @@ describe('AddUser component', () => {
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
-    const addUserButton = screen.getByRole('button', { name: /Add User/i });
+    const addUserButton = screen.getByRole('button', { name: /Register/i });
 
     // Mock the axios.post request to simulate an error response
     mockAxios.onPost('http://localhost:8000/adduser').reply(500, { error: 'Internal Server Error' });