-
- -
-
- {oauthApp.refName ?? "None"}
-
-
-
- {oauthApp.refName && (
- -
-
-
-
- {oauthApp.refNameAssigned ? "Yes" : "No"}
-
-
-
- {oauthApp.refNameAssigned
- ? "The reference name is currently active"
- : "The reference name is not assigned because another OAuth App is using it"}
-
-
-
-
- )}
-
-
- {Object.entries(oauthApp.links).map(([key, value]) => {
- // "camelCase" to "Display Name"
- const displayName =
- key
- .split("URL")[0]
- .replace(/([A-Z])/g, " $1")
- .replace(/^./, (str) => str.toUpperCase()) + " URL";
-
- return (
-
-
-
-
-
- copyToClipboard(value)}
- className="flex-auto decoration-dotted underline-offset-4 underline text-ellipsis overflow-hidden text-nowrap"
- >
- {value}
-
-
- {value}
-
-
-
-
-
-
- );
- })}
-
-
-
-
-
+
+ Client ID
+
+
{app.clientID}
-function Item({
- label,
- children,
- className,
- info,
-}: {
- label: string;
- children: ReactNode;
- className?: string;
- info?: string;
-}) {
- return (
-
-
-
- {label}
-
-
- {info && (
-
-
-
-
-
-
-
- {info}
-
-
-
- )}
+
+ Client Secret
+
+ ****************
- {children}
+
+
);
}
diff --git a/ui/admin/app/components/oauth-apps/OAuthAppForm.tsx b/ui/admin/app/components/oauth-apps/OAuthAppForm.tsx
index 35dc796f..f0c28eac 100644
--- a/ui/admin/app/components/oauth-apps/OAuthAppForm.tsx
+++ b/ui/admin/app/components/oauth-apps/OAuthAppForm.tsx
@@ -12,20 +12,21 @@ import {
import { OauthAppService } from "~/lib/service/api/oauthAppService";
import { cn } from "~/lib/utils";
+import { CopyText } from "~/components/composed/CopyText";
import { ControlledInput } from "~/components/form/controlledInputs";
+import { CustomMarkdownComponents } from "~/components/react-markdown";
+import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
import { Button } from "~/components/ui/button";
import { Form } from "~/components/ui/form";
-import { useOAuthAppInfo } from "~/hooks/oauthApps";
-
-import { CopyText } from "../composed/CopyText";
-import { CustomMarkdownComponents } from "../react-markdown";
+import { useOAuthAppInfo } from "~/hooks/oauthApps/useOAuthApps";
type OAuthAppFormProps = {
type: OAuthProvider;
onSubmit: (data: OAuthAppParams) => void;
+ isLoading?: boolean;
};
-export function OAuthAppForm({ type, onSubmit }: OAuthAppFormProps) {
+export function OAuthAppForm({ type, onSubmit, isLoading }: OAuthAppFormProps) {
const spec = useOAuthAppInfo(type);
useEffect(() => {
OauthAppService.getSupportedOauthAppTypes();
@@ -36,9 +37,8 @@ export function OAuthAppForm({ type, onSubmit }: OAuthAppFormProps) {
const fields = useMemo(() => {
return Object.entries(spec.schema.shape).map(([key]) => ({
key: key as keyof OAuthAppParams,
- label: spec.labels[key],
}));
- }, [spec.schema, spec.labels]);
+ }, [spec.schema]);
const defaultValues = useMemo(() => {
const app = spec.customApp;
@@ -82,14 +82,17 @@ export function OAuthAppForm({ type, onSubmit }: OAuthAppFormProps) {
);
function renderStep(step: OAuthFormStep) {
switch (step.type) {
- case "instruction":
+ case "markdown":
return (
);
case "input": {
- const isRequired = !spec.schema.shape[step.input].isOptional();
-
- const label = isRequired
- ? `${spec.labels[step.input]} *`
- : spec.labels[step.input];
-
return (
({
+ ...OauthAppService.getOauthApps.key(),
+ modifier: "combinedList",
+});
+
export function useOAuthAppList(config?: { revalidate?: boolean }) {
const { revalidate = true } = config ?? {};
- const key = {
- ...OauthAppService.getOauthApps.key(),
- modifier: "combinedList",
- };
-
const { data: apps } = useSWR(
- key,
+ key(),
async () => combinedOAuthAppInfo(await OauthAppService.getOauthApps()),
{ fallbackData: [], revalidateOnMount: revalidate }
);
return apps;
}
+useOAuthAppList.key = key;
export function useOAuthAppInfo(type: OAuthProvider): CombinedOAuthAppInfo {
const list = useOAuthAppList({ revalidate: false });
diff --git a/ui/admin/app/lib/model/oauthApps/github.ts b/ui/admin/app/lib/model/oauthApps/github.ts
index abd3340d..2a66c7e3 100644
--- a/ui/admin/app/lib/model/oauthApps/github.ts
+++ b/ui/admin/app/lib/model/oauthApps/github.ts
@@ -7,36 +7,38 @@ import {
} from "./oauth-helpers";
const schema = z.object({
- authURL: z.string(),
clientID: z.string(),
clientSecret: z.string(),
- tokenURL: z.string().optional(),
});
-const labels = {
- authURL: "Authorization URL",
- clientID: "Client ID",
- clientSecret: "Client Secret",
- tokenURL: "Token URL",
-} satisfies Record;
-
const steps: OAuthFormStep[] = [
{
- type: "instruction",
+ type: "markdown",
+ text: "### Step 1: Create a new GitHub OAuth App\n",
+ },
+ {
+ type: "markdown",
text:
- "#### Step 1: Create a new GitHub OAuth App\n" +
- "1. Navigate to [GitHub's Developer Settings](https://github.com/settings/developers) and select 'New OAuth App'.\n" +
+ "#### If you haven't already, create a new GitHub OAuth App\n" +
+ "1. Navigate to [GitHub's Developer Settings](https://github.com/settings/developers) and select `New OAuth App`.\n" +
"2. The form will prompt you for an `Authorization callback Url` Make sure to use the link below: \n\n",
},
+ {
+ type: "markdown",
+ text:
+ "#### If you already have a github OAuth app created\n" +
+ "1. you can edit it by going to [Github's Developer Settings](https://github.com/settings/developers), and selecting `Edit` on your OAuth App\n" +
+ "2. Near the bottom is the `Authorization callback URL` field. Make sure it matches the link below: \n\n",
+ },
{
type: "copy",
text: getOAuthLinks("github").redirectURL,
},
{
- type: "instruction",
+ type: "markdown",
text:
- "#### Step 2: Register OAuth App in Otto\n" +
- "Once you've created your OAuth App in GitHub, click 'Register application' and copy the client ID and client secret into this form",
+ "### Step 2: Register OAuth App in Otto\n" +
+ "Once you've created your OAuth App in GitHub, copy the client ID and client secret into this form",
},
{ type: "input", input: "clientID", label: "Client ID" },
{ type: "input", input: "clientSecret", label: "Client Secret" },
@@ -47,6 +49,5 @@ export const GitHubOAuthApp = {
refName: "github",
type: "github",
displayName: "GitHub",
- labels,
steps,
} satisfies OAuthSingleAppSpec;
diff --git a/ui/admin/app/lib/model/oauthApps/oauth-helpers.ts b/ui/admin/app/lib/model/oauthApps/oauth-helpers.ts
index 515f8df4..82f17678 100644
--- a/ui/admin/app/lib/model/oauthApps/oauth-helpers.ts
+++ b/ui/admin/app/lib/model/oauthApps/oauth-helpers.ts
@@ -13,13 +13,12 @@ export const OAuthProvider = {
export type OAuthProvider = (typeof OAuthProvider)[keyof typeof OAuthProvider];
export type OAuthFormStep> =
- | { type: "instruction"; text: string; copy?: string }
+ | { type: "markdown"; text: string; copy?: string }
| { type: "input"; input: keyof T; label: string }
| { type: "copy"; text: string };
export type OAuthSingleAppSpec = {
schema: ZodObject>;
- labels: Record;
displayName: string;
refName: string;
type: OAuthProvider;