fix(UI/UX): add a validation step before leaving scope

Author: AugustinMauroy

frontend/routes/@[scope]/(_islands)/ScopeInviteForm.tsx

@@ -4,6 +4,7 @@ import { useCallback, useRef } from "preact/hooks";
 import { JSX } from "preact/jsx-runtime";
 import { ScopeInvite } from "../../../utils/api_types.ts";
 import { api, path } from "../../../utils/api.ts";
+import { TbUsersPlus } from "tb-icons";
 
 interface ScopeInviteFormProps {
   scope: string;
@@ -53,7 +54,7 @@ export function ScopeInviteForm(props: ScopeInviteFormProps) {
       class="contents"
       onSubmit={onSubmit}
     >
-      <div class="mt-4 flex gap-4">
+      <div class="mt-4 flex gap-4 justify-between">
         <div class="flex">
           <select
             name="kind"
@@ -92,6 +93,7 @@ export function ScopeInviteForm(props: ScopeInviteFormProps) {
           disabled={submitting}
         >
           Invite
+          <TbUsersPlus class="size-5 ml-2" />
         </button>
       </div>
       {error && <p class="text-red-600 mt-2">{error}</p>}

frontend/routes/@[scope]/(_islands)/ScopeMemberLeave.tsx

@@ -0,0 +1,85 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { TbArrowRightFromArc } from "tb-icons";
+
+export function ScopeMemberLeave({
+  userId,
+  isAdmin,
+  isLastAdmin,
+  scopeName = "",
+}: {
+  userId: string;
+  isAdmin: boolean;
+  isLastAdmin: boolean;
+  scopeName?: string;
+}) {
+  const scopeInput = useSignal("");
+  const isEmptyInput = useSignal(false);
+  const isInvalidInput = useSignal(false);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      validate();
+    }, 300);
+
+    return () => clearTimeout(handler);
+  }, [scopeInput.value]);
+
+  const validate = () => {
+    isEmptyInput.value = scopeInput.value.length === 0;
+    isInvalidInput.value = scopeInput.value !== scopeName &&
+      scopeInput.value.length > 0;
+  };
+
+  return (
+    <form
+      method="POST"
+      class="max-w-3xl border-t border-jsr-cyan-950/10 pt-8 mt-12"
+    >
+      <h2 class="text-lg font-semibold">Leave scope</h2>
+      <p class="mt-2 text-jsr-gray-600">
+        Leaving this scope will revoke your access to all packages in this
+        scope. You will no longer be able to publish packages to this
+        scope{isAdmin && " or manage members"}.
+      </p>
+      <input type="hidden" name="userId" value={userId} />
+      {(isLastAdmin || isInvalidInput.value) && (
+        <div class="mt-6 border rounded-md border-red-300 bg-red-50 p-6 text-red-600">
+          <span class="font-bold text-xl">Warning</span>
+          <p>
+            {isLastAdmin &&
+              "You are the last admin in this scope. You must promote another member to admin before leaving."}
+            {isInvalidInput.value &&
+              "The scope name you entered does not match the scope name."}
+          </p>
+        </div>
+      )}
+      <div class="mt-4 flex justify-between gap-4">
+        <input
+          type="text"
+          class="inline-block w-full max-w-sm px-3 input-container text-sm input"
+          value={scopeInput.value}
+          onInput={(e) => {
+            scopeInput.value = (e.target as HTMLInputElement).value;
+          }}
+          placeholder="Scope name"
+          disabled={isLastAdmin}
+          title={isLastAdmin
+            ? "This is the last admin in this scope. Promote another member to admin before demoting this one."
+            : undefined}
+        />
+        <button
+          class="button-danger"
+          type="submit"
+          name="action"
+          value="deleteMember"
+          disabled={isLastAdmin || isInvalidInput.value || isEmptyInput.value}
+        >
+          Leave
+          <TbArrowRightFromArc class="size-5 ml-2 rotate-180" />
+        </button>
+      </div>
+    </form>
+  );
+}

frontend/routes/@[scope]/~/members.tsx

@@ -18,6 +18,7 @@ import { scopeData } from "../../../utils/data.ts";
 import TbTrash from "tb-icons/TbTrash";
 import { scopeIAM } from "../../../utils/iam.ts";
 import { ScopeIAM } from "../../../utils/iam.ts";
+import { ScopeMemberLeave } from "../(_islands)/ScopeMemberLeave.tsx";
 
 export default define.page<typeof handler>(function ScopeMembersPage(
   { params, data, state, url },
@@ -70,10 +71,11 @@ export default define.page<typeof handler>(function ScopeMembersPage(
       </Table>
       {iam.canAdmin && <MemberInvite scope={data.scope.scope} />}
       {data.scopeMember && (
-        <MemberLeave
+        <ScopeMemberLeave
           userId={data.scopeMember.user.id}
           isAdmin={data.scopeMember.isAdmin}
           isLastAdmin={isLastAdmin}
+          scopeName={data.scope.scope}
         />
       )}
     </div>
@@ -195,43 +197,6 @@ function MemberInvite({ scope }: { scope: string }) {
   );
 }
 
-function MemberLeave(
-  props: { userId: string; isAdmin: boolean; isLastAdmin: boolean },
-) {
-  return (
-    <form
-      method="POST"
-      class="max-w-3xl border-t border-jsr-cyan-950/10 pt-8 mt-12"
-    >
-      <h2 class="text-lg font-semibold">Leave scope</h2>
-      <p class="mt-2 text-jsr-gray-600">
-        Leaving this scope will revoke your access to all packages in this
-        scope. You will no longer be able to publish packages to this
-        scope{props.isAdmin && " or manage members"}.
-      </p>
-      <input type="hidden" name="userId" value={props.userId} />
-      {props.isLastAdmin && (
-        <div class="mt-6 border-1 rounded-md border-red-300 bg-red-50 p-6 text-red-600">
-          <span class="font-bold text-xl">Warning</span>
-          <p>
-            You are the last admin in this scope. You must promote another
-            member to admin before leaving.
-          </p>
-        </div>
-      )}
-      <button
-        class="button-danger mt-6"
-        type="submit"
-        name="action"
-        value="deleteMember"
-        disabled={props.isLastAdmin}
-      >
-        Leave
-      </button>
-    </form>
-  );
-}
-
 export const handler = define.handlers({
   async GET(ctx) {
     let [user, data, membersResp, invitesResp] = await Promise.all([