feat: initial commit

components/dashboard/settings/github/github-setup.tsx

@@ -0,0 +1,168 @@
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { BadgeCheck } from "lucide-react";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import { RemoveGithubApp } from "./remove-github-app";
+export const generateName = () => {
+	const n1 = ["Blue", "Green", "Red", "Orange", "Violet", "Indigo", "Yellow"];
+	const n2 = [
+		"One",
+		"Two",
+		"Three",
+		"Four",
+		"Five",
+		"Six",
+		"Seven",
+		"Eight",
+		"Nine",
+		"Zero",
+	];
+	return `Dokploy-${n1[Math.round(Math.random() * (n1.length - 1))]}-${
+		n2[Math.round(Math.random() * (n2.length - 1))]
+	}`;
+};
+
+export const GithubSetup = () => {
+	const [isOrganization, setIsOrganization] = useState(false);
+	const { data: haveGithubConfigured } =
+		api.admin.haveGithubConfigured.useQuery();
+	const [manifest, setManifest] = useState<string>("");
+	const [organizationName, setOrganization] = useState<string>("");
+	const { data } = api.admin.one.useQuery();
+	useEffect(() => {
+		const manifest = JSON.stringify(
+			{
+				redirect_url: `${origin}/api/redirect?authId=${data?.authId}`,
+				name: generateName(),
+				url: origin,
+				hook_attributes: {
+					// JUST FOR TESTING
+					url: "https://webhook.site/b6a167c0-ceb5-4f0c-a257-97c0fd163977",
+					// url: `${origin}/api/webhook`, // Aquí especificas la URL del endpoint de tu webhook
+				},
+				callback_urls: [`${origin}/api/redirect`], // Los URLs de callback para procesos de autenticación
+				public: false,
+				request_oauth_on_install: true,
+				default_permissions: {
+					contents: "read",
+					metadata: "read",
+					emails: "read",
+					pull_requests: "write",
+				},
+				default_events: ["pull_request", "push"],
+			},
+			null,
+			4,
+		);
+
+		setManifest(manifest);
+	}, [data?.authId]);
+	return (
+		<Card className="bg-transparent">
+			<CardHeader>
+				<CardTitle className="text-xl">Configure Github </CardTitle>
+				<CardDescription>
+					Setup your github account to access to your repositories.
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="h-full space-y-2">
+				{haveGithubConfigured ? (
+					<div className="flex flex-col gap-2">
+						<div className="flex items-center gap-4">
+							<span className="text-muted-foreground">
+								Github account configured succesfully.
+							</span>
+							<BadgeCheck className="size-5 text-green-700" />
+						</div>
+						<div className="flex items-end">
+							<RemoveGithubApp />
+						</div>
+					</div>
+				) : (
+					<>
+						{data?.githubAppName ? (
+							<div className="flex w-fit flex-col gap-4">
+								<span className="text-muted-foreground">
+									Youve successfully created a GitHub app named
+									{data.githubAppName}! The next step is to install this app in
+									your GitHub account.
+								</span>
+
+								<Link
+									href={`https://github.com/apps/${data.githubAppName}/installations/new?state=gh_setup:${data?.authId}`}
+									className={buttonVariants({ className: "w-fit" })}
+								>
+									Install Github App
+								</Link>
+							</div>
+						) : (
+							<div>
+								<div className="flex items-center gap-2">
+									<span className="text-muted-foreground">
+										To integrate your GitHub account with our services, youll
+										need to create and install a GitHub app. This process is
+										straightforward and only takes a few minutes. Click the
+										button below to get started.
+									</span>
+								</div>
+
+								<div className="mt-4 flex flex-col gap-4">
+									<div className="flex flex-row gap-4">
+										<span>Organization?</span>
+										<Switch
+											checked={isOrganization}
+											onCheckedChange={(checked) => setIsOrganization(checked)}
+										/>
+									</div>
+
+									{isOrganization && (
+										<Input
+											required
+											placeholder="Organization name"
+											onChange={(e) => setOrganization(e.target.value)}
+										/>
+									)}
+								</div>
+
+								<form
+									action={
+										isOrganization
+											? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${data?.authId}`
+											: `https://github.com/settings/apps/new?state=gh_init:${data?.authId}`
+									}
+									method="post"
+								>
+									<input
+										type="text"
+										name="manifest"
+										id="manifest"
+										defaultValue={manifest}
+										className="invisible"
+									/>
+									<br />
+
+									<Button
+										disabled={isOrganization && organizationName.length < 1}
+										type="submit"
+									>
+										Create GitHub App
+									</Button>
+								</form>
+							</div>
+						)}
+					</>
+				)}
+			</CardContent>
+		</Card>
+	);
+};