feat(settings): show error when web crypto api is not available

Author: GZTimeWalker

src/GZCTF/ClientApp/src/components/admin/SwitchLabel.tsx

@@ -1,12 +1,17 @@
 import { Stack, Text } from '@mantine/core'
 
-export const SwitchLabel = (title: string, desrc: string) => (
+export const SwitchLabel = (title: string, desrc: string, error?: null | string) => (
   <Stack gap={1}>
     <Text size="md" fw={500}>
       {title}
     </Text>
     <Text size="xs" c="dimmed">
       {desrc}
     </Text>
+    {error && (
+      <Text size="xs" c="alert" fw={500}>
+        {error}
+      </Text>
+    )}
   </Stack>
 )

src/GZCTF/ClientApp/src/locales/en-US/admin.json

@@ -298,7 +298,8 @@
       "platform": {
         "api_encryption": {
           "description": "Encrypt sensitive data in some APIs",
-          "label": "Enable API Encryption"
+          "label": "Enable API Encryption",
+          "not_available": "Web Crypto API is not available"
         },
         "color": {
           "description": "Custom color for the platform",

src/GZCTF/ClientApp/src/locales/zh-CN/admin.json

@@ -298,7 +298,8 @@
       "platform": {
         "api_encryption": {
           "description": "加密部分敏感数据，如用户密码、flag",
-          "label": "启用 API 数据加密"
+          "label": "启用 API 数据加密",
+          "not_available": "当前环境不支持 Web Crypto API"
         },
         "color": {
           "description": "自定义平台颜色，用于生成主题色盘",

src/GZCTF/ClientApp/src/pages/admin/Settings.tsx

@@ -27,6 +27,7 @@ import { LogoBox } from '@Components/LogoBox'
 import { AdminPage } from '@Components/admin/AdminPage'
 import { SwitchLabel } from '@Components/admin/SwitchLabel'
 import { showErrorNotification } from '@Utils/ApiHelper'
+import { isWebCryptoAvailable } from '@Utils/Crypto'
 import { IMAGE_MIME_TYPES } from '@Utils/Shared'
 import { OnceSWRConfig, useCaptchaConfig, useConfig } from '@Hooks/useConfig'
 import api, { AccountPolicy, ConfigEditModel, ContainerPolicy, GlobalConfig } from '@Api'
@@ -95,6 +96,7 @@ const Configs: FC = () => {
   }
 
   const colors = color && /^#[0-9A-F]{6}$/i.test(color) ? generateColors(color) : theme.colors.brand
+  const webCryptoAvailable = isWebCryptoAvailable()
 
   return (
     <AdminPage isLoading={!configs}>
@@ -239,10 +241,12 @@ const Configs: FC = () => {
             <Grid.Col span={1} className={misc.alignCenter}>
               <Switch
                 checked={globalConfig?.apiEncryption ?? false}
-                disabled={disabled}
+                disabled={disabled || !webCryptoAvailable}
+                readOnly
                 label={SwitchLabel(
                   t('admin.content.settings.platform.api_encryption.label'),
-                  t('admin.content.settings.platform.api_encryption.description')
+                  t('admin.content.settings.platform.api_encryption.description'),
+                  webCryptoAvailable ? null : t('admin.content.settings.platform.api_encryption.not_available')
                 )}
                 onChange={(e) =>
                   setGlobalConfig({

src/GZCTF/ClientApp/src/utils/Crypto.ts

@@ -67,7 +67,7 @@ async function encryptData(plainTextBytes: Uint8Array, recipientPublicKeyBase64:
   return result
 }
 
-function isWebCryptoAvailable(): boolean {
+export function isWebCryptoAvailable(): boolean {
   return typeof crypto !== 'undefined' && typeof crypto.subtle !== 'undefined'
 }