diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx deleted file mode 100644 index 64dc2d12e1..0000000000 --- a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Button } from '@affine/component/ui/button'; -import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper'; -import { useI18n } from '@affine/i18n'; -import { - useLiveData, - useService, - WorkspacesService, -} from '@toeverything/infra'; -import { useCallback, useEffect } from 'react'; - -import type { ShareHeaderRightItemProps } from './index'; -import * as styles from './styles.css'; - -export const AuthenticatedItem = ({ - setIsMember, - ...props -}: { setIsMember: (value: boolean) => void } & ShareHeaderRightItemProps) => { - const { workspaceId, pageId } = props; - - const workspacesService = useService(WorkspacesService); - const workspaces = useLiveData(workspacesService.list.workspaces$); - const isMember = workspaces?.some(workspace => workspace.id === workspaceId); - const t = useI18n(); - const { jumpToPage } = useNavigateHelper(); - - const handleEdit = useCallback(() => { - jumpToPage(workspaceId, pageId); - }, [workspaceId, pageId, jumpToPage]); - - useEffect(() => { - if (isMember) { - setIsMember(true); - } - }, [isMember, setIsMember]); - - if (isMember) { - return ( - - ); - } - - return null; -}; diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx index 6d3324105c..68af19d881 100644 --- a/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx +++ b/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx @@ -1,9 +1,8 @@ import { AuthService } from '@affine/core/modules/cloud'; import { type DocMode, useLiveData, useService } from '@toeverything/infra'; -import { useState } from 'react'; -import { AuthenticatedItem } from './authenticated-item'; import { PresentButton } from './present'; +import { SignIn } from './sign-in'; import * as styles from './styles.css'; import { PublishPageUserAvatar } from './user-avatar'; @@ -16,20 +15,16 @@ export type ShareHeaderRightItemProps = { const ShareHeaderRightItem = ({ ...props }: ShareHeaderRightItemProps) => { const loginStatus = useLiveData(useService(AuthService).session.status$); const { publishMode } = props; - const [isMember, setIsMember] = useState(false); - - // TODO(@JimmFly): Add TOC + const authenticated = loginStatus === 'authenticated'; return (
- {loginStatus === 'authenticated' ? ( - - ) : null} + {authenticated ? null : } {publishMode === 'edgeless' ? : null} - {loginStatus === 'authenticated' ? ( + {authenticated ? ( <>
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/sign-in.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/sign-in.tsx new file mode 100644 index 0000000000..0bbeb32ebe --- /dev/null +++ b/packages/frontend/core/src/components/cloud/share-header-right-item/sign-in.tsx @@ -0,0 +1,30 @@ +import { Button } from '@affine/component/ui/button'; +import { authAtom } from '@affine/core/atoms'; +import { useI18n } from '@affine/i18n'; +import { useSetAtom } from 'jotai'; +import { useCallback } from 'react'; + +import * as styles from './styles.css'; + +export const SignIn = () => { + const setOpen = useSetAtom(authAtom); + + const t = useI18n(); + + const onClickSignIn = useCallback(() => { + setOpen(state => ({ + ...state, + openModal: true, + })); + }, [setOpen]); + + return ( + + ); +}; diff --git a/packages/frontend/core/src/pages/workspace/share/share-header.tsx b/packages/frontend/core/src/pages/workspace/share/share-header.tsx index 82619a4d39..7782f36316 100644 --- a/packages/frontend/core/src/pages/workspace/share/share-header.tsx +++ b/packages/frontend/core/src/pages/workspace/share/share-header.tsx @@ -1,6 +1,7 @@ import { BlocksuiteHeaderTitle } from '@affine/core/components/blocksuite/block-suite-header/title'; import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch'; import ShareHeaderRightItem from '@affine/core/components/cloud/share-header-right-item'; +import { AuthModal } from '@affine/core/providers/modal-provider'; import type { DocCollection } from '@blocksuite/store'; import type { DocMode } from '@toeverything/infra'; @@ -25,6 +26,7 @@ export function ShareHeader({ pageId={pageId} publishMode={publishMode} /> +
); } diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 8ae47575df..7db4dd6be9 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1408,6 +1408,7 @@ "com.affine.share-page.footer.description": "Empower your sharing with AFFiNE Cloud: One-click doc sharing", "com.affine.share-page.footer.get-started": "Get started for free", "com.affine.share-page.header.present": "Present", + "com.affine.share-page.header.login": "Login or Sign Up", "com.affine.shortcutsTitle.edgeless": "Edgeless", "com.affine.shortcutsTitle.general": "General", "com.affine.shortcutsTitle.markdownSyntax": "Markdown syntax", diff --git a/tests/affine-cloud/e2e/share-page.spec.ts b/tests/affine-cloud/e2e/share-page.spec.ts index eea6a4d5bc..99d9f38454 100644 --- a/tests/affine-cloud/e2e/share-page.spec.ts +++ b/tests/affine-cloud/e2e/share-page.spec.ts @@ -111,8 +111,6 @@ test('share page with default edgeless', async ({ page, browser }) => { expect(page2.locator('affine-paragraph').first()).toContainText( 'TEST CONTENT' ); - const editButton = page2.getByTestId('share-page-edit-button'); - await expect(editButton).not.toBeVisible(); } });