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

bug fixes, add logo, mobile styling

Browse Source
This commit is contained in:
Silas
2022-02-24 01:15:44 -05:00
parent 32cefda0a0
commit 2ccb3d0053
16 changed files with 163 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/definitions/index.d.ts vendored
View File

@@ -12,5 +12,7 @@ type OAuthEmail = {
type IntendedLink = {
filename: string | null,
filetype: string | null
filetype: string | null,
text_content: string | null,
file_content: string | null
};

62
assets/js/pages/AuthPage.tsx
View File

@@ -40,12 +40,12 @@ const AuthPage = (props: AuthPageProps) => {
const [secretFileUrl, setSecretFileUrl] = useState<string>("#");
const [secretFileName, setSecretFileName] = useState<string>("");
const [secretMessage, setSecretMessage] = useState<string>("Decrypting...");
const [secretMessage, setSecretMessage] = useState<string>("");
const [messageRevealed, setMessageRevealed] = useState<boolean>(false);
useEffect(() => {
init().catch((reason) => {
alert(reason);
console.log(reason);
});
}, []);
@@ -55,7 +55,7 @@ const AuthPage = (props: AuthPageProps) => {
const init = async (): Promise<void> => {
const link: LinkFiles | null = await retrieveLink();
const keys: Keys | null = await retrieveKeys();
if (link && keys) {
if (link && keys && user) {
await decrypt(link, keys);
}
};
@@ -77,25 +77,36 @@ const AuthPage = (props: AuthPageProps) => {
}
const linkResponse = await fetch(`/links/${linkId}`);
const linkData: IntendedLink = await linkResponse.json();
const textResponse = await fetch(
`/uploads/links/${linkId}/secret_message.txt`
);
const textData = await textResponse.blob();
const fileResponse = await fetch(
`/uploads/links/${linkId}/${linkData.filename}`
);
const fileData = await fileResponse.blob();
let linkData: IntendedLink | null;
let textData = null;
let fileData = null;
if (linkResponse.status !== 200) {
throw new Error(linkResponse.statusText);
return null;
}
linkData = await linkResponse.json();
if (linkData.filename) {
await setSecretFileName(linkData.filename);
if (linkData) {
const textResponse = linkData.text_content
? await fetch(`/uploads/links/${linkId}/secret_message.txt`)
: null;
textData = textResponse ? await textResponse.blob() : null;
const fileResponse = linkData.file_content
? await fetch(`/uploads/links/${linkId}/${linkData.filename}`)
: null;
fileData = fileResponse ? await fileResponse.blob() : null;
if (linkData.filename) {
await setSecretFileName(linkData.filename);
}
}
return {
text: textData.size > 0 ? textData : null,
file: fileData.size > 0 ? fileData : null,
filename: linkData.filename,
filetype: linkData.filetype,
text: textData,
file: fileData,
filename: linkData ? linkData.filename : null,
filetype: linkData ? linkData.filetype : null,
};
};
@@ -107,13 +118,13 @@ const AuthPage = (props: AuthPageProps) => {
fragmentData[0] = fragmentData[0].slice(1);
if (fragmentData.length <= 1) {
key = sessionStorage.getItem("link_key");
iv = sessionStorage.getItem("link_iv");
key = sessionStorage.getItem("key_hex");
iv = sessionStorage.getItem("iv_hex");
} else {
key = fragmentData[0];
iv = fragmentData[1];
sessionStorage.setItem("link_key", key);
sessionStorage.setItem("link_iv", iv);
sessionStorage.setItem("key_hex", key);
sessionStorage.setItem("iv_hex", iv);
}
if (key && iv) {
@@ -134,6 +145,7 @@ const AuthPage = (props: AuthPageProps) => {
true,
["encrypt", "decrypt"]
);
if (link?.text) {
const textFile = await link.text.arrayBuffer();
const encodedText = await window.crypto.subtle.decrypt(
@@ -201,7 +213,7 @@ const AuthPage = (props: AuthPageProps) => {
const renderHeader = (): JSX.Element => {
return (
<div>
<Header2 style={{ margin: ".4rem" }}>
<Header2 style={{ marginBottom: ".4rem" }}>
{user ? "You have been identified!" : "Someone sent you a secret"}
</Header2>
{user ? (
@@ -226,7 +238,7 @@ const AuthPage = (props: AuthPageProps) => {
const renderAuth = (): JSX.Element => {
return (
<CenteredContainer fullscreen>
<CenteredContainer fullscreen className="centered-container">
<CenteredContainer>
{renderHeader()}
<Spacer space="3rem" />
@@ -256,7 +268,7 @@ const AuthPage = (props: AuthPageProps) => {
const renderReveal = (): JSX.Element => {
return (
<CenteredContainer fullscreen>
<CenteredContainer fullscreen className="centered-container">
<CenteredContainer>
{renderHeader()}
<Spacer space="3rem" />

46
assets/js/pages/ForPage.tsx
View File

@@ -1,11 +1,23 @@
import React, { useState } from "react";
import { ProgressIndicator, Header2, Button, IconArrow, Label, Input, Select, CenteredContainer, SpaceBetweenContainer, Spacer, TextAlignWrapper, GlobalStyle } from "@intended/intended-ui";
import {
ProgressIndicator,
Header2,
Button,
IconArrow,
Label,
Input,
Select,
CenteredContainer,
SpaceBetweenContainer,
Spacer,
TextAlignWrapper,
GlobalStyle,
} from "@intended/intended-ui";
type ForPageProps = {
csrf: string
}
csrf: string;
};
const ForPage = (props: ForPageProps) => {
const [recipientInput, setRecipientInput] = useState("");
@@ -35,20 +47,20 @@ const ForPage = (props: ForPageProps) => {
}
const formData = new FormData();
formData.append('recipient', recipientInput);
formData.append('service', serviceSelect);
formData.append("recipient", recipientInput);
formData.append("service", serviceSelect);
formData.append("link_id", linkId);
try {
const results = await fetch(`${window.location.origin}/just/for`, {
const results = await fetch(`${window.location.origin}/just/for`, {
headers: {
"X-CSRF-Token": props.csrf
"X-CSRF-Token": props.csrf,
},
body: formData,
method: "POST"
method: "POST",
});
if (!results.ok) {
throw new Error('Network response was not OK');
throw new Error("Network response was not OK");
}
await results.json();
@@ -61,7 +73,7 @@ const ForPage = (props: ForPageProps) => {
return (
<React.StrictMode>
<GlobalStyle />
<CenteredContainer fullscreen>
<CenteredContainer fullscreen className="centered-container">
<CenteredContainer>
<ProgressIndicator currentProgress={2} />
<Header2>Tell Someone</Header2>
@@ -79,7 +91,8 @@ const ForPage = (props: ForPageProps) => {
<Spacer space="2.5rem" />
<TextAlignWrapper align="left">
<Label htmlFor="serviceSelector">
What type of account is the above username or email associated with?
What type of account is the above username or email associated
with?
</Label>
</TextAlignWrapper>
<Select
@@ -87,11 +100,14 @@ const ForPage = (props: ForPageProps) => {
onChange={handleServiceChange}
value={serviceSelect}
>
<option value='github'>Github</option>
</Select>
<option value="github">Github</option>
</Select>
<Spacer space="3rem" />
<SpaceBetweenContainer>
<Button variant="secondary" onClick={() => window.location.href = "/just"}>
<Button
variant="secondary"
onClick={() => (window.location.href = "/just")}
>
<IconArrow arrowDirection="left" />
</Button>
<Button onClick={postContacts}>Generate Secret Code</Button>

22
assets/js/pages/JustPage.tsx
View File

@@ -74,7 +74,11 @@ const JustPage = (props: JustPageProps) => {
}
};
const fileFormData = async (form: FormData, aesKey: AESKey) => {
const fileFormData = async (
form: FormData,
aesKey: AESKey
): Promise<FormData> => {
if (!fileInput) return form;
const encoded = HexMix.stringToArrayBuffer(fileInput as string);
const encrypted = await window.crypto.subtle.encrypt(
{
@@ -91,9 +95,14 @@ const JustPage = (props: JustPageProps) => {
HexMix.arrayBufferToString(encrypted, (result: string) => {
sessionStorage.setItem("encoded_file", result);
});
return form;
};
const textFormData = async (form: FormData, aesKey: AESKey) => {
const textFormData = async (
form: FormData,
aesKey: AESKey
): Promise<FormData> => {
if (!secretInput) return form;
const encoded = HexMix.stringToArrayBuffer(secretInput);
const encrypted = await window.crypto.subtle.encrypt(
{
@@ -108,6 +117,7 @@ const JustPage = (props: JustPageProps) => {
HexMix.arrayBufferToString(encrypted, (result: string) => {
sessionStorage.setItem("encoded_message", result);
});
return form;
};
const createKey = async (): Promise<AESKey> => {
@@ -141,9 +151,9 @@ const JustPage = (props: JustPageProps) => {
}
const key = await createKey();
const formData = new FormData();
await fileFormData(formData, key);
await textFormData(formData, key);
let formData = new FormData();
formData = await fileFormData(formData, key);
formData = await textFormData(formData, key);
try {
const link: Response = await fetch(`${window.location.origin}/just`, {
@@ -167,7 +177,7 @@ const JustPage = (props: JustPageProps) => {
return (
<React.StrictMode>
<GlobalStyle />
<CenteredContainer fullscreen>
<CenteredContainer fullscreen className="centered-container">
<CenteredContainer>
<ProgressIndicator currentProgress={1} />
<Header2>Create a secret</Header2>

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

@@ -28,13 +28,26 @@ const SplashPage = (props: SplashPageProps) => {
return (
<React.StrictMode>
<GlobalStyle />
<CenteredContainer fullscreen>
<CenteredContainer
fullscreen
style={{
background: "none",
position: "absolute",
top: "50%",
transform: "translate(0, -50%)",
}}
className="centered-container"
>
<CenteredContainer wide>
<SplashIconHeader />
<Header1>Securely Share Your Secrets</Header1>
<SplashIconHeader style={{ width: "100%", maxWidth: "440px" }} />
<Header1>
<span className="splashHeader">Securely Share Your Secrets</span>
</Header1>
<Header3>
With Intended Link you can easily share messages and files securely
and secretly.
<span className="splashSubheader">
With Intended Link you can easily share messages and files
securely and secretly.
</span>
</Header3>
<Spacer />
<Button

2
assets/js/pages/YouPage.tsx
View File

@@ -49,7 +49,7 @@ const YouPage = () => {
return (
<React.StrictMode>
<GlobalStyle />
<CenteredContainer fullscreen>
<CenteredContainer fullscreen className="centered-container">
<CenteredContainer>
<ProgressIndicator currentProgress={3} />
<Header2>Share the secret</Header2>