implement just for you pages with phoenix-react

assets/js/app.js

@@ -1,7 +1,8 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-// import "../css/app.css"
+import "react-phoenix"
+import "../css/app.css"
 // const _css = require("../css/app.css");
 
 // webpack automatically bundles all modules in your
@@ -17,10 +18,11 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import topbar from "topbar"
 import {LiveSocket} from "phoenix_live_view"
-import React from "react";
-import ReactDOM from "react-dom";
+
 import SplashPage from './pages/SplashPage';
-import { GlobalStyle } from '@intended/intended-ui';
+import JustPage from './pages/JustPage'
+import ForPage from './pages/ForPage'
+import YouPage from './pages/YouPage'
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
@@ -39,10 +41,34 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
-ReactDOM.render(<div>
-    <GlobalStyle />
-    <SplashPage />
-  </div>
-  ,
-  document.getElementById("root")
-);
+window.Components = {
+  SplashPage, JustPage, ForPage, YouPage
+}
+
+// const root_el = document.getElementById("root");
+// const page = root_el.getAttribute("page")
+// let result;
+
+// switch(page) {
+//   case "splash": 
+//     result = <SplashPage />
+//     break;
+//   case "just":
+//     result = <JustPage />
+//     break;
+//   case "for":
+//   case "you":
+//   case "identify":
+//   case "revealed":
+//   default:
+//     null
+//     break;
+// }
+
+// ReactDOM.render(<React.StrictMode>
+//     <GlobalStyle />
+//     { result }
+//   </React.StrictMode>
+//   ,
+//   root_el
+// );

assets/js/pages/ForPage.tsx

@@ -0,0 +1,61 @@
+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("");
+
+  const handleRecipientInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setRecipientInput(e.target.value);
+  };
+
+  const handleServiceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setServiceSelect(e.target.value);
+  };
+
+  return (
+    <React.StrictMode>
+      <GlobalStyle />
+      <CenteredContainer fullscreen>
+        <CenteredContainer>
+          <ProgressIndicator currentProgress={2} />
+          <Header2>Tell Someone</Header2>
+          <SpaceBetweenContainer>
+            <Label htmlFor="recipientInput">Who gets to know the secret?</Label>
+            <Label htmlFor="recipientInput">Required*</Label>
+          </SpaceBetweenContainer>
+          <Input
+            variant="primary"
+            id="recipientInput"
+            value={recipientInput}
+            onChange={handleRecipientInputChange}
+            placeholder="Username or Email"
+          />
+          <Spacer space="2.5rem" />
+          <TextAlignWrapper align="left">
+            <Label htmlFor="serviceSelector">
+              What type of account is the above username or email associated with?
+            </Label>
+          </TextAlignWrapper>
+          <Select
+            id="serviceSelector"
+            onChange={handleServiceChange}
+            value={serviceSelect}
+          />
+          <Spacer space="3rem" />
+          <SpaceBetweenContainer>
+            <Button variant="secondary" onClick={() => window.location.href = "/just"}>
+              <IconArrow arrowDirection="left" />
+            </Button>
+            <Button onClick={() => window.location.href = "/just/for/you"}>Generate Secret Code</Button>
+          </SpaceBetweenContainer>
+        </CenteredContainer>
+      </CenteredContainer>
+    </React.StrictMode>
+  );
+};
+
+export default ForPage;

assets/js/pages/JustPage.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+import { ProgressIndicator, Header2, Button, IconArrow, Label, FileInput, TextArea, CenteredContainer, Spacer, TextAlignWrapper, GlobalStyle } from '@intended/intended-ui';
+
+const JustPage = () => {
+  const [secretInput, setSecretInput] = useState("");
+  const [fileInput, setFileInput] = useState<File | null>(null);
+  const [fileName, setFileName] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setSecretInput(e.target.value);
+  };
+
+  const handleFile = (file: File) => {
+    setFileInput(file);
+
+    setFileName(file.name);
+  };
+
+  return (
+    <React.StrictMode>
+      <GlobalStyle />
+      <CenteredContainer fullscreen>
+        <CenteredContainer>
+          <ProgressIndicator currentProgress={1} />
+          <Header2>Create a secret</Header2>
+          <TextAlignWrapper align="left">
+            <Label htmlFor="secretInput">Enter your secret here</Label>
+          </TextAlignWrapper>
+          <TextArea
+            id="secretInput"
+            value={secretInput}
+            onChange={handleChange}
+            placeholder="Tell me your secrets"
+          />
+          <Spacer space="2rem" />
+          <TextAlignWrapper align="center">
+            <Label htmlFor="fileInput">OR</Label>
+          </TextAlignWrapper>
+          <Spacer space="1.6rem" />
+          <FileInput id="fileInput" value={fileName} handleFile={handleFile} />
+          { fileInput ? "" : ""}
+          <Spacer space="4rem" />
+          <div
+            style={{ display: "flex", justifyContent: "flex-end", width: "100%" }}
+          >
+            <Button variant="secondary" onClick={() => window.location.href = "/just/for"}>
+              <IconArrow arrowDirection="right" />
+            </Button>
+          </div>
+        </CenteredContainer>
+      </CenteredContainer>
+    </React.StrictMode>
+  );
+};
+
+export default JustPage;

assets/js/pages/SplashPage.tsx

@@ -1,23 +1,26 @@
 import React from "react";
 
-import { CenteredContainer, SplashIconHeader, Header1, Header3, Spacer, Button } from '@intended/intended-ui';
+import { CenteredContainer, SplashIconHeader, Header1, Header3, Spacer, Button, GlobalStyle } from '@intended/intended-ui';
 
 const SplashPage = () => {
   return (
-    <CenteredContainer fullscreen>
-      <CenteredContainer wide>
-        <SplashIconHeader />
-        <Header1>Securely Share Your Secrets</Header1>
-        <Header3>
-          With Intended Link you can easily share messages and files securely
-          and secretly.
-        </Header3>
-        <Spacer />
-        <Button variant="secondary" boldFont onClick={() => {}}>
-          START SHARING
-        </Button>
+    <React.StrictMode>
+      <GlobalStyle />
+      <CenteredContainer fullscreen>
+        <CenteredContainer wide>
+          <SplashIconHeader />
+          <Header1>Securely Share Your Secrets</Header1>
+          <Header3>
+            With Intended Link you can easily share messages and files securely
+            and secretly.
+          </Header3>
+          <Spacer />
+          <Button variant="secondary" boldFont onClick={() => window.location.href = "/just"}>
+            START SHARING
+          </Button>
+        </CenteredContainer>
       </CenteredContainer>
-    </CenteredContainer>
+    </React.StrictMode>
   );
 };
 

assets/js/pages/YouPage.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { ProgressIndicator, Header2, Button, IconArrow, InputButtonWithIcon, Label, Input, CenteredContainer, SpaceBetweenContainer, Spacer, TextAlignWrapper, GlobalStyle } from "@intended/intended-ui";
+
+const YouPage = () => {
+  return (
+    <React.StrictMode>
+      <GlobalStyle />
+      <CenteredContainer fullscreen>
+        <CenteredContainer>
+          <ProgressIndicator currentProgress={3} />
+          <Header2>Share the secret</Header2>
+          <SpaceBetweenContainer>
+            <Label htmlFor="shareLink">Secret message url</Label>
+            <Label htmlFor="shareLink">
+              Share this link with the intended recepient
+            </Label>
+          </SpaceBetweenContainer>
+          <InputButtonWithIcon
+            id="shareLink"
+            onClick={() => {}}
+            value="https://intended.link/for/you/MWUzZjg4YmEtZmNmNy00M..."
+            variant="copy"
+          />
+          <Spacer space="2rem" />
+          <TextAlignWrapper align="left">
+            <Label htmlFor="encodedSecret">
+              This is what your message looks like on our server. Pretty secure
+              looking eh?:
+            </Label>
+          </TextAlignWrapper>
+          <Input
+            variant="disabled-light"
+            id="encodedSecret"
+            value="\4š€RÏŠ”Çm’ÄyÆFՑ¬Ð$CÑӀÃyۄ"
+          />
+          <Spacer space="3rem" />
+          <SpaceBetweenContainer>
+            <Button variant="secondary" onClick={() => window.location.href = "/just/for"}>
+              <IconArrow arrowDirection="left" />
+            </Button>
+            <Button onClick={() => {}}>Generate Secret Code</Button>
+          </SpaceBetweenContainer>
+        </CenteredContainer>
+      </CenteredContainer>
+    </React.StrictMode>
+  );
+};
+
+export default YouPage;