77 design base layout (#85)

* [Task] #77 1st draft layout

* [Change] #70 update token expire date

* [Temp] #77, log out data on valid request, temp: error handling and display

* [Temp]

* [Task] #77, login Button functionality, default state

* [Task] #77, removed outdated comments

* [Task] #77, introduced linearBuffer Bar for login

* [Task] #77, added modeSwticher to start page

* [Task] #77, display last entry on map demo

* [Task] #77, enhance login, show pastUser if availabe, show user on mainpage

* [!!!Task] #77 first draft of functionality

* [Task] #77 move map to new location

* [Task] #77 create testData

* [Fix] #77 codeFactor complains

.vscode/settings.json

@@ -2,5 +2,7 @@
 	"workbench.editor.enablePreview": false,
 	"editor.rename.enablePreview": false,
 	"typescript.tsdk": "node_modules\\typescript\\lib",
-	"html.format.wrapLineLength": 150
+	"html.format.wrapLineLength": 150,
+	"javascript.preferences.quoteStyle": "double",
+	"typescript.preferences.quoteStyle": "double"
 }

httpdocs/css/base.css

@@ -135,6 +135,8 @@ Neutral: #131211
 
   font-weight: calc(400 + var(--baseFontWeightModifier));
 
+  accent-color: var(--main);
+
   /* dark theme, initial state (prefers mq) by react */
   &[data-mui-color-scheme="dark"] {
     --main: oklch(75% 0.1738 64.55); 
@@ -166,7 +168,7 @@ Neutral: #131211
   width:1px;
 }
 
-.cut {
+.cut, .cut-after::after {
   --cut: 2em;
   clip-path: polygon(0% var(--cut), var(--cut) 0%, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
 }
@@ -199,6 +201,15 @@ Neutral: #131211
   font-weight: calc(800 + var(--baseFontWeightModifier));
 }
 
+.fade { animation: fade 1s 1s forwards; }
+.fadeIn { animation: reverse fade 1s forwards; } 
+@keyframes fade { 
+  to {
+      font-size: 0;
+      opacity: 0;
+  }
+}
+
 @media screen and
   (prefers-reduced-motion: reduce), 
   (update: slow) {
@@ -377,12 +388,12 @@ Neutral: #131211
     /* --mui-palette-FilledInput-bg:rgba(0, 0, 0, 0.06);
     --mui-palette-FilledInput-hoverBg:rgba(0, 0, 0, 0.09);
     --mui-palette-FilledInput-disabledBg:rgba(0, 0, 0, 0.12); */
-    --mui-palette-LinearProgress-primaryBg: color-mix(in oklch, var(--mui-palette-primary-main) 85%, transparent);
-    --mui-palette-LinearProgress-secondaryBg: color-mix(in oklch, var(--mui-palette-secondary-main) 85%, transparent);
-    --mui-palette-LinearProgress-errorBg: color-mix(in oklch, var(--mui-error-primary-main) 85%, transparent);
-    --mui-palette-LinearProgress-infoBg: color-mix(in oklch, var(--mui-palette-info-main) 85%, transparent);
-    --mui-palette-LinearProgress-successBg: color-mix(in oklch, var(--mui-palette-success-main) 85%, transparent);
-    --mui-palette-LinearProgress-warningBg: color-mix(in oklch, var(--mui-palette-warning-main) 85%, transparent);
+    --mui-palette-LinearProgress-primaryBg: color-mix(in oklch, var(--mui-palette-primary-main) 50%, transparent);
+    --mui-palette-LinearProgress-secondaryBg: color-mix(in oklch, var(--mui-palette-secondary-main) 50%, transparent);
+    --mui-palette-LinearProgress-errorBg: color-mix(in oklch, var(--mui-error-primary-main) 50%, transparent);
+    --mui-palette-LinearProgress-infoBg: color-mix(in oklch, var(--mui-palette-info-main) 50%, transparent);
+    --mui-palette-LinearProgress-successBg: color-mix(in oklch, var(--mui-palette-success-main) 50%, transparent);
+    --mui-palette-LinearProgress-warningBg: color-mix(in oklch, var(--mui-palette-warning-main) 50%, transparent);
     --mui-palette-Skeleton-bg: rgba(var(--mui-palette-text-primaryChannel) / 0.11);
     --mui-palette-Slider-primaryTrack: var(--mui-palette-primary-main);
     --mui-palette-Slider-secondaryTrack: var(--mui-palette-secondary-main);

jest.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
-  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  modulePathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/src/testData/'],
   moduleNameMapper: {
     '^@src/(.*)$': '<rootDir>/src/$1',
   },

jest.testData.config.js

@@ -0,0 +1,10 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  moduleNameMapper: {
+    '^@src/(.*)$': '<rootDir>/src/$1',
+  },
+  testMatch: ['<rootDir>/src/testData/createTestData.test.ts'],
+  bail: true
+};

package.json

@@ -17,6 +17,7 @@
     "lint:client": "eslint httpdocs/js/ --fix",
     "lint:react": "eslint src/client/ --fix",
     "test": "jest",
+    "test:data": "jest --config jest.testData.config.js",
     "test:app": "jest src/tests/app.test.ts",
     "test:login": "jest src/tests/login.test.ts",
     "test:unit": "jest src/tests/unit.test.ts",
@@ -33,6 +34,7 @@
     "@types/hpp": "^0.2.5",
     "@types/jest": "^29.5.11",
     "@types/jsonwebtoken": "^9.0.6",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
@@ -77,9 +79,12 @@
     "helmet": "^7.1.0",
     "hpp": "^0.2.3",
     "jsonwebtoken": "^9.0.2",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
     "module-alias": "^2.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.24.0",
     "toobusy-js": "^0.5.1"
   },

src/client/components/App.tsx

@@ -1,8 +1,30 @@
-import React from 'react';
+import React, { createContext, useState } from 'react';
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Start from '../pages/Start';
 import Login from '../pages/Login';
 
+export const LoginContext = createContext([]);
+
+export function convertJwt() {
+  const token = localStorage?.jwt;
+  if (!token) { return false }
+  try {
+    const { user, exp } = JSON.parse(window.atob(token.split('.')[1]));
+    return { user, exp };
+  } catch (error) {
+    console.error("Unable to parse JWT Data");
+    return false;
+  }
+}
+
+function loginDefault(userInfo) {
+  if (!userInfo) { return false; }
+
+  const date = new Date();
+  const exp = userInfo.exp
+  return date.getTime() / 1000 <= exp;
+}
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -15,10 +37,13 @@ const router = createBrowserRouter([
 ]);
 
 const App = () => {
-
+  const [userInfo, setUserInfo] = useState(convertJwt());
+  const [isLoggedIn, setLogin] = useState(loginDefault(userInfo));
 
   return (
-    <RouterProvider router={router} />
+    <LoginContext.Provider value={[isLoggedIn, setLogin, userInfo, setUserInfo]}>
+      <RouterProvider router={router} />
+    </LoginContext.Provider>
   );
 }