From 18d9fbe1ef6a758b2b1b969866ab23a41c9256f4 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Mon, 6 Mar 2023 14:28:18 +0800 Subject: [PATCH] Polished margin of all pages and fixed logout not clearing token --- package-lock.json | 81 ++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 9 +++ src/Components/Container/Container.tsx | 12 +++- src/Components/Login/Login.tsx | 9 +-- src/Components/Logout/Logout.tsx | 1 + src/Routes/Activation/Activation.tsx | 58 ++++++++++++++++++ src/Routes/Dashboard/Dashboard.tsx | 2 +- src/Routes/Login/Login.tsx | 2 +- src/Routes/Logs/Logs.tsx | 2 +- src/Routes/Product/Product.tsx | 2 +- src/Routes/Products/Products.tsx | 4 +- src/routes/Inventory/Inventory.tsx | 2 +- 13 files changed, 169 insertions(+), 16 deletions(-) create mode 100644 src/Routes/Activation/Activation.tsx diff --git a/package-lock.json b/package-lock.json index 4ad0668..40e9e5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.5", + "react-query": "^3.39.3", "react-redux": "^8.0.5", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", @@ -5614,6 +5615,14 @@ "node": ">= 8.0.0" } }, + "node_modules/big-integer": { + "version": "1.6.51", + "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz", + "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==", + "engines": { + "node": ">=0.6" + } + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -5726,6 +5735,21 @@ "node": ">=8" } }, + "node_modules/broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, "node_modules/browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -11848,6 +11872,11 @@ "url": "https://opencollective.com/js-sdsl" } }, + "node_modules/js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -12278,6 +12307,11 @@ "node": ">=8.6" } }, + "node_modules/microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -12443,6 +12477,14 @@ "multicast-dns": "cli.js" } }, + "node_modules/nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", + "dependencies": { + "big-integer": "^1.6.16" + } + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -12704,6 +12746,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" + }, "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -14681,6 +14728,31 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-query": { + "version": "3.39.3", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", + "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-redux": { "version": "8.0.5", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", @@ -16644,6 +16716,15 @@ "node": ">= 10.0.0" } }, + "node_modules/unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "dependencies": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 89af1bf..40d5e2c 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.5", + "react-query": "^3.39.3", "react-redux": "^8.0.5", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", diff --git a/src/App.tsx b/src/App.tsx index c0f7fcc..7fa5633 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import { Provider } from "react-redux"; import Inventory from "./Routes/Inventory/Inventory"; import Login from "./Routes/Login/Login"; import Product from "./Routes/Product/Product"; +import Activation from "./Routes/Activation/Activation"; const router = createBrowserRouter([ { @@ -65,6 +66,14 @@ const router = createBrowserRouter([ ), }, + { + path: "/Activation/:uid/:token", + element: ( + + + + ), + }, ]); export default function App() { diff --git a/src/Components/Container/Container.tsx b/src/Components/Container/Container.tsx index f9b553b..4438b7a 100644 --- a/src/Components/Container/Container.tsx +++ b/src/Components/Container/Container.tsx @@ -7,6 +7,7 @@ import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; import { useDispatch, useSelector } from "react-redux"; import { LoginState } from "../../Interfaces/Interfaces"; +import { useNavigate } from "react-router-dom"; export interface props { children: React.ReactNode; @@ -14,6 +15,7 @@ export interface props { export default function Container(props: props) { const dispatch = useDispatch(); + const navigate = useNavigate(); const logged_in = useSelector((state: LoginState) => state.logged_in.value); // Function to check for previous login session async function CheckPreviousSession() { @@ -35,7 +37,15 @@ export default function Container(props: props) {
- {props.children} +
+ {props.children} +
diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx index df42ebd..4b812b2 100644 --- a/src/Components/Login/Login.tsx +++ b/src/Components/Login/Login.tsx @@ -1,5 +1,4 @@ -import { useSelector, useDispatch } from "react-redux"; -import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice"; +import { useSelector } from "react-redux"; import { Button } from "@mui/material"; import styles from "../../styles"; import { useNavigate } from "react-router-dom"; @@ -12,12 +11,6 @@ export default function Login() { (state: LoggedInUserState) => state.logged_in_user.value ); const navigate = useNavigate(); - const dispatch = useDispatch(); - async function login() { - await dispatch(toggle_login()); - await console.log("Login State Toggled " + logged_in); - } - if (logged_in) { return (

diff --git a/src/Components/Logout/Logout.tsx b/src/Components/Logout/Logout.tsx index 036f478..3c10fed 100644 --- a/src/Components/Logout/Logout.tsx +++ b/src/Components/Logout/Logout.tsx @@ -20,6 +20,7 @@ export default function Logout(props: props) { async function logout() { await dispatch(toggle_login()); + localStorage.removeItem("token"); navigate("/"); } diff --git a/src/Routes/Activation/Activation.tsx b/src/Routes/Activation/Activation.tsx new file mode 100644 index 0000000..ff5ddbb --- /dev/null +++ b/src/Routes/Activation/Activation.tsx @@ -0,0 +1,58 @@ +import styles from "../../styles"; +import { useParams } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { UserActivate } from "../../Components/Api/Api"; +import { ActivationParams } from "../../Interfaces/Interfaces"; + +export default function Activation() { + let { uid, token } = useParams(); + const [status, setStatus] = useState(0); + async function verify(activation: ActivationParams) { + let status = await UserActivate(activation); + if (status) { + setStatus(1); + } else { + setStatus(2); + } + } + useEffect(() => { + if (uid && token) { + verify({ uid, token }); + } + }, [uid, token]); + if (status === 1) { + return ( +

+

User ID: {uid}

+

+ Activation Token: {token} +

+

+ Activation Successful. Please login +

+
+ ); + } + if (status === 2) { + return ( +
+

User ID: {uid}

+

+ Activation Token: {token} +

+

+ Invalid Activation Link +

+
+ ); + } + return ( +
+

User ID: {uid}

+

+ Activation Token: {token} +

+

Activating...

+
+ ); +} diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx index 751c3ba..55e3fcb 100644 --- a/src/Routes/Dashboard/Dashboard.tsx +++ b/src/Routes/Dashboard/Dashboard.tsx @@ -11,7 +11,7 @@ import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/Recently export default function Dashboard() { return ( -
+

Dashboard

diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index f728fce..7e87812 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -19,7 +19,7 @@ export default function Login() { }); const [error, setError] = useState(""); return ( -
+
+

Logs

diff --git a/src/Routes/Product/Product.tsx b/src/Routes/Product/Product.tsx index fc95a47..5db76b7 100644 --- a/src/Routes/Product/Product.tsx +++ b/src/Routes/Product/Product.tsx @@ -6,7 +6,7 @@ import { useParams } from "react-router-dom"; export default function Product() { let { id } = useParams(); return ( -
+

Individual Product View for id {id}

diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx index 03162d3..7641217 100644 --- a/src/Routes/Products/Products.tsx +++ b/src/Routes/Products/Products.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import styles from "../../styles"; import { useNavigate } from "react-router-dom"; import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; @@ -10,7 +10,7 @@ import ViewManager from "../../Components/ProductsPage/ViewManager"; export default function Products() { const navigate = useNavigate(); return ( -
+
diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx index 5c2ae15..38b8997 100644 --- a/src/routes/Inventory/Inventory.tsx +++ b/src/routes/Inventory/Inventory.tsx @@ -14,7 +14,7 @@ import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRen export default function Inventory() { return ( -
+

Inventory