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

ui(admin): add "working" React admin ui

Browse source
This commit is contained in:
Matthew Penner 2022-12-15 19:06:14 -07:00
parent d1c7494933
commit 5402584508
No known key found for this signature in database
199 changed files with 13387 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

37
resources/scripts/components/admin/settings/GeneralSettings.tsx Normal file
View file

@ -0,0 +1,37 @@
import { Form, Formik } from 'formik';
import tw from 'twin.macro';
import AdminBox from '@/components/admin/AdminBox';
import Field, { FieldRow } from '@/components/elements/Field';
export default () => {
const submit = () => {
//
};
return (
<Formik onSubmit={submit} initialValues={{}}>
<Form>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6`}>
<AdminBox title="Branding">
<FieldRow>
<Field id={'appName'} name={'appName'} type={'text'} label={'App Name'} description={''} />
</FieldRow>
</AdminBox>
<AdminBox title="Analytics">
<FieldRow>
<Field
id={'googleAnalytics'}
name={'googleAnalytics'}
type={'text'}
label={'Google Analytics'}
description={''}
/>
</FieldRow>
</AdminBox>
</div>
</Form>
</Formik>
);
};

102
resources/scripts/components/admin/settings/MailSettings.tsx Normal file
View file

@ -0,0 +1,102 @@
import { Form, Formik } from 'formik';
import tw from 'twin.macro';
import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button';
import Field, { FieldRow } from '@/components/elements/Field';
import Label from '@/components/elements/Label';
import Select from '@/components/elements/Select';
export default () => {
const submit = () => {
//
};
return (
<Formik
onSubmit={submit}
initialValues={{
smtpHost: 'smtp.example.com',
smtpPort: 587,
smtpEncryption: 'tls',
username: '',
password: '',
mailFrom: 'no-reply@example.com',
mailFromName: 'Pterodactyl Panel',
}}
>
{({ isSubmitting, isValid }) => (
<Form>
<AdminBox title="Mail">
<FieldRow css={tw`lg:grid-cols-3`}>
<Field
id={'smtpHost'}
name={'smtpHost'}
type={'text'}
label={'SMTP Host'}
description={''}
/>
<Field
id={'smtpPort'}
name={'smtpPort'}
type={'number'}
label={'SMTP Port'}
description={''}
/>
<div>
<Label>Encryption</Label>
<Select id={'smtpEncryption'} name={'smtpEncryption'} defaultValue={'tls'}>
<option value="">None</option>
<option value="ssl">Secure Sockets Layer (SSL)</option>
<option value="tls">Transport Layer Security (TLS)</option>
</Select>
</div>
</FieldRow>
<FieldRow>
<Field
id={'username'}
name={'username'}
type={'text'}
label={'Username'}
description={''}
/>
<Field
id={'password'}
name={'password'}
type={'password'}
label={'Password'}
description={''}
/>
</FieldRow>
<FieldRow>
<Field
id={'mailFrom'}
name={'mailFrom'}
type={'text'}
label={'Mail From'}
description={''}
/>
<Field
id={'mailFromName'}
name={'mailFromName'}
type={'text'}
label={'Mail From Name'}
description={''}
/>
</FieldRow>
</AdminBox>
<div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mt-6`}>
<div css={tw`flex flex-row`}>
<Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>
</div>
</Form>
)}
</Formik>
);
};

52
resources/scripts/components/admin/settings/SettingsContainer.tsx Normal file
View file

@ -0,0 +1,52 @@
import { AdjustmentsIcon, ChipIcon, CodeIcon, MailIcon, ShieldCheckIcon } from '@heroicons/react/outline';
import { Route, Routes } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import MailSettings from '@/components/admin/settings/MailSettings';
import FlashMessageRender from '@/components/FlashMessageRender';
import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
import GeneralSettings from '@/components/admin/settings/GeneralSettings';
export default () => {
return (
<AdminContentBlock title={'Settings'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
Configure and manage settings for Pterodactyl.
</p>
</div>
</div>
<FlashMessageRender byKey={'admin:settings'} css={tw`mb-4`} />
<SubNavigation>
<SubNavigationLink to="/admin/settings" name="General">
<ChipIcon />
</SubNavigationLink>
<SubNavigationLink to="/admin/settings/mail" name="Mail">
<MailIcon />
</SubNavigationLink>
<SubNavigationLink to="/admin/settings/security" name="Security">
<ShieldCheckIcon />
</SubNavigationLink>
<SubNavigationLink to="/admin/settings/features" name="Features">
<AdjustmentsIcon />
</SubNavigationLink>
<SubNavigationLink to="/admin/settings/advanced" name="Advanced">
<CodeIcon />
</SubNavigationLink>
</SubNavigation>
<Routes>
<Route path="/admin/settings" element={<GeneralSettings />} />
<Route path="/admin/settings/mail" element={<MailSettings />} />
<Route path="/admin/settings/security" element={<p>Security</p>} />
<Route path="/admin/settings/features" element={<p>Features</p>} />
<Route path="/admin/settings/advanced" element={<p>Advanced</p>} />
</Routes>
</AdminContentBlock>
);
};