🚸 Enable opening of register screen for AuthCore users (#61)

* 🎨 Add initialScreen param for initAuthcore * 🎨 Improve params format * 🐛 Delay initAuthcore to ensure DOM is loaded * 🚸 Use setInterval to check if the DOM is fully loaded
likecoin · Jul 18, 2024 · a7b461a · a7b461a
1 parent 5f89929
commit a7b461a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -51,6 +51,7 @@ import {
   LikeCoinWalletConnectorMethodType,
   LikeCoinWalletConnectorOptions,
   LikeCoinWalletConnectorSession,
+  AuthCoreInitialScreen,
 } from './types';
 
 import './style.css';
@@ -355,7 +356,8 @@ export class LikeCoinWalletConnector {
   init = async (
     methodType: LikeCoinWalletConnectorMethodType,
     params?: any,
-    language = this.options.language
+    language = this.options.language,
+    initialScreen?: AuthCoreInitialScreen
   ) => {
     let initiator: Promise<LikeCoinWalletConnectorInitResponse>;
 
@@ -368,7 +370,13 @@ export class LikeCoinWalletConnector {
               <IntlProvider language={language}>
                 <AuthcoreDialog
                   onMount={({ containerId }) => {
-                    initAuthcore(this.options, { containerId });
+                    const intervalId = setInterval(() => {
+                      const containerElement = document.getElementById(containerId);
+                      if (containerElement) {
+                        initAuthcore(this.options, { containerId, initialScreen });
+                        clearInterval(intervalId);
+                      }
+                    }, 200);
                   }}
                   onClose={() => {
                     this.closeDialog();
@@ -386,7 +394,7 @@ export class LikeCoinWalletConnector {
             );
           });
         } else {
-          initiator = initAuthcore(this.options, { accessToken });
+          initiator = initAuthcore(this.options, { accessToken, initialScreen });
         }
         break;
 

diff --git a/src/types.ts b/src/types.ts
@@ -49,6 +49,8 @@ export type LikeCoinWalletConnectorEvent =
       method: LikeCoinWalletConnectorMethodType;
     };
 
+export type AuthCoreInitialScreen = 'signin' | 'register'
+
 export interface LikeCoinWalletConnectorConfig {
   chainId: string;
   chainName: string;

diff --git a/src/utils/authcore.ts b/src/utils/authcore.ts
@@ -15,6 +15,7 @@ import { AuthCoreAuthClient, AuthCoreWidgets } from '@likecoin/authcore-js';
 import {
   LikeCoinWalletConnectorInitResponse,
   LikeCoinWalletConnectorOptions,
+  AuthCoreInitialScreen
 } from '../types';
 import { convertAddressPrefix } from './wallet';
 
@@ -26,10 +27,12 @@ export async function initAuthcore(
   {
     accessToken,
     containerId,
+    initialScreen = 'signin',
   }: {
     accessToken?: string;
     containerId?: string;
-  } = {}
+    initialScreen?: AuthCoreInitialScreen;
+  } = {},
 ): Promise<LikeCoinWalletConnectorInitResponse> {
   const authcoreApiHost = options.authcoreApiHost;
 
@@ -66,7 +69,7 @@ export async function initAuthcore(
       primaryColour: '#28646e',
       container: containerId,
       root: `${authcoreApiHost}/widgets`,
-      initialScreen: 'signin',
+      initialScreen: initialScreen,
       socialLoginPaneStyle: 'top',
       socialLoginPaneOption: 'grid',
       internal: true,