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)

packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx

@@ -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 (
-      <Button
-        className={styles.editButton}
-        onClick={handleEdit}
-        data-testid="share-page-edit-button"
-      >
-        {t['Edit']()}
-      </Button>
-    );
-  }
-
-  return null;
-};

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 (
     <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/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 (
+    <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/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}
       />
+      <AuthModal />
     </div>
   );
 }

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