login/components/core/authorize.tsx

"use client";

import * as React from "react";

import Link from "next/link";
import Image from "next/image";

import { useRouter } from "next/navigation";

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Spinner } from "@/components/ui/spinner";

import { ShieldCheck } from "lucide-react";
import { IconExternalLink, IconHomeFilled, IconUserCircle, IconUser, IconMail, IconChevronRight, IconCheck } from "@tabler/icons-react";

import permissions from "@/permissions.json";

export interface AuthorizeContainerProps {
  client_id: string;
  redirect_uri: string;
  response_type: string;
  scope: string;
  applicationName: string;
  applicationUrl: string;
  applicationLogo?: string;
}

export interface AuthorizeLoadingProps {
  applicationName: string;
  applicationLogo?: string;
  applicationUrl: string;
}

export interface ScopePermission {
  name: string;
  description: string;
}

export const ScopePermissionComponent = (props: ScopePermission) => {
  const { name, description } = props;
  return (
    <div className="flex flex-col gap-1 w-full border border-green-200 bg-green-50 rounded-lg p-4">
      <div className="flex flex-row gap-2 items-center w-full">
      <div className="flex justify-center items-center gap-4 bg-green-200 rounded-full p-2">
        <IconCheck className="w-5 h-5 text-green-900" />
      </div>
      <div className="flex flex-col">
        <Label className="text-zinc-700 dark:text-zinc-300 text-sm text-center">{name}</Label>
        <p className="text-zinc-700 dark:text-zinc-300 text-xs font-light text-center">{description}</p>
      </div>
    </div>
  </div>
  );
};

export const AuthorizeLoading = (props: AuthorizeLoadingProps) => {
  const { applicationName, applicationLogo } = props;
  
  return (
    <div className="flex flex-col gap-6 w-full max-w-md">
      <Card className="flex flex-col p-0">
        <CardHeader className="flex flex-col gap-4 justify-center items-center pt-6">
          <CardTitle className="flex flex-row items-center justify-center gap-1 text-2xl font-bold text-center">
            {applicationLogo && <Image src={applicationLogo} alt={applicationName} width={100} height={100} />}
            {!applicationLogo && (
              <IconHomeFilled className="w-6 h-6" />
            )}
            <Label className="text-2xl font-bold text-center">{applicationName}</Label>
          </CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-6 px-0 pt-6">
          <div className="flex flex-col gap-6 px-6">
            <div className="flex justify-center items-center gap-6 pb-4">
              <div className="flex flex-col gap-2 bg-violet-200 rounded-full p-4">
                <div className="flex justify-center items-center gap-6 border-2 border-violet-900 rounded-full">
                  <Spinner className="size-8 animate-spin text-violet-900" />
                </div>
              </div>
            </div>
          </div>
          <Separator className="w-full" />
          <div className="flex flex-col gap-4 items-center justify-center w-full px-6 pb-6">
            <Label className="text-zinc-700 dark:text-zinc-300 font-medium text-xs text-center">Secured by SecNex</Label>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export const AuthorizeContainer = (props: AuthorizeContainerProps) => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [user, setUser] = React.useState<{ username: string, email: string } | null>(null);

  const router = useRouter();

  // const handleLogout = async () => {
  //   const response = await fetch("/api/logout");
  //   const data = await response.json();
  //   if (data.success) {
  //     toast.success(data.message);
  //     router.refresh();
  //   } else {
  //     toast.error(data.message);
  //   }
  // };

  // Get for each scope the permission name and description
  const scopePermissions = React.useMemo(() => {
    return props.scope.split(" ").map((scope) => {
      return {
        name: permissions[scope as keyof typeof permissions].name,
        description: permissions[scope as keyof typeof permissions].description,
      };
    });
  }, [props.scope]);

  React.useEffect(() => {
    const checkSession = async () => {
      const response = await fetch("/api/session");
      const data = await response.json();
      if (data.success) {
        setUser(data.sessionInfo);
        setIsLoading(false);
      } else {
        router.push("/");
      }
    };
    checkSession();
  }, [router]);

  if (isLoading) {
    return <AuthorizeLoading applicationName={props.applicationName} applicationUrl={props.applicationUrl} applicationLogo={props.applicationLogo} />;
  }

  return (
    <div className="flex flex-col gap-6 w-full max-w-md">
      <Card className="flex flex-col p-0">
        <CardHeader className="flex flex-col gap-4 justify-center items-center pt-6">
          <CardTitle className="flex flex-row items-center justify-center gap-1 text-2xl font-bold text-center">
            <IconHomeFilled className="w-6 h-6" />
            <Label className="text-2xl font-bold text-center">SecNex</Label>
          </CardTitle>
          <CardDescription className="text-center">
            <div className="flex flex-col gap-2 items-center justify-center py-4">
              <Avatar className="size-14 bg-violet-400">
                <AvatarImage src={props.applicationLogo} alt={props.applicationName} />
                <AvatarFallback className="bg-violet-200 text-violet-900 text-lg">
                  {props.applicationName.charAt(0).toUpperCase()}
                </AvatarFallback>
              </Avatar>
              <p className="text-zinc-700 dark:text-zinc-300 font-bold text-lg">{props.applicationName}</p>
              <div className="flex flex-row gap-1 items-center justify-center">
                <IconExternalLink className="w-3 h-3" />
                <Link href={props.applicationUrl} target="_blank" className="text-zinc-500 text-xs">{props.applicationUrl}</Link>
              </div>
            </div>
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-6 px-0 pb-6">
          <div className="flex flex-col gap-6 px-6 justify-start w-full">              
            <div className="flex flex-row gap-4 items-center bg-violet-50 border border-violet-200 rounded-lg p-4">
              <div className="flex flex-row gap-2 items-center justify-center">
                <div className="flex justify-center items-center gap-4 bg-violet-200 rounded-full p-3">
                  <IconUserCircle className="w-6 h-6 text-violet-900" />
                </div>
              </div>
              <div className="flex flex-col gap-1">
                <Label className="text-zinc-900 dark:text-zinc-300 text-md">{user?.username}</Label>
                <p className="text-zinc-700 dark:text-zinc-300 text-xs text-wrap break-all">{user?.email}</p>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-4 items-center w-full px-6">
            <div className="flex flex-row gap-1 items-center w-full">
              <ShieldCheck className="w-4 h-4 text-violet-900" />
              <Label className="text-zinc-700 dark:text-zinc-300 text-xs text-center">This application will be able to:</Label>
            </div>
            <div className="flex flex-col gap-3 w-full">
              {scopePermissions.map((permission) => (
                <ScopePermissionComponent key={permission.name} name={permission.name} description={permission.description} />
              ))}
            </div>
          </div>
          <div className="flex flex-col gap-4 items-center justify-center w-full px-6">
            <Button variant="outline" className="border-violet-900 bg-violet-900 text-violet-50 hover:bg-violet-800 hover:text-violet-100 w-full">Authorize <IconChevronRight className="w-4 h-4" /></Button>
            <Button variant="outline" className="border-zinc-300 bg-zinc-50 text-zinc-900 hover:bg-zinc-100 hover:text-zinc-800 w-full">Deny</Button>
          </div>
          <div className="flex flex-col gap-2 items-center justify-center w-full px-6">
            <p className="text-zinc-700 dark:text-zinc-300 text-xs text-center font-light">
              By authorizing this application, you agree to the <Link href="/terms" target="_blank" className="text-violet-800 dark:text-violet-300 text-xs font-medium">Terms of Service</Link> and <Link href="/privacy" target="_blank" className="text-violet-800 dark:text-violet-300 text-xs font-medium">Privacy Policy</Link>.
            </p>
          </div>
          <Separator className="w-full" />
          <div className="flex flex-col gap-4 items-center justify-center w-full px-6">
            <Label className="text-zinc-700 dark:text-zinc-300 font-medium text-xs text-center">Secured by SecNex</Label>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}