feat(core): expose skip login button to web (#8115)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/634cce16-bba2-480f-9126-94b22a782a9a.png)

Allow user skip login page on client

packages/frontend/core/src/components/affine/auth/index.tsx

@@ -31,6 +31,7 @@ export type AuthPanelProps<State extends AuthAtomData['state']> = {
   setAuthData: <T extends AuthAtomData['state']>(
     updates: { state: T } & Difference<AuthAtomType<State>, AuthAtomType<T>>
   ) => void;
+  onSkip?: () => void;
 } & Extract<AuthAtomData, { state: State }>;
 
 const config: {
@@ -100,7 +101,7 @@ export function AuthModal() {
   );
 }
 
-export function AuthPanel() {
+export function AuthPanel({ onSkip }: { onSkip?: () => void }) {
   const t = useI18n();
   const [authAtomValue, setAuthAtom] = useAtom(authAtom);
   const authService = useService(AuthService);
@@ -137,6 +138,12 @@ export function AuthPanel() {
 
   const CurrentPanel = config[authAtomValue.state];
 
+  const props = {
+    ...authAtomValue,
+    onSkip,
+    setAuthData,
+  };
+
   // @ts-expect-error checked in impls
-  return <CurrentPanel {...authAtomValue} setAuthData={setAuthData} />;
+  return <CurrentPanel {...props} />;
 }

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -24,6 +24,7 @@ function validateEmail(email: string) {
 
 export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
   setAuthData: setAuthState,
+  onSkip,
 }) => {
   const t = useI18n();
   const authService = useService(AuthService);
@@ -134,6 +135,29 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
           </Trans>
         </div>
       </div>
+
+      {onSkip ? (
+        <>
+          <div className={style.skipDivider}>
+            <div className={style.skipDividerLine} />
+            <span className={style.skipDividerText}>or</span>
+            <div className={style.skipDividerLine} />
+          </div>
+          <div className={style.skipSection}>
+            <div className={style.skipText}>
+              {t['com.affine.mobile.sign-in.skip.hint']()}
+            </div>
+            <Button
+              variant="plain"
+              onClick={onSkip}
+              className={style.skipLink}
+              suffix={<ArrowRightBigIcon className={style.skipLinkIcon} />}
+            >
+              {t['com.affine.mobile.sign-in.skip.link']()}
+            </Button>
+          </div>
+        </>
+      ) : null}
     </>
   );
 };

packages/frontend/core/src/components/affine/auth/style.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { globalStyle, style } from '@vanilla-extract/css';
 export const authModalContent = style({
   marginTop: '30px',
@@ -113,3 +114,44 @@ export const userPlanButton = style({
     },
   },
 });
+
+export const skipDivider = style({
+  display: 'flex',
+  gap: 12,
+  alignItems: 'center',
+  height: 20,
+  marginTop: 12,
+  marginBottom: 12,
+});
+
+export const skipDividerLine = style({
+  flex: 1,
+  height: 0,
+  borderBottom: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+});
+
+export const skipDividerText = style({
+  color: cssVarV2('text/secondary'),
+  fontSize: cssVar('fontXs'),
+});
+
+export const skipText = style({
+  color: cssVarV2('text/primary'),
+  fontSize: cssVar('fontXs'),
+  fontWeight: 500,
+});
+
+export const skipLink = style({
+  color: cssVarV2('text/link'),
+  fontSize: cssVar('fontXs'),
+});
+
+export const skipLinkIcon = style({
+  color: cssVarV2('text/link'),
+});
+
+export const skipSection = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

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

@@ -41,7 +41,7 @@ export const SignIn = () => {
   return (
     <SignInPageContainer>
       <div style={{ maxWidth: '400px', width: '100%' }}>
-        <AuthPanel />
+        <AuthPanel onSkip={jumpToIndex} />
       </div>
     </SignInPageContainer>
   );

packages/frontend/mobile/src/views/sign-in/layout.css.ts

@@ -1,5 +1,3 @@
-import { cssVar } from '@toeverything/theme';
-import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
@@ -18,44 +16,3 @@ export const content = style({
   alignItems: 'stretch',
   gap: 24,
 });
-
-export const skipDivider = style({
-  display: 'flex',
-  gap: 12,
-  alignItems: 'center',
-  height: 20,
-  marginTop: 12,
-  marginBottom: 12,
-});
-
-export const skipDividerLine = style({
-  flex: 1,
-  height: 0,
-  borderBottom: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
-});
-
-export const skipDividerText = style({
-  color: cssVarV2('text/secondary'),
-  fontSize: cssVar('fontXs'),
-});
-
-export const skipText = style({
-  color: cssVarV2('text/primary'),
-  fontSize: cssVar('fontXs'),
-  fontWeight: 500,
-});
-
-export const skipLink = style({
-  color: cssVarV2('text/link'),
-  fontSize: cssVar('fontXs'),
-});
-
-export const skipLinkIcon = style({
-  color: cssVarV2('text/link'),
-});
-
-export const skipSection = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-});

packages/frontend/mobile/src/views/sign-in/layout.tsx

@@ -1,40 +1,13 @@
-import { Button } from '@affine/component';
-import { useI18n } from '@affine/i18n';
-import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
 import type { PropsWithChildren } from 'react';
 
 import { SignInBackground } from './background';
 import * as styles from './layout.css';
 
-export const MobileSignInLayout = ({
+export const MobileSignInLayout = ({ children }: PropsWithChildren) => {
-  children,
-  onSkip,
-}: PropsWithChildren<{
-  onSkip: () => void;
-}>) => {
-  const t = useI18n();
   return (
     <div className={styles.root}>
       <SignInBackground />
       <div className={styles.content}>{children}</div>
-      <div className={styles.skipDivider}>
-        <div className={styles.skipDividerLine} />
-        <span className={styles.skipDividerText}>or</span>
-        <div className={styles.skipDividerLine} />
-      </div>
-      <div className={styles.skipSection}>
-        <div className={styles.skipText}>
-          {t['com.affine.mobile.sign-in.skip.hint']()}
-        </div>
-        <Button
-          variant="plain"
-          onClick={onSkip}
-          className={styles.skipLink}
-          suffix={<ArrowRightBigIcon className={styles.skipLinkIcon} />}
-        >
-          {t['com.affine.mobile.sign-in.skip.link']()}
-        </Button>
-      </div>
     </div>
   );
 };

packages/frontend/mobile/src/views/sign-in/mobile-sign-in.tsx

@@ -4,8 +4,8 @@ import { MobileSignInLayout } from './layout';
 
 export const MobileSignIn = ({ onSkip }: { onSkip: () => void }) => {
   return (
-    <MobileSignInLayout onSkip={onSkip}>
+    <MobileSignInLayout>
-      <AuthPanel />
+      <AuthPanel onSkip={onSkip} />
     </MobileSignInLayout>
   );
 };