fix(web): fix real-name auth (#1504)

* fix(web): fix real-name auth * fix(web): 404 message
labring · Sep 1, 2023 · 212c873 · 212c873
1 parent afac36d
commit 212c873
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 85 deletions.
diff --git a/web/src/layouts/Basic/RealNameWarn.tsx b/web/src/layouts/Basic/RealNameWarn.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { WarningTwoIcon } from "@chakra-ui/icons";
+import { useColorMode } from "@chakra-ui/react";
+import clsx from "clsx";
 
 import SettingModal from "@/pages/app/setting";
 import useTabMatch from "@/pages/app/setting/UserSetting/useTabMatch";
@@ -12,12 +14,19 @@ export default function Warn() {
   const { userInfo, showError } = useGlobalStore((state) => state);
   const [openModal, setOpenModal] = useState(false);
   const { siteSettings } = useSiteSettingStore((state) => state);
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
 
   return (
-    <div className="absolute left-1/2 top-10 flex h-16 translate-x-[-50%] items-center justify-between rounded-lg bg-white px-4 text-lg drop-shadow-md">
+    <div
+      className={clsx(
+        "absolute left-1/2 top-10 flex h-16 translate-x-[-50%] items-center justify-between rounded-lg px-4 text-lg drop-shadow-md",
+        darkMode ? "bg-gray-800" : "bg-white",
+      )}
+    >
       <span className="flex items-center pr-9">
         <WarningTwoIcon className="mr-2 !text-error-600" />
-        <p>{siteSettings.id_verify?.metadata.message}</p>
+        <p dangerouslySetInnerHTML={{ __html: siteSettings.id_verify?.metadata.message }} />
       </span>
       <p
         className="cursor-pointer font-semibold text-[#219BF4]"

diff --git a/web/src/layouts/Basic/index.tsx b/web/src/layouts/Basic/index.tsx
@@ -6,12 +6,14 @@ import { Center, Spinner } from "@chakra-ui/react";
 import Warn from "./RealNameWarn";
 
 import Header from "@/layouts/Header";
+import useAuthStore from "@/pages/auth/store";
 import useGlobalStore from "@/pages/globalStore";
 import useSiteSettingStore from "@/pages/siteSetting";
 
 export default function BasicLayout() {
   const { init, loading, userInfo } = useGlobalStore((state) => state);
   const { siteSettings } = useSiteSettingStore((state) => state);
+  const { providers } = useAuthStore((state) => state);
 
   useEffect(() => {
     init();
@@ -27,7 +29,8 @@ export default function BasicLayout() {
         ) : (
           <>
             {siteSettings.id_verify?.value === "on" &&
-              !userInfo?.profile?.idVerified?.isVerified && <Warn />}
+              !userInfo?.profile?.idVerified?.isVerified &&
+              providers.find((provider: any) => provider.name === "phone") && <Warn />}
             <Outlet />
           </>
         )}

diff --git a/web/src/pages/app/setting/UserInfo/Mods/PhoneEditor.tsx b/web/src/pages/app/setting/UserInfo/Mods/PhoneEditor.tsx
@@ -16,6 +16,7 @@ import SmsCodeInput from "@/components/SmsCodeInput";
 
 import { useBindPhoneMutation } from "../service";
 
+import useAuthStore from "@/pages/auth/store";
 import useGlobalStore from "@/pages/globalStore";
 
 type FormData = {
@@ -29,6 +30,7 @@ export default function PhoneEditor(props: { handleBack: any }) {
   const { handleBack } = props;
   const { t } = useTranslation();
   const bindPhone = useBindPhoneMutation();
+  const { providers } = useAuthStore();
 
   const { showSuccess, updateUserInfo } = useGlobalStore();
 
@@ -67,32 +69,36 @@ export default function PhoneEditor(props: { handleBack: any }) {
       <VStack>
         <span className="text-xl">{t("UserInfo.EditPhone")}</span>
         <Box className="w-[265px] pt-4">
-          <FormControl isInvalid={!!errors?.oldPhoneNumber}>
-            <div className="pb-2">{t("UserInfo.OldPhoneNumber")}</div>
-            <InputGroup>
-              <Input {...register("oldPhoneNumber", { required: true })} variant="userInfo" />
-              <InputRightElement width="6rem" height={8}>
-                <SendSmsCodeButton
-                  getPhone={getValues}
-                  phoneNumber={"oldPhoneNumber"}
-                  className="!h-6 !text-[12px]"
-                  type="Unbind"
+          {providers?.find((provider: any) => provider.name === "phone") || (
+            <>
+              <FormControl isInvalid={!!errors?.oldPhoneNumber}>
+                <div className="pb-2">{t("UserInfo.OldPhoneNumber")}</div>
+                <InputGroup>
+                  <Input {...register("oldPhoneNumber", { required: true })} variant="userInfo" />
+                  <InputRightElement width="6rem" height={8}>
+                    <SendSmsCodeButton
+                      getPhone={getValues}
+                      phoneNumber={"oldPhoneNumber"}
+                      className="!h-6 !text-[12px]"
+                      type="Unbind"
+                    />
+                  </InputRightElement>
+                </InputGroup>
+              </FormControl>
+              <FormControl isInvalid={!!errors.oldSmsCode}>
+                <div className="pb-2 pt-4">{t("UserInfo.OldSmsNumber")}</div>
+                <Controller
+                  name="oldSmsCode"
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <div>
+                      <SmsCodeInput value={value} onChange={onChange} />
+                    </div>
+                  )}
                 />
-              </InputRightElement>
-            </InputGroup>
-          </FormControl>
-          <FormControl isInvalid={!!errors.oldSmsCode}>
-            <div className="pb-2 pt-4">{t("UserInfo.OldSmsNumber")}</div>
-            <Controller
-              name="oldSmsCode"
-              control={control}
-              render={({ field: { onChange, value } }) => (
-                <div>
-                  <SmsCodeInput value={value} onChange={onChange} />
-                </div>
-              )}
-            />
-          </FormControl>
+              </FormControl>
+            </>
+          )}
           <FormControl isInvalid={!!errors.newPhoneNumber}>
             <div className="pb-2 pt-4">{t("UserInfo.NewPhoneNumber")}</div>
             <InputGroup>

diff --git a/web/src/pages/app/setting/UserInfo/index.tsx b/web/src/pages/app/setting/UserInfo/index.tsx
@@ -15,6 +15,7 @@ import UsernameEditor from "./Mods/UsernameEditor";
 
 import "react-image-crop/dist/ReactCrop.css";
 
+import useAuthStore from "@/pages/auth/store";
 import useGlobalStore from "@/pages/globalStore";
 import useSiteSettingStore from "@/pages/siteSetting";
 
@@ -26,6 +27,7 @@ export default function UserInfo() {
   const { colorMode } = useColorMode();
   const darkMode = colorMode === "dark";
   const { siteSettings } = useSiteSettingStore((state) => state);
+  const { providers } = useAuthStore((state) => state);
 
   const handleClick = () => {
     if (fileInputRef.current) {
@@ -113,69 +115,74 @@ export default function UserInfo() {
               </span>
             </div>
             <Divider className="mb-4 text-grayModern-200" />
-            {siteSettings.id_verify?.value === "on" && (
+            {providers?.find((provider: any) => provider.name === "phone") &&
+              siteSettings.id_verify?.value === "on" && (
+                <div className="flex flex-col pb-4">
+                  <span
+                    className={clsx(
+                      "flex items-center pb-3 text-xl",
+                      !darkMode && "text-grayModern-900",
+                    )}
+                  >
+                    {t("SettingPanel.Auth")}
+                    {!userInfo?.profile?.idVerified?.isVerified && (
+                      <InfoOutlineIcon className="ml-2 !text-primary-600" />
+                    )}
+                  </span>
+                  <span className="flex justify-between text-base">
+                    <span className={!darkMode ? "text-grayModern-700" : ""}>
+                      {userInfo?.profile?.idVerified?.isVerified
+                        ? userInfo?.profile?.name
+                        : t("UserInfo.NoAuth")}
+                    </span>
+                    {!userInfo?.profile?.idVerified?.isVerified ? (
+                      <span
+                        className="flex cursor-pointer items-center text-[#0884DD]"
+                        onClick={() => {
+                          if (userInfo?.phone) {
+                            const w = window.open("about:blank");
+                            w!.location.href = `${
+                              siteSettings.id_verify?.metadata.authenticateSite
+                            }?token=${localStorage.getItem("token")}`;
+                          } else {
+                            showError(t("UserInfo.PleaseBindPhone"));
+                            setShowItem("phone");
+                          }
+                        }}
+                      >
+                        {t("UserInfo.GotoAuth")} <ChevronRightIcon boxSize={5} />
+                      </span>
+                    ) : (
+                      <span className="flex items-center">
+                        <span className="mr-2 text-[#485058]">
+                          {t("UserInfo.VerifiedIdentity")}
+                        </span>
+                        <CheckCircleIcon className="!text-primary-600" />
+                      </span>
+                    )}
+                  </span>
+                </div>
+              )}
+            {providers.find((provider: any) => provider.name === "phone") && (
               <div className="flex flex-col pb-4">
-                <span
-                  className={clsx(
-                    "flex items-center pb-3 text-xl",
-                    !darkMode && "text-grayModern-900",
-                  )}
-                >
-                  {t("SettingPanel.Auth")}
-                  {!userInfo?.profile?.idVerified?.isVerified && (
-                    <InfoOutlineIcon className="ml-2 !text-primary-600" />
-                  )}
+                <span className={clsx("pb-3 text-xl", !darkMode && "text-grayModern-900")}>
+                  {t("SettingPanel.Tel")}
                 </span>
                 <span className="flex justify-between text-base">
                   <span className={!darkMode ? "text-grayModern-700" : ""}>
-                    {userInfo?.profile?.idVerified?.isVerified
-                      ? userInfo?.profile?.name
-                      : t("UserInfo.NoAuth")}
+                    {userInfo?.phone ? hidePhoneNumber(userInfo.phone) : t("NoInfo")}
+                  </span>
+                  <span
+                    className="flex cursor-pointer items-center text-[#0884DD]"
+                    onClick={() => {
+                      setShowItem("phone");
+                    }}
+                  >
+                    {t("UserInfo.Change")} <ChevronRightIcon boxSize={5} />
                   </span>
-                  {!userInfo?.profile?.idVerified?.isVerified ? (
-                    <span
-                      className="flex cursor-pointer items-center text-[#0884DD]"
-                      onClick={() => {
-                        if (userInfo?.phone) {
-                          const w = window.open("about:blank");
-                          w!.location.href = `${
-                            siteSettings.id_verify?.metadata.authenticateSite
-                          }?token=${localStorage.getItem("token")}`;
-                        } else {
-                          showError(t("UserInfo.PleaseBindPhone"));
-                          setShowItem("phone");
-                        }
-                      }}
-                    >
-                      {t("UserInfo.GotoAuth")} <ChevronRightIcon boxSize={5} />
-                    </span>
-                  ) : (
-                    <span className="flex items-center">
-                      <span className="mr-2 text-[#485058]">{t("UserInfo.VerifiedIdentity")}</span>
-                      <CheckCircleIcon className="!text-primary-600" />
-                    </span>
-                  )}
                 </span>
               </div>
             )}
-            <div className="flex flex-col pb-4">
-              <span className={clsx("pb-3 text-xl", !darkMode && "text-grayModern-900")}>
-                {t("SettingPanel.Tel")}
-              </span>
-              <span className="flex justify-between text-base">
-                <span className={!darkMode ? "text-grayModern-700" : ""}>
-                  {userInfo?.phone ? hidePhoneNumber(userInfo.phone) : t("NoInfo")}
-                </span>
-                <span
-                  className="flex cursor-pointer items-center text-[#0884DD]"
-                  onClick={() => {
-                    setShowItem("phone");
-                  }}
-                >
-                  {t("UserInfo.Change")} <ChevronRightIcon boxSize={5} />
-                </span>
-              </span>
-            </div>
             <div className="flex flex-col pb-4">
               <span className={clsx("pb-3 text-xl", !darkMode && "text-grayModern-900")}>
                 {t("SettingPanel.Email")}

diff --git a/web/src/utils/request.ts b/web/src/utils/request.ts
@@ -65,15 +65,15 @@ request.interceptors.response.use(
         return data;
       } else if (data.statusCode === 403) {
         toast({
-          title: "403 Forbidden",
+          title: data.message ? data.message : "403 Forbidden",
           position: "top",
           status: "error",
           duration: 1000,
         });
         return data;
       } else if (data.statusCode === 404) {
         toast({
-          title: "404 Not Found",
+          title: data.message ? data.message : "404 Not Found",
           position: "top",
           status: "error",
           duration: 1000,