feat: show secret in 2fa page (close AlistGo/alist#4555)

src/lang/en/users.json

@@ -28,6 +28,7 @@
   "cancel_2fa_success": "Cancel 2FA successfully",
   "2fa_already_enabled": "2FA is already enabled",
   "scan_qr": "Scan the QR code to save the secret key",
+  "or_manual": "Or input the secret key manually",
   "input_code": "Input the code of your 2FA app",
   "verify": "Verify",
   "guest-tips": "You are currently visiting as a guest.",

src/pages/manage/users/2fa.tsx

@@ -1,8 +1,8 @@
-import { Button, Heading, Image, Input, VStack } from "@hope-ui/solid"
+import { Button, Heading, Image, Input, Text, VStack } from "@hope-ui/solid"
 import { createSignal, Show } from "solid-js"
 import { MaybeLoading } from "~/components"
 import { useRouter, useFetch, useT } from "~/hooks"
-import { setMe, me } from "~/store"
+import { setMe, me, getMainColor } from "~/store"
 import { PEmptyResp, PResp } from "~/types"
 import { handleResp, handleRespWithNotifySuccess, notify, r } from "~/utils"
 
@@ -49,6 +49,10 @@ const TwoFA = () => {
         <VStack spacing="$2" alignItems="start">
           <Heading>{t("users.scan_qr")}</Heading>
           <Image boxSize="$xs" rounded="$lg" src={otpData()?.qr} />
+          <Heading>
+            {t("users.or_manual")}:{" "}
+            <Text color={getMainColor()}>{otpData()?.secret}</Text>
+          </Heading>
           <Input
             maxW="$xs"
             placeholder={t("users.input_code")}