diff --git a/source/renderer/components/PasswordPrompt.tsx b/source/renderer/components/PasswordPrompt.tsx index 8f03f5e1..acf6b9e6 100644 --- 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(null); const [promptedBiometrics, setPromptedBiometrics] = useState(false); // Callbacks @@ -145,7 +156,15 @@ export function PasswordPrompt() { // Render return ( -
{t("dialog.password-prompt.title")}
+
+ {t("dialog.password-prompt.title")} + {sourceDetails && ( + + + {sourceDetails.name} + + )} +
{promptType === PromptType.Password && ( <> diff --git a/source/renderer/hooks/vault.ts b/source/renderer/hooks/vault.ts index 6cc08005..6b2a7bed 100644 --- 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(null); +export function useSourceDetails( + sourceID: VaultSourceID | null +): [VaultSourceDescription | null, () => void] { + const [details, setDetails] = useState(null); const updateDescription = useCallback(() => { + if (sourceID === null) { + setDetails(null); + return; + } ipcRenderer .invoke("get-vault-description", sourceID) .then((desc: VaultSourceDescription) => {