UI: PKI show missing info on generated certificate

ui/app/models/pki/certificate/base.js

@@ -87,8 +87,8 @@ export default class PkiCertificateBaseModel extends Model {
   @attr('string', { masked: true }) certificate;
   @attr('number') expiration;
   @attr('string', { label: 'Issuing CA', masked: true }) issuingCa;
-  @attr('string') privateKey; // only returned for type=exported
-  @attr('string') privateKeyType; // only returned for type=exported
+  @attr('string', { masked: true }) privateKey; // only returned for type=exported and /issue
+  @attr('string') privateKeyType; // only returned for type=exported and /issue
   @attr('number', { formatDate: true }) revocationTime;
   @attr('string') serialNumber;
 

ui/app/models/pki/certificate/generate.js

@@ -21,7 +21,18 @@ const generateFromRole = [
     ],
   },
 ];
-@withFormFields(null, generateFromRole)
+// Extra fields returned on the /issue endpoint
+const certDisplayFields = [
+  'certificate',
+  'commonName',
+  'revocationTime',
+  'serialNumber',
+  'caChain',
+  'issuingCa',
+  'privateKey',
+  'privateKeyType',
+];
+@withFormFields(certDisplayFields, generateFromRole)
 export default class PkiCertificateGenerateModel extends PkiCertificateBaseModel {
   getHelpUrl(backend) {
     return `/v1/${backend}/issue/example?help=1`;

ui/lib/pki/addon/components/page/pki-certificate-details.hbs

@@ -18,10 +18,29 @@
   </ToolbarActions>
 </Toolbar>
 
+{{#if @model.privateKey}}
+  <div class="has-top-margin-m">
+    <Hds::Alert data-test-cert-detail-next-steps @type="inline" @color="highlight" class="has-bottom-margin-s" as |A|>
+      <A.Title>Next steps</A.Title>
+      <A.Description>
+        The
+        <code>private_key</code>
+        is only available once. Make sure you copy and save it now.
+      </A.Description>
+    </Hds::Alert>
+  </div>
+{{/if}}
+
 {{#each @model.formFields as |field|}}
-  {{#if (eq field.name "certificate")}}
-    <InfoTableRow @label="Certificate">
-      <MaskedInput @value={{@model.certificate}} @displayOnly={{true}} @allowCopy={{true}} />
+  {{#if field.options.masked}}
+    <InfoTableRow @label={{or field.options.label (capitalize (humanize (dasherize field.name)))}}>
+      <MaskedInput
+        @name={{field.name}}
+        @value={{or (get @model field.name) null}}
+        @displayOnly={{true}}
+        @allowCopy={{true}}
+        @allowDownload={{true}}
+      />
     </InfoTableRow>
   {{else if (eq field.name "serialNumber")}}
     <InfoTableRow @label="Serial number">

ui/lib/pki/addon/components/page/pki-issuer-details.hbs

@@ -101,6 +101,7 @@
                 @value={{get @issuer attr.name}}
                 @displayOnly={{true}}
                 @allowCopy={{true}}
+                @allowDownload={{true}}
               />
             </InfoTableRow>
           {{else if (eq attr.name "keyId")}}

ui/lib/pki/addon/components/page/pki-key-details.hbs

@@ -49,7 +49,13 @@
   {{/each}}
   {{#if @key.privateKey}}
     <InfoTableRow @label="Private key">
-      <MaskedInput @value={{@key.privateKey}} @name="Private key" @displayOnly={{true}} @allowCopy={{true}} />
+      <MaskedInput
+        @name="Private key"
+        @value={{@key.privateKey}}
+        @displayOnly={{true}}
+        @allowCopy={{true}}
+        @allowDownload={{true}}
+      />
     </InfoTableRow>
   {{/if}}
 </div>

ui/lib/pki/addon/components/pki-generate-csr.hbs

@@ -22,7 +22,13 @@
               @addCopyButton={{eq attr.name "keyId"}}
             >
               {{#if (and attr.options.masked value)}}
-                <MaskedInput @value={{value}} @displayOnly={{true}} @allowCopy={{true}} />
+                <MaskedInput
+                  @name={{attr.name}}
+                  @value={{value}}
+                  @displayOnly={{true}}
+                  @allowCopy={{true}}
+                  @allowDownload={{true}}
+                />
               {{else if (eq attr.name "keyId")}}
                 <LinkTo @route="keys.key.details" @model={{@model.keyId}}>
                   {{@model.keyId}}

ui/lib/pki/addon/components/pki-generate-root.hbs

@@ -15,7 +15,13 @@
           <InfoTableRow
             @label={{capitalize (or attr.options.detailsLabel attr.options.label (humanize (dasherize attr.name)))}}
           >
-            <MaskedInput @value={{get @model attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
+            <MaskedInput
+              @name={{attr.name}}
+              @value={{get @model attr.name}}
+              @displayOnly={{true}}
+              @allowCopy={{true}}
+              @allowDownload={{true}}
+            />
           </InfoTableRow>
         {{else}}
           <InfoTableRow
@@ -27,7 +33,13 @@
     {{/each}}
     <InfoTableRow @label="Private key">
       {{#if @model.privateKey}}
-        <MaskedInput @value={{@model.privateKey}} @displayOnly={{true}} @allowCopy={{true}} />
+        <MaskedInput
+          @name="privateKey"
+          @value={{@model.privateKey}}
+          @displayOnly={{true}}
+          @allowCopy={{true}}
+          @allowDownload={{true}}
+        />
       {{else}}
         <span class="tag">internal</span>
       {{/if}}

ui/lib/pki/addon/components/pki-info-table-rows.hbs

@@ -9,7 +9,13 @@
           @addCopyButton={{or (eq attr.name "issuerId") (eq attr.name "keyId")}}
         >
           {{#if (and attr.options.masked value)}}
-            <MaskedInput @value={{value}} @displayOnly={{true}} @allowCopy={{true}} />
+            <MaskedInput
+              @name={{attr.name}}
+              @value={{value}}
+              @displayOnly={{true}}
+              @allowCopy={{true}}
+              @allowDownload={{true}}
+            />
           {{else if attr.options.detailLinkTo}}
             <LinkTo @route={{attr.options.detailLinkTo}} @model={{value}}>{{value}}</LinkTo>
           {{else if (or (eq attr.name "privateKey") (eq attr.name "privateKeyType"))}}

ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs

@@ -13,7 +13,13 @@
         {{#let (find-by "name" fieldName @model.allFields) as |attr|}}
           <InfoTableRow @label={{or attr.options.label (humanize (dasherize attr.name))}} @value={{get @model attr.name}}>
             {{#if (and attr.options.masked (get @model attr.name))}}
-              <MaskedInput @value={{get @model attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
+              <MaskedInput
+                @name={{attr.name}}
+                @value={{get @model attr.name}}
+                @displayOnly={{true}}
+                @allowCopy={{true}}
+                @allowDownload={{true}}
+              />
             {{else if (eq attr.name "serialNumber")}}
               <LinkTo
                 @route="certificates.certificate.details"

ui/tests/integration/components/pki/page/pki-certificate-details-test.js

@@ -40,7 +40,25 @@ module('Integration | Component | pki | Page::PkiCertificateDetails', function (
         },
       },
     });
+    store.pushPayload('pki/certificate/generate', {
+      modelName: 'pki/certificate/generate',
+      data: {
+        certificate: '-----BEGIN CERTIFICATE-----',
+        ca_chain: '-----BEGIN CERTIFICATE-----',
+        issuer_ca: '-----BEGIN CERTIFICATE-----',
+        private_key: '-----BEGIN PRIVATE KEY-----',
+        private_key_type: 'rsa',
+        common_name: 'example.com Intermediate Authority',
+        issue_date: 1673540867000,
+        serial_number: id,
+        parsed_certificate: {
+          not_valid_after: 1831220897000,
+          not_valid_before: 1673540867000,
+        },
+      },
+    });
     this.model = store.peekRecord('pki/certificate/base', id);
+    this.generatedModel = store.peekRecord('pki/certificate/generate', id);
 
     this.server.post('/sys/capabilities-self', () => ({
       data: {
@@ -50,7 +68,7 @@ module('Integration | Component | pki | Page::PkiCertificateDetails', function (
     }));
   });
 
-  test('it should render actions and fields', async function (assert) {
+  test('it should render actions and fields for base cert', async function (assert) {
     assert.expect(6);
 
     this.server.post('/pki/revoke', (schema, req) => {
@@ -90,6 +108,56 @@ module('Integration | Component | pki | Page::PkiCertificateDetails', function (
     assert.dom('[data-test-value-div="Revocation time"]').exists('Revocation time is displayed');
   });
 
+  test('it should render actions and fields for generated cert', async function (assert) {
+    assert.expect(10);
+
+    this.server.post('/pki/revoke', (schema, req) => {
+      const data = JSON.parse(req.requestBody);
+      assert.strictEqual(
+        data.serial_number,
+        this.model.serialNumber,
+        'Revoke request made with serial number'
+      );
+      return {
+        data: {
+          revocation_time: 1673972804,
+          revocation_time_rfc3339: '2023-01-17T16:26:44.960933411Z',
+        },
+      };
+    });
+
+    await render(hbs`<Page::PkiCertificateDetails @model={{this.generatedModel}} />`, { owner: this.engine });
+    assert.dom('[data-test-cert-detail-next-steps]').exists('Private key next steps warning shows');
+    assert
+      .dom('[data-test-component="info-table-row"]')
+      .exists({ count: 9 }, 'Correct number of fields render when certificate has not been revoked');
+    assert
+      .dom('[data-test-value-div="Certificate"] [data-test-masked-input]')
+      .exists('Masked input renders for certificate');
+    assert.dom('[data-test-value-div="Serial number"] code').exists('Serial number renders as monospace');
+    assert
+      .dom('[data-test-value-div="CA Chain"] [data-test-masked-input]')
+      .exists('CA Chain shows with masked value');
+    assert
+      .dom('[data-test-value-div="Issuing CA"] [data-test-masked-input]')
+      .exists('Issuing CA shows with masked value');
+    assert
+      .dom('[data-test-value-div="Private key"] [data-test-masked-input]')
+      .exists('Private key shows with masked value');
+
+    await click('[data-test-pki-cert-download-button]');
+    const { serialNumber, certificate } = this.model;
+    assert.ok(
+      this.downloadSpy.calledWith(serialNumber.replace(/(\s|:)+/g, '-'), certificate),
+      'Download pem method called with correct args'
+    );
+
+    await click('[data-test-confirm-action-trigger]');
+    await click('[data-test-confirm-button]');
+
+    assert.dom('[data-test-value-div="Revocation time"]').exists('Revocation time is displayed');
+  });
+
   test('it should render back button', async function (assert) {
     assert.expect(1);