chore: include package.json version and commit hash in panel

package.json

@@ -1,5 +1,6 @@
 {
-    "name": "pterodactyl-panel",
+    "name": "pyrodactyl",
+    "version": "0.40.0-alpha",
     "engines": {
         "node": ">=20.0"
     },

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>
     );

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, {
+        className={clsx('font-mono text-sm px-2 py-1 inline-block rounded w-fit', className, {
-            'bg-zinc-700': !dark,
+            'bg-zinc-900': !dark,
             'bg-zinc-900 text-zinc-100': dark,
         })}
     >

resources/scripts/components/elements/ContentBox.tsx

@@ -11,11 +11,9 @@ type Props = Readonly<
 >;
 
 const ContentBox = ({ title, borderColor, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
-    <div {...props}>
+    <div className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl' {...props}>
-        {title && <h2 className={`text-zinc-300 mb-4 px-4 text-2xl`}>{title}</h2>}
+        {title && <h2 className={`font-extrabold mb-4  text-2xl`}>{title}</h2>}
-        {showFlashes && (
+        {showFlashes && <FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} />}
-            <FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} />
-        )}
         <div>
             <SpinnerOverlay visible={showLoadingOverlay || false} />
             {children}

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>
     );

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>

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;
+}

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"]
 }

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',
             ),
         },
     },