diff --git a/resources/scripts/components/admin/AdminContentBlock.tsx b/resources/scripts/components/admin/AdminContentBlock.tsx new file mode 100644 index 000000000..28873a71b --- /dev/null +++ b/resources/scripts/components/admin/AdminContentBlock.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { CSSTransition } from 'react-transition-group'; +import tw from 'twin.macro'; +import FlashMessageRender from '@/components/FlashMessageRender'; + +const PageContentBlock: React.FC<{ showFlashKey?: string; className?: string }> = ({ children, showFlashKey }) => ( + + <> + {showFlashKey && + + } + {children} + + {/*

+ © 2015 - 2020  + + Pterodactyl Software + +

*/} + + +); + +export default PageContentBlock; diff --git a/resources/scripts/components/admin/api/ApiKeysContainer.tsx b/resources/scripts/components/admin/api/ApiKeysContainer.tsx new file mode 100644 index 000000000..899296c26 --- /dev/null +++ b/resources/scripts/components/admin/api/ApiKeysContainer.tsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; +import Button from '@/components/elements/Button'; +import Spinner from '@/components/elements/Spinner'; + +export default () => { + const [ loading ] = useState(false); + const [ keys ] = useState([]); + + return ( + +
+
+

API Keys

+

Control access credentials for managing this Panel via the API.

+
+ + +
+ +
+
+ { loading ? +
+ +
+ : + keys.length < 1 ? +
+
+ {'No +
+ +

No items could be found, it's almost like they are hiding.

+
+ : + null + } +
+
+ + ); +}; diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx new file mode 100644 index 000000000..f99f86029 --- /dev/null +++ b/resources/scripts/components/admin/databases/DatabasesContainer.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; +import Button from '@/components/elements/Button'; + +export default () => { + return ( + +
+
+

Databases

+

Database hosts that servers can have databases created on.

+
+ + +
+ + ); +}; diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx new file mode 100644 index 000000000..9eedb1702 --- /dev/null +++ b/resources/scripts/components/admin/locations/LocationsContainer.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; +import Button from '@/components/elements/Button'; + +export default () => { + return ( + +
+
+

Locations

+

All locations that nodes can be assigned to for easier categorization.

+
+ + +
+ + ); +}; diff --git a/resources/scripts/components/admin/mounts/MountsContainer.tsx b/resources/scripts/components/admin/mounts/MountsContainer.tsx new file mode 100644 index 000000000..128cf74bc --- /dev/null +++ b/resources/scripts/components/admin/mounts/MountsContainer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; + +export default () => { + return ( + +
+

Mounts

+

SoonTM

+
+ + ); +}; diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx new file mode 100644 index 000000000..a694f6332 --- /dev/null +++ b/resources/scripts/components/admin/nests/NestsContainer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; + +export default () => { + return ( + +
+

Nests

+

All nests currently available on this system.

+
+ + ); +}; diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx new file mode 100644 index 000000000..6038e3a41 --- /dev/null +++ b/resources/scripts/components/admin/nodes/NodesContainer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; + +export default () => { + return ( + +
+

Nodes

+

All nodes available on the system.

+
+ + ); +}; diff --git a/resources/scripts/components/admin/overview/OverviewContainer.tsx b/resources/scripts/components/admin/overview/OverviewContainer.tsx index 8cd6a4e70..64c1f1a66 100644 --- a/resources/scripts/components/admin/overview/OverviewContainer.tsx +++ b/resources/scripts/components/admin/overview/OverviewContainer.tsx @@ -1,7 +1,14 @@ import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; export default () => { return ( -

Overview

+ +
+

Overview

+

A quick glance at your system.

+
+ ); }; diff --git a/resources/scripts/components/admin/packs/PacksContainer.tsx b/resources/scripts/components/admin/packs/PacksContainer.tsx new file mode 100644 index 000000000..de9b06353 --- /dev/null +++ b/resources/scripts/components/admin/packs/PacksContainer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; + +export default () => { + return ( + +
+

Packs

+

All service packs available on the system.

+
+ + ); +}; diff --git a/resources/scripts/components/admin/servers/ServersContainer.tsx b/resources/scripts/components/admin/servers/ServersContainer.tsx new file mode 100644 index 000000000..b175303ed --- /dev/null +++ b/resources/scripts/components/admin/servers/ServersContainer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; + +export default () => { + return ( + +
+

Servers

+

All servers available on the system.

+
+ + ); +}; diff --git a/resources/scripts/components/admin/settings/SettingsContainer.tsx b/resources/scripts/components/admin/settings/SettingsContainer.tsx index 4dfc8acc6..f0eda8eb1 100644 --- a/resources/scripts/components/admin/settings/SettingsContainer.tsx +++ b/resources/scripts/components/admin/settings/SettingsContainer.tsx @@ -1,7 +1,14 @@ import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; export default () => { return ( -

Settings

+ +
+

Settings

+

Configure and manage settings for Pterodactyl.

+
+ ); }; diff --git a/resources/scripts/components/admin/users/UsersContainer.tsx b/resources/scripts/components/admin/users/UsersContainer.tsx new file mode 100644 index 000000000..76375beb0 --- /dev/null +++ b/resources/scripts/components/admin/users/UsersContainer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import tw from 'twin.macro'; +import AdminContentBlock from '@/components/admin/AdminContentBlock'; + +export default () => { + return ( + +
+

Users

+

All registered users on the system.

+
+ + ); +}; diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx index 0968a2340..d2ad6efec 100644 --- a/resources/scripts/routers/AdminRouter.tsx +++ b/resources/scripts/routers/AdminRouter.tsx @@ -8,6 +8,15 @@ import tw from 'twin.macro'; import styled from 'styled-components/macro'; import { useStoreState } from 'easy-peasy'; import { ApplicationStore } from '@/state'; +import ApiKeysContainer from '@/components/admin/api/ApiKeysContainer'; +import DatabasesContainer from '@/components/admin/databases/DatabasesContainer'; +import NodesContainer from '@/components/admin/nodes/NodesContainer'; +import LocationsContainer from '@/components/admin/locations/LocationsContainer'; +import ServersContainer from '@/components/admin/servers/ServersContainer'; +import UsersContainer from '@/components/admin/users/UsersContainer'; +import PacksContainer from '@/components/admin/packs/PacksContainer'; +import NestsContainer from '@/components/admin/nests/NestsContainer'; +import MountsContainer from '@/components/admin/mounts/MountsContainer'; const Sidebar = styled.div<{ collapsed?: boolean }>` ${tw`h-screen flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`}; @@ -73,11 +82,7 @@ export default ({ location, match }: RouteComponentProps) => { return (
-
{ - setCollapsed(!collapsed); - } - }> +
{ setCollapsed(!collapsed); } }> { !collapsed ?

{name}

: @@ -158,13 +163,29 @@ export default ({ location, match }: RouteComponentProps) => {
- - - - - - - +
+
+ {/* */} + + + + + + + + + + + + + + + + + + {/* */} +
+
); };