[add] Authing Guard component

[refactor] simplify Session Box component

src/component/AuthingGuard.tsx

@@ -0,0 +1,35 @@
+import { Guard } from '@authing/guard';
+import { Component, HTMLAttributes } from 'react';
+
+export const guard = new Guard({
+  appId: process.env.AUTHING_APP_ID!
+});
+
+export interface AuthingGuardProps extends HTMLAttributes<HTMLDivElement> {
+  onSignIn: (user: object) => any;
+  onError?: (message: any) => any;
+}
+
+export class AuthingGuard extends Component<AuthingGuardProps> {
+  init = async (box: HTMLDivElement | null) => {
+    if (!box) return;
+
+    const { onSignIn, onError } = this.props;
+
+    if (typeof onError === 'function') guard.on('login-error', onError);
+
+    const user = await guard.start(box);
+
+    onSignIn(user);
+  };
+
+  componentWillUnmount() {
+    guard.unmount();
+  }
+
+  render() {
+    const { onSignIn, onError, ...props } = this.props;
+
+    return <div {...props} ref={this.init} />;
+  }
+}

src/component/SessionBox.tsx

@@ -1,74 +1,24 @@
-import { Guard } from '@authing/guard';
 import { observer } from 'mobx-react';
-import { Component, MouseEvent, PropsWithChildren } from 'react';
+import { FC } from 'react';
 
 import userStore from '../model/User';
+import { AuthingGuard, AuthingGuardProps } from './AuthingGuard';
 import './SessionBox.less';
 
-export const guard = new Guard({
-  mode: 'modal',
-  appId: process.env.AUTHING_APP_ID!
-});
-
-export type SessionBoxProps = PropsWithChildren<{
-  className?: string;
-  autoCover?: boolean;
-}>;
-
-@observer
-export default class SessionBox extends Component<SessionBoxProps> {
-  #started = false;
-
-  componentDidMount() {
-    const { autoCover } = this.props;
-
-    if (autoCover) this.openModal();
-  }
-
-  closeModal = () => {
-    this.#started = false;
-
-    guard.hide();
-
-    document.scrollingElement?.classList.remove('overflow-hidden');
-  };
-
-  async openModal() {
-    if (!userStore.sessionExpired) return;
-
-    document.scrollingElement?.classList.add('overflow-hidden');
-
-    guard.on('close', this.closeModal);
-    guard.on('login-error', this.closeModal);
-
-    this.#started = true;
-
-    const user = await guard.start();
-
-    await userStore.signIn(user);
-
-    this.closeModal();
-  }
-
-  captureInput = (event: MouseEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (this.#started) guard.show();
-    else this.openModal();
-  };
-
-  render() {
-    const { className, autoCover, children } = this.props,
-      { session } = userStore;
-
-    return (
-      <div
-        className={className}
-        onClickCapture={autoCover || session ? undefined : this.captureInput}
-      >
-        {(!autoCover || session) && children}
-      </div>
+export const SessionBox: FC<Partial<AuthingGuardProps>> = observer(
+  ({ children, onSignIn, ...props }) => {
+    const { session, sessionExpired } = userStore;
+
+    return session && !sessionExpired ? (
+      children
+    ) : (
+      <AuthingGuard
+        {...props}
+        onSignIn={async user => {
+          await userStore.signIn(user);
+          onSignIn?.(user);
+        }}
+      />
     );
   }
-}
+);

src/page/index.tsx

@@ -2,11 +2,11 @@ import { observer } from 'mobx-react';
 import { FC } from 'react';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 
+import { SessionBox } from '../component/SessionBox';
 import { UserBar } from '../component/UserBar';
 import ApplicationModel from '../model';
 import { Editor } from './Editor';
 import { menu, title } from './index.json';
-import SessionBox from '../component/SessionBox';
 
 export interface FrameProps {
   repository: string;
@@ -32,7 +32,7 @@ export const Application: FC<FrameProps> = observer(({ repository, store }) => (
       </Container>
     </Navbar>
     <Container style={{ cursor: store.loadingCount ? 'wait' : 'auto' }}>
-      <SessionBox>
+      <SessionBox onError={console.error}>
         <Editor repository={repository} />
       </SessionBox>
     </Container>