Add basic subuser listing for servers

resources/scripts/api/http.ts

@@ -38,6 +38,16 @@ export function httpErrorToHuman (error: any): string {
     return error.message;
 }
 
+export interface FractalResponseData {
+    object: string;
+    attributes: {
+        [k: string]: any;
+        relationships?: {
+            [k: string]: FractalResponseData;
+        };
+    };
+}
+
 export interface PaginatedResult<T> {
     items: T[];
     pagination: PaginationDataSet;

resources/scripts/api/server/users/getServerSubusers.ts

@@ -0,0 +1,21 @@
+import http, { FractalResponseData } from '@/api/http';
+import { Subuser } from '@/state/server/subusers';
+
+export const rawDataToServerSubuser = (data: FractalResponseData): Subuser => ({
+    uuid: data.attributes.uuid,
+    username: data.attributes.username,
+    email: data.attributes.email,
+    image: data.attributes.image,
+    twoFactorEnabled: data.attributes['2fa_enabled'],
+    createdAt: new Date(data.attributes.created_at),
+    permissions: data.attributes.relationships!.permissions.attributes.permissions,
+    can: permission => data.attributes.relationships!.permissions.attributes.permissions.indexOf(permission) >= 0,
+});
+
+export default (uuid: string): Promise<Subuser[]> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${uuid}/users`, { params: { include: [ 'permissions' ] } })
+            .then(({ data }) => resolve((data.data || []).map(rawDataToServerSubuser)))
+            .catch(reject);
+    });
+};

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

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
+import { ServerContext } from '@/state/server';
+import Spinner from '@/components/elements/Spinner';
+
+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);
+
+    useEffect(() => {
+        getSubusers(uuid)
+            .then(() => setLoading(false))
+            .catch(error => {
+                console.error(error);
+            });
+    }, [ uuid, getSubusers ]);
+
+    useEffect(() => {
+        if (subusers.length > 0) {
+            setLoading(false);
+        }
+    }, [subusers]);
+
+    return (
+        <div className={'flex my-10'}>
+            <div className={'w-1/2'}>
+                <h2 className={'text-neutral-300 mb-4'}>Subusers</h2>
+                <div className={'border-t-4 border-primary-400 grey-box mt-0'}>
+                    {loading ?
+                        <div className={'w-full'}>
+                            <Spinner centered={true}/>
+                        </div>
+                        :
+                        !subusers.length ?
+                            <p className={'text-sm'}>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>
+                            ))
+                    }
+                </div>
+                <div className={'flex justify-end mt-4'}>
+                    <button className={'btn btn-primary btn-sm'}>
+                        <FontAwesomeIcon icon={faUserPlus} className={'mr-1'}/> New User
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -12,6 +12,7 @@ import FileManagerContainer from '@/components/server/files/FileManagerContainer
 import { CSSTransition } from 'react-transition-group';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import FileEditContainer from '@/components/server/files/FileEditContainer';
+import UsersContainer from '@/components/server/users/UsersContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -61,7 +62,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                         )}
                                         exact
                                     />
-                                    <Route path={`${match.path}/databases`} component={DatabasesContainer}/>
+                                    <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
+                                    <Route path={`${match.path}/users`} component={UsersContainer} exact/>
                                 </Switch>
                             </React.Fragment>
                         }

resources/scripts/state/server/index.ts

@@ -3,6 +3,7 @@ import { action, Action, createContextStore, thunk, Thunk } from 'easy-peasy';
 import socket, { SocketStore } from './socket';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
 import files, { ServerFileStore } from '@/state/server/files';
+import subusers, { ServerSubuserStore } from '@/state/server/subusers';
 
 export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running';
 
@@ -56,6 +57,7 @@ const databases: ServerDatabaseStore = {
 
 export interface ServerStore {
     server: ServerDataStore;
+    subusers: ServerSubuserStore;
     databases: ServerDatabaseStore;
     files: ServerFileStore;
     socket: SocketStore;
@@ -69,9 +71,14 @@ export const ServerContext = createContextStore<ServerStore>({
     status,
     databases,
     files,
+    subusers,
     clearServerState: action(state => {
         state.server.data = undefined;
         state.databases.items = [];
+        state.subusers.data = [];
+
+        state.files.directory = '/';
+        state.files.contents = [];
 
         if (state.socket.instance) {
             state.socket.instance.removeAllListeners();

resources/scripts/state/server/subusers.ts

@@ -0,0 +1,43 @@
+import { action, Action, thunk, Thunk } from 'easy-peasy';
+import getServerSubusers from '@/api/server/users/getServerSubusers';
+
+export type SubuserPermission = string;
+
+export interface Subuser {
+    uuid: string;
+    username: string;
+    email: string;
+    image: string;
+    twoFactorEnabled: boolean;
+    createdAt: Date;
+    permissions: SubuserPermission[];
+
+    can (permission: SubuserPermission): boolean;
+}
+
+export interface ServerSubuserStore {
+    data: Subuser[];
+    setSubusers: Action<ServerSubuserStore, Subuser[]>;
+    appendSubuser: Action<ServerSubuserStore, Subuser>;
+    getSubusers: Thunk<ServerSubuserStore, string, any, {}, Promise<void>>;
+}
+
+const subusers: ServerSubuserStore = {
+    data: [],
+
+    setSubusers: action((state, payload) => {
+        state.data = payload;
+    }),
+
+    appendSubuser: action((state, payload) => {
+        state.data = [...state.data, payload];
+    }),
+
+    getSubusers: thunk(async (actions, payload) => {
+        const subusers = await getServerSubusers(payload);
+
+        actions.setSubusers(subusers);
+    }),
+};
+
+export default subusers;

resources/styles/components/miscellaneous.css

@@ -21,5 +21,9 @@ code.clean {
 }
 
 .grey-box {
-    @apply .mt-4 .shadow-md .bg-neutral-700 .rounded .p-3 .flex .text-xs;
-}
+    @apply .shadow-md .bg-neutral-700 .rounded .p-3 .flex .text-xs;
+
+    &:not(.mt-0) {
+        @apply .mt-4;
+    }
+}