feat: type server name to confirm deletion

Author: confuser

components/Modal.js

@@ -2,7 +2,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useRef } from 'react'
 import clsx from 'clsx'
 
-export default function Modal ({ open = false, icon, title, children, confirmButton, onCancel, onConfirm, loading }) {
+export default function Modal ({ open = false, icon, title, children, confirmButton, confirmDisabled, onCancel, onConfirm, loading }) {
   const cancelButtonRef = useRef(null)
   const onClose = () => {
     onCancel()
@@ -57,8 +57,9 @@ export default function Modal ({ open = false, icon, title, children, confirmBut
               <div className='bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse'>
                 <button
                   type='button'
-                  className='w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm'
+                  className='w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed sm:ml-3 sm:w-auto sm:text-sm'
                   onClick={onConfirm}
+                  disabled={confirmDisabled}
                 >
                   {loading && <div className='loader -ml-1 mr-3 h-5 w-5' />}
                   {confirmButton}

components/admin/ServerItem.js

@@ -11,6 +11,8 @@ import tailwindConfig from '../../tailwind.config'
 import Modal from '../Modal'
 import { useMutateApi } from '../../utils'
 import ErrorMessages from '../ErrorMessages'
+import Message from '../Message'
+import Input from '../Input'
 
 const fullConfig = resolveConfig(tailwindConfig)
 
@@ -25,6 +27,7 @@ const StatItem = ({ onClick, icon, value, selected }) => {
 
 export default function ServerItem ({ canDelete, server, onDeleted }) {
   const [open, setOpen] = useState(false)
+  const [confirmValue, setConfirmValue] = useState('')
   const { load, loading, errors, data } = useMutateApi({
     query: `mutation deleteServer($id: ID!) {
         deleteServer(id: $id)
@@ -45,9 +48,13 @@ export default function ServerItem ({ canDelete, server, onDeleted }) {
     setOpen(true)
   }
   const handleConfirmDelete = async () => {
+    setConfirmValue('')
     await load({ id: server.id })
   }
-  const handleDeleteCancel = () => setOpen(false)
+  const handleDeleteCancel = () => {
+    setConfirmValue('')
+    setOpen(false)
+  }
 
   const chartData = [
     {
@@ -82,15 +89,28 @@ export default function ServerItem ({ canDelete, server, onDeleted }) {
         icon={<AiOutlineWarning className='h-6 w-6 text-red-600' aria-hidden='true' />}
         title='Delete server'
         confirmButton='Delete'
+        confirmDisabled={confirmValue !== server.name}
         open={open}
         onConfirm={handleConfirmDelete}
         onCancel={handleDeleteCancel}
         loading={loading}
       >
         <ErrorMessages errors={errors} />
-        <p className='pb-1'>Are you sure you want to delete this server?</p>
-        <p className='pb-1'>Related <strong>appeals and roles</strong> will be removed</p>
-        <p className='pb-1'>This action cannot be undone</p>
+        <Message warning>
+          <Message.Header>Warning</Message.Header>
+          <Message.List>
+            <Message.Item>Related <strong>appeals and roles</strong> will be removed</Message.Item>
+            <Message.Item>This action cannot be undone</Message.Item>
+          </Message.List>
+        </Message>
+        <p className='mb-4'>Please type <strong>{server.name}</strong> to confirm</p>
+        <Input
+          onChange={(e, { value }) => setConfirmValue(value)}
+          placeholder='Type server name'
+          className='mb-0'
+          inputClassName='border border-gray-900'
+          required
+        />
       </Modal>
       <div className='pt-5 px-5 flex justify-between items-center'>
         <h5 className='text-xl font-semibold mb-2 underline'>