SevicheCC/m-oauth
1
0
Fork 0
mirror of https://github.com/Sevichecc/m-oauth.git synced 2025-04-30 06:59:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: ScopeSection

Browse source
This commit is contained in:
SevicheCC 2023-06-05 01:42:15 +08:00
parent afd8f36437
commit 529fe6d4cf
Signed by: SevicheCC
GPG key ID: C577000000000000
3 changed files with 30 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
components/Container.tsx
View file

20
components/InputForm.tsx
View file

@ -15,7 +15,8 @@ import {
FormMessage, FormMessage,
} from "@/components/ui/form" } from "@/components/ui/form"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import ScopeInput from './ScopeInput'; import { readScopes, writeScopes, adminScopes } from "@/lib/utils"
import ScopeSection from "./ScopeSection"
const formSchema = z.object({ const formSchema = z.object({
instance: z.string().trim(), instance: z.string().trim(),
@ -29,14 +30,13 @@ const InputForm = () => {
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { defaultValues: {
instance:'https://',
clientName: '', clientName: '',
redirectUris: 'urn:ietf:wg:oauth:2.0:oob', redirectUris: 'urn:ietf:wg:oauth:2.0:oob',
}, },
}) })
function onSubmit(values: z.infer<typeof formSchema>) { function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
// ✅ This will be type-safe and validated.
console.log(values) console.log(values)
} }
@ -55,7 +55,6 @@ const InputForm = () => {
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<FormField <FormField
@ -100,12 +99,19 @@ const InputForm = () => {
/> />
<FormField <FormField
control={form.control} control={form.control}
name="redirectUris" name="scopes"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Scopes</FormLabel> <FormLabel>Scopes</FormLabel>
<FormControl> <FormControl className="flex flex-col gap-2">
<ScopeInput {...field} /> <div className="flex flex-col gap-2">
<ScopeSection method="read" scopes={readScopes} />
<ScopeSection method="write" scopes={writeScopes} />
<ScopeSection method="admin" scopes={adminScopes} />
<ScopeSection method="follow" />
<ScopeSection method="push" />
<ScopeSection method="crypto" />
</div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>

48
components/ScopeInput.tsx → components/ScopeSection.tsx
View file

@ -1,16 +1,17 @@
"use client"; "use client";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { ReadScope, AdminScope, WriteScope } from "@/lib/types";
import { readScopes, adminScopes, writeScopes } from "@/lib/utils";
import { MethodType } from "@/lib/types";
import { import {
Collapsible, Collapsible,
CollapsibleContent, CollapsibleContent,
CollapsibleTrigger, CollapsibleTrigger,
} from "@/components/ui/collapsible"; } from "@/components/ui/collapsible";
import { ChevronsUpDown } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ChevronsUpDown } from "lucide-react";
import { ReadScope, AdminScope, WriteScope } from "@/lib/types";
import { MethodType } from "@/lib/types";
import { ControllerRenderProps } from "react-hook-form";
interface ScopeSectionProps { interface ScopeSectionProps {
method: MethodType; method: MethodType;
@ -18,29 +19,23 @@ interface ScopeSectionProps {
} }
const ScopeSection: React.FC<ScopeSectionProps> = ({ method, scopes}) => { const ScopeSection: React.FC<ScopeSectionProps> = ({ method, scopes}) => {
return ( return (
<Collapsible <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3">
className="
flex
flex-col
rounded-md bg-slate-50 px-4
py-3
"
>
<div className="flex justify-between"> <div className="flex justify-between">
<div className="items-top flex space-x-2 "> <div className="items-top flex space-x-2 ">
<Checkbox id="terms1" /> <Checkbox id={method}/>
<div className="grid gap-1.5 leading-none"> <div className="grid gap-1.5 leading-none">
<label <label
htmlFor="terms1" htmlFor={method}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-sm font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
> >
{method} {method}
</label> </label>
<p className="text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
{method === "read" && "read all your account's data"} {method === "read" && "read your account's data"}
{method === "write" && "modify all your account's data"} {method === "write" && "modify your account's data"}
{method === "admin" && "read all data on the server"} {method === "admin" && "read data on the server"}
{method === "follow" && "modify account relationships"} {method === "follow" && "modify account relationships"}
{method === "push" && "receive your push notifications"} {method === "push" && "receive your push notifications"}
{method === "crypto" && "use end-to-end encryption"} {method === "crypto" && "use end-to-end encryption"}
@ -82,17 +77,4 @@ const ScopeSection: React.FC<ScopeSectionProps> = ({ method, scopes }) => {
); );
}; };
const ScopeInput = (props: any) => { export default ScopeSection;
return (
<div className="flex flex-col gap-2">
<ScopeSection method="read" scopes={readScopes} />
<ScopeSection method="write" scopes={writeScopes} />
<ScopeSection method="admin" scopes={adminScopes} />
<ScopeSection method="follow" />
<ScopeSection method="push" />
<ScopeSection method="crypto" />
</div>
);
};
export default ScopeInput;