awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 08:26:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc: finalized auth method selection ui/ux

Browse Source
This commit is contained in:
Sheen Capadngan
2024-10-15 18:21:02 +08:00
parent 94b799e80b
commit 4a1adb76ab
1 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/integrations/github/auth-mode-selection.tsx
+50 -31
View File
@@ -1,5 +1,6 @@
import crypto from "crypto"; import crypto from "crypto";
import { useState } from "react";
import Head from "next/head"; import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
@@ -7,13 +8,27 @@ import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Card, CardTitle } from "@app/components/v2"; import {
Button,
Card,
CardBody,
CardTitle,
FormControl,
Select,
SelectItem
} from "@app/components/v2";
import { useGetCloudIntegrations } from "@app/hooks/api"; import { useGetCloudIntegrations } from "@app/hooks/api";
enum AuthMethod {
APP = "APP",
OAUTH = "OAUTH"
}
export default function GithubIntegrationAuthModeSelectionPage() { export default function GithubIntegrationAuthModeSelectionPage() {
const router = useRouter(); const router = useRouter();
const { data: cloudIntegrations } = useGetCloudIntegrations(); const { data: cloudIntegrations } = useGetCloudIntegrations();
const githubIntegration = cloudIntegrations?.find((integration) => integration.slug === "github"); const githubIntegration = cloudIntegrations?.find((integration) => integration.slug === "github");
const [selectedAuthMethod, setSelectedAuthMethod] = useState<AuthMethod>(AuthMethod.APP);
return ( return (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
@@ -50,37 +65,41 @@ export default function GithubIntegrationAuthModeSelectionPage() {
</Link> </Link>
</div> </div>
</CardTitle> </CardTitle>
<div className="mb-7 flex flex-col items-center"> <CardBody>
<Button <FormControl label="Select authentication method">
colorSchema="primary" <Select
variant="outline_bg" value={selectedAuthMethod}
className="mt-2 w-3/4" onValueChange={(val) => {
size="sm" setSelectedAuthMethod(val as AuthMethod);
type="submit" }}
onClick={() => { className="w-full border border-mineshaft-500"
router.push("/integrations/select-integration-auth?integrationSlug=github"); >
}} <SelectItem value={AuthMethod.APP}>Github App (Recommended)</SelectItem>
> <SelectItem value={AuthMethod.OAUTH}>OAuth</SelectItem>
Connect with App </Select>
</Button> </FormControl>
<Button <div className="flex items-end">
colorSchema="primary" <Button
variant="outline_bg" onClick={() => {
className="mt-3 w-3/4" if (selectedAuthMethod === AuthMethod.APP) {
size="sm" router.push("/integrations/select-integration-auth?integrationSlug=github");
type="submit" } else {
onClick={() => { const state = crypto.randomBytes(16).toString("hex");
const state = crypto.randomBytes(16).toString("hex"); localStorage.setItem("latestCSRFToken", state);
localStorage.setItem("latestCSRFToken", state);
window.location.assign( window.location.assign(
`https://github.com/login/oauth/authorize?client_id=${githubIntegration?.clientId}&response_type=code&scope=repo,admin:org&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}` `https://github.com/login/oauth/authorize?client_id=${githubIntegration?.clientId}&response_type=code&scope=repo,admin:org&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`
); );
}} }
> }}
Connect with OAuth colorSchema="primary"
</Button> variant="outline_bg"
</div> className="mb-4 mt-4 ml-auto w-min"
>
Connect to Github
</Button>
</div>
</CardBody>
</Card> </Card>
</div> </div>
); );