Spaces:
Running
Running
File size: 2,028 Bytes
1e22bf6 |
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 63 64 65 66 67 68 69 70 71 |
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";
interface AccessPageState {
accessKey: string;
error: string;
}
export default function AccessPage({
onAccessKeyValid,
}: {
onAccessKeyValid: () => void;
}) {
const [state, setState] = useState<AccessPageState>({
accessKey: "",
error: "",
});
const handleSubmit = async (formEvent: FormEvent<HTMLFormElement>) => {
formEvent.preventDefault();
setState((prev) => ({ ...prev, error: "" }));
try {
const isValid = await validateAccessKey(state.accessKey);
if (isValid) {
addLogEntry("Valid access key entered");
onAccessKeyValid();
} else {
setState((prev) => ({ ...prev, error: "Invalid access key" }));
addLogEntry("Invalid access key attempt");
}
} catch (error) {
setState((prev) => ({ ...prev, error: "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={state.accessKey}
onChange={({ target }) =>
setState((prev) => ({ ...prev, accessKey: target.value }))
}
placeholder="Enter your access key to continue"
required
autoFocus
error={state.error}
styles={{
input: {
textAlign: "center",
},
}}
/>
<Button size="xs" type="submit">
Submit
</Button>
</Stack>
</form>
</Stack>
</Container>
);
}
|