feat: implement unauthorized Git provider handling and disconnect functionality

- Added UnauthorizedGitProvider component to display information for applications connected to unauthorized Git providers.
- Implemented disconnectGitProvider mutation to allow users to disconnect from their Git provider, with success and error notifications.
- Updated application query to include access checks for Git providers, ensuring users can only interact with their authorized repositories.

apps/dokploy/components/dashboard/application/general/generic/show.tsx

@@ -16,9 +16,11 @@ import { api } from "@/utils/api";
 import { GitBranch, Loader2, UploadCloud } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";
 import { SaveDragNDrop } from "./save-drag-n-drop";
 import { SaveGitlabProvider } from "./save-gitlab-provider";
+import { UnauthorizedGitProvider } from "./unauthorized-git-provider";
 
 type TabState =
 	| "github"
@@ -43,12 +45,31 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 	const { data: giteaProviders, isLoading: isLoadingGitea } =
 		api.gitea.giteaProviders.useQuery();
 
-	const { data: application } = api.application.one.useQuery({ applicationId });
+	const { data: application, refetch } = api.application.one.useQuery({
+		applicationId,
+	});
+	const { mutateAsync: disconnectGitProvider } =
+		api.application.disconnectGitProvider.useMutation();
+
 	const [tab, setSab] = useState<TabState>(application?.sourceType || "github");
 
 	const isLoading =
 		isLoadingGithub || isLoadingGitlab || isLoadingBitbucket || isLoadingGitea;
 
+	const handleDisconnect = async () => {
+		try {
+			await disconnectGitProvider({ applicationId });
+			toast.success("Repository disconnected successfully");
+			await refetch();
+		} catch (error) {
+			toast.error(
+				`Failed to disconnect repository: ${
+					error instanceof Error ? error.message : "Unknown error"
+				}`,
+			);
+		}
+	};
+
 	if (isLoading) {
 		return (
 			<Card className="group relative w-full bg-transparent">
@@ -77,6 +98,38 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 		);
 	}
 
+	// Check if user doesn't have access to the current git provider
+	if (
+		application &&
+		!application.hasGitProviderAccess &&
+		application.sourceType !== "docker" &&
+		application.sourceType !== "drop"
+	) {
+		return (
+			<Card className="group relative w-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-start justify-between">
+						<div className="flex flex-col gap-2">
+							<span className="flex flex-col space-y-0.5">Provider</span>
+							<p className="flex items-center text-sm font-normal text-muted-foreground">
+								Repository connection through unauthorized provider
+							</p>
+						</div>
+						<div className="hidden space-y-1 text-sm font-normal md:block">
+							<GitBranch className="size-6 text-muted-foreground" />
+						</div>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<UnauthorizedGitProvider
+						application={application}
+						onDisconnect={handleDisconnect}
+					/>
+				</CardContent>
+			</Card>
+		);
+	}
+
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>

apps/dokploy/components/dashboard/application/general/generic/unauthorized-git-provider.tsx

@@ -0,0 +1,137 @@
+import {
+	BitbucketIcon,
+	GitIcon,
+	GiteaIcon,
+	GithubIcon,
+	GitlabIcon,
+} from "@/components/icons/data-tools-icons";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { AlertCircle, GitBranch, Unlink } from "lucide-react";
+
+export const UnauthorizedGitProvider = ({
+	application,
+	onDisconnect,
+}: {
+	application: any;
+	onDisconnect: () => void;
+}) => {
+	const getProviderIcon = (sourceType: string) => {
+		switch (sourceType) {
+			case "github":
+				return <GithubIcon className="size-5 text-muted-foreground" />;
+			case "gitlab":
+				return <GitlabIcon className="size-5 text-muted-foreground" />;
+			case "bitbucket":
+				return <BitbucketIcon className="size-5 text-muted-foreground" />;
+			case "gitea":
+				return <GiteaIcon className="size-5 text-muted-foreground" />;
+			case "git":
+				return <GitIcon className="size-5 text-muted-foreground" />;
+			default:
+				return <GitBranch className="size-5 text-muted-foreground" />;
+		}
+	};
+
+	const getRepositoryInfo = () => {
+		switch (application.sourceType) {
+			case "github":
+				return {
+					repo: application.repository,
+					branch: application.branch,
+					owner: application.owner,
+				};
+			case "gitlab":
+				return {
+					repo: application.gitlabRepository,
+					branch: application.gitlabBranch,
+					owner: application.gitlabOwner,
+				};
+			case "bitbucket":
+				return {
+					repo: application.bitbucketRepository,
+					branch: application.bitbucketBranch,
+					owner: application.bitbucketOwner,
+				};
+			case "gitea":
+				return {
+					repo: application.giteaRepository,
+					branch: application.giteaBranch,
+					owner: application.giteaOwner,
+				};
+			case "git":
+				return {
+					repo: application.customGitUrl,
+					branch: application.customGitBranch,
+					owner: null,
+				};
+			default:
+				return { repo: null, branch: null, owner: null };
+		}
+	};
+
+	const { repo, branch, owner } = getRepositoryInfo();
+
+	return (
+		<div className="space-y-4">
+			<Alert>
+				<AlertCircle className="h-4 w-4" />
+				<AlertDescription>
+					This application is connected to a {application.sourceType} repository
+					through a git provider that you don't have access to. You can see
+					basic repository information below, but cannot modify the
+					configuration.
+				</AlertDescription>
+			</Alert>
+
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						{getProviderIcon(application.sourceType)}
+						<span className="capitalize">
+							{application.sourceType} Repository
+						</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					{owner && (
+						<div>
+							<span className="text-sm font-medium text-muted-foreground">
+								Owner:
+							</span>
+							<p className="text-sm">{owner}</p>
+						</div>
+					)}
+					{repo && (
+						<div>
+							<span className="text-sm font-medium text-muted-foreground">
+								Repository:
+							</span>
+							<p className="text-sm">{repo}</p>
+						</div>
+					)}
+					{branch && (
+						<div>
+							<span className="text-sm font-medium text-muted-foreground">
+								Branch:
+							</span>
+							<p className="text-sm">{branch}</p>
+						</div>
+					)}
+
+					<div className="pt-4 border-t">
+						<Button variant="outline" onClick={onDisconnect} className="w-full">
+							<Unlink className="size-4 mr-2" />
+							Disconnect Repository
+						</Button>
+						<p className="text-xs text-muted-foreground mt-2">
+							Disconnecting will allow you to configure a new repository with
+							your own git providers.
+						</p>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};