Fix popup links (#541)

lanedirt · Feb 13, 2025 · b81613b · b81613b
1 parent 2013f48
commit b81613b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/browser-extensions/chrome/src/app/components/GlobalStateChangeHandler.tsx b/browser-extensions/chrome/src/app/components/GlobalStateChangeHandler.tsx
@@ -14,7 +14,10 @@ const GlobalStateChangeHandler: React.FC = () => {
    * Listen for auth logged in changes and redirect to home page if logged in state changes to handle logins and logouts.
    */
   useEffect(() => {
-    navigate('/');
+    // Only navigate when auth state changes and we're not already on home page
+    if (window.location.pathname !== '/index.html' && window.location.pathname !== '/') {
+      navigate('/');
+    }
   }, [authContext.isLoggedIn]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return null;

diff --git a/browser-extensions/chrome/src/app/pages/CredentialDetails.tsx b/browser-extensions/chrome/src/app/pages/CredentialDetails.tsx
@@ -5,6 +5,7 @@ import { Credential } from '../../shared/types/Credential';
 import { Buffer } from 'buffer';
 import { FormInputCopyToClipboard } from '../components/FormInputCopyToClipboard';
 import { EmailPreview } from '../components/EmailPreview';
+import { useLoading } from '../context/LoadingContext';
 
 /**
  * Credential details page.
@@ -14,6 +15,7 @@ const CredentialDetails: React.FC = () => {
   const navigate = useNavigate();
   const dbContext = useDb();
   const [credential, setCredential] = useState<Credential | null>(null);
+  const { setIsInitialLoading } = useLoading();
 
   /**
    * Check if the current page is a popup.
@@ -56,14 +58,15 @@ const CredentialDetails: React.FC = () => {
       const result = dbContext.sqliteClient.getCredentialById(id);
       if (result) {
         setCredential(result);
+        setIsInitialLoading(false);
       } else {
         console.error('Credential not found');
         navigate('/credentials');
       }
     } catch (err) {
       console.error('Error loading credential:', err);
     }
-  }, [dbContext.sqliteClient, id, navigate]);
+  }, [dbContext.sqliteClient, id, navigate, setIsInitialLoading]);
 
   if (!credential) {
     return <div>Loading...</div>;

diff --git a/browser-extensions/chrome/src/app/pages/Home.tsx b/browser-extensions/chrome/src/app/pages/Home.tsx
@@ -21,7 +21,7 @@ const Home: React.FC = () => {
   const isFullyInitialized = authContext.isInitialized && dbContext.dbInitialized;
   const isAuthenticated = authContext.isLoggedIn;
   const isDatabaseAvailable = dbContext.dbAvailable;
-  const requireLoginOrUnlock = isFullyInitialized && (!isAuthenticated || !isDatabaseAvailable);
+  const requireLoginOrUnlock = isFullyInitialized && (!isAuthenticated || !isDatabaseAvailable || isInlineUnlockMode);
 
   useEffect(() => {
     // Detect if the user is coming from the unlock page with mode=inline_unlock.
@@ -47,7 +47,7 @@ const Home: React.FC = () => {
     return <Login />;
   }
 
-  if (requireLoginOrUnlock) {
+  if (!isDatabaseAvailable) {
     return <Unlock />;
   }
 

diff --git a/browser-extensions/chrome/src/background/PopupMessageHandler.ts b/browser-extensions/chrome/src/background/PopupMessageHandler.ts
@@ -20,7 +20,7 @@ export function handleOpenPopup(message: any, vaultState: VaultState, sendRespon
  */
 export function handlePopupWithCredential(message: any, vaultState: VaultState, sendResponse: (response: any) => void) : void {
   chrome.windows.create({
-    url: chrome.runtime.getURL(`index.html#credentials/${message.credentialId}`),
+    url: chrome.runtime.getURL(`index.html?popup=true#/credentials/${message.credentialId}`),
     type: 'popup',
     width: 400,
     height: 600,

diff --git a/browser-extensions/chrome/src/contentScript/Popup.ts b/browser-extensions/chrome/src/contentScript/Popup.ts
@@ -1,6 +1,6 @@
 import { isDarkMode } from './Shared';
 import { Credential } from '../shared/types/Credential';
-import { fillCredential, injectIcon } from './Form';
+import { fillCredential } from './Form';
 import { filterCredentials } from './Filter';
 import { IdentityGeneratorEn } from '../shared/generators/Identity/implementations/IdentityGeneratorEn';
 import { PasswordGenerator } from '../shared/generators/Password/PasswordGenerator';
@@ -490,7 +490,7 @@ export function createVaultLockedPopup(input: HTMLInputElement): void {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #0066cc;
+    color: ${isDarkMode() ? '#d68338' : '#f49541'};
     border-radius: 4px;
   `;
   button.innerHTML = `