feat(core): add sign in button to shared doc (#7952)

![CleanShot 2024-08-23 at 12 05 12@2x](https://github.com/user-attachments/assets/2c146707-9551-4044-b289-0904653f30f2)

Author: JimmFly

packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.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 (
     <div className={styles.rightItemContainer}>
-      {loginStatus === 'authenticated' ? (
-        <AuthenticatedItem setIsMember={setIsMember} {...props} />
-      ) : null}
+      {authenticated ? null : <SignIn />}
       {publishMode === 'edgeless' ? <PresentButton /> : null}
-      {loginStatus === 'authenticated' ? (
+      {authenticated ? (
         <>
           <div
             className={styles.headerDivider}
-            data-is-member={isMember}
+            data-authenticated={true}
             data-is-edgeless={publishMode === 'edgeless'}
           />
           <PublishPageUserAvatar />

packages/frontend/core/src/components/cloud/share-header-right-item/index.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 (
+    <Button
+      className={styles.editButton}
+      onClick={onClickSignIn}
+      data-testid="share-page-sign-in-button"
+    >
+      {t['com.affine.share-page.header.login']()}
+    </Button>
+  );
+};

packages/frontend/core/src/components/cloud/share-header-right-item/sign-in.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}
       />
+      <AuthModal />
     </div>
   );
 }

packages/frontend/core/src/pages/workspace/share/share-header.tsx

@@ -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",

packages/frontend/i18n/src/resources/en.json

@@ -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();
   }
 });