feat(api): implement advanced API key management with granular controls

apps/dokploy/pages/dashboard/settings/profile.tsx

@@ -1,4 +1,4 @@
-import { GenerateToken } from "@/components/dashboard/settings/profile/generate-token";
+import { ShowApiKeys } from "@/components/dashboard/settings/api/show-api-keys";
 import { ProfileForm } from "@/components/dashboard/settings/profile/profile-form";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 
@@ -19,7 +19,7 @@ const Page = () => {
 		<div className="w-full">
 			<div className="h-full rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
 				<ProfileForm />
-				{(data?.canAccessToAPI || data?.role === "owner") && <GenerateToken />}
+				{(data?.canAccessToAPI || data?.role === "owner") && <ShowApiKeys />}
 
 				{/* {isCloud && <RemoveSelfAccount />} */}
 			</div>

apps/dokploy/pages/swagger.tsx

@@ -30,7 +30,41 @@ const Home: NextPage = () => {
 
 	return (
 		<div className="h-screen bg-white">
-			<SwaggerUI spec={spec} />
+			<SwaggerUI
+				spec={spec}
+				persistAuthorization={true}
+				plugins={[
+					{
+						statePlugins: {
+							auth: {
+								wrapActions: {
+									authorize: (ori: any) => (args: any) => {
+										const result = ori(args);
+										const apiKey = args?.apiKey?.value;
+										if (apiKey) {
+											localStorage.setItem("swagger_api_key", apiKey);
+										}
+										return result;
+									},
+									logout: (ori: any) => (args: any) => {
+										const result = ori(args);
+										localStorage.removeItem("swagger_api_key");
+										return result;
+									},
+								},
+							},
+						},
+					},
+				]}
+				requestInterceptor={(request: any) => {
+					const apiKey = localStorage.getItem("swagger_api_key");
+					if (apiKey) {
+						request.headers = request.headers || {};
+						request.headers["x-api-key"] = apiKey;
+					}
+					return request;
+				}}
+			/>
 		</div>
 	);
 };