frontend: add banner

GZTimeWalker · May 5, 2023 · 634dd73 · 634dd73
1 parent 1858151
commit 634dd73
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/src/GZCTF/ClientApp/src/App.tsx b/src/GZCTF/ClientApp/src/App.tsx
@@ -14,6 +14,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { ModalsProvider } from '@mantine/modals'
 import { Notifications } from '@mantine/notifications'
 import { ThemeOverride } from '@Utils/ThemeOverride'
+import { useBanner } from '@Utils/useConfig'
 import { fetcher } from '@Api'
 
 export const App: FC = () => {
@@ -26,6 +27,8 @@ export const App: FC = () => {
   const toggleColorScheme = (value?: ColorScheme) =>
     setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))
 
+  useBanner()
+
   return (
     <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
       <MantineProvider withGlobalStyles withCSSVariables theme={{ ...ThemeOverride, colorScheme }}>

diff --git a/src/GZCTF/ClientApp/src/pages/About.tsx b/src/GZCTF/ClientApp/src/pages/About.tsx
@@ -21,6 +21,7 @@ const sha = import.meta.env.VITE_APP_GIT_SHA ?? 'unknown'
 const tag = import.meta.env.VITE_APP_GIT_NAME ?? 'unknown'
 const timestamp = import.meta.env.VITE_APP_BUILD_TIMESTAMP ?? ''
 const builtdate = import.meta.env.DEV ? dayjs() : dayjs(timestamp)
+const repo = 'https://github.com/GZTimeWalker/GZCTF'
 
 const useStyles = createStyles((theme) => ({
   title: {
@@ -77,7 +78,7 @@ const About: FC = () => {
           <HoverCard shadow="md" position="top-end" withArrow openDelay={200} closeDelay={400}>
             <HoverCard.Target>
               <Badge
-                onClick={() => window.open('https://github.com/GZTimeWalker/GZCTF')}
+                onClick={() => window.open(repo)}
                 style={{
                   cursor: 'pointer',
                 }}

diff --git a/src/GZCTF/ClientApp/src/utils/useConfig.ts b/src/GZCTF/ClientApp/src/utils/useConfig.ts
@@ -1,7 +1,14 @@
-import { useEffect } from 'react'
+import dayjs from 'dayjs'
+import { useEffect, useRef } from 'react'
 import { useLocalStorage } from '@mantine/hooks'
 import api, { GlobalConfig } from '@Api'
 
+const sha = import.meta.env.VITE_APP_GIT_SHA ?? 'unknown'
+const tag = import.meta.env.VITE_APP_GIT_NAME ?? 'unknown'
+const timestamp = import.meta.env.VITE_APP_BUILD_TIMESTAMP ?? ''
+const builtdate = import.meta.env.DEV ? dayjs() : dayjs(timestamp)
+const repo = 'https://github.com/GZTimeWalker/GZCTF'
+
 export const useConfig = () => {
   const {
     data: config,
@@ -33,3 +40,47 @@ export const useConfig = () => {
 
   return { config: config ?? globalConfig, error, mutate }
 }
+
+const showBanner = () => {
+  const valid =
+    timestamp.length === 25 && builtdate.isValid() && sha.length === 40 && tag.length > 0
+  const rst = '\x1b[0m'
+  const bold = '\x1b[1m'
+  const brand = '\x1b[38;2;4;202;171m'
+  const alert = '\x1b[38;2;254;48;48m'
+  const padding = ' '.repeat(45)
+
+  const showtag = valid ? `${brand}${tag}` : `${alert}Unknown`
+  const commit = valid ? `${brand}${sha}` : `${alert}Unofficial build version`
+
+  const title = `
+ ██████╗ ███████╗ ${brand}        ${rst}  ██████╗████████╗███████╗
+██╔════╝ ╚══███╔╝ ${brand} ██╗██╗ ${rst} ██╔════╝╚══██╔══╝██╔════╝
+██║  ███╗  ███╔╝  ${brand} ╚═╝╚═╝ ${rst} ██║        ██║   █████╗
+██║   ██║ ███╔╝   ${brand} ██╗██╗ ${rst} ██║        ██║   ██╔══╝
+╚██████╔╝███████╗ ${brand} ╚═╝╚═╝ ${rst} ╚██████╗   ██║   ██║
+ ╚═════╝ ╚══════╝ ${brand}        ${rst}  ╚═════╝   ╚═╝   ╚═╝
+
+${padding}${bold}@ ${showtag}${rst}
+`
+
+  console.log(
+    `${title}` +
+      `\n${bold}Copyright (C) 2022-now, GZTimeWalker, All rights reserved.${rst}\n` +
+      `\n${bold}License  : ${brand}GNU Affero General Public License v3.0${rst}` +
+      `\n${bold}Commit   : ${commit}${rst}` +
+      `\n${bold}Built at : ${brand}${builtdate.format('YYYY-MM-DDTHH:mm:ssZ')}${rst}` +
+      `\n${bold}Issues   : ${repo}/issues` +
+      '\n'
+  )
+}
+
+export const useBanner = () => {
+  const mounted = useRef(false)
+  useEffect(() => {
+    if (!mounted.current) {
+      showBanner()
+      mounted.current = true
+    }
+  }, [])
+}