Swapped layout of Address and API key

Jellyfin.Plugin.MediaCleaner/Pages/configuration.html

@@ -8,16 +8,16 @@
                 <h3>Management Configuration</h3>
 
                 <div class="inlineContainer">
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
-                        <input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
-                        <div class="fieldDescription">The api key used by your radarr instance</div>
-                    </div>
                     <div class="inputContainer">
                         <label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
                         <input id="RadarrAddress" name="RadarrAddress" type="text" is="emby-input" />
                         <div class="fieldDescription">The address and port of your radarr instance.</div>
                     </div>
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
+                        <input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
+                        <div class="fieldDescription">The api key used by your radarr instance</div>
+                    </div>
                     <div class="inputContainer">
                         <button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
                             <span>Test</span>
@@ -28,16 +28,16 @@
                 </div>
 
                 <div class="inlineContainer">
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
-                        <input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
-                        <div class="fieldDescription">The api key used by your sonarr instance</div>
-                    </div>
                     <div class="inputContainer">
                         <label class="inputLabel inputLabelUnfocused" for="SonarrAddress">Sonarr Address (http:port)</label>
                         <input id="SonarrAddress" name="SonarrAddress" type="text" is="emby-input" />
                         <div class="fieldDescription">The address and port of your sonarr instance.</div>
                     </div>
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
+                        <input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
+                        <div class="fieldDescription">The api key used by your sonarr instance</div>
+                    </div>
                     <div class="inputContainer">
                         <button id="SonarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
                             <span>Test</span>

Jellyfin.Plugin.MediaCleaner/Pages/configuration.js

@@ -1,58 +1,9 @@
+// Variables
 var MediaCleanerConfig = {
     pluginUniqueId: 'fef007a8-3e8f-4aa8-a22e-486a387f4192'
 };
 
-const testConnectionSonarr = () => {
+// Handlers
-    var apiKeyElement = document.getElementById('SonarrAPIKey');
-    var addressElement = document.getElementById('SonarrAddress');
-    var validationElement = document.getElementById('SonarrConnectionValidation');
-
-    validateConnection(apiKeyElement, addressElement, validationElement);
-}
-
-const testConnectionRadarr = () => {
-    var apiKeyElement = document.getElementById('RadarrAPIKey');
-    var addressElement = document.getElementById('RadarrAddress');
-    var validationElement = document.getElementById('RadarrConnectionValidation');
-
-    validateConnection(apiKeyElement, addressElement, validationElement);
-}
-
-const validateConnection = (apiKeyElement, addressElement, validationElement) => {
-    // Refactor this to a method called show element?
-    validationElement.removeAttribute('hidden');
-    validationElement.style.opacity = '1';
-    console.log("Api Key: ", apiKeyElement.value);
-    console.log("Address: ", addressElement.value);
-
-    var success = false;
-
-    if(success){
-        validationElement.style.color = 'Green';
-        validationElement.innerText = "Success!"
-    }
-    else {
-        validationElement.style.color = 'Red';
-        validationElement.innerText = "Failed!"
-    }
-
-    setTimeout(() => startFadeOut(validationElement, 50), 1000);
-}
-
-const startFadeOut = (element, interval = 100) => {
-  const timer = setInterval(() => {
-    let currentOpacity = parseFloat(getComputedStyle(element).opacity);
-    if (isNaN(currentOpacity)) currentOpacity = 1;
-    if (currentOpacity > 0) {
-      currentOpacity = Math.max(0, currentOpacity - 0.05);
-      element.style.opacity = currentOpacity.toString();
-    } else {
-      clearInterval(timer);
-      element.setAttribute('hidden', '');
-    }
-  }, interval);
-};
-
 document.querySelector('#RadarrTestConnectionButton')
     .addEventListener('click', testConnectionRadarr);
 
@@ -91,3 +42,120 @@ document.querySelector('#MediaCleanerConfigForm')
     e.preventDefault();
     return false;
 });
+
+// Fades
+const startFadeOut = (element, interval = 100) => {
+  const timer = setInterval(() => {
+    let currentOpacity = parseFloat(getComputedStyle(element).opacity);
+    if (isNaN(currentOpacity)) currentOpacity = 1;
+    if (currentOpacity > 0) {
+      currentOpacity = Math.max(0, currentOpacity - 0.05);
+      element.style.opacity = currentOpacity.toString();
+    } else {
+      clearInterval(timer);
+      element.setAttribute('hidden', '');
+    }
+  }, interval);
+};
+
+const startFadeIn = (element, interval = 100) => {
+  const timer = setInterval(() => {
+    let currentOpacity = parseFloat(getComputedStyle(element).opacity);
+    if (isNaN(currentOpacity)) currentOpacity = 0;
+    if (currentOpacity < 1) {
+      currentOpacity = Math.max(0, currentOpacity + 0.05);
+      element.style.opacity = currentOpacity.toString();
+    } else {
+      clearInterval(timer);
+    }
+  }, interval);
+};
+
+// Connection Methods
+const testConnectionSonarr = async () => {
+    var apiKeyElement = document.getElementById('SonarrAPIKey');
+    var addressElement = document.getElementById('SonarrAddress');
+    var validationElement = document.getElementById('SonarrConnectionValidation');
+
+    await validateConnection(apiKeyElement, addressElement, validationElement);
+}
+
+const testConnectionRadarr = async () => {
+    var apiKeyElement = document.getElementById('RadarrAPIKey');
+    var addressElement = document.getElementById('RadarrAddress');
+    var validationElement = document.getElementById('RadarrConnectionValidation');
+
+    await validateConnection(apiKeyElement, addressElement, validationElement);
+}
+
+
+// Validation and Normalization
+const normalizeUrl = (url) => {
+    let normalizedUrl = url.trim();
+    if (!/^https?:\/\//i.test(normalizedUrl)) {
+        normalizedUrl = 'http://' + normalizedUrl;
+    }
+    return normalizedUrl;
+};
+
+const validateConnection = async (apiKeyElement, addressElement, validationElement) => {
+    var httpAddress = addressElement.value;
+    var apiKey = apiKeyElement.value;
+
+    console.log("Address: ", httpAddress);
+    console.log("Api Key: ", apiKey);
+
+    // Only valid with characters
+    const validHttp = httpAddress.trim().length > 0;
+    const validApiKey = apiKey.trim().length > 0;
+
+    console.log("Valid Http: ", validHttp);
+    console.log("Valid Api: ", validApiKey);
+
+    var success = false;
+
+    if(validHttp && validApiKey){
+        setAttemptingConnection(validationElement);
+        try{
+            const url = normalizeUrl(httpAddress);
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    "X-Api-Key": apiKey,
+                }
+            });
+            success = response.ok;
+        }
+        catch (error){
+            console.error(`Error: ${error}`);
+        }
+    }
+
+    processValidationElement(validationElement, success);
+}
+
+const setAttemptingConnection = (validationElement) => {
+    validationElement.removeAttribute('hidden');
+    validationElement.style.opacity = '0';
+
+    validationElement.style.color = 'Yellow';
+    validationElement.innerText = "Attempting Connection..."
+    setTimeout(startFadeIn(validationElement, 50));
+}
+
+const processValidationElement = (validationElement, success) => {
+    validationElement.removeAttribute('hidden');
+    validationElement.style.opacity = '1';
+
+    if(success){
+        validationElement.style.color = 'Green';
+        validationElement.innerText = "Successful Connection!"
+    }
+    else {
+        validationElement.style.color = 'Red';
+        validationElement.innerText = "Failed Connection!"
+    }
+
+    setTimeout(() => startFadeOut(validationElement, 50), 2000);
+}
+