Show vault title in unlock prompt - fixes #1319

buttercup · Apr 1, 2024 · 2ae9a1d · 2ae9a1d
1 parent ba8d225
commit 2ae9a1d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/source/renderer/components/PasswordPrompt.tsx b/source/renderer/components/PasswordPrompt.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { useSingleState } from "react-obstate";
 import { Button, Classes, Colors, Dialog, FormGroup, InputGroup, Intent, NonIdealState } from "@blueprintjs/core";
 import { Layerr } from "layerr";
@@ -12,6 +12,7 @@ import { getVaultSettings, saveVaultSettings } from "../services/vaultSettings";
 import { showError } from "../services/notifications";
 import { logErr, logInfo } from "../library/log";
 import { t } from "../../shared/i18n/trans";
+import { useSourceDetails } from "../hooks/vault";
 import { VAULT_SETTINGS_DEFAULT } from "../../shared/symbols";
 import { VaultSettingsLocal } from "../../shared/types";
 
@@ -29,6 +30,15 @@ const FallbackText = styled.i`
     display: block;
     margin-bottom: 12px;
 `;
+const TitleSeparator = styled.span`
+    color: ${Colors.GRAY1};
+    font-weight: bold;
+    padding: 0px 6px;
+`;
+const VaultName = styled.span`
+    font-weight: 600;
+    font-style: italic;
+`;
 
 export function PasswordPrompt() {
     const emitter = useMemo(getPasswordEmitter, []);
@@ -37,6 +47,7 @@ export function PasswordPrompt() {
     const [currentPassword, setCurrentPassword] = useState("");
     const [showPassword, setShowPassword] = useState(false);
     const [sourceID] = useSingleState(VAULTS_STATE, "currentVault");
+    const [sourceDetails] = useSourceDetails(sourceID);
     const [settings, setSettings] = useState<VaultSettingsLocal | null>(null);
     const [promptedBiometrics, setPromptedBiometrics] = useState<boolean>(false);
     // Callbacks
@@ -145,7 +156,15 @@ export function PasswordPrompt() {
     // Render
     return (
         <Dialog isOpen={showPrompt} onClose={closePrompt}>
-            <div className={Classes.DIALOG_HEADER}>{t("dialog.password-prompt.title")}</div>
+            <div className={Classes.DIALOG_HEADER}>
+                <span>{t("dialog.password-prompt.title")}</span>
+                {sourceDetails && (
+                    <Fragment>
+                        <TitleSeparator>•</TitleSeparator>
+                        <VaultName>{sourceDetails.name}</VaultName>
+                    </Fragment>
+                )}
+            </div>
             <div className={Classes.DIALOG_BODY}>
                 {promptType === PromptType.Password && (
                     <>

diff --git a/source/renderer/hooks/vault.ts b/source/renderer/hooks/vault.ts
@@ -5,9 +5,15 @@ import { logErr } from "../library/log";
 import { showError } from "../services/notifications";
 import { VaultSourceDescription } from "../types";
 
-export function useSourceDetails(sourceID: VaultSourceID): [VaultSourceDescription, () => void] {
-    const [details, setDetails] = useState<VaultSourceDescription>(null);
+export function useSourceDetails(
+    sourceID: VaultSourceID | null
+): [VaultSourceDescription | null, () => void] {
+    const [details, setDetails] = useState<VaultSourceDescription | null>(null);
     const updateDescription = useCallback(() => {
+        if (sourceID === null) {
+            setDetails(null);
+            return;
+        }
         ipcRenderer
             .invoke("get-vault-description", sourceID)
             .then((desc: VaultSourceDescription) => {