Continue progress on self-hosted gitlab integration

This commit is contained in:
Tuan Dang
2023-09-05 19:46:59 +01:00
parent 7f543b635c
commit ad0bc4efdc
3 changed files with 55 additions and 1 deletions

View File

@@ -0,0 +1,53 @@
import crypto from "crypto";
import { useState } from "react";
import { faGoogle } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useGetCloudIntegrations } from "@app/hooks/api";
import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
export default function GitLabAuthorizeIntegrationPage() {
const { data: cloudIntegrations } = useGetCloudIntegrations();
const [gitLabURL, setGitLabURL] = useState("");
const handleIntegrateWithOAuth = () => {
if (!cloudIntegrations) return;
const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab");
if (!integrationOption) return;
const baseURL = gitLabURL.trim() === "" ? "https://gitlab.com" : gitLabURL.trim();
const csrfToken = crypto.randomBytes(16).toString("hex");
localStorage.setItem("latestCSRFToken", csrfToken);
const link = `${baseURL}/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
window.location.assign(link);
}
return (
<div className="flex h-full w-full items-center justify-center">
<Card className="max-w-md rounded-md p-8">
<CardTitle className="text-center">GitLab Integration</CardTitle>
<FormControl label="Self-hosted URL (optional)">
<Input
placeholder="https://self-hosted-gitlab.com"
value={gitLabURL} onChange={(e) => setGitLabURL(e.target.value)}
/>
</FormControl>
<Button
onClick={handleIntegrateWithOAuth}
leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
className="h-11 w-full mx-0 mt-4"
>
Continue with OAuth
</Button>
</Card>
</div>
);
}
GitLabAuthorizeIntegrationPage.requireAuth = true;

View File

@@ -18,6 +18,7 @@ export default function GitLabOAuth2CallbackPage() {
if (state !== localStorage.getItem("latestCSRFToken")) return;
localStorage.removeItem("latestCSRFToken");
// TODO: self-hosted url somewhere here?
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id") as string,
code: code as string,

View File

@@ -64,7 +64,7 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
break;
case "gitlab":
link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
link = `${window.location.origin}/integrations/gitlab/authorize`;
break;
case "render":
link = `${window.location.origin}/integrations/render/authorize`;