Merge branch 'develop' of github.com:pterodactyl/panel into develop

2021-08-02 20:45:04 -07:00 · 2021-08-02 20:45:04 -07:00 · 4960bc7eec
parent cfb5b8c244 bda1ff50ab
commit 4960bc7eec
9 changed files with 178 additions and 52 deletions
--- a/app/Http/Controllers/Api/Client/TwoFactorController.php
+++ b/app/Http/Controllers/Api/Client/TwoFactorController.php
@ -61,9 +61,7 @@ class TwoFactorController extends ClientApiController
        }

        return new JsonResponse([
-            'data' => [
-                'image_url_data' => $this->setupService->handle($request->user()),
-            ],
+            'data' => $this->setupService->handle($request->user()),
        ]);
    }

--- a/app/Services/Users/TwoFactorSetupService.php
+++ b/app/Services/Users/TwoFactorSetupService.php
@ -49,7 +49,7 @@ class TwoFactorSetupService
     * @throws \Pterodactyl\Exceptions\Model\DataValidationException
     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
     */
-    public function handle(User $user): string
+    public function handle(User $user): array
    {
        $secret = '';
        try {
@ -66,11 +66,14 @@ class TwoFactorSetupService

        $company = urlencode(preg_replace('/\s/', '', $this->config->get('app.name')));

-        return sprintf(
-            'otpauth://totp/%1$s:%2$s?secret=%3$s&issuer=%1$s',
-            rawurlencode($company),
-            rawurlencode($user->email),
-            rawurlencode($secret)
-        );
+        return [
+            'image_url_data' => sprintf(
+                'otpauth://totp/%1$s:%2$s?secret=%3$s&issuer=%1$s',
+                rawurlencode($company),
+                rawurlencode($user->email),
+                rawurlencode($secret),
+            ),
+            'secret' => $secret,
+        ];
    }
 }
--- a/resources/scripts/api/account/getTwoFactorTokenData.ts
+++ b/resources/scripts/api/account/getTwoFactorTokenData.ts
@ -0,0 +1,15 @@
+import http from '@/api/http';
+
+export interface TwoFactorTokenData {
+    // eslint-disable-next-line camelcase
+    image_url_data: string;
+    secret: string;
+}
+
+export default (): Promise<TwoFactorTokenData> => {
+    return new Promise((resolve, reject) => {
+        http.get('/api/client/account/two-factor')
+            .then(({ data }) => resolve(data.data))
+            .catch(reject);
+    });
+};
--- a/resources/scripts/api/account/getTwoFactorTokenUrl.ts
+++ b/resources/scripts/api/account/getTwoFactorTokenUrl.ts
@ -1,9 +0,0 @@
-import http from '@/api/http';
-
-export default (): Promise<string> => {
-    return new Promise((resolve, reject) => {
-        http.get('/api/client/account/two-factor')
-            .then(({ data }) => resolve(data.data.image_url_data))
-            .catch(reject);
-    });
-};
--- a/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
+++ b/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
-import getTwoFactorTokenUrl from '@/api/account/getTwoFactorTokenUrl';
+import getTwoFactorTokenData, { TwoFactorTokenData } from '@/api/account/getTwoFactorTokenData';
 import enableAccountTwoFactor from '@/api/account/enableAccountTwoFactor';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
@ -12,13 +12,14 @@ import Button from '@/components/elements/Button';
 import asModal from '@/hoc/asModal';
 import ModalContext from '@/context/ModalContext';
 import QRCode from 'qrcode.react';
+import CopyOnClick from '@/components/elements/CopyOnClick';

 interface Values {
    code: string;
 }

 const SetupTwoFactorModal = () => {
-    const [ token, setToken ] = useState('');
+    const [ token, setToken ] = useState<TwoFactorTokenData | null>(null);
    const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);

    const { dismiss, setPropOverrides } = useContext(ModalContext);
@ -26,7 +27,7 @@ const SetupTwoFactorModal = () => {
    const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);

    useEffect(() => {
-        getTwoFactorTokenUrl()
+        getTwoFactorTokenData()
            .then(setToken)
            .catch(error => {
                console.error(error);
@ -102,13 +103,17 @@ const SetupTwoFactorModal = () => {
                    <div css={tw`flex flex-wrap`}>
                        <div css={tw`w-full md:flex-1`}>
                            <div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
-                                {!token || !token.length ?
+                                {!token ?
                                    <img
                                        src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
                                        css={tw`w-64 h-64 rounded`}
                                    />
                                    :
-                                    <QRCode renderAs={'svg'} value={token} css={tw`w-full h-full shadow-none rounded-none`}/>
+                                    <QRCode
+                                        renderAs={'svg'}
+                                        value={token.image_url_data}
+                                        css={tw`w-full h-full shadow-none rounded-none`}
+                                    />
                                }
                            </div>
                        </div>
@ -121,11 +126,21 @@ const SetupTwoFactorModal = () => {
                                    title={'Code From Authenticator'}
                                    description={'Enter the code from your authenticator device after scanning the QR image.'}
                                />
+                                {token &&
+                                <div css={tw`mt-4 pt-4 border-t border-neutral-500 text-neutral-200`}>
+                                    Alternatively, enter the following token into your authenticator application:
+                                    <CopyOnClick text={token.secret}>
+                                        <div css={tw`text-sm bg-neutral-900 rounded mt-2 py-2 px-4 font-mono`}>
+                                            <code css={tw`font-mono`}>
+                                                {token.secret}
+                                            </code>
+                                        </div>
+                                    </CopyOnClick>
+                                </div>
+                                }
                            </div>
                            <div css={tw`mt-6 md:mt-0 text-right`}>
-                                <Button>
-                                    Setup
-                                </Button>
+                                <Button>Setup</Button>
                            </div>
                        </div>
                    </div>
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/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 } from '@feature/index';
+import { EulaModalFeature, JavaVersionModalFeature } from '@feature/index';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import Spinner from '@/components/elements/Spinner';

@ -60,6 +60,7 @@ const ServerConsole = () => {
                {eggFeatures.includes('eula') &&
                <React.Suspense fallback={null}>
                    <EulaModalFeature/>
+                    <JavaVersionModalFeature/>
                </React.Suspense>
                }
            </div>
--- a/resources/scripts/components/server/features/JavaVersionModalFeature.tsx
+++ b/resources/scripts/components/server/features/JavaVersionModalFeature.tsx
@ -0,0 +1,105 @@
+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 setSelectedDockerImage from '@/api/server/setSelectedDockerImage';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { SocketEvent, SocketRequest } from '@/components/server/events';
+import Select from '@/components/elements/Select';
+
+const dockerImageList = [
+    { name: 'Java 8', image: 'ghcr.io/pterodactyl/yolks:java_8' },
+    { name: 'Java 11', image: 'ghcr.io/pterodactyl/yolks:java_11' },
+    { name: 'Java 16', image: 'ghcr.io/pterodactyl/yolks:java_16' },
+];
+
+const JavaVersionModalFeature = () => {
+    const [ visible, setVisible ] = useState(false);
+    const [ loading, setLoading ] = useState(false);
+    const [ selectedVersion, setSelectedVersion ] = useState('ghcr.io/pterodactyl/yolks:java_16');
+
+    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 = [
+            'minecraft 1.17 requires running the server with java 16 or above',
+            'java.lang.unsupportedclassversionerror',
+            'unsupported major.minor version',
+            'has been compiled by a more recent version of the java runtime',
+        ];
+
+        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 updateJava = () => {
+        setLoading(true);
+        clearFlashes('feature:javaVersion');
+
+        setSelectedDockerImage(uuid, selectedVersion)
+            .then(() => {
+                if (status === 'offline' && instance) {
+                    instance.send(SocketRequest.SET_STATE, 'restart');
+                }
+
+                setLoading(false);
+                setVisible(false);
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'feature:javaVersion', error });
+            })
+            .then(() => setLoading(false));
+    };
+
+    useEffect(() => {
+        clearFlashes('feature:javaVersion');
+    }, []);
+
+    return (
+        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+            <FlashMessageRender key={'feature:javaVersion'} css={tw`mb-4`}/>
+            <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Invalid Java Version, Update Docker Image?</h2>
+            <p css={tw`mt-4`}>This server is unable to start due to the required java version not being met.</p>
+            <p css={tw`mt-4`}>By pressing {'"Update Docker Image"'} below you are acknowledging that the docker image this server uses will be changed to a image below that has the Java version you are requesting.</p>
+            <div css={tw`sm:flex items-center mt-4`}>
+                <p>Please select a Java version from the list below.</p>
+                <Select
+                    onChange={e => setSelectedVersion(e.target.value)}
+                >
+                    {dockerImageList.map((key, index) => {
+                        return (
+                            <option key={index} value={key.image}>{key.name}</option>
+                        );
+                    })}
+                </Select>
+            </div>
+            <div css={tw`mt-8 sm:flex items-center justify-end`}>
+                <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
+                        Cancel
+                </Button>
+                <Button onClick={updateJava} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
+                        Update Docker Image
+                </Button>
+            </div>
+        </Modal>
+    );
+};
+
+export default JavaVersionModalFeature;
--- a/resources/scripts/components/server/features/eula/EulaModalFeature.tsx
+++ b/resources/scripts/components/server/features/eula/EulaModalFeature.tsx
@ -53,37 +53,34 @@ const EulaModalFeature = () => {
            .then(() => setLoading(false));
    };

-    useEffect(() => () => {
+    useEffect(() => {
        clearFlashes('feature:eula');
    }, []);

    return (
-        !visible ?
-            null
-            :
-            <Modal visible onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
-                <FlashMessageRender key={'feature:eula'} css={tw`mb-4`}/>
-                <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Accept Minecraft&reg; EULA</h2>
-                <p css={tw`text-neutral-200`}>
+        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+            <FlashMessageRender key={'feature:eula'} css={tw`mb-4`}/>
+            <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Accept Minecraft&reg; EULA</h2>
+            <p css={tw`text-neutral-200`}>
                    By pressing {'"I Accept"'} below you are indicating your agreement to the&nbsp;
-                    <a
-                        target={'_blank'}
-                        css={tw`text-primary-300 underline transition-colors duration-150 hover:text-primary-400`}
-                        rel={'noreferrer noopener'}
-                        href="https://account.mojang.com/documents/minecraft_eula"
-                    >
+                <a
+                    target={'_blank'}
+                    css={tw`text-primary-300 underline transition-colors duration-150 hover:text-primary-400`}
+                    rel={'noreferrer noopener'}
+                    href="https://account.mojang.com/documents/minecraft_eula"
+                >
                        Minecraft&reg; EULA
-                    </a>.
-                </p>
-                <div css={tw`mt-8 sm:flex items-center justify-end`}>
-                    <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
+                </a>.
+            </p>
+            <div css={tw`mt-8 sm:flex items-center justify-end`}>
+                <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
                        Cancel
-                    </Button>
-                    <Button onClick={onAcceptEULA} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
+                </Button>
+                <Button onClick={onAcceptEULA} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
                        I Accept
-                    </Button>
-                </div>
-            </Modal>
+                </Button>
+            </div>
+        </Modal>
    );
 };

--- a/resources/scripts/components/server/features/index.ts
+++ b/resources/scripts/components/server/features/index.ts
@ -7,5 +7,6 @@ import { lazy } from 'react';
 * on the feature and the egg).
 */
 const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
+const JavaVersionModalFeature = lazy(() => import(/* webpackChunkName: "feature.javaVersion" */'@feature/JavaVersionModalFeature'));

-export { EulaModalFeature };
+export { EulaModalFeature, JavaVersionModalFeature };