From 80ddef90798e4ee232cd5e0bbc8e53d68daf813d Mon Sep 17 00:00:00 2001
From: fero <hi@evan.graphics>
Date: Sat, 9 Mar 2024 12:02:07 -0700
Subject: [PATCH] chore: include package.json version and commit hash in panel

---
 package.json                                     |  3 ++-
 .../dashboard/AccountOverviewContainer.tsx       | 16 +++++++++++++---
 resources/scripts/components/elements/Code.tsx   |  4 ++--
 .../scripts/components/elements/ContentBox.tsx   |  8 +++-----
 .../scripts/routers/AuthenticationRouter.tsx     |  6 ++----
 resources/scripts/routers/DashboardRouter.tsx    |  4 ++--
 resources/scripts/vite-env.d.ts                  | 11 +++++++++++
 tsconfig.json                                    |  2 +-
 vite.config.ts                                   | 12 ++++++++++--
 9 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 resources/scripts/vite-env.d.ts

diff --git a/package.json b/package.json
index 6c73eafdc..5a6f64a37 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
-    "name": "pterodactyl-panel",
+    "name": "pyrodactyl",
+    "version": "0.40.0-alpha",
     "engines": {
         "node": ">=20.0"
     },
diff --git a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
index f4d48804e..c35457337 100644
--- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
@@ -5,12 +5,13 @@ import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFac
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import MessageBox from '@/components/MessageBox';
 import { useLocation } from 'react-router-dom';
+import Code from '../elements/Code';
 
 export default () => {
-    const { state } = useLocation<undefined | { twoFactorRedirect?: boolean }>();
+    const { state } = useLocation();
 
     return (
-        <PageContentBlock title={'Account Overview'}>
+        <PageContentBlock title={'Your Settings'}>
             <h1 className='text-[52px] font-extrabold leading-[98%] tracking-[-0.14rem] mb-8'>Your Settings</h1>
             {state?.twoFactorRedirect && (
                 <MessageBox title={'2-Factor Required'} type={'error'}>
@@ -18,7 +19,7 @@ export default () => {
                 </MessageBox>
             )}
 
-            <div className='flex flex-col w-full h-full'>
+            <div className='flex flex-col w-full h-full gap-8'>
                 <ContentBox title={'Update Password'} showFlashes={'account:password'}>
                     <UpdatePasswordForm />
                 </ContentBox>
@@ -28,6 +29,15 @@ export default () => {
                 <ContentBox title={'Two-Step Verification'}>
                     <ConfigureTwoFactorForm />
                 </ContentBox>
+                <ContentBox title={'Panel Version'}>
+                    <p className='text-sm mb-4'>
+                        This is useful to provide Pyro staff if you run into an unexpected issue.
+                    </p>
+                    <div className='flex flex-col gap-4'>
+                        <Code>{import.meta.env.VITE_PYRODACTYL_VERSION}</Code>
+                        <Code>Commit {import.meta.env.VITE_COMMIT_HASH.slice(0, 7)}</Code>
+                    </div>
+                </ContentBox>
             </div>
         </PageContentBlock>
     );
diff --git a/resources/scripts/components/elements/Code.tsx b/resources/scripts/components/elements/Code.tsx
index 74a0de365..34a199887 100644
--- a/resources/scripts/components/elements/Code.tsx
+++ b/resources/scripts/components/elements/Code.tsx
@@ -8,8 +8,8 @@ interface CodeProps {
 
 export default ({ dark, className, children }: CodeProps) => (
     <code
-        className={clsx('font-mono text-sm px-2 py-1 inline-block rounded', className, {
-            'bg-zinc-700': !dark,
+        className={clsx('font-mono text-sm px-2 py-1 inline-block rounded w-fit', className, {
+            'bg-zinc-900': !dark,
             'bg-zinc-900 text-zinc-100': dark,
         })}
     >
diff --git a/resources/scripts/components/elements/ContentBox.tsx b/resources/scripts/components/elements/ContentBox.tsx
index 7f976b4ae..d3f512cb5 100644
--- a/resources/scripts/components/elements/ContentBox.tsx
+++ b/resources/scripts/components/elements/ContentBox.tsx
@@ -11,11 +11,9 @@ type Props = Readonly<
 >;
 
 const ContentBox = ({ title, borderColor, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
-    <div {...props}>
-        {title && <h2 className={`text-zinc-300 mb-4 px-4 text-2xl`}>{title}</h2>}
-        {showFlashes && (
-            <FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} />
-        )}
+    <div className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl' {...props}>
+        {title && <h2 className={`font-extrabold mb-4  text-2xl`}>{title}</h2>}
+        {showFlashes && <FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} />}
         <div>
             <SpinnerOverlay visible={showLoadingOverlay || false} />
             {children}
diff --git a/resources/scripts/routers/AuthenticationRouter.tsx b/resources/scripts/routers/AuthenticationRouter.tsx
index b0b879a6d..a56dce5c6 100644
--- a/resources/scripts/routers/AuthenticationRouter.tsx
+++ b/resources/scripts/routers/AuthenticationRouter.tsx
@@ -1,4 +1,4 @@
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import LoginContainer from '@/components/auth/LoginContainer';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
@@ -7,8 +7,6 @@ import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer
 import { NotFound } from '@/components/elements/ScreenBlock';
 
 export default () => {
-    const navigate = useNavigate();
-
     return (
         <div
             style={{
@@ -21,7 +19,7 @@ export default () => {
                 <Route path='login/checkpoint/*' element={<LoginCheckpointContainer />} />
                 <Route path='password' element={<ForgotPasswordContainer />} />
                 <Route path='password/reset/:token' element={<ResetPasswordContainer />} />
-                <Route path='*' element={<NotFound onBack={() => navigate('/auth/login')} />} />
+                <Route path='*' element={<NotFound />} />
             </Routes>
         </div>
     );
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index ae10f874c..dfa20ae70 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -85,11 +85,11 @@ export default () => {
                 <div className='pyro-subnav-routes-wrapper'>
                     <NavLink to={'/'} end className='flex flex-row items-center'>
                         <HugeIconsHome fill='currentColor' />
-                        <p>Your Servers</p>
+                        <p>Servers</p>
                     </NavLink>
                     <NavLink to={'/account'} end className='flex flex-row items-center'>
                         <HugeIconsDashboardSettings fill='currentColor' />
-                        <p>Your Settings</p>
+                        <p>Settings</p>
                     </NavLink>
                 </div>
             </MainSidebar>
diff --git a/resources/scripts/vite-env.d.ts b/resources/scripts/vite-env.d.ts
new file mode 100644
index 000000000..f0fa21560
--- /dev/null
+++ b/resources/scripts/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_PYRODACTYL_VERSION: string;
+    readonly VITE_COMMIT_HASH: string;
+    readonly VITE_BRANCH_NAME: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 08a32981f..870d345f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -45,6 +45,6 @@
         "stripInternal": true,
         "useDefineForClassFields": true
     },
-    "include": ["./resources/scripts/**/*", "vite.config.ts"],
+    "include": ["./resources/scripts/**/*", "vite.config.ts", "./package.json"],
     "exclude": ["node_modules"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index e99073627..85e038e28 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,11 @@ import { fileURLToPath } from 'node:url';
 import manifestSRI from 'vite-plugin-manifest-sri';
 import { splitVendorChunkPlugin } from 'vite';
 import { defineConfig } from 'vite';
+import packageJson from './package.json';
+import * as child from 'child_process';
+
+const branchName = child.execSync('git rev-parse --abbrev-ref HEAD').toString().trimEnd();
+const commitHash = child.execSync('git rev-parse HEAD').toString().trimEnd();
 
 export default defineConfig({
     build: {
@@ -31,6 +36,9 @@ export default defineConfig({
     },
 
     define: {
+        'import.meta.env.VITE_PYRODACTYL_VERSION': JSON.stringify(packageJson.version),
+        'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(commitHash),
+        'import.meta.env.VITE_BRANCH_NAME': JSON.stringify(branchName),
         'process.env': {},
         'process.platform': null,
         'process.version': null,
@@ -62,7 +70,7 @@ export default defineConfig({
                 'resources',
                 'scripts',
                 'api',
-                'definitions'
+                'definitions',
             ),
             '@feature': resolve(
                 dirname(fileURLToPath(import.meta.url)),
@@ -70,7 +78,7 @@ export default defineConfig({
                 'scripts',
                 'components',
                 'server',
-                'features'
+                'features',
             ),
         },
     },