Merge branch 'master' into issue-5667-added-message-decryption-on-thunderbird

Author: martgil

extension/chrome/settings/index.ts

@@ -509,7 +509,7 @@ View.run(
         const fpHtml = `fingerprint:&nbsp;<span class="good">${Str.spaced(Xss.escape(ki.fingerprints[0]))}</span>`;
         const space = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`;
         html += `<div class="row key-content-row">`;
-        html += `  <div class="col-12">${escapedLink} from ${Xss.escape(date)}${space}${fpHtml}${space}${removeKeyBtn}</div>`;
+        html += `  <div class="col-12">${escapedLink} from ${Xss.escape(date)}${space}${fpHtml}${space}${KeyUtil.statusHtml(ki.id, prv)}${space}${removeKeyBtn}</div>`;
         html += `</div>`;
       }
       Xss.sanitizeAppend('.key_list', html);

extension/chrome/settings/modules/contacts.ts

@@ -143,25 +143,13 @@ View.run(
         for (const pubkey of contact.sortedPubkeys) {
           const keyid = Xss.escape(pubkey.pubkey.id);
           const type = Xss.escape(pubkey.pubkey.family);
-          let keyStatus: { state: string; statusIndicator: string };
-          if (pubkey.revoked) {
-            keyStatus = { state: 'revoked', statusIndicator: 'light-gray' };
-          } else if (pubkey.pubkey?.usableForEncryption) {
-            keyStatus = { state: 'active', statusIndicator: 'green' };
-          } else if (pubkey.pubkey?.usableForEncryptionButExpired) {
-            keyStatus = { state: 'expired', statusIndicator: 'orange' };
-          } else if (pubkey.pubkey?.usableForSigning) {
-            keyStatus = { state: 'sign only', statusIndicator: 'yellow' };
-          } else {
-            keyStatus = { state: 'unusable', statusIndicator: 'red' };
-          }
           const change = `<a href="#" title="Change" class="action_change" data-test="action-change-pubkey-${keyid}-${type}"></a>`;
           const remove = `<a href="#" title="Remove" class="action_remove" data-test="action-remove-pubkey-${keyid}-${type}"></a>`;
           const show = `<a href="#" title="Show" class="action_show" data-test="action-show-pubkey-${keyid}-${type}">${Str.spaced(keyid)}</a>`;
           tableContents += `<div class="contacts-pubkey" email="${e}" keyid="${keyid}" type="${type}">
           <div class="contacts-pubkey-info">
             <span class="fc-badge fc-badge-gray" data-test="container-contact-key-type-${keyid}">${type}</span>&nbsp;
-            <span class="fc-badge fc-badge-${keyStatus.statusIndicator}" data-test="container-key-status-${keyid}">${keyStatus.state}</span>
+            ${KeyUtil.statusHtml(keyid, pubkey.pubkey)}
             ${show}
           </div>
           <div class="contacts-pubkey-actions">${change}${remove}</div></div>`;

extension/chrome/settings/modules/my_key.htm

@@ -7,6 +7,7 @@
     <title>FlowCrypt</title>
     <link rel="stylesheet" href="/css/cryptup.css" />
     <link rel="stylesheet" href="/css/sweetalert2.css" />
+    <link rel="stylesheet" href="/css/settings.css" />
     <link rel="stylesheet" href="/css/open-sans.css" />
     <link rel="stylesheet" href="/css/animate.css" />
     <link rel="stylesheet" href="/css/mobile-menu-styling.css" />
@@ -32,6 +33,8 @@
         <a href="#" class="action_download_pubkey">Save public key to a file</a>
       </div>
       <div class="line show_when_showing_public pubkey_link_container" style="display: none">Share your public key: <a href="" target="_blank"></a></div>
+      <div class="line key_status_contatiner"></div>
+      <div class="line">Key creation: <span class="key_creation" data-test="content-key-creation"></span></div>
       <div class="line">Key expiration: <span class="key_expiration" data-test="content-key-expiration"></span></div>
       <div class="line-separator"></div>
       <div class="line">

extension/chrome/settings/modules/my_key.ts

@@ -55,6 +55,9 @@ View.run(
       $('.fingerprint').text(Str.spaced(this.keyInfo.fingerprints[0]));
       Xss.sanitizeRender('.email', this.pubKey.emails.map(email => `<span>${Xss.escape(email)}</span>`).join(', '));
       const expiration = this.pubKey.expiration;
+      const creation = Str.datetimeToDate(Str.fromDate(new Date(this.pubKey.created)));
+      Xss.sanitizeRender('.key_status_contatiner', KeyUtil.statusHtml(this.keyInfo.longid, this.pubKey));
+      $('.key_creation').text(creation);
       $('.key_expiration').text(expiration && expiration !== Infinity ? Str.datetimeToDate(Str.fromDate(new Date(expiration))) : 'Does not expire');
       this.renderPrivateKeyLink();
       await this.renderPubkeyShareableLink();

extension/js/common/core/crypto/key.ts

@@ -20,6 +20,12 @@ import { EmailParts, Str } from '../common.js';
  * all dates are expressed as number of milliseconds since Unix Epoch.
  * This is what `Date.now()` returns and `new Date(x)` accepts.
  */
+
+type KeyStatus = {
+  state: 'active' | 'revoked' | 'expired' | 'sign only' | 'unusable';
+  statusIndicator: 'light-gray' | 'green' | 'orange' | 'yellow' | 'red';
+};
+
 export interface Key extends KeyIdentity {
   allIds: string[]; // a list of fingerprints, including those for subkeys
   created: number;
@@ -307,6 +313,30 @@ export class KeyUtil {
     return Date.now() > exp;
   }
 
+  public static status(key: Key | undefined): KeyStatus {
+    if (!key) {
+      return { state: 'unusable', statusIndicator: 'red' };
+    }
+    let keyStatus: KeyStatus;
+    if (key.revoked) {
+      keyStatus = { state: 'revoked', statusIndicator: 'light-gray' };
+    } else if (key.usableForEncryption) {
+      keyStatus = { state: 'active', statusIndicator: 'green' };
+    } else if (key.usableForEncryptionButExpired) {
+      keyStatus = { state: 'expired', statusIndicator: 'orange' };
+    } else if (key.usableForSigning) {
+      keyStatus = { state: 'sign only', statusIndicator: 'yellow' };
+    } else {
+      keyStatus = { state: 'unusable', statusIndicator: 'red' };
+    }
+    return keyStatus;
+  }
+
+  public static statusHtml(keyid: string, key: Key | undefined): string {
+    const keyStatus = KeyUtil.status(key);
+    return `<span class="fc-badge fc-badge-${keyStatus.statusIndicator}" data-test="container-key-status-${keyid}">${keyStatus.state}</span>`;
+  }
+
   public static dateBeforeExpirationIfAlreadyExpired(key: Key): Date | undefined {
     const expiration = key.expiration;
     return expiration && KeyUtil.expired(key) ? new Date(expiration - 1000) : undefined;