From 9ef0d899e2485cd6842531984fada0fec7c2062e Mon Sep 17 00:00:00 2001 From: SevicheCC <91365763+Sevichecc@users.noreply.github.com> Date: Thu, 8 Jun 2023 01:57:01 +0800 Subject: [PATCH] feat: add instance type selector --- app/layout.tsx | 27 +-- app/page.tsx | 13 +- components/CreatAppForm.tsx | 87 ++++++++- components/scopes/ScopeSection.tsx | 6 +- components/ui/select.tsx | 120 ++++++++++++ lib/scopes.ts | 10 +- lib/types.ts | 2 - next.config.js | 2 +- package.json | 1 + pnpm-lock.yaml | 299 +++++++++++++++++++++++++++++ 10 files changed, 534 insertions(+), 33 deletions(-) create mode 100644 components/ui/select.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 0bff3be..5e92573 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,26 +1,29 @@ -import "@/styles/globals.css" -import { fontSans } from "@/lib/fonts" -import { cn } from "@/lib/utils" +import "@/styles/globals.css"; +import { fontSans } from "@/lib/fonts"; +import { cn } from "@/lib/utils"; export const metadata = { - title: 'M-OAuth', - description: 'Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.', -} + title: "M-OAuth", + description: + "Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.", +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( - + {children} - ) + ); } diff --git a/app/page.tsx b/app/page.tsx index 41eb7ed..af0f689 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,14 @@ import ClientOnly from "@/components/ClientOnly"; import FormContainer from "@/components/FormContainer"; import Brand from "@/components/Brand"; + export default function Home() { return ( -
-
- - - - -
+
+ + + +
); } diff --git a/components/CreatAppForm.tsx b/components/CreatAppForm.tsx index a972a1f..3d8ce70 100644 --- a/components/CreatAppForm.tsx +++ b/components/CreatAppForm.tsx @@ -4,6 +4,15 @@ import { Dispatch, SetStateAction, useState } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { Loader2 } from "lucide-react"; +import Image from "next/image"; + +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -19,11 +28,12 @@ import { import ScopeSection from "@/components/scopes/ScopeSection"; import { AppInfo } from "@/components/FormContainer"; -import { scopesInfo } from "@/lib/scopes"; +import { getScopes } from "@/lib/scopes"; import { Credentials } from "@/lib/types"; const formSchema = z.object({ instanceUrl: z.string().url().trim(), + instanceType: z.enum(["mastodon", "akkoma", "misskey", "pleroma"]), clientName: z.string().trim(), redirectUris: z.string().trim(), scopes: z.string().array().nonempty().optional(), @@ -31,6 +41,7 @@ const formSchema = z.object({ }); export type FormSchema = z.infer; +export type InstanceType = FormSchema["instanceType"]; interface CreateAppFormProps { createApp: ({}: FormSchema) => Promise; setAppInfo: Dispatch>; @@ -47,14 +58,19 @@ const CreateAppForm: React.FC = ({ resolver: zodResolver(formSchema), defaultValues: { instanceUrl: "https://", + instanceType: "mastodon", clientName: "", redirectUris: "urn:ietf:wg:oauth:2.0:oob", scopes: ["read"], - website: "" + website: "", }, + mode: "onChange", }); + const watchInstancType = form.watch("instanceType"); + const onSubmit = async (values: FormSchema) => { + console.log(values); setAppInfo(values); setIsSubmitted(true); await createApp(values); @@ -81,6 +97,71 @@ const CreateAppForm: React.FC = ({ )} /> + ( + + Instance Type + + + + )} + /> = ({ render={({ field }) => (
- {scopesInfo.map((info) => ( + {getScopes(watchInstancType).map((info) => ( = ({ info, field }) => { const { method, description, scopes, label } = info; - + const isNested = scopes && scopes.length !== 0; return (
@@ -45,7 +45,7 @@ const ScopeSection: React.FC = ({ info, field }) => {

{description}

- {scopes && ( + {isNested && (