feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

apps/core/src/providers/modal-provider.tsx

@@ -12,6 +12,7 @@ import { lazy, Suspense, useCallback, useTransition } from 'react';
 
 import type { SettingAtom } from '../atoms';
 import {
+  authAtom,
   openCreateWorkspaceModalAtom,
   openDisableCloudAlertModalAtom,
   openSettingModalAtom,
@@ -25,6 +26,11 @@ const SettingModal = lazy(() =>
     default: module.SettingModal,
   }))
 );
+const Auth = lazy(() =>
+  import('../components/affine/auth').then(module => ({
+    default: module.AuthModal,
+  }))
+);
 
 const WorkspaceListModal = lazy(() =>
   import('../components/pure/workspace-list-modal').then(module => ({
@@ -84,6 +90,45 @@ export const Setting = () => {
   );
 };
 
+export const AuthModal = (): ReactElement => {
+  const [
+    { openModal, state, email = '', emailType = 'changePassword' },
+    setAuthAtom,
+  ] = useAtom(authAtom);
+  return (
+    <Auth
+      open={openModal}
+      state={state}
+      email={email}
+      emailType={emailType}
+      setEmailType={useCallback(
+        emailType => {
+          setAuthAtom(prev => ({ ...prev, emailType }));
+        },
+        [setAuthAtom]
+      )}
+      setOpen={useCallback(
+        open => {
+          setAuthAtom(prev => ({ ...prev, openModal: open }));
+        },
+        [setAuthAtom]
+      )}
+      setAuthState={useCallback(
+        state => {
+          setAuthAtom(prev => ({ ...prev, state }));
+        },
+        [setAuthAtom]
+      )}
+      setAuthEmail={useCallback(
+        email => {
+          setAuthAtom(prev => ({ ...prev, email }));
+        },
+        [setAuthAtom]
+      )}
+    />
+  );
+};
+
 export function CurrentWorkspaceModals() {
   const [currentWorkspace] = useCurrentWorkspace();
   const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom(
@@ -203,22 +248,21 @@ export const AllWorkspaceModals = (): ReactElement => {
           }, [setOpenCreateWorkspaceModal])}
           onCreate={useCallback(
             id => {
-              startTransition(() => {
-                setOpenCreateWorkspaceModal(false);
-                setOpenWorkspacesModal(false);
-                setCurrentWorkspaceId(id);
+              setOpenCreateWorkspaceModal(false);
+              setOpenWorkspacesModal(false);
+              // if jumping immediately, the page may stuck in loading state
+              // not sure why yet .. here is a workaround
+              setTimeout(() => {
                 jumpToSubPath(id, WorkspaceSubPath.ALL);
               });
             },
-            [
-              jumpToSubPath,
-              setCurrentWorkspaceId,
-              setOpenCreateWorkspaceModal,
-              setOpenWorkspacesModal,
-            ]
+            [jumpToSubPath, setOpenCreateWorkspaceModal, setOpenWorkspacesModal]
           )}
         />
       </Suspense>
+      <Suspense>
+        <AuthModal />
+      </Suspense>
     </>
   );
 };