From 01ffa5cbfb6b83aac28f001f2be3d8a9ab7cd058 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Tue, 16 Jul 2024 19:51:54 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Display=20the=20reset=20password?=
 =?UTF-8?q?=20hint=20when=20hiding=20social=20options=20(#60)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚸 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
---
 src/components/authcore-dialog.tsx | 15 ++++++++++++
 src/i18n/translations/en.json      |  1 +
 src/i18n/translations/zh.json      |  1 +
 src/index.tsx                      | 38 ++++++++++++++++++++----------
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/components/authcore-dialog.tsx b/src/components/authcore-dialog.tsx
index b5d2982..3375fc7 100644
--- 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
index daf356f..9a88f3d 100644
--- 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
index bc5d86f..a0ad26f 100644
--- 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
index b15e75c..d79cebf 100644
--- 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 {