Add handler to fetch all of the system permissions and load them into the state

app/Http/Controllers/Api/Client/ClientController.php

@@ -3,6 +3,8 @@
 namespace Pterodactyl\Http\Controllers\Api\Client;
 
 use Pterodactyl\Models\User;
+use Illuminate\Support\Collection;
+use Pterodactyl\Models\Permission;
 use Pterodactyl\Repositories\Eloquent\ServerRepository;
 use Pterodactyl\Transformers\Api\Client\ServerTransformer;
 use Pterodactyl\Http\Requests\Api\Client\GetServersRequest;
@@ -62,4 +64,25 @@ class ClientController extends ClientApiController
             ->transformWith($this->getTransformer(ServerTransformer::class))
             ->toArray();
     }
+
+    /**
+     * Returns all of the subuser permissions available on the system.
+     *
+     * @return array
+     */
+    public function permissions()
+    {
+        $permissions = Permission::permissions()->map(function ($values, $key) {
+            return Collection::make($values)->map(function ($permission) use ($key) {
+                return $key . '.' . $permission;
+            })->values()->toArray();
+        })->flatten();
+
+        return [
+            'object' => 'system_permissions',
+            'attributes' => [
+                'permissions' => $permissions,
+            ],
+        ];
+    }
 }

resources/scripts/api/getSystemPermissions.ts

@@ -0,0 +1,10 @@
+import { SubuserPermission } from '@/state/server/subusers';
+import http from '@/api/http';
+
+export default (): Promise<SubuserPermission[]> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/permissions`)
+            .then(({ data }) => resolve(data.attributes.permissions))
+            .catch(reject);
+    });
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SubuserPermission } from '@/state/server/subusers';
+
+interface Props {
+    defaultPermissions: SubuserPermission[];
+}
+
+export default ({ defaultPermissions }: Props) => {
+    return null;
+};

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

@@ -5,6 +5,10 @@ import { ServerContext } from '@/state/server';
 import Spinner from '@/components/elements/Spinner';
 import { Subuser } from '@/state/server/subusers';
 import { CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+import PermissionEditor from '@/components/server/users/PermissionEditor';
+import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -14,6 +18,15 @@ export default () => {
     const subusers = ServerContext.useStoreState(state => state.subusers.data);
     const getSubusers = ServerContext.useStoreActions(actions => actions.subusers.getSubusers);
 
+    const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
+    const getPermissions = useStoreActions((actions: Actions<ApplicationStore>) => actions.permissions.getPermissions);
+
+    useEffect(() => {
+        if (!permissions.length) {
+            getPermissions().catch(error => console.error(error));
+        }
+    }, [ permissions, getPermissions ]);
+
     useEffect(() => {
         getSubusers(uuid)
             .then(() => setLoading(false))
@@ -32,8 +45,11 @@ export default () => {
         <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={classNames('border-t-4 grey-box mt-0', {
+                    'border-cyan-400': editSubuser === null,
+                    'border-neutral-400': editSubuser !== null,
+                })}>
+                    {(loading || !permissions.length) ?
                         <div className={'w-full'}>
                             <Spinner centered={true}/>
                         </div>
@@ -78,8 +94,10 @@ export default () => {
             <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
                 <div className={'flex-1 ml-6'}>
                     <h2 className={'text-neutral-300 mb-4'}>Edit {editSubuser.email}</h2>
-                    <div className={'border-t-4 border-primary-400 grey-box mt-0'}>
-                        <p>Edit permissions here.</p>
+                    <div className={'border-t-4 border-cyan-400 grey-box mt-0'}>
+                        <PermissionEditor
+                            defaultPermissions={editSubuser.permissions}
+                        />
                     </div>
                 </div>
             </CSSTransition>

resources/scripts/state/index.ts

@@ -1,13 +1,16 @@
 import { createStore } from 'easy-peasy';
 import flashes, { FlashStore } from '@/state/flashes';
 import user, { UserStore } from '@/state/user';
+import permissions, { GloablPermissionsStore } from '@/state/permissions';
 
 export interface ApplicationStore {
+    permissions: GloablPermissionsStore;
     flashes: FlashStore;
     user: UserStore;
 }
 
 const state: ApplicationStore = {
+    permissions,
     flashes,
     user,
 };

resources/scripts/state/permissions.ts

@@ -0,0 +1,25 @@
+import { SubuserPermission } from '@/state/server/subusers';
+import { action, Action, thunk, Thunk } from 'easy-peasy';
+import getSystemPermissions from '@/api/getSystemPermissions';
+
+export interface GloablPermissionsStore {
+    data: SubuserPermission[];
+    setPermissions: Action<GloablPermissionsStore, SubuserPermission[]>;
+    getPermissions: Thunk<GloablPermissionsStore, void, {}, any, Promise<void>>;
+}
+
+const permissions: GloablPermissionsStore = {
+    data: [],
+
+    setPermissions: action((state, payload) => {
+        state.data = payload;
+    }),
+
+    getPermissions: thunk(async (actions) => {
+        const permissions = await getSystemPermissions();
+
+        actions.setPermissions(permissions);
+    }),
+};
+
+export default permissions;

resources/scripts/state/server/subusers.ts

@@ -1,7 +1,16 @@
 import { action, Action, thunk, Thunk } from 'easy-peasy';
 import getServerSubusers from '@/api/server/users/getServerSubusers';
 
-export type SubuserPermission = string;
+export type SubuserPermission =
+    'websocket.*' |
+    'control.console' | 'control.start' | 'control.stop' | 'control.restart' | 'control.kill' |
+    'user.create' | 'user.read' | 'user.update' | 'user.delete' |
+    'file.create' | 'file.read' | 'file.update' | 'file.delete' | 'file.archive' | 'file.sftp' |
+    'allocation.read' | 'allocation.update' |
+    'startup.read' | 'startup.update' |
+    'database.create' | 'database.read' | 'database.update' | 'database.delete' | 'database.view_password' |
+    'schedule.create' | 'schedule.read' | 'schedule.update' | 'schedule.delete'
+    ;
 
 export interface Subuser {
     uuid: string;
@@ -30,7 +39,7 @@ const subusers: ServerSubuserStore = {
     }),
 
     appendSubuser: action((state, payload) => {
-        state.data = [...state.data, payload];
+        state.data = [ ...state.data, payload ];
     }),
 
     getSubusers: thunk(async (actions, payload) => {

routes/api-client.php

@@ -1,5 +1,6 @@
 <?php
 
+use Illuminate\Support\Facades\Route;
 use Pterodactyl\Http\Middleware\Api\Client\Server\AuthenticateServerAccess;
 
 /*
@@ -11,6 +12,7 @@ use Pterodactyl\Http\Middleware\Api\Client\Server\AuthenticateServerAccess;
 |
 */
 Route::get('/', 'ClientController@index')->name('api.client.index');
+Route::get('/permissions', 'ClientController@permissions');
 
 Route::group(['prefix' => '/account'], function () {
     Route::get('/', 'AccountController@index')->name('api.client.account');