chore: i18n in toast

public/locales/en/common.json

@@ -47,6 +47,12 @@
   "status": {
     "uploading": "Uploading"
   },
+  "tip": {
+    "update": "Update Successfully!",
+    "delete": "Delete Successfully!",
+    "login": "Login Successfully!",
+    "logout": "Logout Successfully!"
+  },
   "new_version": "<0>New Version</0> Available",
   "mobile_app": "Check out our <0>Mobile APP</0>",
   "price": {
@@ -58,5 +64,11 @@
       "title": "VoceChat Supreme",
       "desc": "User Limit: No Limit"
     }
+  },
+  "server_update": {
+    "version_needed": "This function needs server version:<0>{{version}}</0> at least 🚨",
+    "current_version": "Your current version:<0>{{version}}</0>",
+    "update_tip": "Please upgrade the Server!",
+    "howto": "How to Update VoceChat Server"
   }
 }

public/locales/zh/common.json

@@ -49,6 +49,12 @@
   "status": {
     "uploading": "上传中"
   },
+  "tip": {
+    "update": "更新成功!",
+    "delete": "删除成功!",
+    "login": "登录成功!",
+    "logout": "退出成功!"
+  },
   "new_version": "有<0>新版本</0>",
   "mobile_app": "欢迎下载使用<0>手机APP</0>",
   "price": {
@@ -60,5 +66,11 @@
       "title": "VoceChat 终极版",
       "desc": "用户数限制: 无限制"
     }
+  },
+  "server_update": {
+    "version_needed": "支持该特性的最低Server版本:<0>{{version}}</0>",
+    "current_version": "当前的Server版本:<0>{{version}}</0>",
+    "update_tip": "请升级后端服务！",
+    "howto": "如何升级后端服务"
   }
 }

src/common/component/AutoDeleteMessages.tsx

@@ -21,6 +21,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
     const [updateSetting, { isSuccess }] = useUpdateAutoDeleteMsgMutation();
     const [value, setValue] = useState<number>(setting?.expires_in ?? 0);
     const { t } = useTranslation("setting", { keyPrefix: "auto_delete_msg" });
+    const { t: ct } = useTranslation();
     const options = [
         { title: t("off"), value: 0 },
         { title: t("5_min"), value: 5 * 60 },
@@ -41,7 +42,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
     };
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Update Successfully!");
+            toast.success(ct("tip.update"));
         }
     }, [isSuccess]);
     const originalVal = setting?.expires_in ?? 0;

src/common/component/GoogleLoginButton.tsx

@@ -61,12 +61,13 @@ interface Props {
 
 const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
   const { t } = useTranslation("auth");
+  const { t: ct } = useTranslation();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   //拿本地存的magic token
   const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
   useEffect(() => {
     if (isSuccess) {
-      toast.success("Login Successfully");
+      toast.success(ct("tip.login"));
       // navigateTo("/");
     }
   }, [isSuccess]);

src/common/component/ImagePreviewModal.tsx

@@ -49,17 +49,6 @@ const StyledWrapper = styled.div`
     &.loading .image img {
       filter: blur(2px);
     }
-
-    .origin {
-      font-weight: bold;
-      font-size: 14px;
-      color: #aaa;
-
-      &:hover {
-        text-decoration: underline;
-        color: #fff;
-      }
-    }
   }
 `;
 
@@ -117,13 +106,12 @@ const ImagePreviewModal: FC<Props> = ({ download = true, data, closeModal }) =>
             <img
               src={url}
               alt="preview"
-              className={`animate__animated animate__fadeIn animate__faster`}
             />
           </div>
           {download && (
             <a
               // onClick={handleDownload}
-              className="origin"
+              className="font-semibold text-sm text-gray-600 hover:underline hover:text-white"
               download={name}
               type={type}
               href={downloadLink || originUrl}

src/common/component/Loading.tsx

@@ -1,61 +1,41 @@
-import { FC } from "react";
-import styled, { keyframes } from "styled-components";
+import { FC, useState, useEffect } from "react";
+import clsx from "clsx";
 import { Ring } from "@uiball/loaders";
 import Button from "./styled/Button";
 import useLogout from "../hook/useLogout";
 
-const DelayVisible = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-const StyledWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  align-items: center;
-  justify-content: center;
-
-  &.fullscreen {
-    width: 100vw;
-    height: 100vh;
-  }
-
-  .reload {
-    opacity: 0;
-
-    &.visible {
-      animation: ${DelayVisible} 1s forwards;
-      animation-delay: 30s;
-    }
-  }
-`;
-
 interface Props {
   reload?: boolean;
   fullscreen?: boolean;
 }
 
 const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
+  const [reloadVisible, setReloadVisible] = useState(false);
   const { clearLocalData } = useLogout();
   const handleReload = () => {
     clearLocalData();
     location.reload();
   };
+  useEffect(() => {
+    let inter = 0;
+    if (reload) {
+      inter = window.setTimeout(() => {
+        setReloadVisible(true);
+      }, 30 * 1000);
+
+    }
+    return () => {
+      clearTimeout(inter);
+    };
+  }, [reload]);
 
   return (
-    <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
+    <div className={clsx("w-full h-full flex flex-col items-center justify-center gap-4", fullscreen ? "w-screen h-screen" : "")}>
       <Ring size={40} lineWeight={5} speed={2} color="black" />
-      <Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
+      <Button className={clsx(`danger`, reloadVisible ? "visible" : "invisible")} onClick={handleReload}>
         Reload
       </Button>
-    </StyledWrapper>
+    </div>
   );
 };
 

src/common/component/ManageMembers/index.tsx

@@ -33,7 +33,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
 
   useEffect(() => {
     if (updateSuccess) {
-      toast.success("Update Successfully");
+      toast.success(ct("tip.update"));
     }
   }, [updateSuccess]);
 

src/common/component/ServerVersionChecker.tsx

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useGetServerVersionQuery } from '../../app/services/server';
 import { compareVersion } from '../utils';
 
@@ -9,14 +10,24 @@ type Props = {
 }
 
 const ServerVersionChecker = ({ empty = false, version, children }: Props) => {
+  const { t } = useTranslation();
   const { data: currentVersion, isSuccess } = useGetServerVersionQuery();
   if (!isSuccess) return null;
   const res = compareVersion(currentVersion, version);
   if (res < 0) return empty ? null : <div className='flex flex-col gap-2 items-start border border-solid border-orange-500 p-3 rounded-lg'>
-    <span className='text-gray-400 text-sm'>This function needs server version:<strong className='font-bold'>{version}</strong> at least 🚨</span>
-    <span className='text-gray-400 text-sm'>Your current version:<strong className='font-bold'>{currentVersion}</strong></span>
-    <span className='text-gray-400 text-sm'>Please upgrade the Server!</span>
-    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">How to Update VoceChat Server 📖 </a>
+    <span className='text-gray-400 text-sm'>
+      <Trans i18nKey={"server_update.version_needed"}>
+        <strong className='font-bold'>{{ version }}</strong>
+      </Trans>
+    </span>
+    <span className='text-gray-400 text-sm'>
+      <Trans i18nKey={"server_update.current_version"}>
+        <strong className='font-bold'>{{ version: currentVersion }}</strong>
+      </Trans>
+    </span>
+    <span className='text-gray-400 text-sm'>{t("server_update.update_tip")}</span>
+    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">
+      {t("server_update.howto")}  📖 </a>
   </div>;
   return children;
 };

src/common/hook/useConfig.ts

@@ -12,6 +12,7 @@ import {
   useLazyGetLoginConfigQuery
 } from "../../app/services/server";
 import { AgoraConfig, FirebaseConfig, LoginConfig, SMTPConfig } from "../../types/server";
+import { useTranslation } from "react-i18next";
 // config: smtp agora login firebase
 type ConfigType = "smtp" | "agora" | "login" | "firebase";
 type ConfigMap = Record<ConfigType, AgoraConfig | FirebaseConfig | LoginConfig | SMTPConfig>;
@@ -19,6 +20,7 @@ type valuesOf<T> = T[keyof T];
 let originalValue: valuesOf<ConfigMap> | undefined = undefined;
 // type valueOf<T,config as ConfigType> = T[config];
 export default function useConfig(config: keyof ConfigMap = "smtp") {
+  const { t: ct } = useTranslation();
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState<valuesOf<ConfigMap> | undefined>(undefined);
   const [updateLoginConfig, { isSuccess: LoginUpdated, isLoading: LoginUpdating }] = useUpdateLoginConfigMutation();
@@ -77,7 +79,7 @@ export default function useConfig(config: keyof ConfigMap = "smtp") {
 
   useEffect(() => {
     if (updated) {
-      toast.success("Configuration Updated!");
+      toast.success(ct("tip.update"));
       // setChanged(false);
       refetch();
     }

src/common/hook/useUserOperation.ts

@@ -8,12 +8,14 @@ import { useLazyDeleteUserQuery } from "../../app/services/user";
 // import useConfig from "./useConfig";
 import useCopy from "./useCopy";
 import { useAppSelector } from "../../app/store";
+import { useTranslation } from "react-i18next";
 // import { AgoraConfig } from "../../types/server";
 interface IProps {
   uid?: number;
   cid?: number;
 }
 const useUserOperation = ({ uid, cid }: IProps) => {
+  const { t: ct } = useTranslation();
   const [passedUid, setPassedUid] = useState<number | undefined>(undefined);
   const isUserDetailPath = useMatch(`/users/${uid}`);
   const [removeUser, { isSuccess: removeUserSuccess }] = useLazyDeleteUserQuery();
@@ -34,7 +36,7 @@ const useUserOperation = ({ uid, cid }: IProps) => {
 
   useEffect(() => {
     if (removeSuccess || removeUserSuccess) {
-      toast.success("Remove Successfully");
+      toast.success(ct("tip.delete"));
       if (removeUserSuccess && isUserDetailPath) {
         navigateTo(`/users`);
       }

src/routes/callback/GithubCallback.tsx

@@ -3,12 +3,14 @@ import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
 import { useLoginMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import { useTranslation } from 'react-i18next';
 
 export type GithubLoginSource = "widget" | "webapp"
 type Props = {
     code: string, from?: GithubLoginSource
 }
 const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
+    const { t: ct } = useTranslation();
     //拿本地存的magic token
     const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
     const [login, { isLoading, isSuccess, error }] = useLoginMutation();
@@ -23,7 +25,7 @@ const GithubCallback: FC<Props> = ({ code, from = "webapp" }) => {
     }, [code]);
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Login Successfully");
+            toast.success(ct("tip.login"));
             // 通知widget
             if (from == 'widget') {
                 localStorage.setItem("widget", `${new Date().getTime()}`);

src/routes/login/SocialLoginButtons.tsx

@@ -10,12 +10,14 @@ import OidcLoginButton from "./OidcLoginButton";
 import { useLoginMutation } from '../../app/services/auth';
 import { LoginConfig } from '../../types/server';
 import { AuthType } from '../../types/common';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     type?: AuthType
 }
 
 const SocialLoginButtons = ({ type = "login" }: Props) => {
+    const { t: ct } = useTranslation();
     const [login, { isSuccess }] = useLoginMutation();
     const { config: githubAuthConfig } = useGithubAuthConfig();
     const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
@@ -23,7 +25,7 @@ const SocialLoginButtons = ({ type = "login" }: Props) => {
 
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Login Successfully");
+            toast.success(ct("tip.login"));
             // navigateTo("/");
         }
     }, [isSuccess]);

src/routes/login/index.tsx

@@ -18,6 +18,7 @@ import SocialLoginButtons from "./SocialLoginButtons";
 
 export default function LoginPage() {
   const { t } = useTranslation("auth");
+  const { t: ct } = useTranslation();
   const { data: enableSMTP } = useGetSMTPStatusQuery();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   const { clientId } = useGoogleAuthConfig();
@@ -82,7 +83,7 @@ export default function LoginPage() {
   }, [error]);
   useEffect(() => {
     if (isSuccess) {
-      toast.success("Login Successfully");
+      toast.success(ct("tip.login"));
       // navigateTo("/");
     }
   }, [isSuccess]);

src/routes/oauth/index.tsx

@@ -6,8 +6,10 @@ import { useNavigate, useParams } from "react-router-dom";
 import { useLoginMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
 import { setAuthData } from "../../app/slices/auth.data";
+import { useTranslation } from "react-i18next";
 
 export default function OAuthPage() {
+  const { t: ct } = useTranslation();
   const [login, { data, isSuccess, isError }] = useLoginMutation();
   const { token } = useParams();
   const [loading, setLoading] = useState(true);
@@ -36,7 +38,7 @@ export default function OAuthPage() {
     if (isSuccess && data) {
       setLoading(false);
       // 更新本地认证信息
-      toast.success("Login Successfully");
+      toast.success(ct("tip.login"));
       dispatch(setAuthData(data));
       navigateTo("/");
     }

src/routes/onboarding/steps/UpdateFrontendURL.tsx

@@ -31,7 +31,7 @@ const UpdateFrontendURL = ({ refreshInviteLink }: Props) => {
     useEffect(() => {
         if (isSuccess) {
             refreshInviteLink();
-            toast.success("Update Successfully!");
+            toast.success(ct("tip.update"));
         }
     }, [isSuccess]);
     return (

src/routes/reg/RegWithUsername.tsx

@@ -8,8 +8,10 @@ import Button from "../../common/component/styled/Button";
 import { useLoginMutation, useCheckMagicTokenValidMutation } from "../../app/services/auth";
 import ExpiredTip from "./ExpiredTip";
 import { useRegisterMutation } from "../../app/services/auth";
+import { useTranslation } from "react-i18next";
 
 const RegWithUsername: FC = () => {
+  const { t: ct } = useTranslation();
   const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
     useCheckMagicTokenValidMutation();
   const [
@@ -62,7 +64,7 @@ const RegWithUsername: FC = () => {
     const data = loginData || regData;
     if (isSuccess && data) {
       // 更新本地认证信息
-      toast.success("Login Successfully");
+      toast.success(ct("tip.login"));
       dispatch(setAuthData(data));
       // tricky
       location.href = `/#/`;

src/routes/setting/APIConfig.tsx

@@ -72,7 +72,7 @@ export default function APIConfig() {
   useEffect(() => {
     if (isSuccess) {
       hideAll();
-      toast.success("Update API Secret Successfully!");
+      toast.success(ct("tip.update"));
     }
   }, [isSuccess]);
   const handleToggle = (val: { third_party: boolean }) => {

src/routes/setting/BotConfig/DeleteAPIKeyModal.tsx

@@ -21,7 +21,7 @@ const DeleteAPIKeyModal = ({ closeModal, uid, kid }: Props) => {
     };
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Delete API Key Successfully!");
+            toast.success(ct("tip.delete"));
             closeModal();
         }
     }, [isSuccess]);

src/routes/setting/BotConfig/DeleteModal.tsx

@@ -21,7 +21,7 @@ const DeleteModal = ({ closeModal, uid, name }: Props) => {
     };
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Delete Bot Successfully!");
+            toast.success(ct("tip.delete"));
             closeModal();
         }
     }, [isSuccess]);

src/routes/setting/BotConfig/WebhookModal.tsx

@@ -38,7 +38,7 @@ const WebhookModal = ({ uid, webhook, closeModal }: Props) => {
     };
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Update Webhook URL Successfully!");
+            toast.success(ct("tip.update"));
             closeModal();
         }
     }, [isSuccess]);

src/routes/setting/BotConfig/index.tsx

@@ -53,7 +53,7 @@ export default function BotConfig() {
   };
   useEffect(() => {
     if (updateAvatarSuccess) {
-      toast.success("Update Bot Avatar Successfully!");
+      toast.success(ct("tip.update"));
     }
   }, [updateAvatarSuccess]);
 

src/routes/setting/License/UpdateLicenseModal.tsx

@@ -28,7 +28,7 @@ const UpdateLicenseModal: FC<Props> = ({ closeModal, updateLicense, updating, up
   };
   useEffect(() => {
     if (updated) {
-      toast.success("Update Successfully!");
+      toast.success(ct("tip.update"));
       closeModal();
     }
   }, [updated]);

src/routes/setting/LogoutConfirmModal.tsx

@@ -50,7 +50,7 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
       if (clearLocal) {
         clearLocalData();
       }
-      toast.success("Logout Successfully");
+      toast.success(ct("tip.logout"));
     }
   }, [exited, clearLocal]);
 

src/routes/setting/MyAccount.tsx

@@ -127,7 +127,7 @@ export default function MyAccount() {
 
   useEffect(() => {
     if (uploadSuccess) {
-      toast.success("update avatar successfully!");
+      toast.success(ct("tip.update"));
     }
   }, [uploadSuccess]);
 

src/routes/setting/Overview/FrontendURL.tsx

@@ -22,7 +22,7 @@ const Index = () => {
     const [updateUrl, { isLoading, isSuccess }] = useUpdateFrontendUrlMutation();
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Update Successfully!");
+            toast.success(ct("tip.update"));
         }
     }, [isSuccess]);
     useEffect(() => {

src/routes/setting/Overview/server.tsx

@@ -12,6 +12,7 @@ import { useAppSelector } from '../../../app/store';
 
 const Index = () => {
     const { t } = useTranslation("setting");
+    const { t: ct } = useTranslation();
     const { loginUser, server } = useAppSelector((store) => {
         return { loginUser: store.authData.user, server: store.server };
     });
@@ -42,7 +43,7 @@ const Index = () => {
     }, [server]);
     useEffect(() => {
         if (uploadSuccess) {
-            toast.success("Update logo successfully!");
+            toast.success(ct("tip.update"));
         }
     }, [uploadSuccess]);
     useEffect(() => {

src/routes/setting/ProfileBasicEditModal.tsx

@@ -47,7 +47,7 @@ const ProfileBasicEditModal: FC<Props> = ({
   useEffect(() => {
     if (isSuccess) {
       // todo
-      toast.success("update user info successfully");
+      toast.success(t("tip.update"));
       closeModal();
     }
   }, [isSuccess]);

src/routes/setting/RemoveAccountConfirmModal.tsx

@@ -16,7 +16,6 @@ const RemoveConfirmModal: FC<Props> = ({ closeModal }) => {
   const handleRemove = async () => {
     try {
       await removeCurrentAccount();
-      // toast.success("Remove Account Successfully!");
     } catch (error) {
       toast.error("Remove Account Failed!");
     }

src/routes/setting/UpdatePasswordModal.tsx

@@ -36,6 +36,7 @@ interface BaseForm {
 
 const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
   const { t } = useTranslation("member");
+  const { t: ct } = useTranslation();
   const { data } = useGetCredentialsQuery();
   const [input, setInput] = useState<BaseForm>({
     current: "",
@@ -63,7 +64,7 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
   useEffect(() => {
     if (isSuccess) {
       // todo
-      toast.success("update password successfully");
+      toast.success(ct("tip.update"));
       closeModal();
     }
   }, [isSuccess]);

src/routes/setting/config/Logins.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next";
 
 export default function Logins() {
   const { t } = useTranslation("setting", { keyPrefix: "login" });
+  const { t: ct } = useTranslation();
   const {
     changed: clientIdChanged,
     clientId,
@@ -37,14 +38,14 @@ export default function Logins() {
       // 更新google client id
       await updateClientIdToServer();
       if (!changed) {
-        toast.success("Configuration Updated!");
+        toast.success(ct("tip.update"));
       }
     }
     if (github && githubChanged) {
       // github config
       await updateGithubAuthConfigToServer();
       if (!changed) {
-        toast.success("Configuration Updated!");
+        toast.success(ct("tip.update"));
       }
     }
   };

src/routes/setting/navs.tsx

@@ -39,7 +39,7 @@ const navs = [
     items: [
       {
         name: "bot",
-        component: <ServerVersionChecker version="0.3.2"><BotConfig /></ServerVersionChecker>,
+        component: <ServerVersionChecker version="0.3.4"><BotConfig /></ServerVersionChecker>,
         admin: true
       },
       {

src/routes/settingChannel/DeleteConfirmModal.tsx

@@ -23,7 +23,7 @@ const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
 
   useEffect(() => {
     if (isSuccess) {
-      toast.success("delete channel successfully!");
+      toast.success(ct("tip.delete"));
       closeModal();
       navigateTo("/chat");
     }

src/routes/settingChannel/Overview.tsx

@@ -50,6 +50,7 @@ const StyledWrapper = styled.div`
 `;
 export default function Overview({ id = 0 }) {
   const { t } = useTranslation("setting", { keyPrefix: "channel" });
+  const { t: ct } = useTranslation();
   const { loginUser, channel } = useAppSelector((store) => {
     return {
       loginUser: store.authData.user,
@@ -105,13 +106,13 @@ export default function Overview({ id = 0 }) {
 
   useEffect(() => {
     if (updated) {
-      toast.success("Channel updated!");
+      toast.success(ct("tip.update"));
       refetch();
     }
   }, [updated]);
   useEffect(() => {
     if (changeTypeSuccess) {
-      toast.success("Change channel visibility successfully!");
+      toast.success(ct("tip.update"));
     }
   }, [changeTypeSuccess]);
 

src/routes/settingDM/DeleteConfirmModal.tsx

@@ -23,7 +23,7 @@ const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
 
   useEffect(() => {
     if (isSuccess) {
-      toast.success("delete user successfully!");
+      toast.success(ct("tip.delete"));
       closeModal();
       navigateTo("/chat");
     }