266 lines
8.9 KiB
TypeScript
266 lines
8.9 KiB
TypeScript
"use client"
|
|
|
|
import { Nav } from "@/components/core/nav"
|
|
import { SiForgejo, SiJellyfin, SiOllama, SiVaultwarden } from "react-icons/si"
|
|
import { TbMail, TbServer, TbTool, TbKey, TbLogin, TbSend, TbExternalLink, TbInfoCircle } from "react-icons/tb"
|
|
import Link from "next/link"
|
|
import { useEffect, useState } from "react"
|
|
import { authClient } from "@/util/auth-client"
|
|
|
|
interface Service {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
priceStatus: string;
|
|
joinLink?: string;
|
|
enabled: boolean;
|
|
}
|
|
|
|
interface UserService {
|
|
serviceId: string;
|
|
serviceName: string;
|
|
serviceDescription: string;
|
|
priceStatus: string;
|
|
joinLink?: string;
|
|
grantedAt: string | null;
|
|
isOpen: boolean;
|
|
}
|
|
|
|
const getServiceIcon = (serviceName: string) => {
|
|
switch (serviceName.toLowerCase()) {
|
|
case 'git':
|
|
return SiForgejo;
|
|
case 'tv':
|
|
return SiJellyfin;
|
|
case 'ai':
|
|
return SiOllama;
|
|
case 'mail':
|
|
case 'email':
|
|
return TbMail;
|
|
case 'hosting':
|
|
return TbServer;
|
|
case 'keybox':
|
|
return TbKey;
|
|
case 'pass':
|
|
return SiVaultwarden;
|
|
default:
|
|
return TbTool;
|
|
}
|
|
};
|
|
|
|
export default function Services() {
|
|
const { data: session, isPending } = authClient.useSession();
|
|
const [services, setServices] = useState<Service[]>([]);
|
|
const [userServices, setUserServices] = useState<UserService[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchServices();
|
|
if (session) {
|
|
fetchUserServices();
|
|
}
|
|
}, [session]);
|
|
|
|
const fetchServices = async () => {
|
|
try {
|
|
const response = await fetch("/api/services");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setServices(data.services);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching services:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchUserServices = async () => {
|
|
try {
|
|
const response = await fetch("/api/user-services");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setUserServices(data.services);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching user services:", error);
|
|
}
|
|
};
|
|
|
|
const hasAccess = (serviceName: string) => {
|
|
return userServices.some(userService => userService.serviceName === serviceName);
|
|
};
|
|
|
|
const getUserJoinLink = (serviceName: string) => {
|
|
const userService = userServices.find(us => us.serviceName === serviceName);
|
|
return userService?.joinLink;
|
|
};
|
|
|
|
const getServiceButtonContent = (service: Service) => {
|
|
const isLoggedIn = !!session;
|
|
const userHasAccess = hasAccess(service.name);
|
|
const userJoinLink = getUserJoinLink(service.name);
|
|
const joinLink = userJoinLink || service.joinLink;
|
|
|
|
if (isLoggedIn && userHasAccess && joinLink) {
|
|
return (
|
|
<Link href={joinLink} target="_blank" rel="noopener noreferrer">
|
|
<button className="flex flex-row items-center justify-center gap-1 text-white bg-green-600 px-3 py-1.5 rounded-lg text-sm hover:bg-green-700 transition-all duration-300 cursor-pointer">
|
|
<TbExternalLink size={14} />
|
|
Open
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (isLoggedIn && !userHasAccess && (service.priceStatus === 'by-request' || service.priceStatus === 'invite-only')) {
|
|
return (
|
|
<Link href="/requests">
|
|
<button className="flex flex-row items-center justify-center gap-1 text-white bg-blue-600 px-3 py-1.5 rounded-lg text-sm hover:bg-blue-700 transition-all duration-300 cursor-pointer">
|
|
<TbSend size={14} />
|
|
Request
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (isLoggedIn && service.priceStatus === 'open' && joinLink) {
|
|
return (
|
|
<Link href={joinLink} target="_blank" rel="noopener noreferrer">
|
|
<button className="flex flex-row items-center justify-center gap-1 text-white bg-green-600 px-3 py-1.5 rounded-lg text-sm hover:bg-green-700 transition-all duration-300 cursor-pointer">
|
|
<TbExternalLink size={14} />
|
|
Join
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (!isLoggedIn && service.priceStatus === 'open' && joinLink) {
|
|
return (
|
|
<Link href={joinLink} target="_blank" rel="noopener noreferrer">
|
|
<button className="flex flex-row items-center justify-center gap-1 text-white bg-green-600 px-3 py-1.5 rounded-lg text-sm hover:bg-green-700 transition-all duration-300 cursor-pointer">
|
|
<TbExternalLink size={14} />
|
|
Join
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
if (!isLoggedIn && (service.priceStatus === 'invite-only' || service.priceStatus === 'by-request')) {
|
|
return (
|
|
<Link href="/login">
|
|
<button className="flex flex-row items-center justify-center gap-1 text-white bg-blue-600 px-3 py-1.5 rounded-lg text-sm hover:bg-blue-700 transition-all duration-300 cursor-pointer">
|
|
<TbLogin size={14} />
|
|
Login
|
|
</button>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const getServiceCardColor = (service: Service) => {
|
|
const isLoggedIn = !!session;
|
|
const userHasAccess = hasAccess(service.name);
|
|
|
|
if (isLoggedIn && userHasAccess) {
|
|
return "bg-green-400 text-white";
|
|
}
|
|
|
|
switch (service.priceStatus) {
|
|
case 'open':
|
|
return "bg-blue-400 text-white";
|
|
case 'invite-only':
|
|
return "bg-orange-400 text-white";
|
|
case 'by-request':
|
|
return "bg-purple-400 text-white";
|
|
default:
|
|
return "bg-gray-400 text-white";
|
|
}
|
|
};
|
|
|
|
if (!mounted || isPending) {
|
|
return (
|
|
<main>
|
|
<Nav />
|
|
<div className="flex flex-col items-center justify-between gap-6 sm:gap-10 my-12 sm:my-16 px-4">
|
|
<div className="flex flex-row items-center justify-between gap-2">
|
|
<TbTool size={32} className="sm:w-9 sm:h-9" />
|
|
<h1 className="text-3xl sm:text-4xl font-bold">
|
|
services
|
|
</h1>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-between gap-2">
|
|
<h2 className="text-2xl sm:text-3xl font-light text-center w-full flex flex-wrap items-center justify-center">
|
|
please select a service.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center items-center py-12">
|
|
<div className="animate-pulse text-lg">Loading services...</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<Nav />
|
|
<div className="flex flex-col items-center justify-between gap-6 sm:gap-10 my-12 sm:my-16 px-4">
|
|
<div className="flex flex-row items-center justify-between gap-2">
|
|
<TbTool size={32} className="sm:w-9 sm:h-9" />
|
|
<h1 className="text-3xl sm:text-4xl font-bold">
|
|
services
|
|
</h1>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-between gap-2">
|
|
<h2 className="text-2xl sm:text-3xl font-light text-center w-full flex flex-wrap items-center justify-center">
|
|
please select a service.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center items-center py-12">
|
|
<div className="animate-pulse text-lg">Loading services...</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 my-4 w-full max-w-6xl mx-auto px-4">
|
|
{services.map((service) => {
|
|
const IconComponent = getServiceIcon(service.name);
|
|
|
|
return (
|
|
<div key={service.id} className="flex flex-col gap-4">
|
|
<div className={`flex flex-col gap-4 text-base sm:text-lg px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl transition-all ${getServiceCardColor(service)}`}>
|
|
<Link href={`/services/${service.name}`} className="hover:opacity-90 transition-opacity">
|
|
<div className="flex flex-row items-center gap-3">
|
|
<IconComponent size={28} className="sm:w-9 sm:h-9" />
|
|
<span className="text-xl sm:text-2xl font-bold">
|
|
{service.name === 'mail' ? 'email' : service.name}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
<div className="flex flex-row mt-2 gap-3">
|
|
{getServiceButtonContent(service)}
|
|
<Link href={`/services/${service.name}`} target="_blank" rel="noopener noreferrer">
|
|
<button className="flex flex-row items-center justify-center gap-1 text-white bg-green-600 px-3 py-1.5 rounded-lg text-sm hover:bg-green-700 transition-all duration-300 cursor-pointer">
|
|
<TbInfoCircle size={14} />
|
|
Info
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|