doorman/packages/doorman-ui/src/components/AuthComponent.tsx

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 = async () => {
    const ip = await fetch('https://api.ipify.org?format=json')
      .then(response => response.json())
      .then(data => {
          return data.ip;
      })
      .catch(error => {
          console.log('Error:', error);
          return "null";
      });

    fetch(`/api/door/auth?key=${key}&rotatingKey=${key}&door=${door}&ip=${ip}`)
    .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>
    </>
  );
}