Added ZIM metadata to the security dialogue box #1247 (#1250)

Signed off by @D3V-D.

www/css/app.css

@@ -250,6 +250,23 @@ iframe._invert, iframe._mwInvert {
     animation-duration: 0.1s;
 }
 
+#modal-archive-metadata-container {
+    border: solid 1px lightgrey;
+    padding: 10px;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.archive-metadata {
+    margin: 0;
+    padding: 0;
+}
+
+#modal-archive-metadata-warning {
+    font-style: italic;
+    font-weight: bold;
+}
+
 .container {
     margin-bottom: 1.5em;
 }

www/js/app.js

@@ -640,15 +640,64 @@ function focusPrefixOnHomeKey (event) {
         }, 0);
     }
 }
+
 /**
  * Verifies the given archive and switches contentInjectionMode accourdingly
- * @param {archive} the archive that needs verification
+ * @param {ZIMArchive} archive The archive that needs verification
  * */
 async function verifyLoadedArchive (archive) {
-    const response = await uiUtil.systemAlert(translateUI.t('dialog-sourceverification-alert') ||
-    'Is this ZIM archive from a trusted source?\n If not, you can still read the ZIM file in Safe Mode. Closing this window also opens the file in Safe Mode. This option can be disabled in Expert Settings',
-    translateUI.t('dialog-sourceverification-title') || 'Security alert!', true, translateUI.t('dialog-sourceverification-safe-mode-button') || 'Open in Safe Mode',
-    translateUI.t('dialog-sourceverification-trust-button') || 'Trust Source');
+    // We construct an HTML element to show the user the alert with the metadata contained in it
+    const metadataLabels = {
+        name: translateUI.t('dialog-metadata-name') || 'Name: ',
+        creator: translateUI.t('dialog-metadata-creator') || 'Creator: ',
+        publisher: translateUI.t('dialog-metadata-publisher') || 'Publisher: ',
+        scraper: translateUI.t('dialog-metadata-scraper') || 'Scraper: '
+    }
+
+    const verificationBody = document.createElement('div');
+
+    // Text & metadata box
+    const verificationText = document.createElement('p');
+    verificationText.innerHTML = translateUI.t('dialog-sourceverification-alert') || 'Is this ZIM archive from a trusted source?\n If not, you can still read the ZIM file in Safe Mode. Closing this window also opens the file in Safe Mode. This option can be disabled in Expert Settings.';
+
+    const metadataBox = document.createElement('div');
+    metadataBox.id = 'modal-archive-metadata-container';
+
+    const verifyName = document.createElement('p');
+    verifyName.id = 'confirm-archive-name';
+    verifyName.classList.add('archive-metadata');
+    verifyName.innerText = metadataLabels.name + (archive.name || '-');
+
+    const verifyCreator = document.createElement('p');
+    verifyCreator.id = 'confirm-archive-creator';
+    verifyCreator.classList.add('archive-metadata')
+    verifyCreator.innerText = metadataLabels.creator + (archive.creator || '-');
+
+    const verifyPublisher = document.createElement('p');
+    verifyPublisher.id = 'confirm-archive-publisher';
+    verifyPublisher.classList.add('archive-metadata');
+    verifyPublisher.innerText = metadataLabels.publisher + (archive.publisher || '-');
+
+    const verifyScraper = document.createElement('p');
+    verifyScraper.id = 'confirm-archive-scraper';
+    verifyScraper.classList.add('archive-metadata');
+    verifyScraper.innerText = metadataLabels.scraper + (archive.scraper || '-');
+
+    const verifyWarning = document.createElement('p');
+    verifyWarning.id = 'modal-archive-metadata-warning';
+    verifyWarning.innerHTML = translateUI.t('dialog-metadata-warning') || 'Warning: above data can be spoofed!';
+
+    metadataBox.append(verifyName, verifyCreator, verifyPublisher, verifyScraper);
+    verificationBody.append(verificationText, metadataBox, verifyWarning);
+
+    const response = await uiUtil.systemAlert(
+        verificationBody.outerHTML,
+        translateUI.t('dialog-sourceverification-title') || 'Security alert!',
+        true,
+        translateUI.t('dialog-sourceverification-safe-mode-button') || 'Open in Safe Mode',
+        translateUI.t('dialog-sourceverification-trust-button') || 'Trust Source'
+    );
+
     if (response) {
         params.contentInjectionMode = 'serviceworker';
         var trustedZimFiles = settingsStore.getItem('trustedZimFiles');
@@ -1630,7 +1679,7 @@ document.getElementById('archiveFilesLbl').addEventListener('keydown', function
 
 /** Drag and Drop handling for ZIM files */
 
-// Keep track of entrance event so we only fire the correct leave event 
+// Keep track of entrance event so we only fire the correct leave event
 var enteredElement;
 
 function handleGlobalDragenter (e) {
@@ -1682,7 +1731,7 @@ function hasInvalidType (typesList) {
     for (var i = 0; i < typesList.length; i++) {
         // Use indexOf() instead of startsWith() for IE11 support. Also, IE11 uses Text instead of text (and so does Opera).
         // This is not comprehensive, but should cover most cases.
-        if (typesList[i].indexOf('image') === 0 || typesList[i].indexOf('text') === 0 || typesList[i].indexOf('Text') === 0|| typesList[i].indexOf('video') === 0) {
+        if (typesList[i].indexOf('image') === 0 || typesList[i].indexOf('text') === 0 || typesList[i].indexOf('Text') === 0 || typesList[i].indexOf('video') === 0) {
             return true;
         }
     }

www/js/lib/zimArchive.js

@@ -80,19 +80,20 @@ function ZIMArchive (storage, path, callbackReady, callbackError) {
         // Further metadata are added in the background below, and can be accessed later
         return Promise.all([
             that.addMetadataToZIMFile('Creator'),
+            that.addMetadataToZIMFile('Publisher'),
+            that.addMetadataToZIMFile('Scraper'),
+            that.addMetadataToZIMFile('Name'),
             that.addMetadataToZIMFile('Language')
         ]).then(function () {
             console.debug('ZIMArchive ready, metadata will be added in the background');
             // Add non-time-critical metadata to archive in background so as not to delay opening of the archive
             // DEV: Note that it does not make sense to extract illustration (icon) metadata here. Instead, if you implement use of the illustration
-            // metadata as icons for the loaded ZIM [kiwix-js #886], you should simply use the ZIMArdhive.getMetadata() function when needed
+            // metadata as icons for the loaded ZIM [kiwix-js #886], you should simply use the ZIMArchive.getMetadata() function when needed
             setTimeout(function () {
                 Promise.all([
                     that.addMetadataToZIMFile('Counter'),
                     that.addMetadataToZIMFile('Date'),
                     that.addMetadataToZIMFile('Description'),
-                    that.addMetadataToZIMFile('Name'),
-                    that.addMetadataToZIMFile('Publisher'),
                     that.addMetadataToZIMFile('Source'),
                     that.addMetadataToZIMFile('Title')
                 ]).then(function () {