`src/client/components/AuthConfigErrorCard.tsx`

55 lines
import { ShieldAlert } from "lucide-react";

const README_CLOUDFLARE_ACCESS_URL =
  "https://github.com/every-app/open-seo#cloudflare-deployment--access-setup";

type AuthConfigErrorCardProps = {
  message: string;
  onRetry?: () => void;
};

export function AuthConfigErrorCard({
  message,
  onRetry,
}: AuthConfigErrorCardProps) {
  return (
    <div className="card w-full max-w-2xl bg-base-100 border border-base-300 shadow-xl">
      <div className="card-body gap-4">
        <h2 className="card-title gap-2">
          <ShieldAlert className="size-5 text-error" />
          Authentication setup required
        </h2>

        <div className="alert alert-error">
          <span>{message}</span>
        </div>

        <p className="text-sm text-base-content/70">
          Check the auth environment variables for your selected
          <code className="mx-1">AUTH_MODE</code>. Cloudflare Access requires
          <code className="mx-1">TEAM_DOMAIN</code> and
          <code className="mx-1">POLICY_AUD</code>. Hosted mode requires
          <code className="mx-1">BETTER_AUTH_SECRET</code> and
          <code className="ml-1">BETTER_AUTH_URL</code>.
        </p>

        <div className="card-actions justify-end">
          {onRetry ? (
            <button className="btn btn-ghost btn-sm" onClick={onRetry}>
              Try Again
            </button>
          ) : null}
          <a
            className="btn btn-primary btn-sm"
            href={README_CLOUDFLARE_ACCESS_URL}
            target="_blank"
            rel="noreferrer"
          >
            Open Setup Guide
          </a>
        </div>
      </div>
    </div>
  );
}