fedora-web / websites

Clone
Source Code
GIT

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

file modified
+104 -66 
@@ -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:
Edited 4 years ago by abai

1 new commit added

  • coreos-download: combine links for signature and checksum
4 years 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
4 years ago

LGTM - though IANA web developer :)

Pull-Request has been merged by dustymabe
4 years ago
Metadata
None
No Tags
Changes Summary 1
+104 -66
file changed
sites/static/js/coreos-download.js
Powered by Pagure 5.13.3
Documentation • File an Issue • About • SSH Hostkey/Fingerprint
© Red Hat, Inc. and others.