Basic concept for the EULA feature to demo how this will all work

Author: DaneEveritt

app/Transformers/Api/Client/ServerTransformer.php

@@ -62,6 +62,7 @@ public function transform(Server $server): array
                 'cpu' => $server->cpu,
             ],
             'invocation' => $service->handle($server, ! $this->getUser()->can(Permission::ACTION_STARTUP_READ, $server)),
+            'egg_features' => $server->egg->inherit_features,
             'feature_limits' => [
                 'databases' => $server->database_limit,
                 'allocations' => $server->allocation_limit,

config/egg_features/eula.php

@@ -0,0 +1,16 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Egg Feature: EULA Popup
+    |--------------------------------------------------------------------------
+    |
+    | This popup is enabled for Minecraft eggs and allows a custom frontend
+    | hook to run that monitors the console output of the server and pops up
+    | a modal asking the user to accept it if necessary.
+    |
+    | There is no additional configuration necessary.
+    |
+    */
+];

resources/scripts/api/server/getServer.ts

@@ -30,6 +30,7 @@ export interface Server {
         cpu: number;
         threads: string;
     };
+    eggFeatures: string[];
     featureLimits: {
         databases: number;
         allocations: number;
@@ -53,6 +54,7 @@ export const rawDataToServerObject = ({ attributes: data }: FractalResponseData)
     },
     description: data.description ? ((data.description.length > 0) ? data.description : null) : null,
     limits: { ...data.limits },
+    eggFeatures: data.egg_features || [],
     featureLimits: { ...data.feature_limits },
     isSuspended: data.is_suspended,
     isInstalling: data.is_installing,

resources/scripts/components/server/ServerConsole.tsx

@@ -8,6 +8,7 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
 import isEqual from 'react-fast-compare';
 import PowerControls from '@/components/server/PowerControls';
+import { EulaModalFeature } from '@feature/index';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
@@ -16,6 +17,8 @@ const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/c
 
 const ServerConsole = () => {
     const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
+    // @ts-ignore
+    const eggFeatures: string[] = ServerContext.useStoreState(state => state.server.data!.eggFeatures, isEqual);
 
     return (
         <ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
@@ -41,6 +44,11 @@ const ServerConsole = () => {
                     <ChunkedConsole/>
                     <ChunkedStatGraphs/>
                 </SuspenseSpinner>
+                {eggFeatures.includes('eula') &&
+                <React.Suspense fallback={null}>
+                    <EulaModalFeature/>
+                </React.Suspense>
+                }
             </div>
         </ServerContentBlock>
     );

resources/scripts/components/server/features/eula/EulaModalFeature.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { ServerContext } from '@/state/server';
+import Modal from '@/components/elements/Modal';
+import tw from 'twin.macro';
+
+const EulaModalFeature = () => {
+    const [ visible, setVisible ] = useState(false);
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+
+    useEffect(() => {
+        if (!connected || !instance || status === 'running') return;
+
+        const listener = (line: string) => {
+            if (line.toLowerCase().indexOf('you need to agree to the eula in order to run the server') >= 0) {
+                setVisible(true);
+            }
+        };
+
+        instance.addListener('console output', listener);
+
+        return () => {
+            instance.removeListener('console output', listener);
+        };
+    }, [ connected, instance, status ]);
+
+    return (
+        !visible ?
+            null
+            :
+            <Modal visible onDismissed={() => setVisible(false)}>
+                <h2 css={tw`text-3xl mb-4 text-neutral-100`}>EULA Not Accepted</h2>
+                <p css={tw`text-neutral-200`}>
+                    It looks like you have not yet accepted the Minecraft EULA. In order to start this server you
+                    must set eula=true inside the eula.txt file in the File Manager.
+                </p>
+            </Modal>
+    );
+};
+
+export default EulaModalFeature;

resources/scripts/components/server/features/index.ts

@@ -0,0 +1,11 @@
+import { lazy } from 'react';
+
+/**
+ * Custom features should be registered here as lazy components so that they do
+ * not impact the generated JS bundle size. They will be automatically loaded in
+ * whenever they are actually loaded for the client (which may be never, depending
+ * on the feature and the egg).
+ */
+const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
+
+export { EulaModalFeature };

tsconfig.json

@@ -11,19 +11,27 @@
     "esModuleInterop": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "lib": ["es2015", "dom"],
+    "lib": [
+      "es2015",
+      "dom"
+    ],
     "importsNotUsedAsValues": "preserve",
     "paths": {
       "@/*": [
         "./resources/scripts/*"
+      ],
+      "@feature/*": [
+        "./resources/scripts/components/server/features/*"
       ]
     },
     "plugins": [
       {
         "name": "typescript-plugin-tw-template"
       }
     ],
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": [
+      "node_modules/@types"
+    ]
   },
   "include": [
     "./resources/scripts/**/*"

webpack.config.js

@@ -63,6 +63,7 @@ module.exports = {
         extensions: ['.ts', '.tsx', '.js', '.json'],
         alias: {
             '@': path.join(__dirname, '/resources/scripts'),
+            '@feature': path.join(__dirname, '/resources/scripts/components/server/features'),
         },
         symlinks: false,
     },