feat(core): add sign in to not found page (#6496)

close AFF-211

packages/frontend/core/src/pages/404.tsx

@@ -1,4 +1,7 @@
-import { NotFoundPage } from '@affine/component/not-found-page';
+import {
+  NoPermissionOrNotFound,
+  NotFoundPage,
+} from '@affine/component/not-found-page';
 import { useSession } from '@affine/core/hooks/affine/use-current-user';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { ReactElement } from 'react';
@@ -7,10 +10,16 @@ import { useCallback, useState } from 'react';
 import { SignOutModal } from '../components/affine/sign-out-modal';
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 import { signOutCloud } from '../utils/cloud-utils';
+import { SignIn } from './sign-in';
 
-export const PageNotFound = (): ReactElement => {
+export const PageNotFound = ({
+  noPermission,
+}: {
+  noPermission?: boolean;
+}): ReactElement => {
   const { user } = useSession();
   const { jumpToIndex } = useNavigateHelper();
+  const { reload } = useSession();
   const [open, setOpen] = useState(false);
 
   const handleBackButtonClick = useCallback(
@@ -24,15 +33,26 @@ export const PageNotFound = (): ReactElement => {
 
   const onConfirmSignOut = useAsyncCallback(async () => {
     setOpen(false);
-    await signOutCloud('/signIn');
-  }, [setOpen]);
+    await signOutCloud();
+    await reload();
+  }, [reload]);
   return (
     <>
-      <NotFoundPage
-        user={user}
-        onBack={handleBackButtonClick}
-        onSignOut={handleOpenSignOutModal}
-      />
+      {noPermission ? (
+        <NoPermissionOrNotFound
+          user={user}
+          onBack={handleBackButtonClick}
+          onSignOut={handleOpenSignOutModal}
+          signInComponent={<SignIn />}
+        />
+      ) : (
+        <NotFoundPage
+          user={user}
+          onBack={handleBackButtonClick}
+          onSignOut={handleOpenSignOutModal}
+        />
+      )}
+
       <SignOutModal
         open={open}
         onOpenChange={setOpen}

packages/frontend/core/src/pages/sign-in.tsx

@@ -1,3 +1,4 @@
+import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect, useRef } from 'react';
@@ -17,7 +18,7 @@ interface LocationState {
     callbackURL?: string;
   };
 }
-export const Component = () => {
+export const SignIn = () => {
   const paymentRedirectRef = useRef<'redirect' | 'ignore' | null>(null);
   const [{ state, email = '', emailType = 'changePassword' }, setAuthAtom] =
     useAtom(authAtom);
@@ -87,14 +88,26 @@ export const Component = () => {
 
   return (
     <SignInPageContainer>
-      <AuthPanel
-        state={state}
-        email={email}
-        emailType={emailType}
-        setEmailType={onSetEmailType}
-        setAuthState={onSetAuthState}
-        setAuthEmail={onSetAuthEmail}
-      />
+      <div style={{ maxWidth: '400px' }}>
+        <AuthPanel
+          state={state}
+          email={email}
+          emailType={emailType}
+          setEmailType={onSetEmailType}
+          setAuthState={onSetAuthState}
+          setAuthEmail={onSetAuthEmail}
+        />
+      </div>
     </SignInPageContainer>
   );
 };
+
+export const Component = () => {
+  return (
+    <AffineOtherPageLayout>
+      <div style={{ padding: '0 20px' }}>
+        <SignIn />
+      </div>
+    </AffineOtherPageLayout>
+  );
+};

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -331,7 +331,7 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
 
   // if sync engine has been synced and the page is null, show 404 page.
   if (pageListReady && !page) {
-    return <PageNotFound />;
+    return <PageNotFound noPermission />;
   }
 
   if (!page) {

packages/frontend/core/src/pages/workspace/index.tsx

@@ -77,9 +77,8 @@ export const Component = (): ReactElement => {
 
   // if listLoading is false, we can show 404 page, otherwise we should show loading page.
   if (listLoading === false && meta === undefined) {
-    return <PageNotFound />;
+    return <PageNotFound noPermission />;
   }
-
   if (!workspace) {
     return <WorkspaceFallback key="workspaceLoading" />;
   }