Checkpoint service account functionality, added UI and general backend structure

frontend/src/components/basic/Layout.tsx

@@ -176,6 +176,7 @@ const Layout = ({ children }: LayoutProps) => {
 
   useEffect(() => {
     // Put a user in a workspace if they're not in one yet
+    
     const putUserInWorkSpace = async () => {
       if (tempLocalStorage('orgData.id') === '') {
         const userOrgs = await getOrganizations();

frontend/src/components/navigation/NavHeader.tsx

@@ -3,21 +3,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { useOrganization, useWorkspace } from '@app/context';
 
+// TODO: make links clickable and clean up
+
 /**
  * This is the component at the top of almost every page.
  * It shows how to navigate to a certain page.
  * It future these links should also be clickable and hoverable
  * @param obj
  * @param obj.pageName - Name of the page
- * @param obj.isProjectRelated - whether this page is related to project or now (determine if it's 2 or 3 navigation steps)
+ * @param obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
+ * @param obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
  * @returns
  */
 export default function NavHeader({
   pageName,
-  isProjectRelated
+  isProjectRelated,
+  isOrganizationRelated
 }: {
   pageName: string;
   isProjectRelated?: boolean;
+  isOrganizationRelated?: boolean;
 }): JSX.Element {
   const { currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
@@ -34,6 +39,12 @@ export default function NavHeader({
           <div className="text-sm font-semibold text-primary">{currentWorkspace?.name}</div>
         </>
       )}
+      {isOrganizationRelated && (
+        <>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+          <div className="text-sm font-semibold text-primary">Organization Settings</div>
+        </>
+      )}
       <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
       <div className="text-sm text-gray-400">{pageName}</div>
     </div>

frontend/src/components/utilities/cryptography/crypto.ts

@@ -5,6 +5,21 @@ import aes from './aes-256-gcm';
 const nacl = require('tweetnacl');
 nacl.util = require('tweetnacl-util');
 
+/**
+ * Return new base64, NaCl, public-private key pair.
+ * @returns {Object} obj
+ * @returns {String} obj.publicKey - base64, NaCl, public key
+ * @returns {String} obj.privateKey - base64, NaCl, private key
+ */
+const generateKeyPair = () => {
+  const pair = nacl.box.keyPair();
+  
+  return ({
+		publicKey: nacl.util.encodeBase64(pair.publicKey),
+		privateKey: nacl.util.encodeBase64(pair.secretKey)
+  });
+}
+
 type EncryptAsymmetricProps = {
   plaintext: string;
   publicKey: string;
@@ -189,5 +204,5 @@ export {
   decryptSymmetric, 
   deriveArgonKey,
   encryptAssymmetric, 
-  encryptSymmetric 
-};
+  encryptSymmetric, 
+  generateKeyPair};