#86 coreos-download: add bootstrap modal for verification
Merged 9 months ago by dustymabe. Opened 9 months ago by abai.
fedora-web/ abai/websites coreos-download  into  master

@@ -74,7 +74,7 @@ 

  function getDownloadsFromFormat(formatData, downloads) {

    for (var download in formatData) {

      downloadData = formatData[download];

-     entry = {location: downloadData.location, signature: downloadData.signature, sha256: downloadData.sha256, showSignatureAndSha: false};

+     entry = {location: downloadData.location, signature: downloadData.signature, sha256: downloadData.sha256};

      downloads[download] = entry;

    }

  }
@@ -266,7 +266,7 @@ 

              function addDisplayEntry(display, platform, format, formats, release, prettyPlatform, extension) {

                downloads = {};

                getDownloadsFromFormat(formats[format], downloads);

-               displayEntry = {platform: prettyPlatform, release: release, downloads: downloads, extension: extension, showSignatureAndSha: false};

+               displayEntry = {platform: prettyPlatform, release: release, downloads: downloads, extension: extension};

                Vue.set(display, platform + "-" + format, displayEntry);

              }

              if (this.isCloudImage(platform)) {
@@ -291,30 +291,32 @@ 

          this.loadStreamDisplay();

        });

      },

-     toggleShowSignatureAndSha: function(imageType, platformFormat, contentType) {

-       if (!(platformFormat in this.streamDisplay[imageType])) {

-         return;

-       }

-       const artifact = this.streamDisplay[imageType][platformFormat];

-       if (!(contentType in artifact.downloads)) {

-         return;

-       }

-       var prev = artifact.downloads[contentType].showSignatureAndSha;

-       artifact.downloads[contentType].showSignatureAndSha = !prev;

-     },

-     showSignatureAndSha: function(imageType, platformFormat, contentType) {

-       if (!(platformFormat in this.streamDisplay[imageType])) {

-         return false;

-       }

-       const artifact = this.streamDisplay[imageType][platformFormat];

-       if (!(contentType in artifact.downloads)) {

-         return false;

-       }

-       return artifact.downloads[contentType].showSignatureAndSha;

+     getSignatureAndShaModal: function(h) {

+       return h('div', { class: "modal", attrs: { id: "signatureAndShaModal", tabindex: "-1", role: "dialog", "aria-labelledby": "signatureAndShaModalLabel", "aria-hidden": "true" }}, [

+         h('div', { class: "modal-dialog modal-lg modal-dialog-centered", attrs: { role: "document" }}, [

+           h('div', { class: "modal-content" }, [

+             h('div', { class: "modal-header" }, [

+               h('h5', { class: "modal-title", attrs: { id: "signatureAndShaModalTitle" }}, [

+                 "Verify signature & SHA256"

+               ]),

+               h('button', { class: "close", attrs: { type: "button", "data-dismiss": "modal", "aria-label": "Close" }}, [

+                 h('span', { attrs: { "aria-hidden": "true" }}, [ "×" ])

+               ])

+             ]),

+             h('div', { class: "modal-body", attrs: { id: "modal-body" }}, [ "Loading..." ]),

+             h('div', { class: "modal-footer" }, [

+               h('button', { class: "btn btn-secondary", attrs: { type: "button", "data-dismiss": "modal" }}, [

+                 "Close"

+               ])

+             ])

+           ])

+         ])

+       ])

      }

    },

    render: function(h) {

-     var stream_select_container = h('div', { class: "pb-0 pt-3" }, [ h('div', { class: "container" }, [ this.getStreamName(h), this.getNavbar(h) ]) ]);

+     var signature_sha256_verification_modal = this.getSignatureAndShaModal(h);

+     var stream_select_container = h('div', { class: "pb-0 pt-3 mb-3" }, [ h('div', { class: "container" }, [ this.getStreamName(h), this.getNavbar(h) ]) ]);

      if (this.loading) {

        return h('div', {}, [ stream_select_container, "Loading..."] );

      }
@@ -380,61 +382,96 @@ 

              h('button', {

                on: {

                  click: function(e) {

+                   // on click edit the content of popup modal

                    if (e.target !== e.currentTarget) {

                      return;

                    }

                    else {

-                     coreos_download_app.toggleShowSignatureAndSha(imageType,e.target.attributes.platformFormat.value, contentType);

-                     e.stopPropagation();

-                     e.preventDefault();

+                     $("#modal-body").empty();

+                     let p = document.createElement('p');

+                     let a_checksum = null;

+                     let a_signature = null;

+                     // Show SHA256 and initialize the <a> tags if data is available

+                     if(displayDownloads.sha256) {

+                       let d = document.createElement('div');

+                       $(d).addClass("overflow-auto")

+                           .html("SHA256: " + displayDownloads.sha256)

+                           .appendTo(p);

+ 

+                       a_checksum = document.createElement('a');

+                       $(a_checksum).attr("href", "data:text/plain;charset=utf-8," + encodeURIComponent("SHA256 (" + getFilename(displayDownloads.location) + ") = " + displayDownloads.sha256))

+                                    .attr("download", getFilename(displayDownloads.location) + "-CHECKSUM")

+                                    .html("checksum file");

+                     }

+                     if(displayDownloads.signature) {

+                       a_signature = document.createElement('a');

+                       $(a_signature).attr("href", displayDownloads.signature)

+                                     .html("signature");

+                     }

+                     $(p).appendTo("#modal-body");

+ 

+                     // Download the Checksum file and Signature

+                     let ol = document.createElement('ol');

+                     if (a_checksum || a_signature) {

+                       let li = document.createElement('li');

+                       p = document.createElement('p');

+                       $(p).append("Download the ")

+                           .append(a_checksum)

+                           .append(a_checksum && a_signature ? " and " : "")

+                           .append(a_signature);

+                       $(p).appendTo(li);

+                       $(li).appendTo(ol);

+                     }

+ 

+                     // Import Fedora's GPG keys

+                     li = document.createElement('li');

+                     p = document.createElement('p');

+                     $(p).html("Import Fedora's GPG keys");

+                     code = document.createElement('code');

+                     pre = document.createElement('pre');

+                     $(code).html("curl https://getfedora.org/static/fedora.gpg | gpg --import")

+                            .appendTo(pre);

+                     $(p).appendTo(li);

+                     $(pre).appendTo(li);

+                     $(li).appendTo(ol);

+ 

+                     // Verify the signature is valid

+                     li = document.createElement('li');

+                     p = document.createElement('p');

+                     $(p).html("Verify the signature is valid");

+                     code = document.createElement('code');

+                     pre = document.createElement('pre');

+                     $(code).html("gpg --verify " + getFilename(displayDownloads.signature) + " " + getFilename(displayDownloads.location))

+                            .appendTo(pre);

+                     $(p).appendTo(li);

+                     $(pre).appendTo(li);

+                     $(li).appendTo(ol);

+ 

+                     // Verify the checksum matches

+                     li = document.createElement('li');

+                     p = document.createElement('p');

+                     $(p).html("Verify the checksum matches");

+                     code = document.createElement('code');

+                     pre = document.createElement('pre');

+                     $(code).html("sha256sum -c " + getFilename(displayDownloads.location) + "-CHECKSUM")

+                            .appendTo(pre);

+                     $(p).appendTo(li);

+                     $(pre).appendTo(li);

+                     $(li).appendTo(ol);

+ 

+                     $(ol).appendTo("#modal-body");

                    }

                  }

                },

                class: "btn btn-sm btn-outline-fedora-magenta mt-2",

                attrs: {

-                 platformFormat: platformFormat

+                 platformFormat: platformFormat,

+                 class: "btn btn-primary",

+                 "data-toggle": "modal",

+                 "data-target": "#signatureAndShaModal"

                }

              }, "Verify signature & SHA256")

            ]),

-           coreos_download_app.showSignatureAndSha(imageType, platformFormat, contentType) ? h('div', { class: "bg-gray-100 p-2 my-2" }, [ h('p', {}, [

-               displayDownloads.sha256 ? h('div', { class: "overflow-auto" }, [

-                 "SHA256: ",

-                 displayDownloads.sha256

-               ]) : null,

-               displayDownloads.sha256 ? h('div', {}, [

-                 h('a', {

-                   attrs: {

-                     href: "data:text/plain;charset=utf-8," + encodeURIComponent("SHA256 (" + getFilename(displayDownloads.location) + ") = " + displayDownloads.sha256),

-                     download: getFilename(displayDownloads.location) + "-CHECKSUM"

-                   }

-                 }, "Checksum file")

-               ]) : null,

-               displayDownloads.signature ? h('div', {}, [

-                 h('a', {

-                   attrs: {

-                     href: displayDownloads.signature

-                   }

-                 }, "Signature")

-               ]) : null

-             ]),

-             h('div', {}, [

-               h('p', {}, "To verify your download:"),

-               h('ol', {}, [

-                 h('li', {}, [

-                   h('p', {}, "Import Fedora's GPG keys"),

-                   h('pre', {}, [ h('code', {}, "curl https://getfedora.org/static/fedora.gpg | gpg --import") ])

-                 ]),

-                 h('li', {}, [

-                   h('p', {}, "Verify the signature is valid"),

-                   h('pre', {}, [ h('code', {}, "gpg --verify " + getFilename(displayDownloads.signature) + " " + getFilename(displayDownloads.location)) ])

-                 ]),

-                 h('li', {}, [

-                   h('p', {}, "Verify the checksum matches"),

-                   h('pre', {}, [ h('code', {}, "sha256sum -c " + getFilename(displayDownloads.location) + "-CHECKSUM") ])

-                 ])

-               ])

-             ])

-           ]) : null

          ]) : null

        }

        function createArtifactsSection(displayArtifacts, imageType) {
@@ -496,6 +533,7 @@ 

        let cloud_operators_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: IdPool.cloud_operator, hidden: this.shownId !== IdPool.cloud_operator } }, [ cloudTitle, verifyBlurb, cloud ]);

  

        return h('div', {}, [

+         signature_sha256_verification_modal,

          stream_select_container,

          cloud_launchable_container,

          metal_virt_container,

Changes the signature and SHA256 verification UI from in-place
div insersion to a bootstrap modal.

Signed-off-by: Allen Bai abai@redhat.com

screenshot demo

Previous UI require users to scroll horizontally to view the content. Using bootstrap modal can help with the situation, although additional clicking/typing to close the popup modal is required, which could be bad for user experience.

cc @rfairley @jlebon

This is pretty great. I agree the current setup isn't as clean as it could be.
Haven't looked at the code yet, but the idea overall makes a lot of sense to me!

I'm not familiar with building a UI by code like this but it seems sane.
/cc @dustymabe

Not necessarily for this PR, though I wonder if it'd be cleaner to instead fold these links into step 1. E.g. something like:

SHA256: ...

  1. Download the checksum file and signature
  2. Import Fedora's GPG keys
    ...etc

WDYT?

@jlebon I think combine the links into a step sounds cleaner. Updating

combined links screenshot
Looks cleaner to me :+1:

1 new commit added

  • coreos-download: combine links for signature and checksum
9 months ago

Neat! Maybe just smallcase C and S for checksum file and Signature?

2 new commits added

  • coreos-download: combine links for signature and checksum
  • coreos-download: add bootstrap modal for verification
9 months ago

LGTM - though IANA web developer :)

Pull-Request has been merged by dustymabe

9 months ago
Metadata