info if not logged in added

Pachj · Jan 5, 2024 · 4b37b3c · 4b37b3c
1 parent 8e78ca7
commit 4b37b3c
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 3 deletions.
diff --git a/shopi-frontend/package-lock.json b/shopi-frontend/package-lock.json
diff --git a/shopi-frontend/package.json b/shopi-frontend/package.json
@@ -6,20 +6,22 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.15",
+    "@react-buddy/ide-toolbox": "^2.4.0",
+    "@react-buddy/palette-mui": "^5.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.59",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
+    "jsonwebtoken": "^9.0.2",
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "@react-buddy/ide-toolbox": "^2.4.0",
-    "@react-buddy/palette-mui": "^5.0.1"
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "6.4.0",

diff --git a/shopi-frontend/src/Home.tsx b/shopi-frontend/src/Home.tsx
@@ -5,6 +5,7 @@ import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
 import ShoppingCart from "./components/ShoppingCart/ShoppingCart";
 import LoginIcon from "@mui/icons-material/Login";
 import Login from "./components/Login/Login";
+import TokenInfo from "./components/TokenInfo";
 
 const Home = () => {
     const [openShoppingCart, setOpenShoppingCart] = useState(false);
@@ -21,6 +22,7 @@ const Home = () => {
                     <LoginIcon color={"primary"} fontSize={"inherit"} />
                 </IconButton>
             </div>
+            <TokenInfo />
             <ProductOverview />
             <ShoppingCart open={openShoppingCart} setOpen={setOpenShoppingCart} />
             <Login open={showLoginMask} setOpen={setShowLoginMask} />

diff --git a/shopi-frontend/src/components/TokenInfo.tsx b/shopi-frontend/src/components/TokenInfo.tsx
@@ -0,0 +1,20 @@
+import { jwtDecode } from "jwt-decode";
+import { Typography } from "@mui/material";
+
+const TokenInfo = () => {
+    const tokenString = localStorage.getItem("accessToken");
+
+    if (tokenString) {
+        const decodedToken = jwtDecode(tokenString);
+        if (!decodedToken.exp || (decodedToken.exp && decodedToken.exp < Date.now() / 1000)) {
+            return (
+                <div>
+                    <Typography variant={"h4"}>Bitte einloggen um alle Features nutzen zu können.</Typography>
+                </div>
+            );
+        }
+    }
+    return null;
+};
+
+export default TokenInfo;