Added load of API key by url

Author: juanatsap

html/modals/change-api-key-modal.html

@@ -16,7 +16,7 @@
             <!-- DEFAULT API KEY SECTION -->
             <!--Simple Input-->
             <!--Default-->
-            <div class="dapi-key-validity-notification content has-text-grey is-hiddend">
+            <div class="change-api-key-explanation content has-text-grey is-hiddend">
                 <blockquote>
                     <span class=""></span>Use this section to change <b>on the fly</b> the API Key working on this site. By default the one used it's the included into the file <code>config/site.json</code>. This default one can be overriden by another
                     valid API Key.
@@ -31,7 +31,7 @@
                     <span class="tag is-success config-api-key-input-tag is-hidden">IS ACTIVE</span>
                     <span class="tag is-grey config-api-key-input-tag-disabled is-hidden">IS NOT ACTIVE</span>
                 </div>
-                <div class="dapi-key-validity-notification content has-text-grey is-hiddend">
+                <div class="change-api-key-explanation content has-text-grey is-hiddend">
                     <br>
                     <blockquote>
                         <span class=""></span>Paste your new API Key in the field below and click on the <b>Change API Key</b> button to load this site with this new API Key. To restore the initial state, clean the field below or click on the <b>reset</b>                        button. </span>

js/dynamic-apikey.js

@@ -137,4 +137,15 @@ function validateAPIKey(apiKey) {
     return validApiKeyResponse;
 }
 
+/**
+ * Disables the button to show the API key popup because of an error
+ */
+function disableChangeApiKeyButton() {
+    const labelForApiKey = query('.navbar .button-apikey');
+    if (labelForApiKey) {
+        labelForApiKey.classList.add("api-key-error");
+        labelForApiKey.style.pointerEvents = "none";
+        labelForApiKey.setAttribute("aria-label", "Please, fix the API Key in the url");
+    }
+}
 /** *****************************************************/

js/engine.js

@@ -107,13 +107,7 @@ function loadConfigFromFile(out) {
         } else {
             console.error("Invalid API Key. Loading default one...");
             // Updating error label to reflect the error
-            setTimeout(function() {
-                const labelForApiKey = query('.navbar .button-apikey');
-                if (labelForApiKey) {
-
-                    labelForApiKey.classList.add('api-key-error');
-                }
-            }, 1000);
+            setTimeout(disableChangeApiKeyButton, 1000);
         }
     }
 

js/ui.js

@@ -893,6 +893,7 @@ function initChangeApiKeyModal() {
     const apiKeyInputTagDisabled = query(".change-api-key-modal .api-key-input-tag-disabled");
     const defaultApiKeyField = query(".change-api-key-modal .default-api-key-field");
     const apiKeyValidityNotification = query(".change-api-key-modal .api-key-validity-notification");
+    const changeApiKeyExplanations = queryAll(".change-api-key-modal .change-api-key-explanation");
 
     const changeApiKeyButton = query(".change-api-key-modal .change-api-key-button");
     const resetApiKeyButton = query(".change-api-key-modal .reset-api-key-button");
@@ -923,16 +924,19 @@ function initChangeApiKeyModal() {
         apiKeyInputTag.classList.remove("is-hidden");
         configApiKeyInput.classList.add("is-disabled");
         configApiKeyInputTagDisabled.classList.remove("is-hidden");
-        defaultApiKeyField.classList.remove("is-hidden");
 
         // Additional changes for API Key loaded from URL
         if (hasApiKeyFromQueryString) {
             fromUrlNotice.classList.remove("is-hidden");
             resetUrlMessage.classList.remove("is-hidden");
             changeApiKeyButton.classList.add("is-disabled");
+            changeApiKeyExplanations.forEach(element => {
+                element.classList.add("is-hidden");
+            });
         } else {
 
             resetApiKeyButton.classList.remove("is-hidden");
+            defaultApiKeyField.classList.remove("is-hidden");
 
         }