implement step 2 stuff

assets/js/definitions/index.d.ts

@@ -0,0 +1,3 @@
+interface Link {
+    id: string
+}

assets/js/pages/AuthPage.tsx

@@ -0,0 +1,16 @@
+// import HexMix from "../utils/hexmix";
+// const fragmentData = window.location.hash.split('.');
+//     if (fragmentData.length <= 0) {
+//       alert("No key found in fragment URI");
+//       return;
+//     }
+//     const key = HexMix.hexToUint8(fragmentData[0]);
+//     const iv = HexMix.hexToUint8(fragmentData[1]);
+
+//     const importedKey = await window.crypto.subtle.importKey(
+//       'raw',
+//       key,
+//       'AES-GCM',
+//       true,
+//       ['encrypt', 'decrypt']
+//     );

assets/js/pages/ForPage.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 
 import { ProgressIndicator, Header2, Button, IconArrow, Label, Input, Select, CenteredContainer, SpaceBetweenContainer, Spacer, TextAlignWrapper, GlobalStyle } from "@intended/intended-ui";
 
+
 const ForPage = () => {
   const [recipientInput, setRecipientInput] = useState("");
   const [serviceSelect, setServiceSelect] = useState("");
@@ -16,6 +17,35 @@ const ForPage = () => {
     setServiceSelect(e.target.value);
   };
 
+  const postContacts = async () => {
+    const fragmentData = window.location.hash.split('.');
+    if (fragmentData.length <= 0) {
+      alert("No key found in fragment URI");
+      return;
+    }
+
+    const linkId = sessionStorage.getItem("link_id");
+    if (linkId == null || linkId == "") {
+      alert("No created link found in storage");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('recipient', recipientInput);
+    formData.append('service', serviceSelect);
+    formData.append("link_id", linkId);
+
+    try {
+      await fetch(`${window.location.origin}/just/for`, { 
+        body: formData,
+        method: "POST"
+      });
+      window.location.href = `${window.location.origin}/just/for/you`;
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
   return (
     <React.StrictMode>
       <GlobalStyle />
@@ -50,7 +80,7 @@ const ForPage = () => {
             <Button variant="secondary" onClick={() => window.location.href = "/just"}>
               <IconArrow arrowDirection="left" />
             </Button>
-            <Button onClick={() => window.location.href = "/just/for/you"}>Generate Secret Code</Button>
+            <Button onClick={postContacts}>Generate Secret Code</Button>
           </SpaceBetweenContainer>
         </CenteredContainer>
       </CenteredContainer>

assets/js/pages/JustPage.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { ProgressIndicator, Header2, Button, IconArrow, Label, FileInput, TextArea, CenteredContainer, Spacer, TextAlignWrapper, GlobalStyle } from '@intended/intended-ui';
 import HexMix from "../utils/hexmix";
 
-const JustPage = () => {
+const JustPage = (props) => {
   const [secretInput, setSecretInput] = useState("");
   const [fileInput, setFileInput] = useState<File | null>(null);
   const [fileName, setFileName] = useState("");
@@ -55,12 +55,17 @@ const JustPage = () => {
     formData.append('filename', 'secret.txt');
 
     try {
-      await fetch(`${window.location.origin}/just`, { 
+      const link: unknown = await fetch(`${window.location.origin}/just`, { 
+        headers: {
+          "X-CSRF-Token": props.csrf
+        },
         body: formData,
         method: "POST"
       });
-      const url = `${window.location.origin}/just/for#${keyHex}.${ivHex}`;
-      window.location.href = url
+      sessionStorage.setItem("link_id", (link as Link).id);
+      sessionStorage.setItem("key_hex", keyHex);
+      sessionStorage.setItem("iv_hex", ivHex);
+      window.location.href = `${window.location.origin}/just/for`;
     } catch (err: any) {
       alert(err.message);
     }

assets/js/pages/YouPage.tsx

@@ -1,8 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { ProgressIndicator, Header2, Button, IconArrow, InputButtonWithIcon, Label, Input, CenteredContainer, SpaceBetweenContainer, Spacer, TextAlignWrapper, GlobalStyle } from "@intended/intended-ui";
 
 const YouPage = () => {
+  const calculateUrl = () => {
+    const linkId = sessionStorage.getItem("link_id");
+    const keyHex = sessionStorage.getItem("key_hex");
+    const ivHex = sessionStorage.getItem("iv_hex");
+
+    `${window.location.origin}/just/for/you/${linkId}#${keyHex}.${ivHex}`
+    return "";
+  };
+
+  const [url, setUrl] = useState(calculateUrl());
+
+  const copyUrl = async () => {
+    try { 
+      navigator.clipboard.writeText(url);
+    } catch (err: any) {
+      alert("Could not copy url to clipboard.");
+    }
+  }
+
   return (
     <React.StrictMode>
       <GlobalStyle />
@@ -18,8 +37,8 @@ const YouPage = () => {
           </SpaceBetweenContainer>
           <InputButtonWithIcon
             id="shareLink"
-            onClick={() => {}}
-            value="https://intended.link/for/you/MWUzZjg4YmEtZmNmNy00M..."
+            onClick={copyUrl}
+            value={url}
             variant="copy"
           />
           <Spacer space="2rem" />
@@ -39,7 +58,10 @@ const YouPage = () => {
             <Button variant="secondary" onClick={() => window.location.href = "/just/for"}>
               <IconArrow arrowDirection="left" />
             </Button>
-            <Button onClick={() => {}}>Generate Secret Code</Button>
+            <Button onClick={() => {
+              sessionStorage.clear();
+              window.location.href = "/just";
+            }}>Create Another Secret</Button>
           </SpaceBetweenContainer>
         </CenteredContainer>
       </CenteredContainer>

assets/tsconfig.json

@@ -11,7 +11,8 @@
     "forceConsistentCasingInFileNames": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "lib": ["es2015", "dom"]
+    "lib": ["es2015", "dom"],
+    "typeRoots": ["./js/definitions"]
   },
   "exclude": [
     "/node_modules/**/*",