gitfor/platform

import { useState } from "react";
import {
  beginTotpSetup,
  confirmTotpSetup,
  disableTwoFactor,
  newRecoveryCodes,
} from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { RecoveryCodes } from "./RecoveryCodes";
import { ExternalLink } from "~/ui/TextLink";
import { QrCode } from "~/ui/QrCode";

type Props = {
  enabled: boolean;
  recoveryCodesLeft: number;
  hasPassword: boolean;
};

function field(form: HTMLFormElement, name: string): string {
  return String(new FormData(form).get(name) ?? "");
}

export function TwoFactorPanel({
  enabled,
  recoveryCodesLeft,
  hasPassword,
}: Props) {
  const [setup, setSetup] = useState<{ secret: string; uri: string } | null>(
    null,
  );
  const [codes, setCodes] = useState<string[] | null>(null);
  const begin = useAction(beginTotpSetup, { invalidate: false });
  const confirm = useAction(confirmTotpSetup);
  const disable = useAction(disableTwoFactor);
  const regenerate = useAction(newRecoveryCodes);