From 469c0b40a392326cb4195dd70eb50568623b86ae Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sat, 30 Oct 2021 13:12:02 -0600
Subject: [PATCH] ui(admin): add views for settings

---
 .../admin/nests/eggs/EggSettingsContainer.tsx |   2 +-
 .../allocations/CreateAllocationForm.tsx      |  82 +++++++------
 .../admin/servers/ServerSettingsContainer.tsx |   2 +-
 .../admin/settings/GeneralSettings.tsx        |  46 ++++++++
 .../admin/settings/MailSettings.tsx           | 111 ++++++++++++++++++
 .../admin/settings/SettingsContainer.tsx      |  47 ++++++++
 .../scripts/components/elements/Field.tsx     |   4 +-
 resources/scripts/routers/AdminRouter.tsx     |   2 +-
 8 files changed, 249 insertions(+), 47 deletions(-)
 create mode 100644 resources/scripts/components/admin/settings/GeneralSettings.tsx
 create mode 100644 resources/scripts/components/admin/settings/MailSettings.tsx

diff --git a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
index 4853a1246..dc2db3419 100644
--- a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
+++ b/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}
diff --git a/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx b/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
index 34b97d128..ac3704564 100644
--- a/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
+++ b/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
@@ -66,51 +66,49 @@ function CreateAllocationForm ({ nodeId }: { nodeId: number }) {
                 ports: array(number()).min(1, 'You must select at least one port.'),
             })}
         >
-            {
-                ({ isSubmitting, isValid }) => (
-                    <Form>
-                        <SelectField
-                            id={'ips'}
-                            name={'ips'}
-                            label={'IPs and CIDRs'}
-                            options={ips}
-                            isValidNewOption={isValidIP}
-                            isMulti
-                            isSearchable
-                            isCreatable
-                            css={tw`mb-6`}
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <SelectField
+                        id={'ips'}
+                        name={'ips'}
+                        label={'IPs and CIDRs'}
+                        options={ips}
+                        isValidNewOption={isValidIP}
+                        isMulti
+                        isSearchable
+                        isCreatable
+                        css={tw`mb-6`}
+                    />
+
+                    <SelectField
+                        id={'ports'}
+                        name={'ports'}
+                        label={'Ports'}
+                        options={ports}
+                        isValidNewOption={isValidPort}
+                        isMulti
+                        isSearchable
+                        isCreatable
+                    />
+
+                    <div css={tw`mt-6`}>
+                        <Field
+                            id={'alias'}
+                            name={'alias'}
+                            label={'Alias'}
+                            type={'text'}
                         />
+                    </div>
 
-                        <SelectField
-                            id={'ports'}
-                            name={'ports'}
-                            label={'Ports'}
-                            options={ports}
-                            isValidNewOption={isValidPort}
-                            isMulti
-                            isSearchable
-                            isCreatable
-                        />
-
-                        <div css={tw`mt-6`}>
-                            <Field
-                                id={'alias'}
-                                name={'alias'}
-                                label={'Alias'}
-                                type={'text'}
-                            />
+                    <div css={tw`w-full flex flex-row items-center mt-6`}>
+                        <div css={tw`flex ml-auto`}>
+                            <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                Create Allocations
+                            </Button>
                         </div>
-
-                        <div css={tw`w-full flex flex-row items-center mt-6`}>
-                            <div css={tw`flex ml-auto`}>
-                                <Button type={'submit'} disabled={isSubmitting || !isValid}>
-                                    Create Allocations
-                                </Button>
-                            </div>
-                        </div>
-                    </Form>
-                )
-            }
+                    </div>
+                </Form>
+            )}
         </Formik>
     );
 }
diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
index 6646ebb3e..e46fe2473 100644
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/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
diff --git a/resources/scripts/components/admin/settings/GeneralSettings.tsx b/resources/scripts/components/admin/settings/GeneralSettings.tsx
new file mode 100644
index 000000000..41316152c
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/resources/scripts/components/admin/settings/MailSettings.tsx b/resources/scripts/components/admin/settings/MailSettings.tsx
new file mode 100644
index 000000000..e79d18cf8
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/resources/scripts/components/admin/settings/SettingsContainer.tsx b/resources/scripts/components/admin/settings/SettingsContainer.tsx
index 3e2fc2066..da6461036 100644
--- a/resources/scripts/components/admin/settings/SettingsContainer.tsx
+++ b/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>
     );
 };
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index 67b8c894b..2d86529fd 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/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`};
     }
 `;
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index 51b1b0b9a..0adc0f1a2 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/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/>