From bd6918896e0295246a91943de06b4d9e9ed30201 Mon Sep 17 00:00:00 2001 From: tariqksoliman Date: Thu, 16 May 2024 18:58:17 -0700 Subject: [PATCH] #464 Pages and API Keys --- API/Backend/Config/setup.js | 6 +- .../LongTermToken/routes/longtermtokens.js | 2 +- configure/src/components/Main/Main.js | 15 +- configure/src/components/Panel/Panel.js | 80 +++- configure/src/core/ConfigureStore.js | 7 + configure/src/core/Maker.js | 16 +- configure/src/core/calls.js | 15 +- configure/src/core/utils.js | 21 + .../src/metaconfigs/layer-data-config.json | 28 +- configure/src/pages/APITokens/APITokens.js | 437 ++++++++++++++++++ 10 files changed, 589 insertions(+), 38 deletions(-) create mode 100644 configure/src/pages/APITokens/APITokens.js diff --git a/API/Backend/Config/setup.js b/API/Backend/Config/setup.js index 68cd20d8..6104ddc1 100644 --- a/API/Backend/Config/setup.js +++ b/API/Backend/Config/setup.js @@ -33,12 +33,10 @@ let setup = { } ); } - console.log( - "ERROR - ensureAdmin off!!!!!!!!!!!!!!!!!!!!!! +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++" - ); + s.app.use( s.ROOT_PATH + "/API/configure", - //s.ensureAdmin(), + s.ensureAdmin(), s.checkHeadersCodeInjection, s.setContentType, router diff --git a/API/Backend/LongTermToken/routes/longtermtokens.js b/API/Backend/LongTermToken/routes/longtermtokens.js index 4b1ca05c..722d9838 100644 --- a/API/Backend/LongTermToken/routes/longtermtokens.js +++ b/API/Backend/LongTermToken/routes/longtermtokens.js @@ -15,7 +15,7 @@ router.get("/get", function (req, res, next) { LongTermTokens.findAll() .then((tokens) => { tokens.forEach((token) => { - if (token.token) token.token = token.token.slice(0, 12) + "..."; + if (token.token) token.token = token.token.slice(0, 16) + "..."; }); res.send({ status: "success", tokens: tokens }); return null; diff --git a/configure/src/components/Main/Main.js b/configure/src/components/Main/Main.js index b0f180a8..194e39fb 100644 --- a/configure/src/components/Main/Main.js +++ b/configure/src/components/Main/Main.js @@ -25,6 +25,8 @@ import Coordinates from "../Tabs/Coordinates/Coordinates"; import Time from "../Tabs/Time/Time"; import UserInterface from "../Tabs/UserInterface/UserInterface"; +import APITokens from "../../pages/APITokens/APITokens"; + const useStyles = makeStyles((theme) => ({ Main: { width: "100%", @@ -101,6 +103,7 @@ export default function Main() { const dispatch = useDispatch(); const mission = useSelector((state) => state.core.mission); + const page = useSelector((state) => state.core.page); useEffect(() => { if (mission != null) @@ -121,6 +124,14 @@ export default function Main() { ); }, [dispatch, mission]); + let Page = null; + switch (page) { + case "api_tokens": + Page = ; + break; + default: + } + const [tabValue, setTabValue] = useState(0); let TabPage = null; @@ -148,7 +159,9 @@ export default function Main() { return (
- {mission == null ? ( + {Page != null ? ( +
{Page}
+ ) : mission == null ? (
MMGIS
diff --git a/configure/src/components/Panel/Panel.js b/configure/src/components/Panel/Panel.js index 64a33a41..19e142eb 100644 --- a/configure/src/components/Panel/Panel.js +++ b/configure/src/components/Panel/Panel.js @@ -6,12 +6,17 @@ import mmgisLogo from "../../images/mmgis.png"; import clsx from "clsx"; -import { setMission, setModal } from "../../core/ConfigureStore"; +import { setMission, setModal, setPage } from "../../core/ConfigureStore"; import NewMissionModal from "./Modals/NewMissionModal/NewMissionModal"; import Button from "@mui/material/Button"; +import TextSnippetIcon from "@mui/icons-material/TextSnippet"; +import ShapeLineIcon from "@mui/icons-material/ShapeLine"; +import KeyIcon from "@mui/icons-material/Key"; +import PhishingIcon from "@mui/icons-material/Phishing"; + const useStyles = makeStyles((theme) => ({ Panel: { width: "220px", @@ -71,6 +76,32 @@ const useStyles = makeStyles((theme) => ({ background: `${theme.palette.swatches.grey[200]} !important`, }, }, + pages: { + position: "absolute", + bottom: "0px", + display: "flex", + flexFlow: "column", + width: "100%", + }, + pageButton: { + width: "100%", + borderTop: `1px solid ${theme.palette.swatches.grey[300]} !important`, + color: `${theme.palette.swatches.grey[700]} !important`, + textTransform: "capitalize !important", + justifyContent: "start !important", + fontSize: "14px !important", + padding: "3px 16px !important", + background: `transparent !important`, + transition: + "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 250ms ease-out 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms", + "&:hover": { + color: `${theme.palette.swatches.grey[900]} !important`, + background: `${theme.palette.swatches.grey[200]} !important`, + }, + "& svg": { + fontSize: "16px !important", + }, + }, })); export default function Panel() { @@ -124,7 +155,52 @@ export default function Panel() { ))}
-
+
+ + + + +
diff --git a/configure/src/core/ConfigureStore.js b/configure/src/core/ConfigureStore.js index 986b21f1..33aa0b44 100644 --- a/configure/src/core/ConfigureStore.js +++ b/configure/src/core/ConfigureStore.js @@ -7,6 +7,7 @@ export const ConfigureStore = createSlice({ mission: null, configuration: "{}", toolConfiguration: {}, + page: null, modal: { newMission: false, layer: false, @@ -21,6 +22,8 @@ export const ConfigureStore = createSlice({ }, setMission: (state, action) => { state.mission = action.payload; + // Clear the bottom page (tokens, geodatasets, etc.) when a mission is clicked + state.page = null; }, setConfiguration: (state, action) => { state.configuration = action.payload; @@ -28,6 +31,9 @@ export const ConfigureStore = createSlice({ setToolConfiguration: (state, action) => { state.toolConfiguration = action.payload; }, + setPage: (state, action) => { + state.page = action.payload.page; + }, /** * Controls all modal open/close states * @param {string} name - Name of modal to toggle @@ -60,6 +66,7 @@ export const { setMission, setConfiguration, setToolConfiguration, + setPage, setModal, setSnackBarText, } = ConfigureStore.actions; diff --git a/configure/src/core/Maker.js b/configure/src/core/Maker.js index 1e02ee6e..88ff82fb 100644 --- a/configure/src/core/Maker.js +++ b/configure/src/core/Maker.js @@ -233,7 +233,7 @@ const getComponent = ( case "textarray": let text_array_f = getIn(directConf, com.field, []); if (text_array_f != null && typeof text_array_f.join === "function") - text_array_f.join(","); + text_array_f = text_array_f.join(","); inner = ( ); - console.log( - typeof text_array_f, - typeof text_array_f === "string" - ? text_array_f.match(/(#(?:[0-9a-f]{3}){1,2})/gi) - : "nope" - ); return (
{inlineHelp ? ( @@ -259,16 +253,16 @@ const getComponent = ( {inner}
{typeof text_array_f === "string" - ? text_array_f - .match(/(#(?:[0-9a-f]{3}){1,2})/gi) - .map((hex) => { + ? (text_array_f.match(/(#(?:[0-9a-f]{3}){1,2})/gi) || []).map( + (hex) => { return (
); - }) + } + ) : null}
diff --git a/configure/src/core/calls.js b/configure/src/core/calls.js index 05692273..90de5597 100644 --- a/configure/src/core/calls.js +++ b/configure/src/core/calls.js @@ -99,6 +99,15 @@ function api(call, data, success, error) { return; } + const options = { + method: c[call].type, + credentials: "include", + headers: new Headers({ "content-type": "application/json" }), + }; + + if (c[call].type === "POST") options.body = JSON.stringify(data); + else if (c[call].type === "GET") options.data = JSON.stringify(data); + fetch( `${domain}${c[call].url}${ c[call].type === "GET" @@ -107,11 +116,7 @@ function api(call, data, success, error) { : "" : "" }`, - { - method: c[call].type, - data: JSON.stringify(data), - credentials: "include", - } + options ) .then((res) => res.json()) .then((json) => { diff --git a/configure/src/core/utils.js b/configure/src/core/utils.js index f71972dd..4a03abf6 100644 --- a/configure/src/core/utils.js +++ b/configure/src/core/utils.js @@ -87,3 +87,24 @@ export const reorderArray = (list, startIndex, endIndex) => { return result; }; + +export const copyToClipboard = (text) => { + const el = document.createElement("textarea"); // Create a