GSL Token Modal Feature (pterodactyl#3746)

Author: Boy132

database/Seeders/eggs/source-engine/egg-counter--strike--global-offensive.json

@@ -8,7 +8,9 @@
     "name": "Counter-Strike: Global Offensive",
     "author": "support@pterodactyl.io",
     "description": "Counter-Strike: Global Offensive is a multiplayer first-person shooter video game developed by Hidden Path Entertainment and Valve Corporation.",
-    "features": null,
+    "features": [
+        "gsl_token"
+    ],
     "images": [
         "ghcr.io\/pterodactyl\/games:source"
     ],

database/Seeders/eggs/source-engine/egg-garrys-mod.json

@@ -8,7 +8,9 @@
     "name": "Garrys Mod",
     "author": "support@pterodactyl.io",
     "description": "Garrys Mod, is a sandbox physics game created by Garry Newman, and developed by his company, Facepunch Studios.",
-    "features": null,
+    "features": [
+        "gsl_token"
+    ],
     "images": [
         "ghcr.io\/pterodactyl\/games:source"
     ],

resources/scripts/components/server/ServerConsole.tsx

@@ -7,7 +7,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, JavaVersionModalFeature } from '@feature/index';
+import { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature } from '@feature/index';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import Spinner from '@/components/elements/Spinner';
 
@@ -60,6 +60,7 @@ const ServerConsole = () => {
                 <React.Suspense fallback={null}>
                     {eggFeatures.includes('eula') && <EulaModalFeature/>}
                     {eggFeatures.includes('java_version') && <JavaVersionModalFeature/>}
+                    {eggFeatures.includes('gsl_token') && <GSLTokenModalFeature/>}
                 </React.Suspense>
             </div>
         </ServerContentBlock>

resources/scripts/components/server/features/GSLTokenModalFeature.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { ServerContext } from '@/state/server';
+import Modal from '@/components/elements/Modal';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { SocketEvent, SocketRequest } from '@/components/server/events';
+import Field from '@/components/elements/Field';
+import updateStartupVariable from '@/api/server/updateStartupVariable';
+import { Form, Formik, FormikHelpers } from 'formik';
+
+interface Values {
+    gslToken: string;
+}
+
+const GSLTokenModalFeature = () => {
+    const [ visible, setVisible ] = useState(false);
+    const [ loading, setLoading ] = useState(false);
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+
+    useEffect(() => {
+        if (!connected || !instance || status === 'running') return;
+
+        const errors = [
+            '(gsl token expired)',
+            '(account not found)',
+        ];
+
+        const listener = (line: string) => {
+            if (errors.some(p => line.toLowerCase().includes(p))) {
+                setVisible(true);
+            }
+        };
+
+        instance.addListener(SocketEvent.CONSOLE_OUTPUT, listener);
+
+        return () => {
+            instance.removeListener(SocketEvent.CONSOLE_OUTPUT, listener);
+        };
+    }, [ connected, instance, status ]);
+
+    const updateGSLToken = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setLoading(true);
+        clearFlashes('feature:gslToken');
+
+        updateStartupVariable(uuid, 'STEAM_ACC', values.gslToken)
+            .then(() => {
+                if (instance) {
+                    instance.send(SocketRequest.SET_STATE, 'restart');
+                }
+
+                setLoading(false);
+                setVisible(false);
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'feature:gslToken', error });
+            })
+            .then(() => setLoading(false));
+    };
+
+    useEffect(() => {
+        clearFlashes('feature:gslToken');
+    }, []);
+
+    return (
+        <Formik
+            onSubmit={updateGSLToken}
+            initialValues={{ gslToken: '' }}
+        >
+            <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+                <FlashMessageRender key={'feature:gslToken'} css={tw`mb-4`}/>
+                <Form>
+                    <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Invalid GSL token!</h2>
+                    <p css={tw`mt-4`}>It seems like your Gameserver Login Token (GSL token) is invalid or has expired.</p>
+                    <p css={tw`mt-4`}>You can either generate a new one and enter it below or leave the field blank to remove it completely.</p>
+                    <div css={tw`sm:flex items-center mt-4`}>
+                        <Field
+                            name={'gslToken'}
+                            label={'GSL Token'}
+                            description={'Visit https://steamcommunity.com/dev/managegameservers to generate a token.'}
+                            autoFocus
+                        />
+                    </div>
+                    <div css={tw`mt-8 sm:flex items-center justify-end`}>
+                        <Button type={'submit'} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
+                            Update GSL Token
+                        </Button>
+                    </div>
+                </Form>
+            </Modal>
+        </Formik>
+    );
+};
+
+export default GSLTokenModalFeature;

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

@@ -8,5 +8,6 @@ import { lazy } from 'react';
  */
 const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
 const JavaVersionModalFeature = lazy(() => import(/* webpackChunkName: "feature.java_version" */'@feature/JavaVersionModalFeature'));
+const GSLTokenModalFeature = lazy(() => import(/* webpackChunkName: "feature.gsl_token" */'@feature/GSLTokenModalFeature'));
 
-export { EulaModalFeature, JavaVersionModalFeature };
+export { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature };