Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into v2

Browse source
This commit is contained in:
Matthew Penner 2021-08-03 14:41:12 -06:00
commit a39802cb4e
19 changed files with 241 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

15
resources/scripts/api/account/getTwoFactorTokenData.ts Normal file
View file

@ -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);
});
};

9
resources/scripts/api/account/getTwoFactorTokenUrl.ts
View file

@ -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);
});
};

2
resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx
View file

@ -43,7 +43,7 @@ const DisableTwoFactorModal = () => {
password: '',
}}
validationSchema={object().shape({
password: string().required('You must provider your current password in order to continue.'),
password: string().required('You must provide your current password in order to continue.'),
})}
>
{({ isValid }) => (

31
resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
View file

@ -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>

3
resources/scripts/components/server/ServerConsole.tsx
View file

@ -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>

105
resources/scripts/components/server/features/JavaVersionModalFeature.tsx Normal file
View file

@ -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;

43
resources/scripts/components/server/features/eula/EulaModalFeature.tsx
View file

@ -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>
);
};

3
resources/scripts/components/server/features/index.ts
View file

@ -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.java_version" */'feature/JavaVersionModalFeature'));
export { EulaModalFeature };
export { EulaModalFeature, JavaVersionModalFeature };

2
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View file

@ -58,7 +58,7 @@ export default () => {
css={tw`cursor-pointer mb-2 flex-wrap`}
onClick={(e: any) => {
e.preventDefault();
history.push(`${match.url}/${schedule.id}`, { schedule });
history.push(`${match.url}/${schedule.id}`);
}}
>
<ScheduleRow schedule={schedule}/>

10
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

@ -1,6 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import { useHistory, useParams } from 'react-router-dom';
import getServerSchedule from '@/api/server/schedules/getServerSchedule';
import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -23,10 +22,6 @@ interface Params {
id: string;
}
interface State {
schedule?: Schedule;
}
const CronBox = ({ title, value }: { title: string; value: string }) => (
<div css={tw`bg-neutral-700 rounded p-3`}>
<p css={tw`text-neutral-300 text-sm`}>{title}</p>
@ -47,7 +42,6 @@ const ActivePill = ({ active }: { active: boolean }) => (
export default () => {
const history = useHistory();
const { state } = useLocation<State>();
const { id: scheduleId } = useParams<Params>();
const id = ServerContext.useStoreState(state => state.server.data!.id);
@ -57,7 +51,7 @@ export default () => {
const [ isLoading, setIsLoading ] = useState(true);
const [ showEditModal, setShowEditModal ] = useState(false);
const schedule = ServerContext.useStoreState(st => st.schedules.data.find(s => s.id === state.schedule?.id), isEqual);
const schedule = ServerContext.useStoreState(st => st.schedules.data.find(s => s.id === Number(scheduleId)), isEqual);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
useEffect(() => {