pangolin/src/components/OrgPolicyRequired.tsx

"use client";

import { Button } from "@app/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
} from "@app/components/ui/card";
import { Shield, ArrowRight } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";

type OrgPolicyRequiredProps = {
    orgId: string;
    policies: {
        requiredTwoFactor?: boolean;
        maxSessionLength?: {
            compliant: boolean;
            maxSessionLengthHours: number;
            sessionAgeHours: number;
        };
        passwordAge?: {
            compliant: boolean;
            maxPasswordAgeDays: number;
            passwordAgeDays: number;
        };
    };
    redirectAfterAuth?: string;
};

export default function OrgPolicyRequired({
    orgId,
    policies,
    redirectAfterAuth
}: OrgPolicyRequiredProps) {
    const t = useTranslations();
    const router = useRouter();

    const api = createApiClient(useEnvContext());

    const sessionExpired =
        policies?.maxSessionLength &&
        policies.maxSessionLength.compliant === false;

    function reauthenticate() {
        api.post("/auth/logout")
            .catch(() => {})
            .then(() => {
                const destination = redirectAfterAuth ?? `/${orgId}`;
                router.push(destination);
                router.refresh();
            });
    }

    if (sessionExpired) {
        return (
            <Card className="w-full max-w-md">
                <CardHeader className="text-center">
                    <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-orange-100">
                        <Shield className="h-6 w-6 text-orange-600" />
                    </div>
                    <CardTitle className="text-xl font-semibold">
                        {t("sessionExpired")}
                    </CardTitle>
                    <CardDescription>
                        {t("sessionExpiredReauthRequired")}
                    </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="pt-4">
                        <Button
                            className="w-full"
                            onClick={reauthenticate}
                        >
                            {t("reauthenticate")}
                            <ArrowRight className="ml-2 h-4 w-4" />
                        </Button>
                    </div>
                </CardContent>
            </Card>
        );
    }

    return (
        <Card className="w-full max-w-md">
            <CardHeader className="text-center">
                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-orange-100">
                    <Shield className="h-6 w-6 text-orange-600" />
                </div>
                <CardTitle className="text-xl font-semibold">
                    {t("additionalSecurityRequired")}
                </CardTitle>
                <CardDescription>
                    {t("organizationRequiresAdditionalSteps")}
                </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="pt-4">
                    <Link href={`/${orgId}`}>
                        <Button className="w-full">
                            {t("completeSecuritySteps")}
                            <ArrowRight className="ml-2 h-4 w-4" />
                        </Button>
                    </Link>
                </div>
            </CardContent>
        </Card>
    );
}