Leave Team confirmation popup (#4254)

* wip: leave team popup

* fix: leave warning

src/components/DeleteTeamPopup.tsx

@@ -4,6 +4,7 @@ import type { TeamDocument } from './CreateTeam/CreateTeamForm';
 import { useTeamId } from '../hooks/use-team-id';
 import { useOutsideClick } from '../hooks/use-outside-click';
 import { useKeydown } from '../hooks/use-keydown';
+import { useToast } from '../hooks/use-toast';
 
 type DeleteTeamPopupProps = {
   onClose: () => void;
@@ -12,6 +13,7 @@ type DeleteTeamPopupProps = {
 export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
   const { onClose } = props;
 
+  const toast = useToast();
   const popupBodyEl = useRef<HTMLDivElement>(null);
   const inputEl = useRef<HTMLInputElement>(null);
 
@@ -53,6 +55,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
       return;
     }
 
+    toast.success('Team deleted successfully');
     window.location.href = '/account';
   };
 
@@ -72,9 +75,9 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
             ref={popupBodyEl}
             class="popup-body relative rounded-lg bg-white p-4 shadow"
           >
-            <p>
+            <h2 class="text-2xl font-semibold text-black">Delete Team</h2>
-              This will permanently delete your account and all your associated
+            <p className="text-gray-500">
-              data including your progress.
+              This will permanently delete your team and all associated data.
             </p>
 
             <p class="-mb-2 mt-3 text-base font-medium text-black">

src/components/TeamMembers/LeaveTeamButton.tsx

@@ -1,40 +1,30 @@
-import { useState } from "preact/hooks";
+import { useState } from 'preact/hooks';
-import { httpDelete } from "../../lib/http";
+import { LeaveTeamPopup } from './LeaveTeamPopup';
-import { Spinner } from "../ReactIcons/Spinner";
-import { useToast } from "../../hooks/use-toast";
 
 type LeaveTeamButtonProps = {
   teamId: string;
 };
 
 export function LeaveTeamButton(props: LeaveTeamButtonProps) {
-  const toast = useToast();
+  const [showLeaveTeamPopup, setShowLeaveTeamPopup] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const { teamId } = props;
-
-  async function leaveTeam() {
-    setIsLoading(true);
-    const { response, error } = await httpDelete(
-      `${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
-      {}
-    );
-
-    if (error || !response) {
-      setIsLoading(false);
-      toast.error(error?.message || 'Something went wrong');
-      return;
-    }
-
-    window.location.href = '/account';
-  }
 
   return (
-    <button
+    <>
-      disabled={isLoading}
+      {showLeaveTeamPopup && (
-      onClick={leaveTeam}
+        <LeaveTeamPopup
-      className="bg-gray-50 text-red-600 text-sm font-medium px-2 leading-none py-1.5 rounded-md border border-gray-200 h-7 flex items-center justify-center min-w-[95px]">
+          onClose={() => {
-      {isLoading ? <Spinner isDualRing={false} /> : 'Leave team'}
+            setShowLeaveTeamPopup(false);
-    </button>
+          }}
-  )
+        />
-
+      )}
+      <button
+        onClick={() => {
+          setShowLeaveTeamPopup(true);
+        }}
+        className="flex h-7 min-w-[95px] items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm font-medium leading-none text-red-600"
+      >
+        Leave team
+      </button>
+    </>
+  );
 }

src/components/TeamMembers/LeaveTeamPopup.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { httpDelete } from '../../lib/http';
+import { useTeamId } from '../../hooks/use-team-id';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+
+type LeaveTeamPopupProps = {
+  onClose: () => void;
+};
+
+export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
+  const { onClose } = props;
+
+  const popupBodyRef = useRef<HTMLDivElement>(null);
+  const confirmationEl = useRef<HTMLInputElement>(null);
+  const [confirmationText, setConfirmationText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { teamId } = useTeamId();
+
+  useEffect(() => {
+    setError('');
+    setConfirmationText('');
+    confirmationEl?.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    if (confirmationText.toUpperCase() !== 'LEAVE') {
+      setError('Verification text does not match');
+      setIsLoading(false);
+      return;
+    }
+
+    const { response, error } = await httpDelete(
+      `${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
+      {}
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    window.location.href = '/account';
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+    setConfirmationText('');
+
+    onClose();
+  };
+
+  useOutsideClick(popupBodyRef, handleClosePopup);
+
+  return (
+    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyRef}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          <h2 class="text-2xl font-semibold text-black">
+            Leave Team
+          </h2>
+          <p className="text-gray-500">
+            You will lose access to the team, the roadmaps and progress of other team members.
+          </p>
+          <p className="-mb-2 mt-3 text-base font-medium text-black">
+            Please type "leave" to confirm.
+          </p>
+          <form onSubmit={handleSubmit}>
+            <div className="my-4">
+              <input
+                ref={confirmationEl}
+                type="text"
+                name="leave-team"
+                id="leave-team"
+                className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                placeholder={'Type "leave" to confirm'}
+                required
+                autoFocus
+                value={confirmationText}
+                onInput={(e) =>
+                  setConfirmationText((e.target as HTMLInputElement).value)
+                }
+              />
+              {error && (
+                <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+                  {error}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                disabled={isLoading}
+                onClick={handleClosePopup}
+                className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={
+                  isLoading || confirmationText.toUpperCase() !== 'LEAVE'
+                }
+                className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+              >
+                {isLoading ? 'Please wait ..' : 'Leave Team'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamSettings/UpdateTeamForm.tsx

@@ -267,7 +267,6 @@ export function UpdateTeamForm() {
           {isDeleting && (
             <DeleteTeamPopup
               onClose={() => {
-                toast.success('Team deleted successfully');
                 setIsDeleting(false);
               }}
             />