From 74d71b7eb0237c10103b806638b569d1c38161ad Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 20 Dec 2024 17:42:46 +0800
Subject: [PATCH] feat(core): open in app for self-hosted

---
 .../core/src/components/sign-in/index.tsx     | 18 +++++--
 .../components/sign-in/sign-in-with-email.tsx |  9 ++--
 .../sign-in/sign-in-with-password.tsx         |  9 ++--
 .../core/src/components/sign-in/sign-in.tsx   | 13 +++--
 .../src/desktop/dialogs/sign-in/index.tsx     | 13 ++++-
 .../core/src/desktop/pages/auth/sign-in.tsx   | 48 ++++++++++++-------
 .../src/desktop/pages/workspace/index.tsx     | 20 +++++++-
 .../src/mobile/components/sign-in/index.tsx   | 17 ++++++-
 .../src/modules/cloud/entities/session.ts     |  5 ++
 .../core/src/modules/open-in-app/utils.ts     |  4 ++
 tools/cli/src/webpack/config.ts               | 13 ++++-
 tools/cli/src/webpack/runtime-config.ts       |  1 -
 12 files changed, 131 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/core/src/components/sign-in/index.tsx b/packages/frontend/core/src/components/sign-in/index.tsx
index e5ac4a9a7a66d..db834ab491c5c 100644
--- a/packages/frontend/core/src/components/sign-in/index.tsx
+++ b/packages/frontend/core/src/components/sign-in/index.tsx
@@ -6,6 +6,7 @@ import { AddSelfhostedStep } from './add-selfhosted';
 import { SignInStep } from './sign-in';
 import { SignInWithEmailStep } from './sign-in-with-email';
 import { SignInWithPasswordStep } from './sign-in-with-password';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 
 export type SignInStep =
   | 'signIn'
@@ -22,11 +23,13 @@ export interface SignInState {
 }
 
 export const SignInPanel = ({
-  onClose,
+  onSkip,
   server: initialServerBaseUrl,
   initStep,
+  onAuthenticated,
 }: {
-  onClose: () => void;
+  onAuthenticated?: (status: AuthSessionStatus) => void;
+  onSkip: () => void;
   server?: string;
   initStep?: SignInStep | undefined;
 }) => {
@@ -47,18 +50,23 @@ export const SignInPanel = ({
   return (
     <FrameworkScope scope={server.scope}>
       {step === 'signIn' ? (
-        <SignInStep state={state} changeState={setState} close={onClose} />
+        <SignInStep
+          state={state}
+          changeState={setState}
+          onSkip={onSkip}
+          onAuthenticated={onAuthenticated}
+        />
       ) : step === 'signInWithEmail' ? (
         <SignInWithEmailStep
           state={state}
           changeState={setState}
-          close={onClose}
+          onAuthenticated={onAuthenticated}
         />
       ) : step === 'signInWithPassword' ? (
         <SignInWithPasswordStep
           state={state}
           changeState={setState}
-          close={onClose}
+          onAuthenticated={onAuthenticated}
         />
       ) : step === 'addSelfhosted' ? (
         <AddSelfhostedStep state={state} changeState={setState} />
diff --git a/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx b/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx
index 7a99ecaa27975..1a19a52884d0c 100644
--- a/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx
+++ b/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx
@@ -23,15 +23,16 @@ import {
 import type { SignInState } from '.';
 import { Captcha } from './captcha';
 import * as style from './style.css';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 
 export const SignInWithEmailStep = ({
   state,
   changeState,
-  close,
+  onAuthenticated,
 }: {
   state: SignInState;
   changeState: Dispatch<SetStateAction<SignInState>>;
-  close: () => void;
+  onAuthenticated?: (status: AuthSessionStatus) => void;
 }) => {
   const initialSent = useRef(false);
   const [resendCountDown, setResendCountDown] = useState(0);
@@ -66,13 +67,13 @@ export const SignInWithEmailStep = ({
 
   useEffect(() => {
     if (loginStatus === 'authenticated') {
-      close();
       notify.success({
         title: t['com.affine.auth.toast.title.signed-in'](),
         message: t['com.affine.auth.toast.message.signed-in'](),
       });
     }
-  }, [close, loginStatus, t]);
+    onAuthenticated?.(loginStatus);
+  }, [loginStatus, onAuthenticated, t]);
 
   const sendEmail = useAsyncCallback(async () => {
     if (isSending || (!verifyToken && needCaptcha)) return;
diff --git a/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx b/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx
index 30b00e1c5859f..5cd57a4da9bd6 100644
--- a/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx
+++ b/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx
@@ -21,15 +21,16 @@ import { useCallback, useEffect, useState } from 'react';
 import type { SignInState } from '.';
 import { Captcha } from './captcha';
 import * as styles from './style.css';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 
 export const SignInWithPasswordStep = ({
   state,
   changeState,
-  close,
+  onAuthenticated,
 }: {
   state: SignInState;
   changeState: Dispatch<SetStateAction<SignInState>>;
-  close: () => void;
+  onAuthenticated?: (status: AuthSessionStatus) => void;
 }) => {
   const t = useI18n();
   const authService = useService(AuthService);
@@ -62,13 +63,13 @@ export const SignInWithPasswordStep = ({
 
   useEffect(() => {
     if (loginStatus === 'authenticated') {
-      close();
       notify.success({
         title: t['com.affine.auth.toast.title.signed-in'](),
         message: t['com.affine.auth.toast.message.signed-in'](),
       });
     }
-  }, [close, loginStatus, t]);
+    onAuthenticated?.(loginStatus);
+  }, [loginStatus, onAuthenticated, t]);
 
   const onSignIn = useAsyncCallback(async () => {
     if (isLoading || (!verifyToken && needCaptcha)) return;
diff --git a/packages/frontend/core/src/components/sign-in/sign-in.tsx b/packages/frontend/core/src/components/sign-in/sign-in.tsx
index 60d06e3f0d5b5..7d8f4087646cd 100644
--- a/packages/frontend/core/src/components/sign-in/sign-in.tsx
+++ b/packages/frontend/core/src/components/sign-in/sign-in.tsx
@@ -22,6 +22,7 @@ import {
 
 import type { SignInState } from '.';
 import * as style from './style.css';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 
 const emailRegex =
   /^(?:(?:[^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?:(?:\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|((?:[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -33,11 +34,13 @@ function validateEmail(email: string) {
 export const SignInStep = ({
   state,
   changeState,
-  close,
+  onSkip,
+  onAuthenticated,
 }: {
   state: SignInState;
   changeState: Dispatch<SetStateAction<SignInState>>;
-  close: () => void;
+  onSkip: () => void;
+  onAuthenticated?: (status: AuthSessionStatus) => void;
 }) => {
   const t = useI18n();
   const serverService = useService(ServerService);
@@ -64,13 +67,13 @@ export const SignInStep = ({
 
   useEffect(() => {
     if (loginStatus === 'authenticated') {
-      close();
       notify.success({
         title: t['com.affine.auth.toast.title.signed-in'](),
         message: t['com.affine.auth.toast.message.signed-in'](),
       });
     }
-  }, [close, loginStatus, t]);
+    onAuthenticated?.(loginStatus);
+  }, [loginStatus, onAuthenticated, t]);
 
   const onContinue = useAsyncCallback(async () => {
     if (!validateEmail(email)) {
@@ -208,7 +211,7 @@ export const SignInStep = ({
           </div>
           <Button
             variant="plain"
-            onClick={() => close()}
+            onClick={onSkip}
             className={style.skipLink}
             suffix={<ArrowRightBigIcon className={style.skipLinkIcon} />}
           >
diff --git a/packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx b/packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx
index 14cedb123d888..7816142cef864 100644
--- a/packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx
@@ -1,14 +1,24 @@
 import { Modal } from '@affine/component';
 import { SignInPanel, type SignInStep } from '@affine/core/components/sign-in';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 import type {
   DialogComponentProps,
   GLOBAL_DIALOG_SCHEMA,
 } from '@affine/core/modules/dialogs';
+import { useCallback } from 'react';
 export const SignInDialog = ({
   close,
   server: initialServerBaseUrl,
   step,
 }: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['sign-in']>) => {
+  const onAuthenticated = useCallback(
+    (status: AuthSessionStatus) => {
+      if (status === 'authenticated') {
+        close();
+      }
+    },
+    [close]
+  );
   return (
     <Modal
       open
@@ -21,7 +31,8 @@ export const SignInDialog = ({
       }}
     >
       <SignInPanel
-        onClose={close}
+        onSkip={close}
+        onAuthenticated={onAuthenticated}
         server={initialServerBaseUrl}
         initStep={step as SignInStep}
       />
diff --git a/packages/frontend/core/src/desktop/pages/auth/sign-in.tsx b/packages/frontend/core/src/desktop/pages/auth/sign-in.tsx
index f58c25e2f6e92..7e8462ad81d98 100644
--- a/packages/frontend/core/src/desktop/pages/auth/sign-in.tsx
+++ b/packages/frontend/core/src/desktop/pages/auth/sign-in.tsx
@@ -2,10 +2,8 @@ import { notify } from '@affine/component';
 import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { SignInPanel } from '@affine/core/components/sign-in';
-import { AuthService } from '@affine/core/modules/cloud';
 import { useI18n } from '@affine/i18n';
-import { useService } from '@toeverything/infra';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
@@ -13,6 +11,7 @@ import {
   RouteLogic,
   useNavigateHelper,
 } from '../../../components/hooks/use-navigate-helper';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 
 export const SignIn = ({
   redirectUrl: redirectUrlFromProps,
@@ -20,11 +19,12 @@ export const SignIn = ({
   redirectUrl?: string;
 }) => {
   const t = useI18n();
-  const session = useService(AuthService).session;
   const navigate = useNavigate();
   const { jumpToIndex } = useNavigateHelper();
   const [searchParams] = useSearchParams();
   const redirectUrl = redirectUrlFromProps ?? searchParams.get('redirect_uri');
+
+  const server = searchParams.get('server') ?? undefined;
   const error = searchParams.get('error');
 
   useEffect(() => {
@@ -36,22 +36,38 @@ export const SignIn = ({
     }
   }, [error, t]);
 
-  const handleClose = () => {
-    if (session.status$.value === 'authenticated' && redirectUrl) {
-      navigate(redirectUrl, {
-        replace: true,
-      });
-    } else {
-      jumpToIndex(RouteLogic.REPLACE, {
-        search: searchParams.toString(),
-      });
-    }
-  };
+  const handleClose = useCallback(() => {
+    jumpToIndex(RouteLogic.REPLACE, {
+      search: searchParams.toString(),
+    });
+  }, [jumpToIndex, searchParams]);
+
+  const handleAuthenticated = useCallback(
+    (status: AuthSessionStatus) => {
+      if (status === 'authenticated') {
+        if (redirectUrl) {
+          navigate(redirectUrl, {
+            replace: true,
+          });
+        } else {
+          handleClose();
+        }
+      }
+    },
+    [handleClose, navigate, redirectUrl]
+  );
+
+  const initStep = server ? 'addSelfhosted' : 'signIn';
 
   return (
     <SignInPageContainer>
       <div style={{ maxWidth: '400px', width: '100%' }}>
-        <SignInPanel onClose={handleClose} />
+        <SignInPanel
+          onSkip={handleClose}
+          onAuthenticated={handleAuthenticated}
+          initStep={initStep}
+          server={server}
+        />
       </div>
     </SignInPageContainer>
   );
diff --git a/packages/frontend/core/src/desktop/pages/workspace/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/index.tsx
index 4d3d46c222203..40e7ec1f7c0be 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/index.tsx
@@ -18,7 +18,12 @@ import {
 } from '@toeverything/infra';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { matchPath, useLocation, useParams } from 'react-router-dom';
+import {
+  matchPath,
+  useLocation,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
 
 import { AffineErrorBoundary } from '../../../components/affine/affine-error-boundary';
 import { WorkbenchRoot } from '../../../modules/workbench';
@@ -26,6 +31,7 @@ import { AppContainer } from '../../components/app-container';
 import { PageNotFound } from '../404';
 import { WorkspaceLayout } from './layouts/workspace-layout';
 import { SharePage } from './share/share-page';
+import { SignIn } from '../auth/sign-in';
 
 declare global {
   /**
@@ -49,6 +55,7 @@ export const Component = (): ReactElement => {
 
   const params = useParams();
   const location = useLocation();
+  const [searchParams] = useSearchParams();
 
   // check if we are in detail doc route, if so, maybe render share page
   const detailDocRoute = useMemo(() => {
@@ -110,6 +117,17 @@ export const Component = (): ReactElement => {
   }, [listLoading, meta, workspaceNotFound, workspacesService]);
 
   if (workspaceNotFound) {
+    if (BUILD_CONFIG.isElectron && searchParams.get('server')) {
+      const redirectUrl = window.location.href.replace(
+        window.location.origin,
+        ''
+      );
+      return (
+        <AffineOtherPageLayout>
+          <SignIn redirectUrl={redirectUrl} />
+        </AffineOtherPageLayout>
+      );
+    }
     if (detailDocRoute) {
       return (
         <SharePage
diff --git a/packages/frontend/core/src/mobile/components/sign-in/index.tsx b/packages/frontend/core/src/mobile/components/sign-in/index.tsx
index 5bfc891258242..6832a9019d72f 100644
--- a/packages/frontend/core/src/mobile/components/sign-in/index.tsx
+++ b/packages/frontend/core/src/mobile/components/sign-in/index.tsx
@@ -1,6 +1,8 @@
 import { SignInPanel } from '@affine/core/components/sign-in';
 
 import { MobileSignInLayout } from './layout';
+import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
+import { useCallback } from 'react';
 
 export const MobileSignInPanel = ({
   onClose,
@@ -9,9 +11,22 @@ export const MobileSignInPanel = ({
   onClose: () => void;
   server?: string;
 }) => {
+  const onAuthenticated = useCallback(
+    (status: AuthSessionStatus) => {
+      if (status === 'authenticated') {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
   return (
     <MobileSignInLayout>
-      <SignInPanel onClose={onClose} server={server} />
+      <SignInPanel
+        onSkip={onClose}
+        onAuthenticated={onAuthenticated}
+        server={server}
+      />
     </MobileSignInLayout>
   );
 };
diff --git a/packages/frontend/core/src/modules/cloud/entities/session.ts b/packages/frontend/core/src/modules/cloud/entities/session.ts
index f6f63b5975a07..ae5e50072f500 100644
--- a/packages/frontend/core/src/modules/cloud/entities/session.ts
+++ b/packages/frontend/core/src/modules/cloud/entities/session.ts
@@ -35,6 +35,11 @@ export interface AuthSessionAuthenticated {
   session: AuthSessionInfo;
 }
 
+export type AuthSessionStatus = (
+  | AuthSessionUnauthenticated
+  | AuthSessionAuthenticated
+)['status'];
+
 export class AuthSession extends Entity {
   session$: LiveData<AuthSessionUnauthenticated | AuthSessionAuthenticated> =
     LiveData.from(this.store.watchCachedAuthSession(), null).map(session =>
diff --git a/packages/frontend/core/src/modules/open-in-app/utils.ts b/packages/frontend/core/src/modules/open-in-app/utils.ts
index 0b16fbc6cdcdb..e0c0a2a4f4831 100644
--- a/packages/frontend/core/src/modules/open-in-app/utils.ts
+++ b/packages/frontend/core/src/modules/open-in-app/utils.ts
@@ -20,6 +20,10 @@ export const getOpenUrlInDesktopAppLink = (
     if (newTab) {
       params.set('new-tab', '1');
     }
+    if (environment.isSelfHosted) {
+      // assume self-hosted server is the current origin
+      params.set('server', location.origin);
+    }
     return new URL(
       `${scheme}://${urlObject.host}${urlObject.pathname}?${params.toString()}#${urlObject.hash}`
     ).toString();
diff --git a/tools/cli/src/webpack/config.ts b/tools/cli/src/webpack/config.ts
index e39038277d9df..f739935959f18 100644
--- a/tools/cli/src/webpack/config.ts
+++ b/tools/cli/src/webpack/config.ts
@@ -360,7 +360,18 @@ export const createConfiguration: (
       client: {
         overlay: process.env.DISABLE_DEV_OVERLAY === 'true' ? false : undefined,
       },
-      historyApiFallback: true,
+      historyApiFallback: {
+        rewrites: [
+          {
+            from: /.*/,
+            to: () => {
+              return process.env.SELF_HOSTED === 'true'
+                ? '/selfhost.html'
+                : '/index.html';
+            },
+          },
+        ],
+      },
       static: [
         {
           directory: join(
diff --git a/tools/cli/src/webpack/runtime-config.ts b/tools/cli/src/webpack/runtime-config.ts
index c5d61254c46c5..aa097824cb427 100644
--- a/tools/cli/src/webpack/runtime-config.ts
+++ b/tools/cli/src/webpack/runtime-config.ts
@@ -22,7 +22,6 @@ export function getBuildConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
         isAndroid: buildFlags.distribution === 'android',
         isAdmin: buildFlags.distribution === 'admin',
 
-        isSelfHosted: process.env.SELF_HOSTED === 'true',
         appBuildType: 'stable' as const,
         serverUrlPrefix: 'https://app.affine.pro',
         appVersion: packageJson.version,