chore: version checker for remark

public/locales/en/chat.json

@@ -67,7 +67,7 @@
   "only_owner_can_send": "only Channel owner can send message!",
 
   "remark": "Add friend nickname",
-  "remark_clear": "reset friend nickname",
+  "remark_clear": "Reset friend nickname",
   "remark_intro": "Find a friend faster with a personal nickname. It will only be visible to you in your direct messages.",
   "remark_placeholder": "Set Nickname"
 }

src/app/services/base.query.ts

@@ -28,14 +28,14 @@ const whiteList = [
   "getBotRelatedChannels",
   "sendMessageByBot",
   "getAgoraVoicingList",
-  "preCheckFileFromUrl"
+  "preCheckFileFromUrl",
 ];
 const whiteList401 = ["getAgoraVoicingList", "getAgoraChannels"];
 const errorWhiteList = [
   "preCheckFileFromUrl",
   "getFavoriteDetails",
   "getOGInfo",
-  "getArchiveMessage"
+  "getArchiveMessage",
 ];
 const whiteList404 = [
   "login",
@@ -43,7 +43,7 @@ const whiteList404 = [
   "preCheckFileFromUrl",
   "deleteMessage",
   "deleteMessages",
-  "getWidgetExtCSS"
+  "getWidgetExtCSS",
 ];
 const baseQuery = fetchBaseQuery({
   baseUrl: BASE_URL,
@@ -58,7 +58,7 @@ const baseQuery = fetchBaseQuery({
       headers.set(tokenHeader, token);
     }
     return headers;
-  }
+  },
 });
 
 let waitingForRenew: null | any = null;
@@ -79,8 +79,8 @@ const baseQueryWithTokenCheck = async (args: any, api: any, extraOptions: any) =
         method: "POST",
         body: {
           token,
-          refresh_token: refreshToken
-        }
+          refresh_token: refreshToken,
+        },
       },
       api,
       extraOptions
@@ -122,7 +122,7 @@ const baseQueryWithTokenCheck = async (args: any, api: any, extraOptions: any) =
         break;
       case 403:
         {
-          const whiteList403 = ["sendMsg"];
+          const whiteList403 = ["sendMsg", "login"];
           if (!whiteList403.includes(api.endpoint)) {
             toast.error("Request Not Allowed");
           }

src/components/NicknameModal.tsx

@@ -6,6 +6,7 @@ import { useUpdateRemarkMutation } from "../app/services/user";
 import { useAppSelector } from "../app/store";
 import { ChangeEvent, useState } from "react";
 import toast from "react-hot-toast";
+import ServerVersionChecker from "./ServerVersionChecker";
 
 type Props = {
   uid: number;
@@ -33,34 +34,33 @@ const NicknameModal = ({ visible, updateVisible, uid }: Props) => {
   if (!visible) return null;
   return (
     <Modal>
-      <div className="px-3 py-4 flex flex-col bg-white dark:bg-gray-900 rounded-lg max-h-[85vh] overflow-y-scroll  md:min-w-[408px] relative">
-        <h2 className="z-50 py-2 bg-white dark:bg-gray-900 flex items-center justify-between text-lg text-gray-700 dark:text-gray-50 sticky top-0">
-          {t("remark")}
-        </h2>
-        <p className="text-sm text-gray-500">{t("remark_intro")}</p>
-        <div className="py-2 flex flex-col gap-2 items-start my-4">
-          {/* <label className="dark:text-white text-sm pb-2" htmlFor="nickname">
+      <ServerVersionChecker version="0.5.0">
+        <div className="px-4 py-4 flex flex-col bg-white dark:bg-gray-900 max-w-96 rounded-lg relative">
+          <h2 className="z-50 py-2 bg-white dark:bg-gray-900 flex items-center justify-between text-lg text-gray-700 dark:text-gray-50 sticky top-0">
             {t("remark")}
-          </label> */}
-          <Input
-            placeholder={t("remark_placeholder")}
-            name="nickname"
-            value={input}
-            onChange={handleChange}
-          />
-          <button onClick={setInput.bind(null, "")} className="text-primary-500 text-sm">
-            {t("remark_clear")}
-          </button>
+          </h2>
+          <p className="text-sm text-gray-500">{t("remark_intro")}</p>
+          <div className="py-2 flex flex-col gap-2 items-start my-4">
+            <Input
+              placeholder={t("remark_placeholder")}
+              name="nickname"
+              value={input}
+              onChange={handleChange}
+            />
+            <button onClick={setInput.bind(null, "")} className="text-primary-500 text-sm">
+              {t("remark_clear")}
+            </button>
+          </div>
+          <div className="flex items-center gap-2 justify-end w-full">
+            <StyledButton disabled={isLoading} onClick={handleOK} className="small">
+              {ct("yes")}
+            </StyledButton>
+            <StyledButton onClick={updateVisible.bind(null, false)} className="small ghost">
+              {ct("cancel")}
+            </StyledButton>
+          </div>
         </div>
-        <div className="flex items-center gap-2 justify-end w-full">
-          <StyledButton disabled={isLoading} onClick={handleOK} className="small">
-            {ct("yes")}
-          </StyledButton>
-          <StyledButton onClick={updateVisible.bind(null, false)} className="small ghost">
-            {ct("cancel")}
-          </StyledButton>
-        </div>
-      </div>
+      </ServerVersionChecker>
     </Modal>
   );
 };

src/routes/login/index.tsx

@@ -72,6 +72,9 @@ export default function LoginPage() {
         case 404:
           toast.error("Username or Password incorrect");
           break;
+        case 403:
+          toast.error("Login method does not supported");
+          break;
         case 410:
           toast.error(
             "No associated account found, please contact user admin for an invitation link to join."