#5999 Add fingerprint when rendering private backups (#6004)

* feat: add fingerprint on private key backup render

* feat: escape fingerprint

* test: fix failing test

* test: fix failing test

* test: fix failing test

Author: martgil

extension/chrome/elements/backup.ts

@@ -11,6 +11,7 @@ import { Url, Str } from '../../js/common/core/common.js';
 import { View } from '../../js/common/view.js';
 import { initPassphraseToggle } from '../../js/common/ui/passphrase-ui.js';
 import { KeyStore } from '../../js/common/platform/store/key-store.js';
+import { Xss } from '../../js/common/platform/xss.js';
 
 View.run(
   class BackupView extends View {
@@ -48,10 +49,15 @@ View.run(
       }
       [this.storedPrvWithMatchingLongid] = await KeyStore.get(this.acctEmail, [fingerprint]);
       if (this.storedPrvWithMatchingLongid) {
-        $('.line .private_key_status').text('This Private Key is already imported.');
+        $('.line .private_key_status').html(
+          `This private key with fingerprint <span class="green">${Xss.escape(Str.spaced(fingerprint))}</span> has already been imported.`
+        );
       } else {
         $('.line .private_key_status')
-          .text('This private key was not imported yet. We suggest to import all backups so that you can read all incoming encrypted emails.')
+          .html(
+            `The private key <span class="green">${Xss.escape(Str.spaced(fingerprint))}</span> has not been imported yet. \n` +
+              `We recommend importing all backups to ensure you can read all incoming encrypted emails.`
+          )
           .after('<div class="line"><button class="button green" id="action_import_key">Import Missing Private Key</button></div>'); // xss-direct
       }
       this.sendResizeMsg();

test/source/tests/decrypt.ts

@@ -72,11 +72,21 @@ export const defineDecryptTests = (testVariant: TestVariant, testWithBrowser: Te
         const { acctEmail, authHdr } = await BrowserRecipe.setupCommonAcctWithAttester(t, browser, 'compatibility');
         const inboxPage = await browser.newExtensionPage(t, `chrome/settings/inbox/inbox.htm?acctEmail=${acctEmail}&threadId=${threadId}`);
         await inboxPage.waitForSelTestState('ready');
-        await (await inboxPage.getFrame(['backup.htm'])).waitForContent('@private-key-status', 'This Private Key is already imported.');
+        await (
+          await inboxPage.getFrame(['backup.htm'])
+        ).waitForContent(
+          '@private-key-status',
+          'This private key with fingerprint 5520 CACE 2CB6 1EA7 13E5 B005 7FDE 6855 48AE A788 has already been imported.'
+        );
         await inboxPage.close();
         const gmailPage = await browser.newPage(t, `${t.context.urls?.mockGmailUrl()}/${threadId}`, undefined, authHdr);
         await gmailPage.waitAll('iframe');
-        await (await gmailPage.getFrame(['backup.htm'])).waitForContent('@private-key-status', 'This Private Key is already imported.');
+        await (
+          await gmailPage.getFrame(['backup.htm'])
+        ).waitForContent(
+          '@private-key-status',
+          'This private key with fingerprint 5520 CACE 2CB6 1EA7 13E5 B005 7FDE 6855 48AE A788 has already been imported.'
+        );
         await gmailPage.close();
       })
     );
@@ -88,11 +98,21 @@ export const defineDecryptTests = (testVariant: TestVariant, testWithBrowser: Te
         const { acctEmail, authHdr } = await BrowserRecipe.setupCommonAcctWithAttester(t, browser, 'compatibility');
         const inboxPage = await browser.newExtensionPage(t, `chrome/settings/inbox/inbox.htm?acctEmail=${acctEmail}&threadId=${threadId}`);
         await inboxPage.waitForSelTestState('ready');
-        await (await inboxPage.getFrame(['backup.htm'])).waitForContent('@private-key-status', 'This Private Key is already imported.');
+        await (
+          await inboxPage.getFrame(['backup.htm'])
+        ).waitForContent(
+          '@private-key-status',
+          'This private key with fingerprint E8F0 517B A6D7 DAB6 081C 96E4 ADAC 279C 9509 3207 has already been imported.'
+        );
         await inboxPage.close();
         const gmailPage = await browser.newPage(t, `${t.context.urls?.mockGmailUrl()}/${threadId}`, undefined, authHdr);
         await gmailPage.waitAll('iframe');
-        await (await gmailPage.getFrame(['backup.htm'])).waitForContent('@private-key-status', 'This Private Key is already imported.');
+        await (
+          await gmailPage.getFrame(['backup.htm'])
+        ).waitForContent(
+          '@private-key-status',
+          'This private key with fingerprint E8F0 517B A6D7 DAB6 081C 96E4 ADAC 279C 9509 3207 has already been imported.'
+        );
         await gmailPage.close();
       })
     );