From 13c92f60c6c04c38049ea3f89d41eb81d8c96922 Mon Sep 17 00:00:00 2001
From: GZTime <Time.GZ@outlook.com>
Date: Sat, 27 Aug 2022 21:14:52 +0800
Subject: [PATCH] fix: MIME_TYPE when upload images

---
 GZCTF/ClientApp/src/components/ChallengePanel.tsx   | 2 +-
 GZCTF/ClientApp/src/components/TeamEditModal.tsx    | 3 ++-
 GZCTF/ClientApp/src/pages/account/Profile.tsx       | 3 ++-
 GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx | 3 ++-
 GZCTF/ClientApp/src/utils/ThemeOverride.ts          | 2 ++
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/GZCTF/ClientApp/src/components/ChallengePanel.tsx
index d1ae5b366..3321139d4 100644
--- a/GZCTF/ClientApp/src/components/ChallengePanel.tsx
+++ b/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -33,7 +33,7 @@ const ChallengePanel: FC = () => {
   const tags = Object.keys(challenges ?? {})
   const [activeTab, setActiveTab] = useState<ChallengeTag | 'All'>('All')
   const [hideSolved, setHideSolved] = useLocalStorage({
-    key: 'hideSolved',
+    key: 'hide-solved',
     defaultValue: false,
   })
 
diff --git a/GZCTF/ClientApp/src/components/TeamEditModal.tsx b/GZCTF/ClientApp/src/components/TeamEditModal.tsx
index c1f4a93de..07012e029 100644
--- a/GZCTF/ClientApp/src/components/TeamEditModal.tsx
+++ b/GZCTF/ClientApp/src/components/TeamEditModal.tsx
@@ -26,6 +26,7 @@ import { mdiCheck, mdiClose, mdiCloseCircle, mdiRefresh, mdiCrown } from '@mdi/j
 import { Icon } from '@mdi/react'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import api, { TeamInfoModel, TeamUserInfoModel } from '@Api'
+import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
 
 interface TeamEditModalProps extends ModalProps {
   team: TeamInfoModel | null
@@ -334,7 +335,7 @@ const TeamEditModal: FC<TeamEditModalProps> = (props) => {
             minHeight: '220px',
           }}
           maxSize={3 * 1024 * 1024}
-          accept={['image/png', 'image/gif', 'image/jpeg']}
+          accept={ACCEPT_IMAGE_MIME_TYPE}
         >
           <Group position="center" spacing="xl" style={{ minHeight: 240, pointerEvents: 'none' }}>
             {avatarFile ? (
diff --git a/GZCTF/ClientApp/src/pages/account/Profile.tsx b/GZCTF/ClientApp/src/pages/account/Profile.tsx
index b490a29b7..5198af839 100644
--- a/GZCTF/ClientApp/src/pages/account/Profile.tsx
+++ b/GZCTF/ClientApp/src/pages/account/Profile.tsx
@@ -25,6 +25,7 @@ import WithNavBar from '@Components/WithNavbar'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import { usePageTitle } from '@Utils/PageTitle'
 import api, { ProfileUpdateModel } from '@Api'
+import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
 
 const Profile: FC = () => {
   const [dropzoneOpened, setDropzoneOpened] = useState(false)
@@ -306,7 +307,7 @@ const Profile: FC = () => {
                 minHeight: '220px',
               }}
               maxSize={3 * 1024 * 1024}
-              accept={['image/png', 'image/gif', 'image/jpeg']}
+              accept={ACCEPT_IMAGE_MIME_TYPE}
             >
               <Group
                 position="center"
diff --git a/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx b/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx
index 538c4d6b6..51dc6dec9 100644
--- a/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx
+++ b/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx
@@ -23,6 +23,7 @@ import { Icon } from '@mdi/react'
 import WithGameEditTab from '@Components/admin/WithGameEditTab'
 import { showErrorNotification } from '@Utils/ApiErrorHandler'
 import api, { GameInfoModel } from '@Api'
+import { ACCEPT_IMAGE_MIME_TYPE } from '@Utils/ThemeOverride'
 
 const GameInfoEdit: FC = () => {
   const { id } = useParams()
@@ -246,7 +247,7 @@ const GameInfoEdit: FC = () => {
                 })
               }}
               maxSize={3 * 1024 * 1024}
-              accept={['image/png', 'image/gif', 'image/jpeg']}
+              accept={ACCEPT_IMAGE_MIME_TYPE}
               disabled={disabled}
               styles={{
                 root: {
diff --git a/GZCTF/ClientApp/src/utils/ThemeOverride.ts b/GZCTF/ClientApp/src/utils/ThemeOverride.ts
index a2c9d11bf..740863fd1 100644
--- a/GZCTF/ClientApp/src/utils/ThemeOverride.ts
+++ b/GZCTF/ClientApp/src/utils/ThemeOverride.ts
@@ -112,3 +112,5 @@ export const useTooltipStyles = createStyles((theme) => ({
     color: theme.colorScheme === 'dark' ? theme.colors.white[2] : theme.colors.gray[7],
   },
 }))
+
+export declare const ACCEPT_IMAGE_MIME_TYPE: ("image/png" | "image/gif" | "image/jpeg" | "image/webp")[];