From a30872e93afb839a2b6e51089eeeb7bbe27a15a7 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Wed, 1 Feb 2023 22:58:06 +0000 Subject: [PATCH] feat: tips for operator restrictions --- src/components/dashboard/DashboardLayout.tsx | 8 +++--- src/components/site/PostMeta.tsx | 8 +++--- src/components/site/SiteLayout.tsx | 7 +++-- src/hooks/{useIsOwner.ts => useUserRole.ts} | 18 +++++++----- .../[subdomain]/settings/domains.tsx | 10 ++++++- .../[subdomain]/settings/operator.tsx | 28 +++++++++++++++---- 6 files changed, 55 insertions(+), 24 deletions(-) rename src/hooks/{useIsOwner.ts => useUserRole.ts} (70%) diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx index 31d309b5..59a56ad9 100644 --- a/src/components/dashboard/DashboardLayout.tsx +++ b/src/components/dashboard/DashboardLayout.tsx @@ -16,7 +16,7 @@ import { useShowNotificationModal, useNotifications, } from "@crossbell/notification" -import { useIsOwner } from "~/hooks/useIsOwner" +import { useUserRole } from "~/hooks/useUserRole" export function DashboardLayout({ children, @@ -30,13 +30,13 @@ export function DashboardLayout({ const site = useGetSite(subdomain) const userSite = useAccountSites() - const isOwner = useIsOwner(subdomain) + const userRole = useUserRole(subdomain) useEffect(() => { - if (isOwner.isSuccess && !isOwner.data) { + if (userRole.isSuccess && !userRole.data) { router.push("/dashboard") } - }, [router, isOwner]) + }, [router, userRole]) const showNotificationModal = useShowNotificationModal() const { isAllRead } = useNotifications() diff --git a/src/components/site/PostMeta.tsx b/src/components/site/PostMeta.tsx index 05424cf5..08dffd4c 100644 --- a/src/components/site/PostMeta.tsx +++ b/src/components/site/PostMeta.tsx @@ -8,7 +8,7 @@ import { CharacterFloatCard } from "~/components/common/CharacterFloatCard" import { getSiteLink } from "~/lib/helpers" import { Avatar } from "~/components/ui/Avatar" import { EyeIcon, PencilSquareIcon } from "@heroicons/react/24/outline" -import { useIsOwner } from "~/hooks/useIsOwner" +import { useUserRole } from "~/hooks/useUserRole" export const PostMeta: React.FC<{ page: Note @@ -22,12 +22,12 @@ export const PostMeta: React.FC<{ }, []) const [showEdit, setShowEdit] = useState(false) - const isOwner = useIsOwner(site?.username) + const userRole = useUserRole(site?.username) useEffect(() => { - if (isOwner.isSuccess && isOwner.data) { + if (userRole.isSuccess && userRole.data) { setShowEdit(true) } - }, [isOwner.isSuccess, isOwner.data]) + }, [userRole.isSuccess, userRole.data]) return (
diff --git a/src/components/site/SiteLayout.tsx b/src/components/site/SiteLayout.tsx index f75735de..6a9a73ca 100644 --- a/src/components/site/SiteLayout.tsx +++ b/src/components/site/SiteLayout.tsx @@ -10,7 +10,7 @@ import { useGetPage } from "~/queries/page" import { OUR_DOMAIN, SITE_URL } from "~/lib/env" import { IS_PROD } from "~/lib/constants" import { toGateway } from "~/lib/ipfs-parser" -import { useIsOwner } from "~/hooks/useIsOwner" +import { useUserRole } from "~/hooks/useUserRole" import { useGetSubscription } from "~/queries/site" import clsx from "clsx" import { useCheckLike, useCheckMint } from "~/queries/page" @@ -45,7 +45,7 @@ export const SiteLayout: React.FC = ({ const site = useGetSite(domainOrSubdomain) const isConnected = useAccountState((s) => !!s.computed.account) - const isOwner = useIsOwner(domainOrSubdomain) + const userRole = useUserRole(domainOrSubdomain) const subscription = useGetSubscription(domainOrSubdomain) const isLike = useCheckLike({ pageId: page.data?.id }) const isMint = useCheckMint(page.data?.id) @@ -67,7 +67,8 @@ export const SiteLayout: React.FC = ({ className={clsx({ "xlog-user": true, "xlog-user-login": isConnected, - "xlog-user-site-owner": isOwner?.data, + "xlog-user-site-owner": userRole?.data === "owner", + "xlog-user-site-operator": userRole?.data === "operator", "xlog-user-site-follower": subscription?.data, "xlog-user-post-liker": isLike.data?.count, "xlog-user-post-minter": isMint?.data?.count, diff --git a/src/hooks/useIsOwner.ts b/src/hooks/useUserRole.ts similarity index 70% rename from src/hooks/useIsOwner.ts rename to src/hooks/useUserRole.ts index 9b6add13..363deaa7 100644 --- a/src/hooks/useIsOwner.ts +++ b/src/hooks/useUserRole.ts @@ -3,7 +3,7 @@ import { useAccountSites } from "~/queries/site" import { useGetSite, useIsOperators } from "~/queries/site" import { useAccountState } from "@crossbell/connect-kit" -export function useIsOwner(subdomain?: string) { +export function useUserRole(subdomain?: string) { const site = useGetSite(subdomain) const userSite = useAccountSites() @@ -14,6 +14,15 @@ export function useIsOwner(subdomain?: string) { operator: address, }) + let role = null + if (subdomain && address) { + if (userSite.data?.find((site) => site.username === subdomain)) { + role = "owner" + } else if (isOperator.data) { + role = "operator" + } + } + return { isSuccess: subdomain && @@ -21,11 +30,6 @@ export function useIsOwner(subdomain?: string) { site.isSuccess && userSite.isSuccess && isOperator.isSuccess, - data: !!( - subdomain && - address && - (userSite.data?.find((site) => site.username === subdomain) || - isOperator.data) - ), + data: role, } } diff --git a/src/pages/dashboard/[subdomain]/settings/domains.tsx b/src/pages/dashboard/[subdomain]/settings/domains.tsx index c58dd048..2ee449e2 100644 --- a/src/pages/dashboard/[subdomain]/settings/domains.tsx +++ b/src/pages/dashboard/[subdomain]/settings/domains.tsx @@ -12,6 +12,7 @@ import { useAccountState, useUpgradeAccountModal } from "@crossbell/connect-kit" import { UniLink } from "~/components/ui/UniLink" import { getSiteLink } from "~/lib/helpers" import type { ReactElement } from "react" +import { useUserRole } from "~/hooks/useUserRole" export default function SettingsDomainsPage() { const router = useRouter() @@ -19,6 +20,7 @@ export default function SettingsDomainsPage() { const updateSite = useUpdateSite() const site = useGetSite(subdomain) + const userRole = useUserRole(subdomain) const isEmailAccount = useAccountState( (s) => s.computed.account?.type === "email", @@ -84,7 +86,7 @@ export default function SettingsDomainsPage() { addon={`.${OUR_DOMAIN}`} className="w-28" {...form.register("subdomain")} - disabled={isEmailAccount} + disabled={isEmailAccount || userRole?.data === "operator"} /> {isEmailAccount && (
@@ -109,6 +111,12 @@ export default function SettingsDomainsPage() { .
)} + {userRole.data === "operator" && ( +
+ Operators cannot change subdomain/handle. Please contact the site + owner. +
+ )}
void @@ -67,6 +68,7 @@ export default function SettingsOperatorPage() { (s) => s.computed.account?.type === "email", ) const upgradeAccountModal = useUpgradeAccountModal() + const userRole = useUserRole(subdomain) const [items, setItems] = useState([]) @@ -165,7 +167,7 @@ export default function SettingsOperatorPage() {

⚠️ Warning:

- {isEmailAccount ? ( + {isEmailAccount && ( Email users cannot set operators.{" "} . - ) : ( + )} + {userRole.data === "operator" && ( + + Operators cannot set other operators. Please contact the site + owner. + + )} + {!isEmailAccount && userRole.data !== "operator" && ( Operators have permissions to enter your dashboard, change your settings(excluding xLog subdomain) and post contents on your @@ -197,7 +206,13 @@ export default function SettingsOperatorPage() {

-
+
{items.length === 0 && (
@@ -211,7 +226,7 @@ export default function SettingsOperatorPage() { item={item} removeItem={removeItem} isLoading={removeOperator.isLoading} - disabled={isEmailAccount} + disabled={isEmailAccount || userRole.data === "operator"} /> ) })} @@ -222,7 +237,10 @@ export default function SettingsOperatorPage() { `}
-