ui(admin): add views for settings

resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx

@@ -251,7 +251,7 @@ export default function EggSettingsContainer ({ egg }: { egg: Egg }) {
 
                     <EggProcessContainer ref={ref} css={tw`mb-6`}/>
 
-                    <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mb-16`}>
+                    <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mb-16`}>
                         <div css={tw`flex flex-row`}>
                             <EggDeleteButton
                                 eggId={egg.id}

resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx

@@ -66,8 +66,7 @@ function CreateAllocationForm ({ nodeId }: { nodeId: number }) {
                 ports: array(number()).min(1, 'You must select at least one port.'),
             })}
         >
-            {
+            {({ isSubmitting, isValid }) => (
-                ({ isSubmitting, isValid }) => (
                 <Form>
                     <SelectField
                         id={'ips'}
@@ -109,8 +108,7 @@ function CreateAllocationForm ({ nodeId }: { nodeId: number }) {
                         </div>
                     </div>
                 </Form>
-                )
+            )}
-            }
         </Formik>
     );
 }

resources/scripts/components/admin/servers/ServerSettingsContainer.tsx

@@ -79,7 +79,7 @@ export default () => {
                         </div>
                         <div css={tw`flex flex-col`}>
                             <ServerResourceBox/>
-                            <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-5 mt-6`}>
+                            <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mt-6`}>
                                 <div css={tw`flex flex-row`}>
                                     <ServerDeleteButton/>
                                     <Button

resources/scripts/components/admin/settings/GeneralSettings.tsx

@@ -0,0 +1,46 @@
+import Field, { FieldRow } from '@/components/elements/Field';
+import { Form, Formik } from 'formik';
+import React from 'react';
+import AdminBox from '@/components/admin/AdminBox';
+import tw from 'twin.macro';
+
+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>
+    );
+};

resources/scripts/components/admin/settings/MailSettings.tsx

@@ -0,0 +1,111 @@
+import Button from '@/components/elements/Button';
+import Label from '@/components/elements/Label';
+import { Form, Formik } from 'formik';
+import React from 'react';
+import tw from 'twin.macro';
+import AdminBox from '@/components/admin/AdminBox';
+import Field, { FieldRow } from '@/components/elements/Field';
+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>
+    );
+};

resources/scripts/components/admin/settings/SettingsContainer.tsx

@@ -1,8 +1,17 @@
+import MailSettings from '@/components/admin/settings/MailSettings';
+import { AdjustmentsIcon, ChipIcon, CodeIcon, MailIcon, ShieldCheckIcon } from '@heroicons/react/outline';
 import React from 'react';
+import { Route, useLocation } from 'react-router';
+import { Switch } from 'react-router-dom';
 import tw from 'twin.macro';
+import FlashMessageRender from '@/components/FlashMessageRender';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import GeneralSettings from '@/components/admin/settings/GeneralSettings';
 
 export default () => {
+    const location = useLocation();
+
     return (
         <AdminContentBlock title={'Settings'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
@@ -11,6 +20,44 @@ export default () => {
                     <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={'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>
+
+            <Switch location={location}>
+                <Route path="/admin/settings" exact>
+                    <GeneralSettings/>
+                </Route>
+                <Route path="/admin/settings/mail" exact>
+                    <MailSettings/>
+                </Route>
+                <Route path="/admin/settings/security" exact>
+                    <p>Security</p>
+                </Route>
+                <Route path="/admin/settings/features" exact>
+                    <p>Features</p>
+                </Route>
+                <Route path="/admin/settings/advanced" exact>
+                    <p>Advanced</p>
+                </Route>
+            </Switch>
         </AdminContentBlock>
     );
 };

resources/scripts/components/elements/Field.tsx

@@ -77,9 +77,9 @@ export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaProps>(
 TextareaField.displayName = 'TextareaField';
 
 export const FieldRow = styled.div`
-    ${tw`grid grid-cols-1 sm:grid-cols-2 gap-x-6 mb-6`};
+    ${tw`grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-6 mb-6`};
 
     & > div {
-        ${tw`mb-6 sm:mb-0 sm:w-full sm:flex sm:flex-col`};
+        ${tw`sm:w-full sm:flex sm:flex-col`};
     }
 `;

resources/scripts/routers/AdminRouter.tsx

@@ -120,7 +120,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                 <div css={tw`w-full flex flex-col mx-auto`} style={{ maxWidth: '86rem' }}>
                     <Switch location={location}>
                         <Route path={`${match.path}`} component={OverviewContainer} exact/>
-                        <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
+                        <Route path={`${match.path}/settings`} component={SettingsContainer}/>
                         <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
                         <Route path={`${match.path}/databases/new`} component={NewDatabaseContainer} exact/>
                         <Route path={`${match.path}/databases/:id`} component={DatabaseEditContainer} exact/>