106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
import { ProgressIndicator, Header2, Button, IconArrow, Label, Input, Select, CenteredContainer, SpaceBetweenContainer, Spacer, TextAlignWrapper, GlobalStyle } from "@intended/intended-ui";
|
|
|
|
|
|
type ForPageProps = {
|
|
csrf: string
|
|
}
|
|
|
|
const ForPage = (props: ForPageProps) => {
|
|
const [recipientInput, setRecipientInput] = useState("");
|
|
const [serviceSelect, setServiceSelect] = useState("github");
|
|
|
|
const handleRecipientInputChange = (
|
|
e: React.ChangeEvent<HTMLInputElement>
|
|
) => {
|
|
setRecipientInput(e.target.value);
|
|
};
|
|
|
|
const handleServiceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
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) {
|
|
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 {
|
|
const results = await fetch(`${window.location.origin}/just/for`, {
|
|
headers: {
|
|
"X-CSRF-Token": props.csrf
|
|
},
|
|
body: formData,
|
|
method: "POST"
|
|
});
|
|
if (!results.ok) {
|
|
throw new Error('Network response was not OK');
|
|
}
|
|
|
|
await results.json();
|
|
window.location.href = `${window.location.origin}/just/for/you`;
|
|
} catch (err: any) {
|
|
alert(err.message);
|
|
}
|
|
};
|
|
|
|
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}
|
|
>
|
|
<option value='github'>Github</option>
|
|
</Select>
|
|
<Spacer space="3rem" />
|
|
<SpaceBetweenContainer>
|
|
<Button variant="secondary" onClick={() => window.location.href = "/just"}>
|
|
<IconArrow arrowDirection="left" />
|
|
</Button>
|
|
<Button onClick={postContacts}>Generate Secret Code</Button>
|
|
</SpaceBetweenContainer>
|
|
</CenteredContainer>
|
|
</CenteredContainer>
|
|
</React.StrictMode>
|
|
);
|
|
};
|
|
|
|
export default ForPage;
|