From 3070b96ea3428bd1ecd24b829ef39d394685fa23 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Tue, 7 Dec 2021 17:44:48 +0000
Subject: [PATCH] Add the oauth endpoints.

---
 client/src/app/pages/ClientFileFlowPage.tsx   |   5 +
 client/src/app/pages/OAuthRequestAuthPage.tsx | 130 ++++++++++++++++++
 .../dashboard/users/UserIntegrationsPage.tsx  |   6 +
 client/src/app/routes/AppRoutes.tsx           |   5 +
 client/src/components/util/OAuthMoreInfo.tsx  |  24 ++++
 5 files changed, 170 insertions(+)
 create mode 100644 client/src/app/pages/OAuthRequestAuthPage.tsx
 create mode 100644 client/src/components/util/OAuthMoreInfo.tsx

diff --git a/client/src/app/pages/ClientFileFlowPage.tsx b/client/src/app/pages/ClientFileFlowPage.tsx
index 3dc273461..80a29335b 100644
--- a/client/src/app/pages/ClientFileFlowPage.tsx
+++ b/client/src/app/pages/ClientFileFlowPage.tsx
@@ -1,6 +1,7 @@
 import ApiError from "components/util/ApiError";
 import Divider from "components/util/Divider";
 import Loading from "components/util/Loading";
+import OAuthMoreInfo from "components/util/OAuthMoreInfo";
 import useApiQuery from "components/util/query/useApiQuery";
 import { UserContext } from "context/UserContext";
 import { TachiConfig } from "lib/config";
@@ -89,6 +90,10 @@ export default function ClientFileFlowPage() {
 							Create the key.
 						</button>
 					</div>
+					<div className="col-12" style={{ fontSize: "1.3rem" }}>
+						<Divider />
+						<OAuthMoreInfo client={data} />
+					</div>
 				</>
 			) : (
 				<>
diff --git a/client/src/app/pages/OAuthRequestAuthPage.tsx b/client/src/app/pages/OAuthRequestAuthPage.tsx
new file mode 100644
index 000000000..f1ef08ac7
--- /dev/null
+++ b/client/src/app/pages/OAuthRequestAuthPage.tsx
@@ -0,0 +1,130 @@
+import CenterLayoutPage from "components/layout/CenterLayoutPage";
+import ApiError from "components/util/ApiError";
+import Divider from "components/util/Divider";
+import Loading from "components/util/Loading";
+import OAuthMoreInfo from "components/util/OAuthMoreInfo";
+import useApiQuery from "components/util/query/useApiQuery";
+import useQueryString from "components/util/useQueryString";
+import React from "react";
+import { Link } from "react-router-dom";
+import { integer, TachiAPIClientDocument } from "tachi-common";
+import { APIFetchV1 } from "util/api";
+
+export default function OAuthRequestAuthPage() {
+	const params = useQueryString();
+
+	const clientID = params.get("clientID");
+
+	if (!clientID) {
+		return (
+			<CenterLayoutPage>
+				No ClientID. Whoever gave you this link likely messed up somehow. <br />
+				<Link to="/">Go Home.</Link>
+			</CenterLayoutPage>
+		);
+	}
+
+	return (
+		<CenterLayoutPage>
+			<OAuthRequestAuthLoader clientID={clientID} />
+		</CenterLayoutPage>
+	);
+}
+
+function OAuthRequestAuthLoader({ clientID }: { clientID: string }) {
+	const { isLoading, error, data } = useApiQuery<Omit<TachiAPIClientDocument, "clientSecret">>(
+		`/clients/${clientID}`
+	);
+
+	if (error) {
+		return <ApiError error={error} />;
+	}
+
+	if (isLoading || !data) {
+		return <Loading />;
+	}
+
+	if (!data.redirectUri) {
+		return (
+			<>
+				This client does not support OAuth Flows.
+				<br />
+				Whoever gave you this link likely messed up somehow. <br />
+				<Link to="/">Go Home.</Link>
+			</>
+		);
+	}
+
+	return <OAuthRequestAuthMain client={data} />;
+}
+
+function OAuthRequestAuthMain({
+	client,
+}: {
+	client: Omit<TachiAPIClientDocument, "clientSecret">;
+}) {
+	const params = useQueryString();
+
+	const context = params.get("context");
+
+	return (
+		<div className="row">
+			<>
+				<div className="col-12">
+					{client.name} is requesting you authenticate with them.
+					<Divider />
+				</div>
+				<div className="col-12">
+					The key will have the following permissions.
+					<ul>
+						{client.requestedPermissions.map(e => (
+							<li key={e}>{e}</li>
+						))}
+					</ul>
+				</div>
+				<div className="col-12 d-flex" style={{ justifyContent: "space-evenly" }}>
+					<Link className="btn btn-danger" to="/">
+						No thanks.
+					</Link>
+					<button
+						className="btn btn-success"
+						onClick={async () => {
+							const tokenRes = await APIFetchV1<{
+								code: string;
+								userID: integer;
+								createdOn: number;
+							}>(
+								"/oauth/create-code",
+								{
+									method: "POST",
+								},
+								false,
+								true
+							);
+
+							if (!tokenRes.success) {
+								return;
+							}
+
+							const redirectURL = new URL(client.redirectUri!);
+
+							redirectURL.searchParams.set("code", tokenRes.body.code);
+
+							if (context) {
+								redirectURL.searchParams.set("context", context);
+							}
+
+							window.location.href = redirectURL.toString();
+						}}
+					>
+						I want to authenticate with {client.name}.
+					</button>
+				</div>
+				<div className="col-12" style={{ fontSize: "1.3rem" }}>
+					<Divider />
+					<OAuthMoreInfo client={client} />
+				</div>
+			</>
+		</div>
+	);
+}
diff --git a/client/src/app/pages/dashboard/users/UserIntegrationsPage.tsx b/client/src/app/pages/dashboard/users/UserIntegrationsPage.tsx
index 1dd328135..477e68d8f 100644
--- a/client/src/app/pages/dashboard/users/UserIntegrationsPage.tsx
+++ b/client/src/app/pages/dashboard/users/UserIntegrationsPage.tsx
@@ -358,6 +358,12 @@ function OAuthClientRow({ client, clients, setClients }: OAuthClientProps) {
 						{window.location.origin}/client-file-flow/{client.clientID}
 					</code>
 				</h6>
+				<h6>
+					OAuth Flow Link: <br />
+					<code>
+						{window.location.origin}/oauth/request-auth?clientID={client.clientID}
+					</code>
+				</h6>
 			</div>
 
 			<Divider />
diff --git a/client/src/app/routes/AppRoutes.tsx b/client/src/app/routes/AppRoutes.tsx
index 2c420b633..cd95bf5f7 100644
--- a/client/src/app/routes/AppRoutes.tsx
+++ b/client/src/app/routes/AppRoutes.tsx
@@ -1,6 +1,7 @@
 import { ErrorPage } from "app/pages/ErrorPage";
 import ForgotPasswordPage from "app/pages/ForgotPasswordPage";
 import LoginPage from "app/pages/LoginPage";
+import OAuthRequestAuthPage from "app/pages/OAuthRequestAuthPage";
 import RegisterPage from "app/pages/RegisterPage";
 import ResetPasswordPage from "app/pages/ResetPasswordPage";
 import VerifyEmailPage from "app/pages/VerifyEmailPage";
@@ -51,6 +52,10 @@ export function Routes() {
 				<Route path="/oauth2-callback">
 					<OAuth2CallbackRoutes />
 				</Route>
+				<Route path="/oauth/request-auth">
+					<OAuthRequestAuthPage />
+				</Route>
+
 				<Route path="/client-file-flow">
 					<ClientFileFlowRoutes />
 				</Route>
diff --git a/client/src/components/util/OAuthMoreInfo.tsx b/client/src/components/util/OAuthMoreInfo.tsx
new file mode 100644
index 000000000..e93e0f37b
--- /dev/null
+++ b/client/src/components/util/OAuthMoreInfo.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { PublicUserDocument, TachiAPIClientDocument } from "tachi-common";
+import ApiError from "./ApiError";
+import Loading from "./Loading";
+import Muted from "./Muted";
+import useApiQuery from "./query/useApiQuery";
+
+export default function OAuthMoreInfo({
+	client,
+}: {
+	client: Omit<TachiAPIClientDocument, "clientSecret">;
+}) {
+	const { data, isLoading, error } = useApiQuery<PublicUserDocument>(`/users/${client.author}`);
+
+	if (error) {
+		return <ApiError error={error} />;
+	}
+
+	if (isLoading || !data) {
+		return <Loading />;
+	}
+
+	return <Muted>API Client Author: {data.username}.</Muted>;
+}