Add basic subuser listing for servers

app/Http/Controllers/Api/Client/Servers/SubuserController.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
+
+use Pterodactyl\Models\Server;
+use Pterodactyl\Repositories\Eloquent\SubuserRepository;
+use Pterodactyl\Transformers\Api\Client\SubuserTransformer;
+use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
+use Pterodactyl\Http\Requests\Api\Client\Servers\Subusers\GetSubuserRequest;
+
+class SubuserController extends ClientApiController
+{
+    /**
+     * @var \Pterodactyl\Repositories\Eloquent\SubuserRepository
+     */
+    private $repository;
+
+    /**
+     * SubuserController constructor.
+     *
+     * @param \Pterodactyl\Repositories\Eloquent\SubuserRepository $repository
+     */
+    public function __construct(SubuserRepository $repository)
+    {
+        parent::__construct();
+
+        $this->repository = $repository;
+    }
+
+    /**
+     * Return the users associated with this server instance.
+     *
+     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Subusers\GetSubuserRequest $request
+     * @param \Pterodactyl\Models\Server $server
+     * @return array
+     */
+    public function index(GetSubuserRequest $request, Server $server)
+    {
+        $users = $this->repository->getSubusersForServer($server->id);
+
+        return $this->fractal->collection($users)
+            ->transformWith($this->getTransformer(SubuserTransformer::class))
+            ->toArray();
+    }
+}

app/Http/Requests/Api/Client/Servers/Subusers/GetSubuserRequest.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Pterodactyl\Http\Requests\Api\Client\Servers\Subusers;
+
+use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
+
+class GetSubuserRequest extends ClientApiRequest
+{
+    /**
+     * Confirm that a user is able to view subusers for the specified server.
+     *
+     * @return bool
+     */
+    public function authorize(): bool
+    {
+        return $this->user()->can('view-subusers', $this->route()->parameter('server'));
+    }
+}

app/Models/Subuser.php

@@ -4,6 +4,17 @@ namespace Pterodactyl\Models;
 
 use Illuminate\Notifications\Notifiable;
 
+/**
+ * @property int $id
+ * @property int $user_id
+ * @property int $server_id
+ * @property \Carbon\Carbon $created_at
+ * @property \Carbon\Carbon $updated_at
+ *
+ * @property \Pterodactyl\Models\User $user
+ * @property \Pterodactyl\Models\Server $server
+ * @property \Pterodactyl\Models\Permission[]|\Illuminate\Support\Collection $permissions
+ */
 class Subuser extends Validable
 {
     use Notifiable;

app/Models/User.php

@@ -216,7 +216,7 @@ class User extends Validable implements
      */
     public function getNameAttribute()
     {
-        return $this->name_first . ' ' . $this->name_last;
+        return trim($this->name_first . ' ' . $this->name_last);
     }
 
     /**

app/Repositories/Eloquent/SubuserRepository.php

@@ -3,6 +3,7 @@
 namespace Pterodactyl\Repositories\Eloquent;
 
 use Pterodactyl\Models\Subuser;
+use Illuminate\Support\Collection;
 use Pterodactyl\Exceptions\Repository\RecordNotFoundException;
 use Pterodactyl\Contracts\Repository\SubuserRepositoryInterface;
 
@@ -18,6 +19,22 @@ class SubuserRepository extends EloquentRepository implements SubuserRepositoryI
         return Subuser::class;
     }
 
+    /**
+     * Returns the subusers for the given server instance with the associated user
+     * and permission relationships pre-loaded.
+     *
+     * @param int $server
+     * @return \Illuminate\Support\Collection
+     */
+    public function getSubusersForServer(int $server): Collection
+    {
+        return $this->getBuilder()
+            ->with('user', 'permissions')
+            ->where('server_id', $server)
+            ->get()
+            ->toBase();
+    }
+
     /**
      * Return a subuser with the associated server relationship.
      *

app/Transformers/Api/Client/SubuserTransformer.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace Pterodactyl\Transformers\Api\Client;
+
+use Illuminate\Support\Str;
+use Pterodactyl\Models\Subuser;
+
+class SubuserTransformer extends BaseClientTransformer
+{
+    protected $availableIncludes = ['permissions'];
+
+    /**
+     * Return the resource name for the JSONAPI output.
+     *
+     * @return string
+     */
+    public function getResourceName(): string
+    {
+        return Subuser::RESOURCE_NAME;
+    }
+
+    /**
+     * Transforms a User model into a representation that can be shown to regular
+     * users of the API.
+     *
+     * @param \Pterodactyl\Models\Subuser $model
+     * @return array
+     */
+    public function transform(Subuser $model)
+    {
+        $user = $model->user;
+
+        return [
+            'uuid' => $user->uuid,
+            'username' => $user->username,
+            'email' => $user->email,
+            'image' => 'https://gravatar.com/avatar/' . md5(Str::lower($user->email)),
+            '2fa_enabled' => $user->use_totp,
+            'created_at' => $model->created_at->toIso8601String(),
+        ];
+    }
+
+    /**
+     * Include the permissions associated with this subuser.
+     *
+     * @param \Pterodactyl\Models\Subuser $model
+     * @return \League\Fractal\Resource\Item
+     */
+    public function includePermissions(Subuser $model)
+    {
+        return $this->item($model, function (Subuser $model) {
+            return ['permissions' => $model->permissions->pluck('permission')];
+        });
+    }
+}

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;
+    }
+}

routes/api-client.php

@@ -57,4 +57,8 @@ Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServ
     Route::group(['prefix' => '/network'], function () {
         Route::get('/', 'Servers\NetworkController@index')->name('api.client.servers.network');
     });
+
+    Route::group(['prefix' => '/users'], function () {
+        Route::get('/', 'Servers\SubuserController@index');
+    });
 });