51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Button, FormField, Icon, Input, SpaceBetween } from "@cloudscape-design/components";
|
|
import { useEffect, useState } from "react";
|
|
|
|
// COPIED FROM SERVER
|
|
export enum IAuthMode {
|
|
FIXED_PIN = "Fixed Pin",
|
|
RANDOM_ROTATING_KEY = "Random Rotating Key",
|
|
}
|
|
|
|
|
|
export interface IAuthComponentProps {
|
|
door: string,
|
|
authMode: IAuthMode,
|
|
secret: string | null;
|
|
onUnlock: () => void;
|
|
onError?: (res: any) => void;
|
|
runCheck?: number;
|
|
}
|
|
|
|
export const AuthComponent = ({ door, secret, authMode, onError, onUnlock, runCheck }: IAuthComponentProps) => {
|
|
const [ key, setKey ] = useState(secret);
|
|
const [ error, setError ] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (runCheck) {
|
|
onSubmit();
|
|
}
|
|
}, [runCheck])
|
|
|
|
const onSubmit = () => {
|
|
fetch(`/api/door/auth?key=${key}&rotatingKey=${key}&door=${door}`)
|
|
.then(async res => {
|
|
if (res.status !== 200) {
|
|
setError("Incorrect PIN");
|
|
onError && onError(await res.json());
|
|
return;
|
|
}
|
|
onUnlock();
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SpaceBetween size='l'>
|
|
<FormField errorText={error} label={"PIN"} constraintText={"Enter the PIN to unlock the door"}>
|
|
<Input readOnly={secret !== null} value={key || ""} onChange={({ detail }) => setKey(detail.value)} />
|
|
</FormField>
|
|
</SpaceBetween>
|
|
</>
|
|
);
|
|
} |