Intended/Entendu
1
0
Fork 0
Code Issues 12 Pull Requests Projects 2 Releases Wiki Activity

implement just for you pages with phoenix-react

Browse Source
This commit is contained in:
Silas
2021-11-26 20:04:45 -05:00
parent bb09b926d9
commit 7b82a95e01
20 changed files with 1246 additions and 10998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
assets/js/pages/ForPage.tsx Normal file
View File

@@ -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;

57
assets/js/pages/JustPage.tsx Normal file
View File

@@ -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;

31
assets/js/pages/SplashPage.tsx
View File

@@ -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>
);
};

50
assets/js/pages/YouPage.tsx Normal file
View File

@@ -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;