admin / Apex

import { useState } from "react";
import { api, setToken } from "../lib/api";
import { useAuth } from "../lib/auth";

export default function Login({ forceChange = false }: { forceChange?: boolean }) {
  const { refresh } = useAuth();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [otp, setOtp] = useState("");
  const [mfaStep, setMfaStep] = useState(false);
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  // forced password change (must_change_password)
  const [newPw, setNewPw] = useState("");
  const [curPw, setCurPw] = useState("");

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr("");
    setBusy(true);
    try {
      const res = await api.post("/auth/login", { email, password, otp: otp || undefined });
      if (res.mfa_required) {
        setMfaStep(true);
        setBusy(false);
        return;
      }
      setToken(res.access_token);
      await refresh();
    } catch (e: any) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  }

  async function changePassword(e: React.FormEvent) {
    e.preventDefault();
    setErr("");
    try {
      await api.post("/auth/change-password", { current_password: curPw, new_password: newPw });
      await refresh();
    } catch (e: any) {
      setErr(e.message);
    }
  }

  if (forceChange) {
    return (
      <div className="login-wrap">
        <form className="card login-card" onSubmit={changePassword}>
          <h1>Set a new password</h1>
          <p className="muted">Your account requires a password change before continuing.</p>
          <label>Current password</label>
          <input type="password" value={curPw} onChange={(e) => setCurPw(e.target.value)} />
          <label>New password</label>
          <input type="password" value={newPw} onChange={(e) => setNewPw(e.target.value)} />
          {err && <div className="err">{err}</div>}
          <button style={{ marginTop: 14 }}>Update password</button>
        </form>
      </div>
    );
  }

  return (
    <div className="login-wrap">
      <form className="card login-card" onSubmit={submit}>
        <div className="row" style={{ marginBottom: 8 }}>
          <img src="/icon.svg" width={36} height={36} alt="" />
          <h1 style={{ margin: 0 }}>Synapse-Apex</h1>
        </div>
        <p className="muted">Sign in to the bid workspace.</p>
        <label>Email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} autoFocus />
        <label>Password</label>
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        {mfaStep && (
          <>
            <label>Authentication code</label>
            <input value={otp} onChange={(e) => setOtp(e.target.value)} placeholder="6-digit or recovery code" autoFocus />
          </>
        )}
        {err && <div className="err">{err}</div>}
        <button style={{ marginTop: 14, width: "100%" }} disabled={busy}>
          {mfaStep ? "Verify" : "Sign in"}
        </button>
      </form>
    </div>
  );
}