fix: some login & enable affine cloud issues (#999)

Co-authored-by: himself65 <himself65@outlook.com>

apps/web/src/components/enable-workspace-modal/index.tsx

@@ -1,12 +1,10 @@
-import { Modal, ModalWrapper } from '@affine/component';
-import { IconButton } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
 import { useAppState } from '@/providers/app-state-provider';
-import { useState } from 'react';
-import router from 'next/router';
-import { toast } from '@affine/component';
+import { IconButton, Modal, ModalWrapper, toast } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
-import { Header, Content, ContentTitle, StyleTips, StyleButton } from './style';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
 
 interface EnableWorkspaceModalProps {
   open: boolean;
@@ -20,6 +18,8 @@ export const EnableWorkspaceModal = ({
   const { t } = useTranslation();
   const { user, dataCenter, login, currentWorkspace } = useAppState();
   const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
   return (
     <Modal open={open} onClose={onClose} data-testid="logout-modal">
       <ModalWrapper width={560} height={292}>
@@ -43,17 +43,19 @@ export const EnableWorkspaceModal = ({
               loading={loading}
               onClick={async () => {
                 setLoading(true);
-                if (!user) {
-                  await login();
-                }
-                if (currentWorkspace) {
-                  const workspace = await dataCenter.enableWorkspaceCloud(
-                    currentWorkspace
-                  );
-                  workspace &&
-                    router.push(`/workspace/${workspace.id}/setting`);
-                  toast(t('Enabled success'));
+                if (user || (await login())) {
+                  if (currentWorkspace) {
+                    const workspace = await dataCenter.enableWorkspaceCloud(
+                      currentWorkspace
+                    );
+                    toast(t('Enabled success'));
+
+                    if (workspace) {
+                      router.push(`/workspace/${workspace.id}/setting`);
+                    }
+                  }
                 }
+                setLoading(false);
               }}
             >
               {user ? t('Enable') : t('Sign in and Enable')}

apps/web/src/components/enable-workspace-modal/style.ts

@@ -6,6 +6,7 @@ export const Header = styled('div')({
   flexDirection: 'row-reverse',
   paddingRight: '10px',
   paddingTop: '10px',
+  flexShrink: 0,
 });
 
 export const Content = styled('div')({

apps/web/src/components/workspace-layout/index.tsx

@@ -4,10 +4,11 @@ import { useRouter } from 'next/router';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 import { PropsWithChildren } from 'react';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { PageLoading } from '../loading';
 
 export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
   const { workspaceLoaded } = useEnsureWorkspace();
-  return <>{workspaceLoaded ? children : null}</>;
+  return <>{workspaceLoaded ? children : <PageLoading />}</>;
 };
 
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {

apps/web/src/components/workspace-modal/styles.ts

@@ -70,6 +70,7 @@ export const StyledCard = styled.div<{
 export const StyledFooter = styled('div')({
   height: '84px',
   padding: '0 40px',
+  flexShrink: 0,
   ...displayFlex('space-between', 'center'),
 });