Add support for deleting a subuser from a server

resources/scripts/components/server/users/PermissionEditor.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { SubuserPermission } from '@/state/server/subusers';
-import { useStoreState } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-    defaultPermissions: SubuserPermission[];
-}
-
-export default ({ defaultPermissions }: Props) => {
-    const { t } = useTranslation('server.users');
-    const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
-
-    return (
-        <div>
-            {
-                permissions.map(permission => (
-                    <div className={'flex mb-2'} key={permission}>
-                        <input
-                            id={`permission_${permission}`}
-                            type={'checkbox'}
-                            name={'permissions[]'}
-                            value={permission}
-                            defaultChecked={defaultPermissions.indexOf(permission) >= 0}
-                        />
-                        <label
-                            htmlFor={`permission_${permission}`}
-                            className={'flex-1 ml-3 text-sm text-neutral-200 cursor-pointer'}
-                        >
-                            {permission}
-                            <p className={'text-xs text-neutral-300'} style={{ textTransform: 'none' }}>
-                                {t(`server.users:permissions.${permission.replace('.', '_')}`)}
-                            </p>
-                        </label>
-                    </div>
-                ))
-            }
-            <div className={'mt-4 flex justify-end'}>
-                <button className={'btn btn-primary btn-sm'}>
-                    Save Changes
-                </button>
-            </div>
-        </div>
-    );
-};

resources/scripts/components/server/users/RemoveSubuserButton.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import { ServerContext } from '@/state/server';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { Subuser } from '@/state/server/subusers';
+import deleteSubuser from '@/api/server/users/deleteSubuser';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
+
+export default ({ subuser }: { subuser: Subuser }) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ showConfirmation, setShowConfirmation ] = useState(false);
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const removeSubuser = ServerContext.useStoreActions(actions => actions.subusers.removeSubuser);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const doDeletion = () => {
+        setLoading(true);
+        clearFlashes('users');
+        deleteSubuser(uuid, subuser.uuid)
+            .then(() => {
+                setLoading(false);
+                removeSubuser(subuser.uuid);
+            })
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'users', message: httpErrorToHuman(error) });
+                setShowConfirmation(false);
+            });
+    }
+
+    return (
+        <>
+            {showConfirmation &&
+            <ConfirmationModal
+                title={'Delete this subuser?'}
+                buttonText={'Yes, remove subuser'}
+                visible={true}
+                showSpinnerOverlay={loading}
+                onConfirmed={() => doDeletion()}
+                onDismissed={() => setShowConfirmation(false)}
+            >
+                Are you sure you wish to remove this subuser? They will have all access to this server revoked
+                immediately.
+            </ConfirmationModal>
+            }
+            <button
+                type={'button'}
+                aria-label={'Delete subuser'}
+                className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
+                onClick={() => setShowConfirmation(true)}
+            >
+                <FontAwesomeIcon icon={faTrashAlt}/>
+            </button>
+        </>
+    );
+};

resources/scripts/components/server/users/UserRow.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Subuser } from '@/state/server/subusers';
+import { ServerContext } from '@/state/server';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
+
+interface Props {
+    subuser: Subuser;
+}
+
+export default ({ subuser }: Props) => {
+    const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
+
+    return (
+        <div className={'grey-row-box mb-2'}>
+            <div className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800 overflow-hidden'}>
+                <img className={'f-full h-full'} src={`${subuser.image}?s=400`}/>
+            </div>
+            <div className={'ml-4 flex-1'}>
+                <p className={'text-sm'}>{subuser.email}</p>
+            </div>
+            <button
+                type={'button'}
+                aria-label={'Edit subuser'}
+                className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'}
+                onClick={() => null}
+            >
+                <FontAwesomeIcon icon={faPencilAlt}/>
+            </button>
+            <RemoveSubuserButton subuser={subuser}/>
+        </div>
+    );
+};

resources/scripts/components/server/users/UsersContainer.tsx

@@ -4,32 +4,38 @@ import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import Spinner from '@/components/elements/Spinner';
 import AddSubuserButton from '@/components/server/users/AddSubuserButton';
+import UserRow from '@/components/server/users/UserRow';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import getServerSubusers from '@/api/server/users/getServerSubusers';
+import { httpErrorToHuman } from '@/api/http';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
 
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const subusers = ServerContext.useStoreState(state => state.subusers.data);
-    const getSubusers = ServerContext.useStoreActions(actions => actions.subusers.getSubusers);
+    const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
 
     const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
     const getPermissions = useStoreActions((actions: Actions<ApplicationStore>) => actions.permissions.getPermissions);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     useEffect(() => {
         getPermissions().catch(error => console.error(error));
     }, []);
 
     useEffect(() => {
-        getSubusers(uuid)
-            .then(() => setLoading(false))
+        clearFlashes('users');
+        getServerSubusers(uuid)
+            .then(subusers => {
+                setSubusers(subusers);
+                setLoading(false);
+            })
             .catch(error => {
                 console.error(error);
+                addError({ key: 'users', message: httpErrorToHuman(error) });
             });
-    }, [ uuid, getSubusers ]);
-
-    useEffect(() => {
-        setLoading(!subusers);
-    }, [ subusers ]);
+    }, []);
 
     if (loading || !Object.keys(permissions).length) {
         return <Spinner size={'large'} centered={true}/>;
@@ -37,33 +43,14 @@ export default () => {
 
     return (
         <div className={'my-10'}>
+            <FlashMessageRender byKey={'users'} className={'mb-4'}/>
             {!subusers.length ?
                 <p className={'text-center text-sm text-neutral-400'}>
                     It looks like you don't have any subusers.
                 </p>
                 :
                 subusers.map(subuser => (
-                    <div key={subuser.uuid} className={'flex items-center w-full'}>
-                        <img
-                            className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800'}
-                            src={`${subuser.image}?s=400`}
-                        />
-                        <div className={'ml-4 flex-1'}>
-                            <p className={'text-sm'}>{subuser.email}</p>
-                        </div>
-                        <div className={'ml-4'}>
-                            <button
-                                className={'btn btn-xs btn-primary'}
-                            >
-                                Edit
-                            </button>
-                            <button
-                                className={'ml-2 btn btn-xs btn-red btn-secondary'}
-                            >
-                                Remove
-                            </button>
-                        </div>
-                    </div>
+                    <UserRow key={subuser.uuid} subuser={subuser}/>
                 ))
             }
             <div className={'flex justify-end mt-6'}>