🚸 Display the reset password hint when hiding social options (#60)

* 🚸 Display the reset password hint when hiding social options * 🌐 Apply i18n to hint * 🎨Use rich text formatting * 💬 Adjust wording * 🎨 Set the login social options as a constant
likecoin · Jul 16, 2024 · 01ffa5c · 01ffa5c
1 parent 61a5565
commit 01ffa5c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/src/components/authcore-dialog.tsx b/src/components/authcore-dialog.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Dialog } from './dialog';
 
@@ -7,11 +8,13 @@ const AUTHCORE_DIALOG_ID = 'authcore-dialog';
 export interface AuthcoreDialogProps {
   onMount?: (payload: { containerId: string }) => void;
   onClose?: () => void;
+  isHideSocialLogin?: boolean;
 }
 
 export const AuthcoreDialog: FC<AuthcoreDialogProps> = ({
   onMount,
   onClose,
+  isHideSocialLogin,
 }) => {
   const [isDialogOpen, setDialogOpen] = React.useState(true);
   const closeDialog = React.useCallback(() => {
@@ -28,6 +31,18 @@ export const AuthcoreDialog: FC<AuthcoreDialogProps> = ({
       onClose={closeDialog}
     >
       <div id={AUTHCORE_DIALOG_ID} />
+      {isHideSocialLogin && (
+        <div className="lk-flex lk-flex-col lk-flex-col lk-w-full lk-items-center lk-gap-y-2 lk-mt-[12px]">
+          <p className="lk-text-like-gray lk-text-center lk-w-full lk-text-[12px]">
+            <FormattedMessage
+              id="wallet_connect_hint_reset_password"
+              values={{
+                span: chunks => <span className="lk-text-like-green">{chunks}</span>,
+              }}
+            />
+          </p>
+        </div>
+      )}
     </Dialog>
   );
 };
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
@@ -22,6 +22,7 @@
   "wallet_connect_header_title_open_app": "Launch App",
   "wallet_connect_header_title_scan_qrcode": "Scan QR Code",
   "wallet_connect_hint_approve": "Please approve the connection request in the app by clicking the button below.",
+  "wallet_connect_hint_reset_password": "If you can't find your login method,<span>reset your password</span>.",
   "wallet_connect_hint_scan_qrcode_cosmostation_mobile": "Please scan the QR code with Cosmostation Mobile Wallet app",
   "wallet_connect_hint_scan_qrcode_keplr_mobile": "Please scan the QR code with Keplr Mobile Wallet app",
   "wallet_connect_hint_scan_qrcode_liker_land_app": "Please scan the QR code with Liker Land app",

diff --git a/src/i18n/translations/zh.json b/src/i18n/translations/zh.json
@@ -22,6 +22,7 @@
   "wallet_connect_header_title_open_app": "啟動 App",
   "wallet_connect_header_title_scan_qrcode": "掃描二維碼",
   "wallet_connect_hint_approve": "請點擊以下按鈕打開 App 並批准連接請求。",
+  "wallet_connect_hint_reset_password": "若找不到您原先的登入方式，請<span>重設密碼</span>。",
   "wallet_connect_hint_scan_qrcode_cosmostation_mobile": "請使用 Cosmostation Mobile Wallet app 掃描二維碼",
   "wallet_connect_hint_scan_qrcode_keplr_mobile": "請使用 Keplr Mobile app 掃描二維碼",
   "wallet_connect_hint_scan_qrcode_liker_land_app": "請使用 Liker Land app 掃描二維碼",

diff --git a/src/index.tsx b/src/index.tsx
@@ -64,6 +64,11 @@ const SESSION_KEY = 'likecoin_wallet_connector_session';
 
 const WC_BRIGDE = 'https://bridge.walletconnect.org';
 
+const SOCIAL_LOGIN_OPTIONS = {
+  HIDE_SOCIAL: 'likecoin-app-hidesocial',
+  DEFAULT: 'likecoin-app',
+};
+
 export class LikeCoinWalletConnector {
   public options: LikeCoinWalletConnectorOptions;
 
@@ -132,7 +137,7 @@ export class LikeCoinWalletConnector {
           : true,
 
       language: options.language || 'en',
-      authcoreClientId: options.authcoreClientId || 'likecoin-app',
+      authcoreClientId: options.authcoreClientId || SOCIAL_LOGIN_OPTIONS.DEFAULT,
       authcoreApiHost: options.authcoreApiHost || 'https://authcore.like.co',
       authcoreRedirectUrl: options.authcoreRedirectUrl || '',
 
@@ -349,7 +354,8 @@ export class LikeCoinWalletConnector {
 
   init = async (
     methodType: LikeCoinWalletConnectorMethodType,
-    params?: any
+    params?: any,
+    language = this.options.language
   ) => {
     let initiator: Promise<LikeCoinWalletConnectorInitResponse>;
 
@@ -359,16 +365,24 @@ export class LikeCoinWalletConnector {
         if (!accessToken) {
           initiator = new Promise(resolve => {
             this._renderingRoot.render(
-              <AuthcoreDialog
-                onMount={({ containerId }) => {
-                  initAuthcore(this.options, { containerId });
-                }}
-                onClose={() => {
-                  this.closeDialog();
-                  resolve(undefined);
-                  this._events.emit('authcore_auth_closed');
-                }}
-              />
+              <IntlProvider language={language}>
+                <AuthcoreDialog
+                  onMount={({ containerId }) => {
+                    initAuthcore(this.options, { containerId });
+                  }}
+                  onClose={() => {
+                    this.closeDialog();
+                    resolve(undefined);
+                    this._events.emit('authcore_auth_closed');
+                  }}
+                  isHideSocialLogin={
+                    !!(
+                      this.options.authcoreClientId ===
+                      SOCIAL_LOGIN_OPTIONS.HIDE_SOCIAL
+                    )
+                  }
+                />
+              </IntlProvider>
             );
           });
         } else {