Spaces:
Running
Running
File size: 1,778 Bytes
ae1a53c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import { Button, Container, Stack, TextInput, Title } from "@mantine/core";
import { type FormEvent, useState } from "react";
import { validateAccessKey } from "../../modules/accessKey";
import { addLogEntry } from "../../modules/logEntries";
export default function AccessPage({
onAccessKeyValid,
}: {
onAccessKeyValid: () => void;
}) {
const [accessKey, setAccessKey] = useState("");
const [error, setError] = useState("");
const handleSubmit = async (formEvent: FormEvent<HTMLFormElement>) => {
formEvent.preventDefault();
setError("");
try {
const isValid = await validateAccessKey(accessKey);
if (isValid) {
addLogEntry("Valid access key entered");
onAccessKeyValid();
} else {
setError("Invalid access key");
addLogEntry("Invalid access key attempt");
}
} catch (error) {
setError("Error validating access key");
addLogEntry(`Error validating access key: ${error}`);
}
};
return (
<Container size="xs">
<Stack p="lg" mih="100vh" justify="center">
<Title order={2} ta="center">
Access Restricted
</Title>
<form onSubmit={handleSubmit}>
<Stack gap="xs">
<TextInput
value={accessKey}
onChange={({ target }) => setAccessKey(target.value)}
placeholder="Enter your access key to continue"
required
autoFocus
error={error}
styles={{
input: {
textAlign: "center",
},
}}
/>
<Button size="xs" type="submit">
Submit
</Button>
</Stack>
</form>
</Stack>
</Container>
);
}
|