User authentication

package.json

@@ -65,18 +65,21 @@
     "@turf/flatten": "^7.1.0",
     "axios": "^1.7.7",
     "axios-retry": "^4.5.0",
+    "bcryptjs": "^2.4.3",
     "core-js": "^3.38.1",
     "cssify": "^0.8.0",
     "d3": "^7.9.0",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
     "geostyler-sld-parser": "^6.1.2",
     "html-to-image": "^1.11.11",
+    "isaac": "^0.0.5",
     "leaflet": "^1.9.4",
     "mapbox-gl": "^3.7.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-leaflet": "^4.2.1",
@@ -88,6 +91,9 @@
     "stream": "^0.0.3",
     "ws": "^8.18.0"
   },
+  "browser": {
+    "crypto": false
+  },
   "overrides": {
     "json5": "^2.2.2",
     "lodash": "^4.17.11",

src/app.js

@@ -1,15 +1,16 @@
 import React, { Fragment } from 'react';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Map } from '@components/map';
-import { ObservationDialog } from "@components/dialog/observation-dialog";
+import { ObservationDialog } from "@dialog/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 import { ControlPanel } from '@components/control-panel';
 import { ComparePanel } from '@components/compare-panel';
-import { MapLegend } from '@components/legend';
+import { MapLegend, AdditionalMapLegend } from '@components/legend';
 import { AlertUser } from '@components/alert-user';
 import { Config } from '@components/config';
 import { Acknowledgements } from "@components/acknowledgements";
+import { Login, AddUser, AuthProvider, ProtectedRoute } from '@auth';
 
 /**
  * renders the main content
@@ -43,6 +44,7 @@ const Content = () => {
             { (defaultInstanceName != null) && <ControlPanel/> }
             <ComparePanel/>
             <MapLegend />
+            <AdditionalMapLegend />
             <Acknowledgements />
         </Fragment>
     );
@@ -57,12 +59,14 @@ const Content = () => {
 export const App = () => {
     // render the application
     return (
-        <Fragment>
-            <BrowserRouter>
+        <BrowserRouter>
+            <AuthProvider>
                 <Routes>
-                    <Route path="/" element={ <Content/> } />
-               </Routes>
-            </BrowserRouter>
-        </Fragment>
+                    <Route path="/" element={<ProtectedRoute><Content /></ProtectedRoute>}/>
+                    <Route path="/login" element={<Login />} />
+                    <Route path="/add-user" element={<AddUser />} />
+                </Routes>
+            </AuthProvider>
+        </BrowserRouter>
     );
 };