#464 Pages and API Keys

NASA-AMMOS · May 17, 2024 · bd69188 · bd69188
1 parent 0f0e3f4
commit bd69188
Show file tree

Hide file tree

Showing 10 changed files with 589 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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 = <APITokens />;
+      break;
+    default:
+  }
+
   const [tabValue, setTabValue] = useState(0);
 
   let TabPage = null;
@@ -148,7 +159,9 @@ export default function Main() {
 
   return (
     <div className={c.Main}>
-      {mission == null ? (
+      {Page != null ? (
+        <div className={c.page}>{Page}</div>
+      ) : mission == null ? (
         <div className={c.introWrapper}>
           <div className={c.intro}>
             <div className={c.title}>MMGIS</div>

diff --git 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() {
             ))}
           </ul>
         </div>
-        <div className={c.pages}></div>
+        <div className={c.pages}>
+          <Button
+            className={c.pageButton}
+            variant="contained"
+            disableElevation
+            startIcon={<ShapeLineIcon size="small" />}
+            onClick={() => {
+              dispatch(setModal({ name: "newMission" }));
+            }}
+          >
+            GeoDatasets
+          </Button>
+          <Button
+            className={c.pageButton}
+            variant="contained"
+            disableElevation
+            startIcon={<TextSnippetIcon size="small" />}
+            onClick={() => {
+              dispatch(setModal({ name: "newMission" }));
+            }}
+          >
+            Datasets
+          </Button>
+          <Button
+            className={c.pageButton}
+            variant="contained"
+            disableElevation
+            startIcon={<KeyIcon size="small" />}
+            onClick={() => {
+              dispatch(setPage({ page: "api_tokens" }));
+            }}
+          >
+            API Tokens
+          </Button>
+          <Button
+            className={c.pageButton}
+            variant="contained"
+            disableElevation
+            startIcon={<PhishingIcon size="small" />}
+            onClick={() => {
+              dispatch(setModal({ name: "newMission" }));
+            }}
+          >
+            WebHooks
+          </Button>
+        </div>
       </div>
       <NewMissionModal />
     </>

diff --git 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,13 +22,18 @@ 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;
     },
     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
@@ -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 = (
         <TextField
           className={c.text}
@@ -246,29 +246,23 @@ const getComponent = (
           }}
         />
       );
-      console.log(
-        typeof text_array_f,
-        typeof text_array_f === "string"
-          ? text_array_f.match(/(#(?:[0-9a-f]{3}){1,2})/gi)
-          : "nope"
-      );
       return (
         <div>
           {inlineHelp ? (
             <>
               {inner}
               <div className={c.textArrayHexes}>
                 {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 (
                           <div
                             className={c.textArrayHex}
                             style={{ background: hex }}
                           ></div>
                         );
-                      })
+                      }
+                    )
                   : null}
               </div>
               <Typography className={c.subtitle2}>

diff --git 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
@@ -87,3 +87,24 @@ export const reorderArray = (list, startIndex, endIndex) => {
 
   return result;
 };
+
+export const copyToClipboard = (text) => {
+  const el = document.createElement("textarea"); // Create a <textarea> element
+  el.value = text; // Set its value to the string that you want copied
+  el.setAttribute("readonly", ""); // Make it readonly to be tamper-proof
+  el.style.position = "absolute";
+  el.style.left = "-9999px"; // Move outside the screen to make it invisible
+  document.body.appendChild(el); // Append the <textarea> element to the HTML document
+  const selected =
+    document.getSelection().rangeCount > 0 // Check if there is any content selected previously
+      ? document.getSelection().getRangeAt(0) // Store selection if found
+      : false; // Mark as false to know no selection existed before
+  el.select(); // Select the <textarea> content
+  document.execCommand("copy"); // Copy - only works as a result of a user action (e.g. click events)
+  document.body.removeChild(el); // Remove the <textarea> element
+  if (selected) {
+    // If a selection existed before copying
+    document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
+    document.getSelection().addRange(selected); // Restore the original selection
+  }
+};