Feat [ADN-629] Add forgot password button in injection UI (#650)

Co-authored-by: jinoosss <[email protected]>
onbloc · Jan 13, 2025 · 760e99d · 760e99d
1 parent 836e36f
commit 760e99d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/packages/adena-extension/src/common/utils/browser-utils.ts b/packages/adena-extension/src/common/utils/browser-utils.ts
@@ -20,3 +20,16 @@ export const createPopupWindow = async (popupPath: string, state: object = {}):
     });
   });
 };
+
+export const isExtensionPopup = (): boolean => {
+  const views = chrome.extension.getViews({ type: 'popup' });
+  return views.length > 0 && views[0] === window;
+};
+
+export const isSeparatePopupWindow = (): boolean => {
+  if (isExtensionPopup()) {
+    return false;
+  }
+
+  return window.opener || chrome.extension.getViews({ type: 'popup' }).length === 0;
+};
diff --git a/packages/adena-extension/src/pages/popup/certify/launch-adena/index.tsx b/packages/adena-extension/src/pages/popup/certify/launch-adena/index.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
-import styled, { CSSProp, css } from 'styled-components';
+import styled, { css, CSSProp } from 'styled-components';
 
-import { Text, Button } from '@components/atoms';
+import { isSeparatePopupWindow } from '@common/utils/browser-utils';
+import { Button, Text } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
-import { RoutePath } from '@types';
+import useAppNavigate from '@hooks/use-app-navigate';
 import { useWalletContext } from '@hooks/use-context';
 import mixins from '@styles/mixins';
-import useAppNavigate from '@hooks/use-app-navigate';
+import { RoutePath } from '@types';
 
 const text = {
   title: 'You’re All Set!',
@@ -41,11 +42,17 @@ export const LaunchAdena = (): JSX.Element => {
     if (clicked) {
       return;
     }
+
     setClicked(true);
     if (params.type === 'GOOGLE' || params.type === 'LEDGER') {
       window.close();
     }
+
     Promise.all([initWallet(), initNetworkMetainfos()]).then(() => {
+      if (isSeparatePopupWindow()) {
+        window.close();
+      }
+
       navigate(RoutePath.Wallet);
       setClicked(false);
     });

diff --git a/packages/adena-extension/src/pages/popup/wallet/approve-login/index.tsx b/packages/adena-extension/src/pages/popup/wallet/approve-login/index.tsx
@@ -3,7 +3,7 @@ import { isAirgapAccount } from 'adena-module';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { PasswordValidationError } from '@common/errors';
 import { decodeParameter, parseParameters } from '@common/utils/client-utils';
@@ -13,7 +13,7 @@ import { useAdenaContext, useWalletContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useLoadAccounts } from '@hooks/use-load-accounts';
 import { InjectionMessageInstance } from '@inject/message';
-import { Title } from '@pages/popup/certify/login';
+import { ForgetPwd, Title } from '@pages/popup/certify/login';
 import { WalletState } from '@states';
 import mixins from '@styles/mixins';
 import { RoutePath } from '@types';
@@ -29,6 +29,7 @@ const Wrapper = styled.div`
 `;
 
 export const ApproveLogin = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const location = useLocation();
   const { walletService } = useAdenaContext();
@@ -152,6 +153,8 @@ export const ApproveLogin = (): JSX.Element => {
 
   const approveButtonClick = (): Promise<void> => tryLoginApprove(password);
 
+  const onClickForgotButton = (): void => navigate(RoutePath.ForgotPassword);
+
   return (
     <>
       {state === 'LOGIN' || (state === 'LOADING' && password !== '') ? (
@@ -165,7 +168,11 @@ export const ApproveLogin = (): JSX.Element => {
             error={error !== null}
             ref={inputRef}
           />
-          {error && <ErrorText text={error.message} />}
+          <ForgetPwd onClick={onClickForgotButton}>
+            <Text type='body2Reg' color={theme.neutral.a}>
+              Forgot Password?
+            </Text>
+          </ForgetPwd>
           <Button fullWidth onClick={approveButtonClick} margin='auto 0px 0px'>
             <Text type='body1Bold'>Unlock</Text>
           </Button>