feat: select all scopes

components/InputForm.tsx

@@ -41,19 +41,25 @@ export interface ScopeInfo {
 const scopesInfo: ScopeInfo[] = [
   {
     method: "read",
-    label: 'Read',
+    label: "Read",
     scopes: READ_SCOPES,
     description: "read account's data",
   },
   {
     method: "write",
-    label: 'Write',
+    label: "Write",
     scopes: WRITE_SCOPES,
     description: "modify account's data",
   },
+  {
+    method: "admin",
+    label: "Admin",
+    scopes: [ADMIN_READ_SCOPES, ADMIN_WRITE_SCOPES],
+    description: "read all data on the server",
+  },
   {
     method: "follow",
-    label: 'Follow',
+    label: "Follow",
     description: "modify account relationships,deprecated in 3.5.0 and newer.",
   },
   {
@@ -61,15 +67,10 @@ const scopesInfo: ScopeInfo[] = [
     label: "Push",
     description: "receive push notifications",
   },
-  {
-    method: "admin",
-    label: 'Admin',
-    scopes: [ADMIN_READ_SCOPES, ADMIN_WRITE_SCOPES],
-    description: "read all data on the server",
-  },
+
   {
     method: "crypto",
-    label:  "Crypto",
+    label: "Crypto",
     description: "use end-to-end encryption",
   },
 ];
@@ -77,9 +78,9 @@ const scopesInfo: ScopeInfo[] = [
 const formSchema = z.object({
   instance: z.string().trim(),
   clientName: z.string().trim(),
-  redirectUris: z.string().url().trim(),
+  redirectUris: z.string().trim(),
   scopes: z.string().array().nonempty().optional(),
-  website: z.string().trim().optional(),
+  website: z.string().url().trim().optional(),
 });
 
 const InputForm = () => {
@@ -89,12 +90,13 @@ const InputForm = () => {
       instance: "https://",
       clientName: "",
       redirectUris: "",
-      scopes:[]
+      scopes: [],
     },
   });
 
   function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
+    const scopes = values.scopes?.join(" ");
+    console.log(scopes);
   }
 
   return (

components/ScopeItem.tsx

@@ -10,25 +10,30 @@ interface ScopeCheckboxProps {
 }
 
 const ScopeItem: React.FC<ScopeCheckboxProps> = ({ scope, method, field }) => {
-
+  const isCovered = field.value?.includes(method);
 
   return (
-    <div className={`items-top flex space-x-2 hover:cursor-pointer`}>
+    <div className="items-top 'hover:cursor-pointer flex space-x-2 hover:cursor-pointer">
       <Checkbox
+        disabled={isCovered}
         id={scope}
         checked={field.value?.includes(scope)}
         onCheckedChange={(checked) => {
           return checked
             ? field.onChange([...field.value, scope])
             : field.onChange(
-              field.value?.filter((value: string) => value !== scope)
-            );
+                field.value?.filter(
+                  (value: string) => value !== scope && value !== method
+                )
+              );
         }}
       />
       <div className="grid gap-1.5 leading-none">
         <label
           htmlFor={scope}
-          className="text-sm font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${
+            isCovered ? "hover:cursor-not-allowed opacity-70" : "hover:cursor-pointer"
+          }`}
         >
           {method == "admin" && (
             <span className="text-slate-500">{scope.split(":")[1]} : </span>

components/ScopeSection.tsx

@@ -19,7 +19,6 @@ interface ScopeSectionProps {
 const ScopeSection: React.FC<ScopeSectionProps> = ({ info, field }) => {
   const { method, description, scopes, label } = info;
 
-  console.log(field);
   return (
     <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3">
       <div className="flex justify-between">