Entendu/assets/js/pages/AuthPage.tsx

55 lines
1.6 KiB
TypeScript

import { Button, CenteredContainer, GlobalStyle, Header2, Header3, Input, Label, Spacer, TextAlignWrapper } from "@intended/intended-ui";
import React, { useEffect } from "react";
type AuthPageProps = {
csrf: string,
service: string,
recipient: string
}
const AuthPage = (props: AuthPageProps) => {
const { service, recipient } = props;
// const [recipientInput, setRecipientInput] = useState("");
// const [serviceSelect, setServiceSelect] = useState("github");
// useEffect(() => {
// }, [])
return (
<React.StrictMode>
<GlobalStyle />
<CenteredContainer fullscreen>
<CenteredContainer>
<Header2 style={{ margin: ".4rem" }}>Someone sent you a secret</Header2>
<Header3 small>
Please verify your identity to reveal this message.
</Header3>
<Spacer space="3rem" />
<TextAlignWrapper align="left">
<Label htmlFor="usernameEmail">Username / Email</Label>
</TextAlignWrapper>
<Input
variant="disabled-medium"
id="usernameEmail"
value={recipient}
/>
<Spacer space="3rem" />
<TextAlignWrapper align="left">
<Label htmlFor="service">Service</Label>
</TextAlignWrapper>
<Input variant="disabled-medium" id="service" value={service} />
<Spacer space="3rem" />
<a href={`https://intended.link/auth/${service}`}>
<Button variant="primary" wide onClick={() => {}}>
Verify
</Button>
</a>
</CenteredContainer>
</CenteredContainer>
</React.StrictMode>
);
}
export default AuthPage;