From ea8b50ee4637b98ece34644fcd8dea9d559fc391 Mon Sep 17 00:00:00 2001
From: SevicheCC <91365763+Sevichecc@users.noreply.github.com>
Date: Mon, 5 Jun 2023 20:20:21 +0800
Subject: [PATCH] feat: select all scopes

---
 components/InputForm.tsx    | 30 ++++++++++++++++--------------
 components/ScopeItem.tsx    | 15 ++++++++++-----
 components/ScopeSection.tsx |  1 -
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/components/InputForm.tsx b/components/InputForm.tsx
index 9263474..cd7f782 100644
--- a/components/InputForm.tsx
+++ b/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 (
diff --git a/components/ScopeItem.tsx b/components/ScopeItem.tsx
index 4237201..b1ab9a0 100644
--- a/components/ScopeItem.tsx
+++ b/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>
diff --git a/components/ScopeSection.tsx b/components/ScopeSection.tsx
index 9267a98..70f2a14 100644
--- a/components/ScopeSection.tsx
+++ b/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">