feat: i18n
This commit is contained in:
Tristan Yang
@@ -12,6 +12,7 @@ import {
|
||||
} from "../../app/services/server";
|
||||
import useConfig from "../../common/hook/useConfig";
|
||||
import { LoginConfig } from "../../types/server";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledConfirm = styled.div`
|
||||
padding: 12px;
|
||||
@@ -61,6 +62,7 @@ const Styled = styled.div`
|
||||
`;
|
||||
|
||||
export default function APIConfig() {
|
||||
const { t } = useTranslation(["setting", "common"]);
|
||||
const { updateConfig, values } = useConfig("login");
|
||||
const { data } = useGetThirdPartySecretQuery();
|
||||
const [updateSecret, { data: updatedSecret, isSuccess, isLoading }] =
|
||||
@@ -83,7 +85,7 @@ export default function APIConfig() {
|
||||
data-checked={thirdParty}
|
||||
/>
|
||||
<div className="input">
|
||||
<label htmlFor="secret">API Secure Key:</label>
|
||||
<label htmlFor="secret"> {t("third_app.key")}:</label>
|
||||
<Input disabled={!thirdParty} type="password" id="secret" value={updatedSecret || data} />
|
||||
</div>
|
||||
<Tippy
|
||||
@@ -93,24 +95,23 @@ export default function APIConfig() {
|
||||
content={
|
||||
<StyledConfirm>
|
||||
<div className="tip">
|
||||
Are you sure to update API secret? Previous secret will be invalided
|
||||
{t("third_app.update_tip")}
|
||||
</div>
|
||||
<div className="btns">
|
||||
<Button onClick={() => hideAll()} className="cancel small">
|
||||
Cancel
|
||||
{t("action.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button disabled={isLoading} className="small danger" onClick={() => updateSecret()}>
|
||||
Yes
|
||||
{t("action.yes", { ns: "common" })}
|
||||
</Button>
|
||||
</div>
|
||||
</StyledConfirm>
|
||||
}
|
||||
>
|
||||
<Button disabled={!thirdParty}>Update Secret</Button>
|
||||
<Button disabled={!thirdParty}> {t("third_app.update")}</Button>
|
||||
</Tippy>
|
||||
<div className="tip">
|
||||
Tip: The security key agreed between the server and the third-party app is used to encrypt
|
||||
the communication data.
|
||||
{t("third_app.key_tip")}
|
||||
</div>
|
||||
</Styled>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { useState, HTMLAttributes } from "react";
|
||||
import dayjs from "dayjs";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import useLicense from "../../common/hook/useLicense";
|
||||
import Button from "../../../common/component/styled/Button";
|
||||
import useLicense from "../../../common/hook/useLicense";
|
||||
import LicensePriceListModal from "./LicensePriceListModal";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface ItemProps extends HTMLAttributes<HTMLSpanElement> { label: string, data?: string | number | string[], foldable?: boolean }
|
||||
const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
|
||||
@@ -22,6 +23,7 @@ const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
|
||||
|
||||
};
|
||||
export default function License() {
|
||||
const { t } = useTranslation("setting");
|
||||
const { license: licenseInfo, reachLimit } = useLicense();
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [base58Fold, setBase58Fold] = useState(true);
|
||||
@@ -38,25 +40,25 @@ export default function License() {
|
||||
<>
|
||||
<div className="max-w-3xl flex flex-col justify-start items-start gap-4">
|
||||
<div className={clsx('relative w-full p-3 rounded border-solid border flex flex-col gap-4 shadow', reachLimit ? "border-red-600 bg-red-200/50" : "border-green-600 bg-green-200/50")}>
|
||||
<Item label="Signed" data={licenseInfo?.sign ? "Yes" : "Not Yet"} />
|
||||
<Item label="Domains" data={licenseInfo?.domains} />
|
||||
<Item label="User Limit" data={licenseInfo?.user_limit == 99999 ? "No Limit" : licenseInfo?.user_limit} />
|
||||
<Item label="Expired At" data={dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")} />
|
||||
<Item label="Created At" data={dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")} />
|
||||
<Item label="License Value" data={licenseInfo?.base58} foldable={base58Fold} title={base58Fold ? "Click to see full text" : "Click to fold text"}
|
||||
<Item label={t("license.signed")} data={licenseInfo?.sign ? "Yes" : "Not Yet"} />
|
||||
<Item label={t("license.domain")} data={licenseInfo?.domains} />
|
||||
<Item label={t("license.user_limit")} data={licenseInfo?.user_limit == 99999 ? "No Limit" : licenseInfo?.user_limit} />
|
||||
<Item label={t("license.expire")} data={dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")} />
|
||||
<Item label={t("license.create")} data={dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")} />
|
||||
<Item label={t("license.value")} data={licenseInfo?.base58} foldable={base58Fold} title={base58Fold ? "Click to see full text" : "Click to fold text"}
|
||||
onClick={handleLicenseValueToggle} />
|
||||
</div>
|
||||
<Button onClick={handleRenewLicense}>Renew License</Button>
|
||||
<Button onClick={handleRenewLicense}>{t("license.renew")}</Button>
|
||||
<div className="flex flex-col gap-4 bg-primary-500 text-white rounded drop-shadow-xl p-5">
|
||||
<h2 className="text-2xl font-bold">A chance to get a free license upgrade! 🎁</h2>
|
||||
<h2 className="text-2xl font-bold">{t("license.tip.title")} 🎁</h2>
|
||||
<p className="text-base flex flex-col"><span>
|
||||
Getting a free license upgrade by joining our <em className="font-bold">User Test Session</em>
|
||||
{t("license.tip.user_test")}
|
||||
</span>
|
||||
<span>
|
||||
Book a time here: <a className="underline text-lg text-green-200" href="https://calendly.com/hansu/han-meeting" target="_blank" rel="noopener noreferrer">https://calendly.com/hansu/han-meeting</a>
|
||||
{t("license.tip.booking")} <a className="underline text-lg text-green-200" href="https://calendly.com/hansu/han-meeting" target="_blank" rel="noopener noreferrer">https://calendly.com/hansu/han-meeting</a>
|
||||
</span>
|
||||
<span>
|
||||
Or, add WeChat for more information: <em className="text-lg text-green-200">yanggc_2013</em>
|
||||
{t("license.tip.wechat")}<em className="text-lg text-green-200">yanggc_2013</em>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
+12
-10
@@ -1,12 +1,13 @@
|
||||
import { FC, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../../common/component/Modal";
|
||||
import StyledModal from "../../common/component/styled/Modal";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import StyledRadio from "../../common/component/styled/Radio";
|
||||
import Modal from "../../../common/component/Modal";
|
||||
import StyledModal from "../../../common/component/styled/Modal";
|
||||
import Button from "../../../common/component/styled/Button";
|
||||
import StyledRadio from "../../../common/component/styled/Radio";
|
||||
|
||||
import { useGetLicensePaymentUrlMutation } from "../../app/services/server";
|
||||
import { LicensePriceList } from "../../app/config";
|
||||
import { useGetLicensePaymentUrlMutation } from "../../../app/services/server";
|
||||
import { LicensePriceList } from "../../../app/config";
|
||||
import { useTranslation } from "react-i18next";
|
||||
// import { LicenseMetadata, RenewLicense } from "../../types/server";
|
||||
|
||||
interface Props {
|
||||
@@ -15,6 +16,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
|
||||
const { t } = useTranslation(["setting", "common"]);
|
||||
const [getUrl, { isLoading, isSuccess }] = useGetLicensePaymentUrlMutation();
|
||||
const [selectPrice, setSelectPrice] = useState(
|
||||
`${LicensePriceList[0].pid}|${LicensePriceList[0].limit}`
|
||||
@@ -46,15 +48,15 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
|
||||
return (
|
||||
<Modal id="modal-modal">
|
||||
<StyledModal
|
||||
title="Renew License"
|
||||
description="Please select the price"
|
||||
title={t("license.renew") || ""}
|
||||
description={t("license.renew_select") || ""}
|
||||
buttons={
|
||||
<>
|
||||
<Button onClick={closeModal} className="ghost">
|
||||
Cancel
|
||||
{t("action.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button disabled={isLoading || isSuccess} onClick={handleRenew} className="danger">
|
||||
{isLoading ? "Initialize Payment Url" : isSuccess ? "Redirecting" : "Renew"}
|
||||
{isLoading ? "Initialize Payment Url" : isSuccess ? "Redirecting" : t("license.renew")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import StyledModal from "../../common/component/styled/Modal";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import Checkbox from "../../common/component/styled/Checkbox";
|
||||
import useLogout from "../../common/hook/useLogout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledConfirm = styled(StyledModal)`
|
||||
.clear {
|
||||
@@ -32,6 +33,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
|
||||
const { t } = useTranslation();
|
||||
const [clearLocal, setClearLocal] = useState(false);
|
||||
const { logout, exited, exiting, clearLocalData } = useLogout();
|
||||
const handleLogout = () => {
|
||||
@@ -58,9 +60,9 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
|
||||
description="Are you sure want to log out this account?"
|
||||
buttons={
|
||||
<>
|
||||
<Button onClick={closeModal}>Cancel</Button>
|
||||
<Button onClick={closeModal}>{t("action.cancel")}</Button>
|
||||
<Button onClick={handleLogout} className="danger">
|
||||
{exiting ? "Logging out" : "Log Out"}
|
||||
{exiting ? "Logging out" : t("action.logout")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import ProfileBasicEditModal from "./ProfileBasicEditModal";
|
||||
import RemoveAccountConfirmModal from "./RemoveAccountConfirmModal";
|
||||
import UpdatePasswordModal from "./UpdatePasswordModal";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
@@ -99,24 +100,25 @@ const StyledWrapper = styled.div`
|
||||
border-radius: 8px;
|
||||
}
|
||||
`;
|
||||
const EditModalInfo = {
|
||||
name: {
|
||||
label: "Username",
|
||||
title: "Change your username",
|
||||
intro: "Enter a new username."
|
||||
},
|
||||
email: {
|
||||
label: "Email",
|
||||
title: "Change your email",
|
||||
intro: "Enter a new email."
|
||||
}
|
||||
};
|
||||
type EditFields = "name" | "email";
|
||||
export default function MyAccount() {
|
||||
const { t } = useTranslation(["member", "common"]);
|
||||
const [passwordModal, setPasswordModal] = useState(false);
|
||||
const [editModal, setEditModal] = useState<EditFields | null>(null);
|
||||
const [removeConfirmVisible, setRemoveConfirmVisible] = useState(false);
|
||||
const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
|
||||
const EditModalInfo = {
|
||||
name: {
|
||||
label: t("username"),
|
||||
title: t("change_name"),
|
||||
intro: t("change_name_desc")
|
||||
},
|
||||
email: {
|
||||
label: t("email"),
|
||||
title: t("change_email"),
|
||||
intro: t("change_email_desc")
|
||||
}
|
||||
};
|
||||
|
||||
const loginUser = useAppSelector((store) => {
|
||||
return store.users.byId[store.authData.user?.uid || 0];
|
||||
@@ -156,43 +158,39 @@ export default function MyAccount() {
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">username</span>
|
||||
<span className="label">{t("username")}</span>
|
||||
<span className="txt">
|
||||
{name} <span className="gray"> #{uid}</span>
|
||||
</span>
|
||||
</div>
|
||||
<button data-edit="name" onClick={handleBasicEdit} className="btn">
|
||||
Edit
|
||||
{t("action.edit", { ns: "common" })}
|
||||
</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">email</span>
|
||||
<span className="label">{t("email")}</span>
|
||||
<span className="txt">{email}</span>
|
||||
</div>
|
||||
<button data-edit="email" onClick={handleBasicEdit} className="btn">
|
||||
Edit
|
||||
{t("action.edit", { ns: "common" })}
|
||||
</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">password</span>
|
||||
<span className="label">{t("password")}</span>
|
||||
<span className="txt">*********</span>
|
||||
</div>
|
||||
<button onClick={togglePasswordModal} className="btn">
|
||||
Edit
|
||||
{t("action.edit", { ns: "common" })}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* uid 1 是初始账户，不能删 */}
|
||||
{uid != 1 && (
|
||||
<div className="danger">
|
||||
<h4 className="head">Account Removal</h4>
|
||||
<div className="desc">
|
||||
Disabling your account means you can recover it at any time after taking this action.
|
||||
</div>
|
||||
<button className="btn" onClick={toggleRemoveAccountModalVisible}>
|
||||
Delete Account
|
||||
{t("delete_account")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,229 +0,0 @@
|
||||
import { useState, useEffect, ChangeEvent } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import { useUpdateServerMutation, useUpdateLogoMutation } from "../../app/services/server";
|
||||
import LogoUploader from "../../common/component/AvatarUploader";
|
||||
import Input from "../../common/component/styled/Input";
|
||||
import Label from "../../common/component/styled/Label";
|
||||
import Textarea from "../../common/component/styled/Textarea";
|
||||
import SaveTip from "../../common/component/SaveTip";
|
||||
import StyledRadio from "../../common/component/styled/Radio";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
import { LoginConfig, WhoCanSignUp } from "../../types/server";
|
||||
import useConfig from "../../common/hook/useConfig";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.logo {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.preview {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
.tip {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 14px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #1fe1f9;
|
||||
background: #ecfeff;
|
||||
border: 1px solid #ecfeff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
margin-bottom: 64px;
|
||||
.input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
> .setting {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
> .label {
|
||||
font-weight: 500;
|
||||
}
|
||||
> .tip {
|
||||
font-weight: 400;
|
||||
color: #667085;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
> form {
|
||||
margin-top: 16px;
|
||||
width: 512px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function Overview() {
|
||||
const { loginUser, server } = useAppSelector((store) => {
|
||||
return { loginUser: store.authData.user, server: store.server };
|
||||
});
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [serverValues, setServerValues] = useState<typeof server>(server);
|
||||
const { values: loginConfig, updateConfig: updateLoginConfig } = useConfig("login");
|
||||
const [updateServer] = useUpdateServerMutation();
|
||||
const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
|
||||
const handleUpdateServer = () => {
|
||||
const { name, description } = serverValues;
|
||||
updateServer({ name, description });
|
||||
};
|
||||
const handleUpdateWhoCanSignUp = (value: WhoCanSignUp) => {
|
||||
updateLoginConfig({ ...loginConfig, who_can_sign_up: value });
|
||||
};
|
||||
const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const newValue = evt.target.value;
|
||||
const { type = "" } = evt.target.dataset;
|
||||
setServerValues((prev) => {
|
||||
return { ...prev, [type]: newValue };
|
||||
});
|
||||
};
|
||||
const handleReset = () => {
|
||||
setServerValues(server);
|
||||
};
|
||||
const handleGuestToggle = (v: "true" | "false") => {
|
||||
const guest = v === "true";
|
||||
updateLoginConfig({ ...loginConfig, guest });
|
||||
};
|
||||
useEffect(() => {
|
||||
if (uploadSuccess) {
|
||||
toast.success("Update logo successfully!");
|
||||
}
|
||||
}, [uploadSuccess]);
|
||||
useEffect(() => {
|
||||
if (server) {
|
||||
setServerValues(server);
|
||||
}
|
||||
}, [server]);
|
||||
useEffect(() => {
|
||||
if (server && serverValues) {
|
||||
const { name, description } = serverValues;
|
||||
const { name: oName, description: oDescription } = server;
|
||||
if (oName !== name || oDescription !== description) {
|
||||
setChanged(true);
|
||||
} else {
|
||||
setChanged(false);
|
||||
}
|
||||
}
|
||||
}, [server, serverValues]);
|
||||
if (!serverValues || !loginConfig) return null;
|
||||
const { name, description, logo } = serverValues;
|
||||
const { who_can_sign_up: whoCanSignUp, guest } = loginConfig as LoginConfig;
|
||||
const isAdmin = loginUser?.is_admin;
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="logo">
|
||||
<div className="preview">
|
||||
<LogoUploader
|
||||
disabled={!isAdmin}
|
||||
url={uploadSuccess ? `${logo}?t=${+new Date()}` : logo}
|
||||
name={name}
|
||||
uploadImage={uploadLogo}
|
||||
/>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div className="upload">
|
||||
<div className="tip">
|
||||
Minimum size is 128x128, We recommend at least 512x512 for the server. Max size
|
||||
limited to 5M.
|
||||
</div>
|
||||
{/* <button className="btn">Upload Image</button> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="inputs">
|
||||
<div className="input">
|
||||
<Label htmlFor="name">Server Name</Label>
|
||||
<Input
|
||||
disabled={!isAdmin}
|
||||
data-type="name"
|
||||
onChange={handleChange}
|
||||
value={name}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Server Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Server Description</Label>
|
||||
<Textarea
|
||||
disabled={!isAdmin}
|
||||
data-type="description"
|
||||
onChange={handleChange}
|
||||
value={description ?? ""}
|
||||
rows={4}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Tell the world a bit about this server"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="setting">
|
||||
<p className="label">Default Sign Up</p>
|
||||
<p className="tip">Who can sign up this server.</p>
|
||||
<StyledRadio
|
||||
options={["Everyone", "Invitation Link Only"]}
|
||||
values={["EveryOne", "InvitationOnly"]}
|
||||
value={whoCanSignUp}
|
||||
onChange={(v: WhoCanSignUp) => {
|
||||
handleUpdateWhoCanSignUp(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="setting">
|
||||
<p className="label">Guest Mode</p>
|
||||
<p className="tip">
|
||||
<span className="txt">
|
||||
If enabled, visitors will see public channels on this server.
|
||||
</span>
|
||||
</p>
|
||||
<StyledRadio
|
||||
options={["Enabled", "Disabled"]}
|
||||
values={["true", "false"]}
|
||||
value={String(guest)}
|
||||
onChange={(v) => {
|
||||
console.log("wtff", v);
|
||||
|
||||
handleGuestToggle(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{changed && <SaveTip saveHandler={handleUpdateServer} resetHandler={handleReset} />}
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
// import { useState, useEffect, ChangeEvent } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import StyledRadio from "../../../common/component/styled/Radio";
|
||||
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';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.logo {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.preview {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
.tip {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
margin-bottom: 64px;
|
||||
.input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
> .setting {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
> .label {
|
||||
font-weight: 500;
|
||||
}
|
||||
> .tip {
|
||||
font-weight: 400;
|
||||
color: #667085;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
> form {
|
||||
margin-top: 16px;
|
||||
width: 512px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function Overview() {
|
||||
const { t } = useTranslation("setting");
|
||||
const { loginUser } = useAppSelector((store) => {
|
||||
return { loginUser: store.authData.user };
|
||||
});
|
||||
|
||||
|
||||
const { values: loginConfig, updateConfig: updateLoginConfig } = useConfig("login");
|
||||
|
||||
|
||||
const handleUpdateWhoCanSignUp = (value: WhoCanSignUp) => {
|
||||
updateLoginConfig({ ...loginConfig, who_can_sign_up: value });
|
||||
};
|
||||
|
||||
const handleGuestToggle = (v: "true" | "false") => {
|
||||
const guest = v === "true";
|
||||
updateLoginConfig({ ...loginConfig, guest });
|
||||
};
|
||||
|
||||
|
||||
|
||||
if (!loginConfig) return null;
|
||||
|
||||
const { who_can_sign_up: whoCanSignUp, guest } = loginConfig as LoginConfig;
|
||||
const isAdmin = loginUser?.is_admin;
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<Server />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="setting">
|
||||
<p className="label">{t("overview.sign_up.title")}</p>
|
||||
<p className="tip">{t("overview.sign_up.desc")}</p>
|
||||
<StyledRadio
|
||||
options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
|
||||
values={["EveryOne", "InvitationOnly"]}
|
||||
value={whoCanSignUp}
|
||||
onChange={(v: WhoCanSignUp) => {
|
||||
handleUpdateWhoCanSignUp(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="setting">
|
||||
<p className="label">{t("overview.guest_mode.title")}</p>
|
||||
<p className="tip">
|
||||
<span className="txt">
|
||||
{t("overview.guest_mode.desc")}
|
||||
</span>
|
||||
</p>
|
||||
<StyledRadio
|
||||
options={[t("overview.guest_mode.enable"), t("overview.guest_mode.disable")]}
|
||||
values={["true", "false"]}
|
||||
value={String(guest)}
|
||||
onChange={(v) => {
|
||||
console.log("wtff", v);
|
||||
|
||||
handleGuestToggle(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Language />
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// import React from 'react'
|
||||
import dayjs from 'dayjs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import StyledRadio from "../../../common/component/styled/Radio";
|
||||
|
||||
// type Props = {}
|
||||
|
||||
const Index = () => {
|
||||
const { t, i18n } = useTranslation("setting");
|
||||
const handleGuestToggle = (v: "zh" | "en") => {
|
||||
i18n.changeLanguage(v);
|
||||
dayjs.locale(v === "zh" ? "zh-cn" : "en");
|
||||
};
|
||||
return (
|
||||
<div className="setting">
|
||||
<p className="label">{t("overview.lang.title")}</p>
|
||||
<p className="tip">
|
||||
<span className="txt">
|
||||
{t("overview.lang.desc")}
|
||||
</span>
|
||||
</p>
|
||||
<StyledRadio
|
||||
options={[t("overview.lang.en"), t("overview.lang.zh")]}
|
||||
values={["en", "zh"]}
|
||||
value={i18n.language.split("-")[0]}
|
||||
onChange={(v) => {
|
||||
console.log("wtff", v);
|
||||
|
||||
handleGuestToggle(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
@@ -0,0 +1,114 @@
|
||||
import { ChangeEvent, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import toast from "react-hot-toast";
|
||||
import { useUpdateLogoMutation, useUpdateServerMutation } from '../../../app/services/server';
|
||||
import LogoUploader from "../../../common/component/AvatarUploader";
|
||||
import Input from "../../../common/component/styled/Input";
|
||||
import Label from "../../../common/component/styled/Label";
|
||||
import Textarea from "../../../common/component/styled/Textarea";
|
||||
import SaveTip from '../../../common/component/SaveTip';
|
||||
import { useAppSelector } from '../../../app/store';
|
||||
|
||||
|
||||
const Index = () => {
|
||||
const { t } = useTranslation("setting");
|
||||
const { loginUser, server } = useAppSelector((store) => {
|
||||
return { loginUser: store.authData.user, server: store.server };
|
||||
});
|
||||
|
||||
const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
|
||||
const [updateServer] = useUpdateServerMutation();
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [serverValues, setServerValues] = useState<typeof server>(server);
|
||||
const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const newValue = evt.target.value;
|
||||
const { type = "" } = evt.target.dataset;
|
||||
setServerValues((prev) => {
|
||||
return { ...prev, [type]: newValue };
|
||||
});
|
||||
};
|
||||
const handleUpdateServer = () => {
|
||||
const { name, description } = serverValues;
|
||||
updateServer({ name, description });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setServerValues(server);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (server) {
|
||||
setServerValues(server);
|
||||
}
|
||||
}, [server]);
|
||||
useEffect(() => {
|
||||
if (uploadSuccess) {
|
||||
toast.success("Update logo successfully!");
|
||||
}
|
||||
}, [uploadSuccess]);
|
||||
useEffect(() => {
|
||||
if (server && serverValues) {
|
||||
const { name, description } = serverValues;
|
||||
const { name: oName, description: oDescription } = server;
|
||||
if (oName !== name || oDescription !== description) {
|
||||
setChanged(true);
|
||||
} else {
|
||||
setChanged(false);
|
||||
}
|
||||
}
|
||||
}, [server, serverValues]);
|
||||
const { name, description, logo } = serverValues;
|
||||
const isAdmin = loginUser?.is_admin;
|
||||
if (!loginUser || !serverValues) return null;
|
||||
return (
|
||||
<>
|
||||
<div className="logo">
|
||||
<div className="preview">
|
||||
<LogoUploader
|
||||
disabled={!isAdmin}
|
||||
url={uploadSuccess ? `${logo}?t=${+new Date()}` : logo}
|
||||
name={name}
|
||||
uploadImage={uploadLogo}
|
||||
/>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div className="upload">
|
||||
<div className="tip">
|
||||
{t("overview.upload_desc")}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="inputs">
|
||||
<div className="input">
|
||||
<Label htmlFor="name">{t("overview.name")}</Label>
|
||||
<Input
|
||||
disabled={!isAdmin}
|
||||
data-type="name"
|
||||
onChange={handleChange}
|
||||
value={name}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Server Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">{t("overview.desc")}</Label>
|
||||
<Textarea
|
||||
disabled={!isAdmin}
|
||||
data-type="description"
|
||||
onChange={handleChange}
|
||||
value={description ?? ""}
|
||||
rows={4}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Tell the world a bit about this server"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{changed && <SaveTip saveHandler={handleUpdateServer} resetHandler={handleReset} />}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
@@ -6,6 +6,7 @@ import { useUpdateInfoMutation } from "../../app/services/user";
|
||||
import StyledModal from "../../common/component/styled/Modal";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import Modal from "../../common/component/Modal";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledEdit = styled(StyledModal)`
|
||||
.input {
|
||||
@@ -40,6 +41,7 @@ const ProfileBasicEditModal: FC<Props> = ({
|
||||
intro = "Enter a new username and your existing password.",
|
||||
closeModal
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [input, setInput] = useState(value);
|
||||
const [update, { isLoading, isSuccess }] = useUpdateInfoMutation();
|
||||
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -63,9 +65,9 @@ const ProfileBasicEditModal: FC<Props> = ({
|
||||
buttons={
|
||||
<>
|
||||
<Button className="cancel" onClick={closeModal}>
|
||||
Cancel
|
||||
{t("action.cancel")}
|
||||
</Button>
|
||||
<Button onClick={handleUpdate}>{isLoading ? "Updating" : `Done`}</Button>
|
||||
<Button onClick={handleUpdate}>{isLoading ? "Updating" : t("action.done")}</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
|
||||
@@ -4,12 +4,14 @@ import Modal from "../../common/component/Modal";
|
||||
import StyledModal from "../../common/component/styled/Modal";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import { useLazyDeleteCurrentAccountQuery } from "../../app/services/auth";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface Props {
|
||||
closeModal: () => void;
|
||||
}
|
||||
|
||||
const RemoveConfirmModal: FC<Props> = ({ closeModal }) => {
|
||||
const { t } = useTranslation("member");
|
||||
const [removeCurrentAccount, { isLoading }] = useLazyDeleteCurrentAccountQuery();
|
||||
const handleRemove = async () => {
|
||||
try {
|
||||
@@ -22,13 +24,13 @@ const RemoveConfirmModal: FC<Props> = ({ closeModal }) => {
|
||||
return (
|
||||
<Modal id="modal-modal">
|
||||
<StyledModal
|
||||
title="Remove Account"
|
||||
description="Are you sure remove this account?"
|
||||
title={t("remove_account") || ""}
|
||||
description={t("remove_account_desc") || ""}
|
||||
buttons={
|
||||
<>
|
||||
<Button onClick={closeModal}>Cancel</Button>
|
||||
<Button onClick={closeModal}>{t("action.cancel", { ns: "common" })}</Button>
|
||||
<Button disabled={isLoading} onClick={handleRemove} className="danger">
|
||||
Remove
|
||||
{t("remove")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useUpdatePasswordMutation, useGetCredentialsQuery } from "../../app/ser
|
||||
import StyledModal from "../../common/component/styled/Modal";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import Modal from "../../common/component/Modal";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledEdit = styled(StyledModal)`
|
||||
.input {
|
||||
@@ -34,6 +35,7 @@ interface BaseForm {
|
||||
}
|
||||
|
||||
const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
const { t } = useTranslation("member");
|
||||
const { data } = useGetCredentialsQuery();
|
||||
const [input, setInput] = useState<BaseForm>({
|
||||
current: "",
|
||||
@@ -75,22 +77,22 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
return (
|
||||
<Modal id="modal-modal">
|
||||
<StyledEdit
|
||||
title={"Change your password"}
|
||||
description={"Enter current password and new password."}
|
||||
title={t("change_pwd") || ""}
|
||||
description={t("change_pwd_desc") || ""}
|
||||
buttons={
|
||||
<>
|
||||
<Button className="cancel" onClick={closeModal}>
|
||||
Cancel
|
||||
{t("action.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button disabled={disableBtn} onClick={handleUpdate}>
|
||||
{isLoading ? "Updating" : `Update`}
|
||||
{isLoading ? "Updating" : t("action.update", { ns: "common" })}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{data?.password && (
|
||||
<div className="input">
|
||||
<label htmlFor={"current"}>Current Password</label>
|
||||
<label htmlFor={"current"}>{t("current_pwd")}</label>
|
||||
<Input
|
||||
type="password"
|
||||
id="current"
|
||||
@@ -102,7 +104,7 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
</div>
|
||||
)}
|
||||
<div className="input">
|
||||
<label htmlFor={"newPassword"}>New Password</label>
|
||||
<label htmlFor={"newPassword"}>{t("new_pwd")}</label>
|
||||
<Input
|
||||
type="password"
|
||||
name={"newPassword"}
|
||||
@@ -112,7 +114,7 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
></Input>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label htmlFor={"confirmPassword"}>Confirm New Password</label>
|
||||
<label htmlFor={"confirmPassword"}>{t("confirm_new_pwd")}</label>
|
||||
<Input
|
||||
onBlur={handleCompare}
|
||||
type="password"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// import { useState, MouseEvent } from "react";
|
||||
// import dayjs from "dayjs";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
|
||||
@@ -17,26 +18,27 @@ const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefau
|
||||
</tr>;
|
||||
};
|
||||
export default function Widget() {
|
||||
const { t } = useTranslation("setting", { keyPrefix: "widget" });
|
||||
// const disableBtn = !reachLimit;
|
||||
return (
|
||||
<div className="flex flex-col justify-start items-start">
|
||||
<div className="text-gray-600 ">
|
||||
Extending VoceChat by embedding the vocechat widget SDK!
|
||||
{t('tip')}
|
||||
</div>
|
||||
<label htmlFor="code" className="text-gray-500 text-sm mt-5">
|
||||
Code Example:
|
||||
{t('code')}:
|
||||
</label>
|
||||
<SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
|
||||
{`<!-- put this code snippet into your html file -->\n<script \n data-host-id="4" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n src="${location.origin}/widget.js" \n async \n/>`}
|
||||
{`<!-- ${t('code_comment')} -->\n<script \n data-host-id="4" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n src="${location.origin}/widget.js" \n async \n/>`}
|
||||
</SyntaxHighlighter>
|
||||
<div className="text-gray-500 text-sm mt-5 mb-2">
|
||||
Configuration Description:
|
||||
{t('config')}:
|
||||
</div>
|
||||
<div className="w-[700px] border border-solid border-gray-300 rounded overflow-hidden">
|
||||
<table className="min-w-full table-auto">
|
||||
<thead className="border-b bg-gray-50">
|
||||
<tr>
|
||||
{["Parameter Key", "Default Value", "Remarks"].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
|
||||
{[t('param_key'), t('default_value'), t('remark')].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
|
||||
{title}
|
||||
</th>)}
|
||||
</tr>
|
||||
|
||||
@@ -7,8 +7,10 @@ import Label from "../../../common/component/styled/Label";
|
||||
import SaveTip from "../../../common/component/SaveTip";
|
||||
import useConfig from "../../../common/hook/useConfig";
|
||||
import { FirebaseConfig } from "../../../types/server";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function ConfigFirebase() {
|
||||
const { t } = useTranslation("setting");
|
||||
const { values, toggleEnable, updateConfig, setValues, reset, changed } = useConfig("firebase");
|
||||
const handleUpdate = () => {
|
||||
// const { token_url, description } = values;
|
||||
@@ -34,33 +36,33 @@ export default function ConfigFirebase() {
|
||||
<StyledContainer>
|
||||
<div className="inputs">
|
||||
<div className="input row">
|
||||
<Label>Enable</Label>
|
||||
<Label>{t("firebase.enable")}</Label>
|
||||
<Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="name">Token Url</Label>
|
||||
<Label htmlFor="name">{t("firebase.token_url")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
data-type="token_url"
|
||||
onChange={handleChange}
|
||||
value={token_url}
|
||||
name="token_url"
|
||||
placeholder="Token URL"
|
||||
placeholder={t("firebase.token_url") || ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Project ID</Label>
|
||||
<Label htmlFor="desc">{t("firebase.project_id")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
data-type="project_id"
|
||||
onChange={handleChange}
|
||||
value={project_id}
|
||||
name="project_id"
|
||||
placeholder="Project ID"
|
||||
placeholder={t("firebase.project_id") || ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Private Key</Label>
|
||||
<Label htmlFor="desc">{t("firebase.private_key")}</Label>
|
||||
<Textarea
|
||||
rows={10}
|
||||
spellCheck={false}
|
||||
@@ -69,18 +71,18 @@ export default function ConfigFirebase() {
|
||||
onChange={handleChange}
|
||||
value={private_key}
|
||||
name="private_key"
|
||||
placeholder="Private key"
|
||||
placeholder={t("firebase.private_key") || ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Client Email</Label>
|
||||
<Label htmlFor="desc">{t("firebase.client_email")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
data-type="client_email"
|
||||
onChange={handleChange}
|
||||
value={client_email}
|
||||
name="client_email"
|
||||
placeholder="Client Email address"
|
||||
placeholder={t("firebase.client_email") || ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import Toggle from "../../../../common/component/styled/Toggle";
|
||||
import options from "./items.json";
|
||||
import Styled from "./styled";
|
||||
import IconMinus from "../../../../assets/icons/minus.circle.svg";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface Issuer {
|
||||
domain: string;
|
||||
@@ -19,6 +20,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
|
||||
const { t } = useTranslation();
|
||||
const [select, setSelect] = useState<Partial<Option> | null>(null);
|
||||
const [newDomain, setNewDomain] = useState("");
|
||||
|
||||
@@ -111,7 +113,7 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
|
||||
setNewDomain("");
|
||||
}}
|
||||
>
|
||||
Add
|
||||
{t("action.add")}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -11,8 +11,10 @@ import IssuerList from "./IssuerList";
|
||||
import useGoogleAuthConfig from "../../../common/hook/useGoogleAuthConfig";
|
||||
import useGithubAuthConfig from "../../../common/hook/useGithubAuthConfig";
|
||||
import { LoginConfig } from "../../../types/server";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function Logins() {
|
||||
const { t } = useTranslation("setting", { keyPrefix: "login" });
|
||||
const {
|
||||
changed: clientIdChanged,
|
||||
clientId,
|
||||
@@ -74,9 +76,9 @@ export default function Logins() {
|
||||
<div className="row">
|
||||
<div className="title">
|
||||
<div className="txt">
|
||||
<Label>Password</Label>
|
||||
<Label>{t("password")}</Label>
|
||||
</div>
|
||||
<span className="desc">Allows members login with password.</span>
|
||||
<span className="desc">{t("password_desc")}</span>
|
||||
</div>
|
||||
<Toggle
|
||||
onClick={handleToggle.bind(null, { password: !password })}
|
||||
@@ -88,9 +90,9 @@ export default function Logins() {
|
||||
<div className="row">
|
||||
<div className="title">
|
||||
<div className="txt">
|
||||
<Label>Magic Link</Label>
|
||||
<Label>{t("magic_link")}</Label>
|
||||
</div>
|
||||
<span className="desc">Allows members login with Magic Link.</span>
|
||||
<span className="desc">{t("magic_link_desc")}</span>
|
||||
</div>
|
||||
<Toggle
|
||||
onClick={handleToggle.bind(null, { magic_link: !magic_link })}
|
||||
@@ -102,10 +104,10 @@ export default function Logins() {
|
||||
<div className="row">
|
||||
<div className="title">
|
||||
<div className="txt">
|
||||
<Label>Google</Label>
|
||||
<Label>{t("google")}</Label>
|
||||
<Tooltip link="https://doc.voce.chat/setting/third_login/login-google" />
|
||||
</div>
|
||||
<span className="desc">Allows members login with Google.</span>
|
||||
<span className="desc">{t("google_desc")}</span>
|
||||
</div>
|
||||
<Toggle
|
||||
onClick={handleToggle.bind(null, { google: !google })}
|
||||
@@ -125,10 +127,10 @@ export default function Logins() {
|
||||
<div className="row">
|
||||
<div className="title">
|
||||
<div className="txt">
|
||||
<Label>Github</Label>
|
||||
<Label>{t("github")}</Label>
|
||||
<Tooltip link="https://doc.voce.chat/setting/third_login/login-github" />
|
||||
</div>
|
||||
<span className="desc">Allows members login with Github.</span>
|
||||
<span className="desc">{t("github_desc")}</span>
|
||||
</div>
|
||||
<Toggle
|
||||
onClick={handleToggle.bind(null, { github: !github })}
|
||||
@@ -156,10 +158,10 @@ export default function Logins() {
|
||||
<div className="row">
|
||||
<div className="title">
|
||||
<div className="txt">
|
||||
<Label>Metamask</Label>
|
||||
<Label>{t("metamask")}</Label>
|
||||
<Tooltip link="https://doc.voce.chat/setting/third_login/login-metamask" />
|
||||
</div>
|
||||
<span className="desc">Allows members login with Metamask.</span>
|
||||
<span className="desc">{t("metamask_desc")}</span>
|
||||
</div>
|
||||
<Toggle
|
||||
onClick={handleToggle.bind(null, { metamask: !metamask })}
|
||||
@@ -171,10 +173,10 @@ export default function Logins() {
|
||||
<div className="row">
|
||||
<div className="title">
|
||||
<div className="txt">
|
||||
<Label htmlFor="desc">OIDC</Label>
|
||||
<Label htmlFor="desc">{t("oidc")}</Label>
|
||||
<Tooltip link="https://doc.voce.chat/setting/third_login/login-webid" />
|
||||
</div>
|
||||
<span className="desc">Save my login details for next time.</span>
|
||||
<span className="desc">{t("oidc_desc")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
|
||||
@@ -17,8 +17,10 @@ import Label from "../../../common/component/styled/Label";
|
||||
import SaveTip from "../../../common/component/SaveTip";
|
||||
import toast from "react-hot-toast";
|
||||
import { SMTPConfig } from "../../../types/server";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function ConfigSMTP() {
|
||||
const { t } = useTranslation("setting", { keyPrefix: "smtp" });
|
||||
const [testEmail, setTestEmail] = useState("");
|
||||
const [sendTestEmail, { isSuccess, isError }] = useSendTestEmailMutation();
|
||||
const { reset, updateConfig, values, setValues, changed, toggleEnable } = useConfig("smtp");
|
||||
@@ -61,11 +63,11 @@ export default function ConfigSMTP() {
|
||||
<StyledContainer>
|
||||
<div className="inputs">
|
||||
<div className="input row">
|
||||
<Label>Enable</Label>
|
||||
<Label>{t("enable")}</Label>
|
||||
<Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="name">Host</Label>
|
||||
<Label htmlFor="name">{t("host")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
data-type="host"
|
||||
@@ -76,7 +78,7 @@ export default function ConfigSMTP() {
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Port</Label>
|
||||
<Label htmlFor="desc">{t("port")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
type={"number"}
|
||||
@@ -88,7 +90,7 @@ export default function ConfigSMTP() {
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">From</Label>
|
||||
<Label htmlFor="desc">{t("from")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
data-type="from"
|
||||
@@ -99,7 +101,7 @@ export default function ConfigSMTP() {
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Username</Label>
|
||||
<Label htmlFor="desc">{t("username")}</Label>
|
||||
<Input
|
||||
disabled={!enabled}
|
||||
data-type="username"
|
||||
@@ -110,7 +112,7 @@ export default function ConfigSMTP() {
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">Password</Label>
|
||||
<Label htmlFor="desc">{t("password")}</Label>
|
||||
<Input
|
||||
type={"password"}
|
||||
disabled={!enabled}
|
||||
@@ -130,7 +132,7 @@ export default function ConfigSMTP() {
|
||||
className="link"
|
||||
rel="noreferrer"
|
||||
>
|
||||
How to set up SMTP?
|
||||
{t("how_to")}
|
||||
</a>
|
||||
</div>
|
||||
<StyledTest>
|
||||
@@ -143,7 +145,7 @@ export default function ConfigSMTP() {
|
||||
placeholder="test@email.com"
|
||||
/>
|
||||
<Button disabled={!enabled || !testEmail} onClick={handleTestClick}>
|
||||
Send Test Email
|
||||
{t("send_test_email")}
|
||||
</Button>
|
||||
</StyledTest>
|
||||
{changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
import Tippy from "@tippyjs/react";
|
||||
import { roundArrow } from "tippy.js";
|
||||
import "tippy.js/dist/svg-arrow.css";
|
||||
import styled from "styled-components";
|
||||
import IconQuestion from "../../../assets/icons/question.svg";
|
||||
// import { useTranslation } from "react-i18next";
|
||||
import { PropsWithChildren } from "react";
|
||||
import { Trans } from 'react-i18next';
|
||||
|
||||
const StyledContent = styled.div`
|
||||
padding: 8px 12px;
|
||||
background: #101828;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #ffffff;
|
||||
a {
|
||||
color: #55c7ec;
|
||||
}
|
||||
`;
|
||||
const Link = ({ to, children }: PropsWithChildren<{ to: string }>) => {
|
||||
|
||||
return <a href={to} className="text-primary-500" target="_blank" rel="noreferrer" >
|
||||
{children}
|
||||
</a>;
|
||||
};
|
||||
export default function Tooltip({ link = "#" }) {
|
||||
return (
|
||||
<Tippy
|
||||
@@ -25,13 +20,11 @@ export default function Tooltip({ link = "#" }) {
|
||||
arrow={roundArrow}
|
||||
placement="bottom"
|
||||
content={
|
||||
<StyledContent>
|
||||
Need more detail? See our{" "}
|
||||
<a target={"doc"} href={link}>
|
||||
doc
|
||||
</a>
|
||||
.
|
||||
</StyledContent>
|
||||
<div className="py-2 px-3 bg-gray-800 text-xs text-white rounded-lg">
|
||||
<Trans ns="setting" i18nKey={"login.more_details"} >
|
||||
<Link to={link} />
|
||||
</Trans>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<IconQuestion className="icon" />
|
||||
|
||||
@@ -3,10 +3,12 @@ import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import StyledSettingContainer from "../../common/component/StyledSettingContainer";
|
||||
import useNavs from "./navs";
|
||||
import LogoutConfirmModal from "./LogoutConfirmModal";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
let pageFrom: string = "";
|
||||
|
||||
export default function Setting() {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navs = useNavs();
|
||||
const flattenNaves = navs.map(({ items }) => items).flat();
|
||||
@@ -30,9 +32,9 @@ export default function Setting() {
|
||||
<StyledSettingContainer
|
||||
nav={currNav}
|
||||
closeModal={close}
|
||||
title="Settings"
|
||||
title={t("setting") || ""}
|
||||
navs={navs}
|
||||
dangers={[{ title: "Log Out", handler: toggleLogoutConfirm }]}
|
||||
dangers={[{ title: t("action.logout"), handler: toggleLogoutConfirm }]}
|
||||
>
|
||||
{currNav.component}
|
||||
</StyledSettingContainer>
|
||||
|
||||
+35
-36
@@ -4,108 +4,107 @@ import Logins from "./config/Logins";
|
||||
import ConfigFirebase from "./config/Firebase";
|
||||
import ConfigSMTP from "./config/SMTP";
|
||||
import APIConfig from "./APIConfig";
|
||||
import License from "./License";
|
||||
import License from "./License/License";
|
||||
import Widget from "./Widget";
|
||||
import ManageMembers from "../../common/component/ManageMembers";
|
||||
import FAQ from "../../common/component/FAQ";
|
||||
import ConfigAgora from "./config/Agora";
|
||||
// import ConfigAgora from "./config/Agora";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const navs = [
|
||||
{
|
||||
title: "General",
|
||||
title: "general",
|
||||
items: [
|
||||
{
|
||||
name: "overview",
|
||||
title: "Overview",
|
||||
component: <Overview />
|
||||
},
|
||||
{
|
||||
name: "my_account",
|
||||
component: <MyAccount />
|
||||
},
|
||||
{
|
||||
name: "members",
|
||||
title: "Members",
|
||||
component: <ManageMembers />,
|
||||
admin: true
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "User",
|
||||
items: [
|
||||
{
|
||||
name: "my_account",
|
||||
title: "My Account",
|
||||
component: <MyAccount />
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Configuration",
|
||||
title: "config",
|
||||
items: [
|
||||
{
|
||||
name: "firebase",
|
||||
title: "Firebase",
|
||||
component: <ConfigFirebase />
|
||||
},
|
||||
{
|
||||
name: "agora",
|
||||
title: "Agora",
|
||||
component: <ConfigAgora />
|
||||
},
|
||||
// {
|
||||
// name: "agora",
|
||||
// component: <ConfigAgora />
|
||||
// },
|
||||
{
|
||||
name: "smtp",
|
||||
title: "SMTP",
|
||||
component: <ConfigSMTP />
|
||||
},
|
||||
{
|
||||
name: "social_login",
|
||||
title: "Login Methods",
|
||||
name: "login_method",
|
||||
component: <Logins />
|
||||
},
|
||||
{
|
||||
name: "api",
|
||||
title: "Third-party APP",
|
||||
name: "third_app",
|
||||
component: <APIConfig />
|
||||
},
|
||||
{
|
||||
name: "widget",
|
||||
title: "Widget",
|
||||
component: <Widget />
|
||||
},
|
||||
{
|
||||
name: "license",
|
||||
title: "License",
|
||||
component: <License />
|
||||
}
|
||||
],
|
||||
admin: true
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
title: "about",
|
||||
items: [
|
||||
{
|
||||
name: "faq",
|
||||
title: "FAQ",
|
||||
component: <FAQ />
|
||||
},
|
||||
{
|
||||
name: "terms",
|
||||
title: "Terms & Privacy",
|
||||
component: "Terms & Privacy"
|
||||
},
|
||||
{
|
||||
name: "feedback",
|
||||
title: "Feedback",
|
||||
component: "feedback"
|
||||
component: "Email: han@privoce.com\nWechat: yanggc_2013"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const useNavs = () => {
|
||||
const { t } = useTranslation("setting");
|
||||
const loginUser = useAppSelector((store) => {
|
||||
return store.authData.user;
|
||||
});
|
||||
return navs.filter((nav) => {
|
||||
const transformedNavs = navs.map(n => {
|
||||
const { title, items, ...rest } = n;
|
||||
return {
|
||||
title: t(`nav.${title}`),
|
||||
items: items.map(item => {
|
||||
const { name, ...rest } = item;
|
||||
return {
|
||||
name,
|
||||
title: t(`nav.${name}`),
|
||||
...rest
|
||||
};
|
||||
}),
|
||||
...rest
|
||||
};
|
||||
});
|
||||
return transformedNavs.filter((nav) => {
|
||||
if (loginUser?.is_admin) {
|
||||
return true;
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user