diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index c41c6b22..fdaf9a77 100644 --- a/public/locales/en/setting.json +++ b/public/locales/en/setting.json @@ -58,6 +58,10 @@ "enable": "Enable", "disable": "Disabled" }, + "url": { + "title": "Update Frontend URL", + "desc": "Update the frontend url" + }, "lang": { "title": "Language", "desc": "Setting the language", diff --git a/public/locales/en/welcome.json b/public/locales/en/welcome.json index b2241544..dff78d8a 100644 --- a/public/locales/en/welcome.json +++ b/public/locales/en/welcome.json @@ -33,6 +33,7 @@ "set_name": "Set Name", "admin_account": "Admin Account", "who_sign_up": "Who Can Sign Up", - "invites": "Invites" + "invites": "Invites", + "update_domain_tip": "Incorrect link domain?Please update it here:" } } diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json index 2090c4a8..9b32517f 100644 --- a/public/locales/zh/setting.json +++ b/public/locales/zh/setting.json @@ -55,12 +55,13 @@ "enable": "开启", "disable": "禁用" }, + "url": { + "title": "更新前端网址", + "desc": "更新当前的前端网址" + }, "lang": { "title": "语言", - "desc": "设置界面语言", - "en": "英文", - "zh": "中文", - "jp": "日文" + "desc": "设置界面语言" } }, "license": { diff --git a/public/locales/zh/welcome.json b/public/locales/zh/welcome.json index 2dc517b0..ee1e1eec 100644 --- a/public/locales/zh/welcome.json +++ b/public/locales/zh/welcome.json @@ -33,6 +33,7 @@ "set_name": "设置名称", "admin_account": "管理员账号", "who_sign_up": "注册权限", - "invites": "邀请" + "invites": "邀请", + "update_domain_tip": "链接域名有问题？可在此更新设置：" } } diff --git a/src/app/services/channel.ts b/src/app/services/channel.ts index 738655a7..eacaab10 100644 --- a/src/app/services/channel.ts +++ b/src/app/services/channel.ts @@ -94,9 +94,10 @@ export const channelApi = createApi({ transformResponse: (link: string) => { // 确保http开头 const _link = link.startsWith("http") ? link : `http://${link}`; + return _link; // 替换掉域名 - const invite = new URL(_link); - return `${location.origin}${invite.pathname}${invite.search}${invite.hash}`; + // const invite = new URL(_link); + // return `${location.origin}${invite.pathname}${invite.search}${invite.hash}`; } }), removeChannel: builder.query({ diff --git a/src/app/services/server.ts b/src/app/services/server.ts index 9fba430b..21ded3b4 100644 --- a/src/app/services/server.ts +++ b/src/app/services/server.ts @@ -195,6 +195,12 @@ export const serverApi = createApi({ body: data }) }), + updateFrontendUrl: builder.mutation({ + query: (url) => ({ + url: `/admin/system/update_frontend_url?frontend_url=${encodeURIComponent(url)}`, + method: "POST", + }) + }), getLicense: builder.query({ query: () => ({ url: `/license` @@ -285,5 +291,6 @@ export const { useGetLicensePaymentUrlMutation, useLazyGetGeneratedLicenseQuery, useLazyGetBotRelatedChannelsQuery, - useSendMessageByBotMutation + useSendMessageByBotMutation, + useUpdateFrontendUrlMutation } = serverApi; diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg new file mode 100644 index 00000000..2b75d1a4 --- /dev/null +++ b/src/assets/icons/info.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/common/component/ServerVersionChecker.tsx b/src/common/component/ServerVersionChecker.tsx index 6d928ee4..49db2355 100644 --- a/src/common/component/ServerVersionChecker.tsx +++ b/src/common/component/ServerVersionChecker.tsx @@ -1,17 +1,19 @@ -import React, { PropsWithChildren } from 'react'; +import { ReactElement } from 'react'; import { useGetServerVersionQuery } from '../../app/services/server'; import { compareVersion } from '../utils'; type Props = { + empty?: boolean, version: string, + children: ReactElement } -const ServerVersionChecker = ({ version, children }: PropsWithChildren) => { +const ServerVersionChecker = ({ empty = false, version, children }: Props) => { const { data: currentVersion, isSuccess } = useGetServerVersionQuery(); if (!isSuccess) return null; const res = compareVersion(currentVersion, version); - if (res < 0) return
- Server version:{version} needed at least 🚨 + if (res < 0) return empty ? null :
+ This function needs server version:{version} at least 🚨 Your current version:{currentVersion} Please upgrade the Server! How to Update VoceChat Server 📖 diff --git a/src/routes/onboarding/steps/inviteLink.tsx b/src/routes/onboarding/steps/inviteLink.tsx index 9cb01148..29ec905c 100644 --- a/src/routes/onboarding/steps/inviteLink.tsx +++ b/src/routes/onboarding/steps/inviteLink.tsx @@ -1,98 +1,61 @@ -import styled from "styled-components"; import StyledInput from "../../../common/component/styled/Input"; import StyledButton from "../../../common/component/styled/Button"; import useInviteLink from "../../../common/hook/useInviteLink"; import { useTranslation } from "react-i18next"; import { useWizard } from "react-use-wizard"; +import { ChangeEvent, useState, useEffect } from "react"; +import { useUpdateFrontendUrlMutation } from "../../../app/services/server"; +import { toast } from "react-hot-toast"; +import InfoIcon from '../../../assets/icons/info.svg'; +import ServerVersionChecker from "../../../common/component/ServerVersionChecker"; -const StyledWrapper = styled.div` - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - > .primaryText { - text-align: center; - font-weight: 700; - font-size: 24px; - line-height: 30px; - margin-bottom: 8px; - } - - > .secondaryText { - text-align: center; - font-size: 14px; - line-height: 20px; - margin-bottom: 40px; - } - - > .tip { - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #475467; - margin-bottom: 8px; - } - - > .link { - position: relative; - background: #ffffff; - border: 1px solid #f4f4f5; - box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08); - border-radius: 4px; - width: 374px; - display: flex; - - > input { - border: none; - box-shadow: none; - padding: 11px 0 11px 8px; - font-weight: 400; - font-size: 14px; - line-height: 20px; - color: #78787c; - } - - > button { - padding: 0 8px; - font-weight: 500; - font-size: 14px; - line-height: 20px; - color: #22ccee; - transition: color 150ms ease-in-out; - - &:hover { - color: #088ab2; - } - } - } - - > .button { - width: 124px; - height: 44px; - margin-top: 24px; - } -`; export default function InviteLink() { + const [updateUrl, { isSuccess, isLoading }] = useUpdateFrontendUrlMutation(); const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); const { t: ct } = useTranslation(); const { nextStep } = useWizard(); - const { link, linkCopied, copyLink } = useInviteLink(); + const { link, linkCopied, copyLink, generateNewLink } = useInviteLink(); + const [frontUrl, setFrontUrl] = useState(location.origin); + const handleUpdateUrl = (evt: ChangeEvent) => { + setFrontUrl(evt.target.value); + }; + const updateFrontUrl = () => { + updateUrl(frontUrl); + }; + useEffect(() => { + if (isSuccess) { + generateNewLink(); + toast.success("Update Successfully!"); + } + }, [isSuccess]); return ( - - {t("invite_title")} - {t("last_tip")} - {t("last_desc")} -
- - +
+ {t("invite_title")} + {t("last_tip")} + {t("last_desc")} +
+ + {linkCopied ? "Copied" : ct("action.copy")}
- + {t("done")} - + +
+ +
+ {t("update_domain_tip")} +
+ + + {ct("action.update")} + +
+
+
+ +
); } diff --git a/src/routes/setting/Overview/FrontendURL.tsx b/src/routes/setting/Overview/FrontendURL.tsx new file mode 100644 index 00000000..cd269d98 --- /dev/null +++ b/src/routes/setting/Overview/FrontendURL.tsx @@ -0,0 +1,47 @@ +// import React from 'react' +import { useTranslation } from 'react-i18next'; +import { useUpdateFrontendUrlMutation } from '../../../app/services/server'; +import StyledInput from "../../../common/component/styled/Input"; +import StyledButton from "../../../common/component/styled/Button"; +import { ChangeEvent, useState, useEffect } from 'react'; +import { toast } from 'react-hot-toast'; +import ServerVersionChecker from '../../../common/component/ServerVersionChecker'; +// type Props = {} + +const Index = () => { + const [url, setUrl] = useState(location.origin); + const { t } = useTranslation("setting"); + const { t: ct } = useTranslation(); + const handleChange = (evt: ChangeEvent) => { + // update + setUrl(evt.target.value); + }; + const handleUpdate = () => { + updateUrl(url); + }; + const [updateUrl, { isLoading, isSuccess }] = useUpdateFrontendUrlMutation(); + useEffect(() => { + if (isSuccess) { + toast.success("Update Successfully!"); + } + }, [isSuccess]); + + return ( +
+

{t("overview.url.title")}

+

+ + {t("overview.url.desc")} + +

+
+ + + {ct("action.update")} + +
+
+ ); +}; + +export default Index; \ No newline at end of file diff --git a/src/routes/setting/Overview/index.tsx b/src/routes/setting/Overview/index.tsx index 58dec741..345bf05f 100644 --- a/src/routes/setting/Overview/index.tsx +++ b/src/routes/setting/Overview/index.tsx @@ -6,7 +6,8 @@ import { useAppSelector } from "../../../app/store"; import { LoginConfig, WhoCanSignUp } from "../../../types/server"; import useConfig from "../../../common/hook/useConfig"; import Server from './server'; -import Language from './language'; +import Language from './Language'; +import FrontendURL from "./FrontendURL"; const StyledWrapper = styled.div` position: relative; @@ -130,8 +131,10 @@ export default function Overview() { }} />
+ )} + ); diff --git a/src/types/common.ts b/src/types/common.ts index 8b133e14..b6f0244c 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -1,6 +1,7 @@ export interface EntityId { id: number; } +export type AuthType = "register" | "login"; export type PriceType = "subscription" | "payment"; export type PriceSubscriptionDuration = "month" | "quarter" | "year"; export type Price = {