From b43adb740625f76304423a6c4e563a290981c07a Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sat, 11 Apr 2020 16:24:40 -0500
Subject: [PATCH 01/16] Add quick connect

---
 src/controllers/auth/login.js            | 48 ++++++++++++++++++++++++
 src/libraries/apiclient/apiclientcore.js | 23 +++++++++++-
 src/login.html                           |  4 ++
 3 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 4296b8bfb..746384a64 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -150,6 +150,53 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
             });
         }
 
+        function loginQuickConnect() {
+            var apiClient = getApiClient();
+            var identifier = ""
+            var interval = 0;
+            var friendlyName = "test";
+            $.get('/QuickConnect/Initiate?FriendlyName=' + friendlyName).then(json => {
+                if (!json.Secret || !json.Code) {
+                    Dashboard.alert({
+                        message: json.Error,
+                        title: "Error"
+                    });
+                    return;
+                }
+
+                Dashboard.alert({
+                    message: "Authorize request " + json.Code + " to continue",
+                    title: "Quick Connect Code"
+                });
+
+                loading.show();
+
+                identifier = json.Secret;
+                interval = setInterval(() => {
+                    $.get('/QuickConnect/Connect?Secret=' + identifier).then(x => {
+                        if(x.Authenticated) {
+                            apiClient.quickConnect(x.Authentication).then((result) => {
+                                var user = result.User;
+                                var serverId = getParameterByName("serverid");
+                                var newUrl;
+
+                                if (user.Policy.IsAdministrator && !serverId) {
+                                    newUrl = "dashboard.html";
+                                } else {
+                                    newUrl = "home.html";
+                                }
+
+                                loading.hide();
+                                Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
+                                Dashboard.navigate(newUrl);
+                                clearInterval(interval);
+                            });
+                        }
+                    });
+                }, 5000);
+            });
+        }
+
         view.querySelector("#divUsers").addEventListener("click", function (e) {
             var card = dom.parentWithClass(e.target, "card");
             var cardContent = card ? card.querySelector(".cardContent") : null;
@@ -183,6 +230,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
             Dashboard.navigate("forgotpassword.html");
         });
         view.querySelector(".btnCancel").addEventListener("click", showVisualForm);
+        view.querySelector(".btnQuick").addEventListener("click", loginQuickConnect);
         view.querySelector(".btnManual").addEventListener("click", function () {
             view.querySelector("#txtManualName").value = "";
             showManualForm(view, true);
diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js
index 557a4e103..80be946a6 100644
--- a/src/libraries/apiclient/apiclientcore.js
+++ b/src/libraries/apiclient/apiclientcore.js
@@ -356,7 +356,28 @@ define(["events", "appStorage"], function(events, appStorage) {
                 instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
             }, reject)
         })
-    }, ApiClient.prototype.ensureWebSocket = function() {
+    }, ApiClient.prototype.quickConnect = function (token) {
+        if (!token) return Promise.reject();
+        var url = this.getUrl("Users/AuthenticateWithQuickConnect"),
+            instance = this;
+        return new Promise(function(resolve, reject) {
+            var postData = {
+                Token: token
+            };
+            instance.ajax({
+                type: "POST",
+                url: url,
+                data: JSON.stringify(postData),
+                dataType: "json",
+                contentType: "application/json"
+            }).then(function(result) {
+                var afterOnAuthenticated = function() {
+                    redetectBitrate(instance), resolve(result)
+                };
+                instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
+            }, reject)
+        })
+	}, ApiClient.prototype.ensureWebSocket = function() {
         if (!this.isWebSocketOpenOrConnecting() && this.isWebSocketSupported()) try {
             this.openWebSocket()
         } catch (err) {
diff --git a/src/login.html b/src/login.html
index 8e48901c1..343b85906 100644
--- a/src/login.html
+++ b/src/login.html
@@ -42,6 +42,10 @@
             <button is="emby-button" type="button" class="raised cancel block btnManual">
                 <span>${ButtonManualLogin}</span>
             </button>
+			
+			<button is="emby-button" type="button" class="raised cancel block btnQuick">
+                <span>Use Quick Connect</span>
+            </button>
 
             <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
                 <span>${ButtonForgotPassword}</span>

From fa9e2b476b89d5db6ec1d7cbd546ab979de63637 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sun, 12 Apr 2020 00:44:30 -0500
Subject: [PATCH 02/16] Finish web UI

---
 .../quickconnectsettings.js                   | 65 +++++++++++++++++++
 src/controllers/auth/login.js                 | 18 ++---
 src/controllers/quickconnect.js               | 57 ++++++++++++++++
 src/controllers/user/menu.js                  |  1 +
 src/controllers/user/quickconnect.js          | 41 ++++++++++++
 src/libraries/apiclient/apiclientcore.js      |  5 +-
 src/mypreferencesmenu.html                    | 10 +++
 src/mypreferencesquickconnect.html            | 12 ++++
 src/quickconnect.html                         | 29 +++++++++
 src/scripts/librarymenu.js                    |  6 ++
 src/scripts/routes.js                         | 12 ++++
 src/scripts/site.js                           |  1 +
 12 files changed, 248 insertions(+), 9 deletions(-)
 create mode 100644 src/components/quickconnectsettings/quickconnectsettings.js
 create mode 100644 src/controllers/quickconnect.js
 create mode 100644 src/controllers/user/quickconnect.js
 create mode 100644 src/mypreferencesquickconnect.html
 create mode 100644 src/quickconnect.html

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
new file mode 100644
index 000000000..a30db441e
--- /dev/null
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -0,0 +1,65 @@
+define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) {
+    "use strict";
+
+    function authorizeRequest(event) {
+        var lookup = event.data.lookup;
+        var apiClient = event.data.apiClient;
+        var url = ApiClient.getUrl("/QuickConnect/Authorize");
+        apiClient.ajax({
+            type: "POST",
+            url: url,
+            data: {
+                "Lookup": lookup
+            }
+        }, true);
+    }
+    
+    function list(apiClient) {
+        var elem = $("#quickConnectIncoming");
+        elem.html("");
+        apiClient.getJSON("/QuickConnect/List").then(json => {
+            console.debug("raw json", json);
+            for(var i = 0; i < json.length; i++) {
+                var current = json[i];
+                var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
+                
+                if(!current.Authenticated) {
+                    html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
+                }
+                else {
+                    html += " (already authorized)";
+                }
+                
+                html += "</li>";
+                elem.append(html);
+                $("#qc" + current.Lookup).click({ lookup: current.Lookup, apiClient: apiClient}, authorizeRequest);
+            }
+        });
+    }
+
+    function QuickConnectSettings(options) {
+        this.options = options;
+    }
+
+    QuickConnectSettings.prototype.loadData = function () {
+        loading.show();
+
+        var apiClient = connectionManager.getApiClient(this.options.serverId);
+        
+        list(apiClient);
+        
+        console.debug("request list finished");
+        
+        loading.hide();
+    };
+
+    QuickConnectSettings.prototype.submit = function () {
+        return false;
+    };
+
+    QuickConnectSettings.prototype.destroy = function () {
+        this.options = null;
+    };
+
+    return QuickConnectSettings;
+});
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 746384a64..f5dc9b487 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -152,10 +152,11 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
         function loginQuickConnect() {
             var apiClient = getApiClient();
-            var identifier = ""
-            var interval = 0;
             var friendlyName = "test";
-            $.get('/QuickConnect/Initiate?FriendlyName=' + friendlyName).then(json => {
+			
+			var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
+			apiClient.getJSON(url)
+			.then(json => {
                 if (!json.Secret || !json.Code) {
                     Dashboard.alert({
                         message: json.Error,
@@ -171,11 +172,12 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
                 loading.show();
 
-                identifier = json.Secret;
-                interval = setInterval(() => {
-                    $.get('/QuickConnect/Connect?Secret=' + identifier).then(x => {
-                        if(x.Authenticated) {
-                            apiClient.quickConnect(x.Authentication).then((result) => {
+                var interval = setInterval(() => {
+					var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                    apiClient.getJSON(url)
+					.then(data => {
+                        if(data.Authenticated) {
+                            apiClient.quickConnect(data.Authentication).then((result) => {
                                 var user = result.User;
                                 var serverId = getParameterByName("serverid");
                                 var newUrl;
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js
new file mode 100644
index 000000000..e3d1f7605
--- /dev/null
+++ b/src/controllers/quickconnect.js
@@ -0,0 +1,57 @@
+define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+    "use strict";
+
+    function loadPage(page, status) {
+        var active = (status == "Active");
+        var available = (status == "Available") || active;
+        
+        $("#quickConnectStatus").text(status.toLocaleLowerCase());
+        $("#chkQuickConnectAvailable").checked(available);
+        $("#chkQuickConnectActive").checked(active);
+        
+        loading.hide();
+    }
+
+    function onSubmit() {
+        loading.show();
+        
+        var available = $("#chkQuickConnectAvailable").is(":checked") ? "Available" : "Unavailable";
+        var url = ApiClient.getUrl("/QuickConnect/Available");
+        
+        ApiClient.ajax({
+            type: "POST",
+            data: {
+                "Status": available
+            },
+            url: url
+        }, true).then(() => {
+            if($("#chkQuickConnectActive").is(":checked")) {
+                url = ApiClient.getUrl("/QuickConnect/Activate");
+                ApiClient.ajax({
+                    type: "POST",
+                    url: url
+                }, true);
+            }
+            
+            Dashboard.alert({
+                message: "Settings saved",
+                title: "Saved"
+            });
+        });
+        
+        loading.hide();
+        return false;
+    }
+
+    $(document).on("pageinit", "#quickConnectPage", function () {
+        $("#quickConnectPage").off("submit", onSubmit).on("submit", onSubmit);
+        $("#btnQuickConnectSubmit").click(onSubmit);
+    }).on("pageshow", "#quickConnectPage", function () {
+        loading.show();
+        var page = this;
+        var promise1 = ApiClient.getQuickConnect("Status");
+        Promise.all([promise1]).then(function (responses) {
+            loadPage(page, responses[0]);
+        });
+    });
+});
diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js
index e7d816fb6..ff8db7268 100644
--- a/src/controllers/user/menu.js
+++ b/src/controllers/user/menu.js
@@ -24,6 +24,7 @@ define(["apphost", "connectionManager", "layoutManager", "listViewStyle", "emby-
             page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId);
             page.querySelector(".lnkPlaybackPreferences").setAttribute("href", "mypreferencesplayback.html?userId=" + userId);
             page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId);
+			page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId);
 
             if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) {
                 page.querySelector(".clientSettings").classList.remove("hide");
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js
new file mode 100644
index 000000000..d6f2ae25c
--- /dev/null
+++ b/src/controllers/user/quickconnect.js
@@ -0,0 +1,41 @@
+define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
+    "use strict";
+
+    return function (view, params) {
+        var quickConnectSettingsInstance = null;
+        var hasChanges;
+        var userId = params.userId || ApiClient.getCurrentUserId();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
+        view.addEventListener("viewshow", function () {
+            console.debug("defining instance");
+            
+            quickConnectSettingsInstance = new QuickConnectSettings({
+                serverId: ApiClient.serverId(),
+                userId: userId,
+                element: view.querySelector(".quickConnectSettingsContainer"),
+                userSettings: currentSettings,
+                enableSaveButton: false,
+                enableSaveConfirmation: false,
+                autoFocus: autoFocuser.isEnabled()
+            });
+            
+            quickConnectSettingsInstance.loadData();
+        });
+        view.addEventListener("change", function () {
+            hasChanges = true;
+        });
+        view.addEventListener("viewbeforehide", function () {
+            hasChanges = false;
+
+            if (quickConnectSettingsInstance) {
+                quickConnectSettingsInstance.submit();
+            }
+        });
+        view.addEventListener("viewdestroy", function () {
+            if (quickConnectSettingsInstance) {
+                quickConnectSettingsInstance.destroy();
+                quickConnectSettingsInstance = null;
+            }
+        });
+    };
+});
diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js
index 80be946a6..04421b837 100644
--- a/src/libraries/apiclient/apiclientcore.js
+++ b/src/libraries/apiclient/apiclientcore.js
@@ -377,7 +377,10 @@ define(["events", "appStorage"], function(events, appStorage) {
                 instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
             }, reject)
         })
-	}, ApiClient.prototype.ensureWebSocket = function() {
+    }, ApiClient.prototype.getQuickConnect = function(verb) {
+        var url = this.getUrl("/QuickConnect/" + verb);
+        return this.getJSON(url);
+    }, ApiClient.prototype.ensureWebSocket = function() {
         if (!this.isWebSocketOpenOrConnecting() && this.isWebSocketSupported()) try {
             this.openWebSocket()
         } catch (err) {
diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html
index 4219059dd..c8db1d17f 100644
--- a/src/mypreferencesmenu.html
+++ b/src/mypreferencesmenu.html
@@ -48,6 +48,16 @@
                     </div>
                 </a>
 
+
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkQuickConnectPreferences listItem-border">
+                    <div class="listItem">
+                        <i class="material-icons listItemIcon listItemIcon-transparent"></i>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">Quick Connect</div>
+                        </div>
+                    </div>
+                </a>
+                
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="clientSettings listItem-border">
                     <div class="listItem">
                         <i class="material-icons listItemIcon listItemIcon-transparent devices_other"></i>
diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html
new file mode 100644
index 000000000..326ce51b4
--- /dev/null
+++ b/src/mypreferencesquickconnect.html
@@ -0,0 +1,12 @@
+<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
+    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block" disabled>
+        <span>Activate</span>
+    </button>
+    
+    Incoming login requests:
+    <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
+        <ul id="quickConnectIncoming">
+			<li>Failed to load incoming requests</li>
+		</ul>
+    </div>
+</div>
diff --git a/src/quickconnect.html b/src/quickconnect.html
new file mode 100644
index 000000000..770796a10
--- /dev/null
+++ b/src/quickconnect.html
@@ -0,0 +1,29 @@
+<div id="quickConnectPage" data-role="page" class="page type-interior advancedConfigurationPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle">Quick Connect</h2>
+                </div>
+            </div>
+            
+            Quick connect is: <span id="quickConnectStatus">Failed to load status</span>
+            
+            <div class="checkboxList paperList" style="padding:.5em 1em;">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
+                    <span>Enable quick connect on this server</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" id="chkQuickConnectActive" />
+                    <span>Always accept quick connect login requests</span>
+                </label>
+                <div class="fieldDescription checkboxFieldDescription">If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.</div>
+            </div>
+            
+            <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
+                <span>${ButtonSave}</span>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index 11c89b01d..930df8be4 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -349,6 +349,12 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             href: "devices.html",
             pageIds: ["devicesPage", "devicePage"],
             icon: "devices"
+        });
+		links.push({
+            name: "Quick Connect",
+            href: "quickconnect.html",
+            pageIds: ["quickConnectPage", "quickConnectPage"],
+            icon: "devices"
         });
         links.push({
             name: globalize.translate("HeaderActivity"),
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 9c3db58a7..1520e9663 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -72,6 +72,12 @@ define([
         transition: "fade",
         controller: "user/subtitles"
     });
+    defineRoute({
+        path: "/mypreferencesquickconnect.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/quickconnect"
+    });
 
     defineRoute({
         path: "/dashboard.html",
@@ -103,6 +109,12 @@ define([
         roles: "admin",
         controller: "device"
     });
+    defineRoute({
+        path: "/quickconnect.html",
+        autoFocus: false,
+        roles: "admin",
+        controller: "quickconnect"
+    });
     defineRoute({
         path: "/dlnaprofile.html",
         autoFocus: false,
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 3b992eaf2..311478c01 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -829,6 +829,7 @@ var AppInfo = {};
         define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);
         define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency);
         define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency);
+		define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency);
         define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager);
         define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager);
         define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency);

From fdfdcd60fe3d7a66cfc334f0692978fc3bb8e27c Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Mon, 13 Apr 2020 16:23:16 -0500
Subject: [PATCH 03/16] Switch off of jQuery

---
 CONTRIBUTORS.md                                  |  1 +
 .../quickconnectsettings/quickconnectsettings.js |  8 +++++---
 src/controllers/auth/login.js                    | 12 ++++++------
 src/controllers/quickconnect.js                  | 16 +++++++++-------
 src/controllers/user/menu.js                     |  2 +-
 src/controllers/user/quickconnect.js             |  9 +++++++++
 src/mypreferencesquickconnect.html               |  6 +++---
 src/quickconnect.html                            |  2 +-
 8 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index aa3ec707e..ffbf05482 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -34,6 +34,7 @@
  - [Ryan Hartzell](https://github.com/ryan-hartzell)
  - [Thibault Nocchi](https://github.com/ThibaultNocchi)
  - [MrTimscampi](https://github.com/MrTimscampi)
+ - [ConfusedPolarBear](https://github.com/ConfusedPolarBear)
 
 # Emby Contributors
 
diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
index a30db441e..ed7985dcf 100644
--- a/src/components/quickconnectsettings/quickconnectsettings.js
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -15,12 +15,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     }
     
     function list(apiClient) {
-        var elem = $("#quickConnectIncoming");
-        elem.html("");
+        console.debug("getting json");
         apiClient.getJSON("/QuickConnect/List").then(json => {
-            console.debug("raw json", json);
+            var elem = $("#quickConnectIncoming");
+            elem.html("");
+            console.debug("raw json", json, "length is", json.length);
             for(var i = 0; i < json.length; i++) {
                 var current = json[i];
+                console.debug("current is", current);
                 var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
                 
                 if(!current.Authenticated) {
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index f5dc9b487..845ae9a38 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -153,10 +153,10 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
         function loginQuickConnect() {
             var apiClient = getApiClient();
             var friendlyName = "test";
-			
-			var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
-			apiClient.getJSON(url)
-			.then(json => {
+            
+            var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
+            apiClient.getJSON(url)
+            .then(json => {
                 if (!json.Secret || !json.Code) {
                     Dashboard.alert({
                         message: json.Error,
@@ -173,9 +173,9 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
                 loading.show();
 
                 var interval = setInterval(() => {
-					var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                    var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
                     apiClient.getJSON(url)
-					.then(data => {
+                    .then(data => {
                         if(data.Authenticated) {
                             apiClient.quickConnect(data.Authentication).then((result) => {
                                 var user = result.User;
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js
index e3d1f7605..5c3c8f9a1 100644
--- a/src/controllers/quickconnect.js
+++ b/src/controllers/quickconnect.js
@@ -2,13 +2,15 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
     "use strict";
 
     function loadPage(page, status) {
+        console.debug("status is \"" + status + "\"");
+
         var active = (status == "Active");
         var available = (status == "Available") || active;
-        
-        $("#quickConnectStatus").text(status.toLocaleLowerCase());
-        $("#chkQuickConnectAvailable").checked(available);
-        $("#chkQuickConnectActive").checked(active);
-        
+
+        page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase();
+        page.querySelector("#chkQuickConnectAvailable").checked = available;
+        page.querySelector("#chkQuickConnectActive").checked = active;
+
         loading.hide();
     }
 
@@ -44,8 +46,8 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
     }
 
     $(document).on("pageinit", "#quickConnectPage", function () {
-        $("#quickConnectPage").off("submit", onSubmit).on("submit", onSubmit);
-        $("#btnQuickConnectSubmit").click(onSubmit);
+        document.querySelector("#quickConnectPage").onsubmit = onSubmit;
+        document.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
     }).on("pageshow", "#quickConnectPage", function () {
         loading.show();
         var page = this;
diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js
index ff8db7268..f5d05c5be 100644
--- a/src/controllers/user/menu.js
+++ b/src/controllers/user/menu.js
@@ -24,7 +24,7 @@ define(["apphost", "connectionManager", "layoutManager", "listViewStyle", "emby-
             page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId);
             page.querySelector(".lnkPlaybackPreferences").setAttribute("href", "mypreferencesplayback.html?userId=" + userId);
             page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId);
-			page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId);
+            page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId);
 
             if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) {
                 page.querySelector(".clientSettings").classList.remove("hide");
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js
index d6f2ae25c..6e63bcdc0 100644
--- a/src/controllers/user/quickconnect.js
+++ b/src/controllers/user/quickconnect.js
@@ -2,6 +2,13 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "
     "use strict";
 
     return function (view, params) {
+        function notImplemented() {
+            Dashboard.alert({
+                message: "This button is not implemented yet, you must check the checkbox labeled \"Always accept quick connect login requests\" in the dashboard",
+                title: "Not implemented"
+            });
+        }
+        
         var quickConnectSettingsInstance = null;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
@@ -9,6 +16,8 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "
         view.addEventListener("viewshow", function () {
             console.debug("defining instance");
             
+            $("#btnQuickConnectActivate").click(notImplemented);
+            
             quickConnectSettingsInstance = new QuickConnectSettings({
                 serverId: ApiClient.serverId(),
                 userId: userId,
diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html
index 326ce51b4..b9ffdfacc 100644
--- a/src/mypreferencesquickconnect.html
+++ b/src/mypreferencesquickconnect.html
@@ -1,12 +1,12 @@
 <div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
-    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block" disabled>
+    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
         <span>Activate</span>
     </button>
     
     Incoming login requests:
     <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
         <ul id="quickConnectIncoming">
-			<li>Failed to load incoming requests</li>
-		</ul>
+            <li>Failed to load incoming requests</li>
+        </ul>
     </div>
 </div>
diff --git a/src/quickconnect.html b/src/quickconnect.html
index 770796a10..875716285 100644
--- a/src/quickconnect.html
+++ b/src/quickconnect.html
@@ -16,7 +16,7 @@
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" id="chkQuickConnectActive" />
-                    <span>Always accept quick connect login requests</span>
+                    <span>Make quick connect always active (always accept login requests)</span>
                 </label>
                 <div class="fieldDescription checkboxFieldDescription">If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.</div>
             </div>

From c37e8f2f1bcb827893fe32a3fcf77107964a853e Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sat, 18 Apr 2020 19:20:15 -0500
Subject: [PATCH 04/16] Implement auto refresh and activate button

---
 .../quickconnectsettings.js                   | 85 +++++++++++++------
 src/controllers/auth/login.js                 | 75 ++++++++--------
 src/controllers/quickconnect.js               | 54 +++++++-----
 src/controllers/user/quickconnect.js          | 63 +++++++-------
 src/mypreferencesmenu.html                    |  4 +-
 src/mypreferencesquickconnect.html            |  2 +-
 src/quickconnect.html                         |  6 +-
 src/scripts/librarymenu.js                    |  2 +-
 src/scripts/site.js                           |  2 +-
 9 files changed, 170 insertions(+), 123 deletions(-)

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
index ed7985dcf..fc167802d 100644
--- a/src/components/quickconnectsettings/quickconnectsettings.js
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -1,11 +1,10 @@
-define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) {
+define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager) {
     "use strict";
 
     function authorizeRequest(event) {
         var lookup = event.data.lookup;
-        var apiClient = event.data.apiClient;
         var url = ApiClient.getUrl("/QuickConnect/Authorize");
-        apiClient.ajax({
+        ApiClient.ajax({
             type: "POST",
             url: url,
             data: {
@@ -13,46 +12,72 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
             }
         }, true);
     }
-    
-    function list(apiClient) {
-        console.debug("getting json");
-        apiClient.getJSON("/QuickConnect/List").then(json => {
-            var elem = $("#quickConnectIncoming");
+
+    QuickConnectSettings.prototype.list = function(argPage) {
+        ApiClient.getJSON("/QuickConnect/List").then(json => {
+            var elem = $(argPage.querySelector("#quickConnectIncoming"));
             elem.html("");
-            console.debug("raw json", json, "length is", json.length);
-            for(var i = 0; i < json.length; i++) {
+            for (var i = 0; i < json.length; i++) {
                 var current = json[i];
-                console.debug("current is", current);
                 var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
-                
-                if(!current.Authenticated) {
+
+                if (!current.Authenticated) {
                     html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
-                }
-                else {
+                } else {
                     html += " (already authorized)";
                 }
-                
+
                 html += "</li>";
                 elem.append(html);
-                $("#qc" + current.Lookup).click({ lookup: current.Lookup, apiClient: apiClient}, authorizeRequest);
+                $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
             }
+
+            return true;
+        }).catch((e) => {
+            console.error("Unable to get quick connect login requests. error:", e);
         });
-    }
+    };
+
+    QuickConnectSettings.prototype.activate = function() {
+        var url = ApiClient.getUrl("/QuickConnect/Activate");
+        ApiClient.ajax({
+            type: "POST",
+            url: url,
+            contentType: "application/json",
+            dataType: "json"
+        }).then((json) => {
+            let message = json.Error;
+
+            console.log("message is \"" + message + "\"");
+            if (message && message !== "") {
+                console.error("Error activating quick connect. Error: ", json.Error);
+
+                Dashboard.alert({
+                    title: "Unable to activate quick connect",
+                    message: message
+                });
+
+                return false;
+            }
+
+            Dashboard.alert({
+                message: "Already active"
+            });
+
+            return true;
+        }).catch((e) => {
+            console.error("Error activating quick connect. Error:", e);
+            throw e;
+        });
+    };
 
     function QuickConnectSettings(options) {
         this.options = options;
     }
 
     QuickConnectSettings.prototype.loadData = function () {
-        loading.show();
-
-        var apiClient = connectionManager.getApiClient(this.options.serverId);
-        
-        list(apiClient);
-        
-        console.debug("request list finished");
-        
-        loading.hide();
+        this.options.interval = setInterval(this.list, 5000, this.options.page);
+        this.list(this.options.page);
     };
 
     QuickConnectSettings.prototype.submit = function () {
@@ -60,8 +85,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     };
 
     QuickConnectSettings.prototype.destroy = function () {
+        console.debug("clearing refresh interval", this.options.interval);
+        clearInterval(this.options.interval);
         this.options = null;
     };
 
+    QuickConnectSettings.prototype.interval = function (interval) {
+        this.options.interval = interval;
+    };
+
     return QuickConnectSettings;
 });
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 845ae9a38..94fa15d41 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -152,51 +152,54 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
         function loginQuickConnect() {
             var apiClient = getApiClient();
-            var friendlyName = "test";
-            
+            var friendlyName = navigator.userAgent; // TODO: what should this be changed to?
+
             var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
             apiClient.getJSON(url)
-            .then(json => {
-                if (!json.Secret || !json.Code) {
+                .then(json => {
+                    if (!json.Secret || !json.Code) {
+                        Dashboard.alert({
+                            message: json.Error,
+                            title: "Error"
+                        });
+
+                        return false;
+                    }
+
                     Dashboard.alert({
-                        message: json.Error,
-                        title: "Error"
+                        message: "Authorize request " + json.Code + " to continue",
+                        title: "Quick Connect Code"
                     });
-                    return;
-                }
 
-                Dashboard.alert({
-                    message: "Authorize request " + json.Code + " to continue",
-                    title: "Quick Connect Code"
-                });
+                    loading.show();
 
-                loading.show();
+                    var interval = setInterval(async function() {
+                        let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                        let data = await apiClient.getJSON(connectUrl);
+                        if (data.Authenticated) {
+                            let result = await apiClient.quickConnect(data.Authentication);
+                            var user = result.User;
+                            var serverId = getParameterByName("serverid");
+                            var newUrl = "home.html";
 
-                var interval = setInterval(() => {
-                    var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                    apiClient.getJSON(url)
-                    .then(data => {
-                        if(data.Authenticated) {
-                            apiClient.quickConnect(data.Authentication).then((result) => {
-                                var user = result.User;
-                                var serverId = getParameterByName("serverid");
-                                var newUrl;
+                            if (user.Policy.IsAdministrator && !serverId) {
+                                newUrl = "dashboard.html";
+                            }
 
-                                if (user.Policy.IsAdministrator && !serverId) {
-                                    newUrl = "dashboard.html";
-                                } else {
-                                    newUrl = "home.html";
-                                }
+                            loading.hide();
+                            Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
+                            Dashboard.navigate(newUrl);
+                            clearInterval(interval);
 
-                                loading.hide();
-                                Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
-                                Dashboard.navigate(newUrl);
-                                clearInterval(interval);
-                            });
+                            return true;
                         }
-                    });
-                }, 5000);
-            });
+                        return false;
+                    }, 5000);
+
+                    return true;
+                }).catch((e) => {
+                    console.error("Unable to initiate quick connect login request. Error:", e);
+                });
         }
 
         view.querySelector("#divUsers").addEventListener("click", function (e) {
@@ -240,7 +243,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
         view.querySelector(".btnSelectServer").addEventListener("click", function () {
             Dashboard.selectServer();
         });
-        view.addEventListener("viewshow", function (e) {
+        view.addEventListener("viewshow", function () {
             loading.show();
 
             if (!appHost.supports('multiserver')) {
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js
index 5c3c8f9a1..a6ebc381c 100644
--- a/src/controllers/quickconnect.js
+++ b/src/controllers/quickconnect.js
@@ -1,9 +1,8 @@
-define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     "use strict";
 
+    var page;
     function loadPage(page, status) {
-        console.debug("status is \"" + status + "\"");
-
         var active = (status == "Active");
         var available = (status == "Available") || active;
 
@@ -16,44 +15,53 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
 
     function onSubmit() {
         loading.show();
-        
-        var available = $("#chkQuickConnectAvailable").is(":checked") ? "Available" : "Unavailable";
+
+        var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
+        if (newStatus && page.querySelector("#chkQuickConnectActive").checked) {
+            newStatus = "Active";
+        }
+
         var url = ApiClient.getUrl("/QuickConnect/Available");
-        
+
         ApiClient.ajax({
             type: "POST",
             data: {
-                "Status": available
+                "Status": newStatus
             },
             url: url
         }, true).then(() => {
-            if($("#chkQuickConnectActive").is(":checked")) {
-                url = ApiClient.getUrl("/QuickConnect/Activate");
-                ApiClient.ajax({
-                    type: "POST",
-                    url: url
-                }, true);
-            }
-            
             Dashboard.alert({
                 message: "Settings saved",
                 title: "Saved"
             });
+
+            setTimeout(updatePage, 500);
+
+            return true;
+        }).catch((e) => {
+            console.error("Unable to set quick connect status. error:", e);
         });
-        
+
         loading.hide();
         return false;
     }
 
-    $(document).on("pageinit", "#quickConnectPage", function () {
-        document.querySelector("#quickConnectPage").onsubmit = onSubmit;
-        document.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
-    }).on("pageshow", "#quickConnectPage", function () {
-        loading.show();
-        var page = this;
+    function updatePage() {
         var promise1 = ApiClient.getQuickConnect("Status");
-        Promise.all([promise1]).then(function (responses) {
+        Promise.all([promise1]).then((responses) => {
             loadPage(page, responses[0]);
+            return true;
+        }).catch((e) => {
+            console.error("Unable to get quick connect status. error:", e);
         });
+    }
+
+    $(document).on("pageshow", "#quickConnectPage", function () {
+        loading.show();
+        page = this;
+
+        page.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
+
+        updatePage();
     });
 });
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js
index 6e63bcdc0..fae5d4986 100644
--- a/src/controllers/user/quickconnect.js
+++ b/src/controllers/user/quickconnect.js
@@ -1,50 +1,55 @@
 define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
     "use strict";
 
-    return function (view, params) {
-        function notImplemented() {
-            Dashboard.alert({
-                message: "This button is not implemented yet, you must check the checkbox labeled \"Always accept quick connect login requests\" in the dashboard",
-                title: "Not implemented"
-            });
-        }
-        
+    return function (view) {
         var quickConnectSettingsInstance = null;
-        var hasChanges;
-        var userId = params.userId || ApiClient.getCurrentUserId();
-        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
+
         view.addEventListener("viewshow", function () {
-            console.debug("defining instance");
-            
-            $("#btnQuickConnectActivate").click(notImplemented);
-            
             quickConnectSettingsInstance = new QuickConnectSettings({
-                serverId: ApiClient.serverId(),
-                userId: userId,
-                element: view.querySelector(".quickConnectSettingsContainer"),
-                userSettings: currentSettings,
-                enableSaveButton: false,
-                enableSaveConfirmation: false,
-                autoFocus: autoFocuser.isEnabled()
+                page: view,
+                interval: 0
             });
-            
+
+            view.querySelector("#btnQuickConnectActivate").addEventListener("click", () => {
+                quickConnectSettingsInstance.activate(quickConnectSettingsInstance);
+            });
+
             quickConnectSettingsInstance.loadData();
-        });
-        view.addEventListener("change", function () {
-            hasChanges = true;
+
+            ApiClient.getQuickConnect("Status").then((status) => {
+                let btn = view.querySelector("#btnQuickConnectActivate");
+
+                if (status === "Unavailable") {
+                    btn.textContent = "Quick connect is not available on this server";
+                    btn.disabled = true;
+                    return false;
+                }
+
+                else if (status === "Available") {
+                    return false;
+                }
+
+                btn.style.display = "none";
+                return true;
+            }).catch((e) => {
+                throw e;
+            });
         });
         view.addEventListener("viewbeforehide", function () {
-            hasChanges = false;
-
             if (quickConnectSettingsInstance) {
                 quickConnectSettingsInstance.submit();
             }
+            onDestroy();
         });
         view.addEventListener("viewdestroy", function () {
+            onDestroy();
+        });
+
+        function onDestroy() {
             if (quickConnectSettingsInstance) {
                 quickConnectSettingsInstance.destroy();
                 quickConnectSettingsInstance = null;
             }
-        });
+        }
     };
 });
diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html
index c8db1d17f..bfc5e793e 100644
--- a/src/mypreferencesmenu.html
+++ b/src/mypreferencesmenu.html
@@ -51,13 +51,13 @@
 
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkQuickConnectPreferences listItem-border">
                     <div class="listItem">
-                        <i class="material-icons listItemIcon listItemIcon-transparent"></i>
+                        <em class="material-icons listItemIcon listItemIcon-transparent"></em>
                         <div class="listItemBody">
                             <div class="listItemBodyText">Quick Connect</div>
                         </div>
                     </div>
                 </a>
-                
+
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="clientSettings listItem-border">
                     <div class="listItem">
                         <i class="material-icons listItemIcon listItemIcon-transparent devices_other"></i>
diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html
index b9ffdfacc..d92e49a42 100644
--- a/src/mypreferencesquickconnect.html
+++ b/src/mypreferencesquickconnect.html
@@ -2,7 +2,7 @@
     <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
         <span>Activate</span>
     </button>
-    
+
     Incoming login requests:
     <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
         <ul id="quickConnectIncoming">
diff --git a/src/quickconnect.html b/src/quickconnect.html
index 875716285..9a7dfdfb3 100644
--- a/src/quickconnect.html
+++ b/src/quickconnect.html
@@ -6,9 +6,9 @@
                     <h2 class="sectionTitle">Quick Connect</h2>
                 </div>
             </div>
-            
+
             Quick connect is: <span id="quickConnectStatus">Failed to load status</span>
-            
+
             <div class="checkboxList paperList" style="padding:.5em 1em;">
                 <label>
                     <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
@@ -20,7 +20,7 @@
                 </label>
                 <div class="fieldDescription checkboxFieldDescription">If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.</div>
             </div>
-            
+
             <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
                 <span>${ButtonSave}</span>
             </button>
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index 930df8be4..2accf4948 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -350,7 +350,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             pageIds: ["devicesPage", "devicePage"],
             icon: "devices"
         });
-		links.push({
+        links.push({
             name: "Quick Connect",
             href: "quickconnect.html",
             pageIds: ["quickConnectPage", "quickConnectPage"],
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 311478c01..3b8abf2bf 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -829,7 +829,7 @@ var AppInfo = {};
         define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);
         define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency);
         define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency);
-		define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency);
+        define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency);
         define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager);
         define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager);
         define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency);

From 43d01146a23b9ee9c4044a5d0b545ee6fe6ce692 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sun, 19 Apr 2020 01:39:05 -0500
Subject: [PATCH 05/16] Fix linting

---
 .../quickconnectsettings/quickconnectsettings.js           | 2 +-
 src/controllers/quickconnect.js                            | 4 ++--
 src/controllers/user/quickconnect.js                       | 4 +---
 src/libraries/apiclient/apiclientcore.js                   | 7 ++++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
index fc167802d..c65782caf 100644
--- a/src/components/quickconnectsettings/quickconnectsettings.js
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -61,7 +61,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
             }
 
             Dashboard.alert({
-                message: "Already active"
+                message: "Successfully activated"
             });
 
             return true;
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js
index a6ebc381c..35e5516f4 100644
--- a/src/controllers/quickconnect.js
+++ b/src/controllers/quickconnect.js
@@ -2,7 +2,7 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     "use strict";
 
     var page;
-    function loadPage(page, status) {
+    function loadPage(status) {
         var active = (status == "Active");
         var available = (status == "Available") || active;
 
@@ -49,7 +49,7 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     function updatePage() {
         var promise1 = ApiClient.getQuickConnect("Status");
         Promise.all([promise1]).then((responses) => {
-            loadPage(page, responses[0]);
+            loadPage(responses[0]);
             return true;
         }).catch((e) => {
             console.error("Unable to get quick connect status. error:", e);
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js
index fae5d4986..2b03dec41 100644
--- a/src/controllers/user/quickconnect.js
+++ b/src/controllers/user/quickconnect.js
@@ -23,9 +23,7 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "
                     btn.textContent = "Quick connect is not available on this server";
                     btn.disabled = true;
                     return false;
-                }
-
-                else if (status === "Available") {
+                } else if (status === "Available") {
                     return false;
                 }
 
diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js
index 04421b837..e1892505f 100644
--- a/src/libraries/apiclient/apiclientcore.js
+++ b/src/libraries/apiclient/apiclientcore.js
@@ -358,8 +358,8 @@ define(["events", "appStorage"], function(events, appStorage) {
         })
     }, ApiClient.prototype.quickConnect = function (token) {
         if (!token) return Promise.reject();
-        var url = this.getUrl("Users/AuthenticateWithQuickConnect"),
-            instance = this;
+        var url = this.getUrl("Users/AuthenticateWithQuickConnect");
+        var instance = this;
         return new Promise(function(resolve, reject) {
             var postData = {
                 Token: token
@@ -372,7 +372,8 @@ define(["events", "appStorage"], function(events, appStorage) {
                 contentType: "application/json"
             }).then(function(result) {
                 var afterOnAuthenticated = function() {
-                    redetectBitrate(instance), resolve(result)
+                    redetectBitrate(instance);
+                    return resolve(result);
                 };
                 instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
             }, reject)

From bf03a7ba57af89f1a38c41457dbe7c70f501a04d Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sat, 25 Apr 2020 15:46:22 -0500
Subject: [PATCH 06/16] Improve UI

---
 .../quickconnectsettings.js                   | 42 ++++++++++++++-----
 src/controllers/auth/login.js                 | 42 ++++++++++++-------
 src/controllers/quickconnect.js               | 12 ++----
 src/mypreferencesmenu.html                    |  2 +-
 src/mypreferencesquickconnect.html            |  5 +--
 src/quickconnect.html                         |  5 ---
 src/scripts/librarymenu.js                    |  2 +-
 7 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
index c65782caf..59250df76 100644
--- a/src/components/quickconnectsettings/quickconnectsettings.js
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -11,25 +11,45 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 "Lookup": lookup
             }
         }, true);
+
+        require(["toast"], function (toast) {
+            toast("Request authorized");
+        });
+
+        // prevent bubbling
+        return false;
     }
 
     QuickConnectSettings.prototype.list = function(argPage) {
         ApiClient.getJSON("/QuickConnect/List").then(json => {
+            let found = false;
             var elem = $(argPage.querySelector("#quickConnectIncoming"));
-            elem.html("");
-            for (var i = 0; i < json.length; i++) {
-                var current = json[i];
-                var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
+            elem.text("No pending login requests");
 
-                if (!current.Authenticated) {
-                    html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
-                } else {
-                    html += " (already authorized)";
+            for (var i = 0; i < json.length; i++) {
+                if (!found) {
+                    elem.html("");
+                    found = true;
                 }
 
-                html += "</li>";
+                var current = json[i];
+
+                let html = '<div class="listItem listItem-border" id="div' + current.Lookup + '"><div class="listItemBody three-line">';
+                html += '<div class="listItemBodyText"><code style="font-size:large">' + current.Code + '</code></div>';
+                html += '<div class="listItemBodyText secondary">' + current.FriendlyName + '</div>';
+                html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
+
+                if (!current.Authenticated) {
+                    html += '<a style="color:rgb(15,150,255)" href="#" id="qc' + current.Lookup + '">authorize</a>';
+                } else {
+                    html += " (authorized)";
+                }
+
+                html += '</div></div></div>';
                 elem.append(html);
+
                 $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
+                $("#div" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
             }
 
             return true;
@@ -60,8 +80,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 return false;
             }
 
-            Dashboard.alert({
-                message: "Successfully activated"
+            require(["toast"], function (toast) {
+                toast("Successfully activated");
             });
 
             return true;
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 94fa15d41..ff36939fb 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -152,7 +152,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
         function loginQuickConnect() {
             var apiClient = getApiClient();
-            var friendlyName = navigator.userAgent; // TODO: what should this be changed to?
+            var friendlyName = navigator.userAgent;
 
             var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
             apiClient.getJSON(url)
@@ -174,25 +174,37 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
                     loading.show();
 
                     var interval = setInterval(async function() {
-                        let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                        let data = await apiClient.getJSON(connectUrl);
-                        if (data.Authenticated) {
-                            let result = await apiClient.quickConnect(data.Authentication);
-                            var user = result.User;
-                            var serverId = getParameterByName("serverid");
-                            var newUrl = "home.html";
+                        try {
+                            let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                            let data = await apiClient.getJSON(connectUrl);
+                            if (data.Authenticated) {
+                                let result = await apiClient.quickConnect(data.Authentication);
+                                var user = result.User;
+                                var serverId = getParameterByName("serverid");
+                                var newUrl = "home.html";
 
-                            if (user.Policy.IsAdministrator && !serverId) {
-                                newUrl = "dashboard.html";
+                                if (user.Policy.IsAdministrator && !serverId) {
+                                    newUrl = "dashboard.html";
+                                }
+
+                                loading.hide();
+                                Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
+                                Dashboard.navigate(newUrl);
+                                clearInterval(interval);
+
+                                return true;
                             }
+                        } catch (e) {
+                            Dashboard.alert({
+                                message: "Quick connect was deactivated before the login request could be approved",
+                                title: "Unexpected error"
+                            });
 
-                            loading.hide();
-                            Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
-                            Dashboard.navigate(newUrl);
+                            console.error("Unable to login with quick connect", e);
                             clearInterval(interval);
-
-                            return true;
+                            loading.hide();
                         }
+
                         return false;
                     }, 5000);
 
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js
index 35e5516f4..3432e7923 100644
--- a/src/controllers/quickconnect.js
+++ b/src/controllers/quickconnect.js
@@ -3,12 +3,10 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
 
     var page;
     function loadPage(status) {
-        var active = (status == "Active");
-        var available = (status == "Available") || active;
+        var available = status === "Available" || status === "Active";
 
         page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase();
         page.querySelector("#chkQuickConnectAvailable").checked = available;
-        page.querySelector("#chkQuickConnectActive").checked = active;
 
         loading.hide();
     }
@@ -17,9 +15,6 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
         loading.show();
 
         var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
-        if (newStatus && page.querySelector("#chkQuickConnectActive").checked) {
-            newStatus = "Active";
-        }
 
         var url = ApiClient.getUrl("/QuickConnect/Available");
 
@@ -30,9 +25,8 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
             },
             url: url
         }, true).then(() => {
-            Dashboard.alert({
-                message: "Settings saved",
-                title: "Saved"
+            require(["toast"], function (toast) {
+                toast("Settings saved");
             });
 
             setTimeout(updatePage, 500);
diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html
index bfc5e793e..6f753e555 100644
--- a/src/mypreferencesmenu.html
+++ b/src/mypreferencesmenu.html
@@ -51,7 +51,7 @@
 
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkQuickConnectPreferences listItem-border">
                     <div class="listItem">
-                        <em class="material-icons listItemIcon listItemIcon-transparent"></em>
+                        <em class="material-icons listItemIcon listItemIcon-transparent">tap_and_play</em>
                         <div class="listItemBody">
                             <div class="listItemBodyText">Quick Connect</div>
                         </div>
diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html
index d92e49a42..b58ca8074 100644
--- a/src/mypreferencesquickconnect.html
+++ b/src/mypreferencesquickconnect.html
@@ -3,10 +3,9 @@
         <span>Activate</span>
     </button>
 
-    Incoming login requests:
     <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
-        <ul id="quickConnectIncoming">
-            <li>Failed to load incoming requests</li>
+        <div id="quickConnectIncoming" class="paperList">
+            <div>Failed to load incoming requests</div>
         </ul>
     </div>
 </div>
diff --git a/src/quickconnect.html b/src/quickconnect.html
index 9a7dfdfb3..7d7ec879a 100644
--- a/src/quickconnect.html
+++ b/src/quickconnect.html
@@ -14,11 +14,6 @@
                     <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
                     <span>Enable quick connect on this server</span>
                 </label>
-                <label>
-                    <input type="checkbox" is="emby-checkbox" id="chkQuickConnectActive" />
-                    <span>Make quick connect always active (always accept login requests)</span>
-                </label>
-                <div class="fieldDescription checkboxFieldDescription">If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.</div>
             </div>
 
             <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index 2accf4948..131dcf747 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -354,7 +354,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             name: "Quick Connect",
             href: "quickconnect.html",
             pageIds: ["quickConnectPage", "quickConnectPage"],
-            icon: "devices"
+            icon: "tap_and_play"
         });
         links.push({
             name: globalize.translate("HeaderActivity"),

From aa12a796256c7dcecb471d8c34ffda6391d0eac1 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sun, 26 Apr 2020 16:19:58 -0500
Subject: [PATCH 07/16] Apply suggestions from code review

---
 .../quickconnectsettings.js                   | 19 ++++++++-----------
 src/controllers/auth/login.js                 |  4 ++--
 src/controllers/user/quickconnect.js          |  2 +-
 src/login.html                                |  2 +-
 src/mypreferencesmenu.html                    |  2 +-
 src/mypreferencesquickconnect.html            |  4 ++--
 src/quickconnect.html                         |  6 +++---
 src/scripts/librarymenu.js                    |  2 +-
 src/strings/en-us.json                        | 10 ++++++++++
 9 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
index 59250df76..6010fab5c 100644
--- a/src/components/quickconnectsettings/quickconnectsettings.js
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -2,8 +2,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     "use strict";
 
     function authorizeRequest(event) {
-        var lookup = event.data.lookup;
-        var url = ApiClient.getUrl("/QuickConnect/Authorize");
+        let lookup = event.data.lookup;
+        let url = ApiClient.getUrl("/QuickConnect/Authorize");
         ApiClient.ajax({
             type: "POST",
             url: url,
@@ -23,12 +23,12 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     QuickConnectSettings.prototype.list = function(argPage) {
         ApiClient.getJSON("/QuickConnect/List").then(json => {
             let found = false;
-            var elem = $(argPage.querySelector("#quickConnectIncoming"));
-            elem.text("No pending login requests");
+            var elem = argPage.querySelector('#quickConnectIncoming');
+            elem.innerText = globalize.translate('QuickConnectNoPending');
 
             for (var i = 0; i < json.length; i++) {
                 if (!found) {
-                    elem.html("");
+                    elem.innerHTML = "";
                     found = true;
                 }
 
@@ -40,13 +40,11 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
 
                 if (!current.Authenticated) {
-                    html += '<a style="color:rgb(15,150,255)" href="#" id="qc' + current.Lookup + '">authorize</a>';
-                } else {
-                    html += " (authorized)";
+                    html += '<a style="color:rgb(15,150,255)" href="#" id="qc' + current.Lookup + '">' + globalize.translate('Authorize') + '</a>';
                 }
 
                 html += '</div></div></div>';
-                elem.append(html);
+                elem.innerHTML += html;
 
                 $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
                 $("#div" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
@@ -68,7 +66,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         }).then((json) => {
             let message = json.Error;
 
-            console.log("message is \"" + message + "\"");
             if (message && message !== "") {
                 console.error("Error activating quick connect. Error: ", json.Error);
 
@@ -81,7 +78,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
             }
 
             require(["toast"], function (toast) {
-                toast("Successfully activated");
+                toast(globalize.translate("QuickConnectActivationSuccessful"));
             });
 
             return true;
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index ff36939fb..86e8874e7 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -167,8 +167,8 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
                     }
 
                     Dashboard.alert({
-                        message: "Authorize request " + json.Code + " to continue",
-                        title: "Quick Connect Code"
+                        message: Globalize.translate('QuickConnectAuthorizeCode', json.Code),
+                        title: Globalize.translate('QuickConnect')
                     });
 
                     loading.show();
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js
index 2b03dec41..035aef8f2 100644
--- a/src/controllers/user/quickconnect.js
+++ b/src/controllers/user/quickconnect.js
@@ -20,7 +20,7 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "
                 let btn = view.querySelector("#btnQuickConnectActivate");
 
                 if (status === "Unavailable") {
-                    btn.textContent = "Quick connect is not available on this server";
+                    btn.textContent = globalize.translate("QuickConnectNotAvailable");
                     btn.disabled = true;
                     return false;
                 } else if (status === "Available") {
diff --git a/src/login.html b/src/login.html
index 343b85906..49472d881 100644
--- a/src/login.html
+++ b/src/login.html
@@ -44,7 +44,7 @@
             </button>
 			
 			<button is="emby-button" type="button" class="raised cancel block btnQuick">
-                <span>Use Quick Connect</span>
+                <span>${ButtonUseQuickConnect}</span>
             </button>
 
             <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html
index 6f753e555..43dfa4f55 100644
--- a/src/mypreferencesmenu.html
+++ b/src/mypreferencesmenu.html
@@ -53,7 +53,7 @@
                     <div class="listItem">
                         <em class="material-icons listItemIcon listItemIcon-transparent">tap_and_play</em>
                         <div class="listItemBody">
-                            <div class="listItemBodyText">Quick Connect</div>
+                            <div class="listItemBodyText">${QuickConnect}</div>
                         </div>
                     </div>
                 </a>
diff --git a/src/mypreferencesquickconnect.html b/src/mypreferencesquickconnect.html
index b58ca8074..4f1f9feba 100644
--- a/src/mypreferencesquickconnect.html
+++ b/src/mypreferencesquickconnect.html
@@ -1,11 +1,11 @@
 <div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
     <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
-        <span>Activate</span>
+        <span>${ButtonActivate}</span>
     </button>
 
     <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
         <div id="quickConnectIncoming" class="paperList">
-            <div>Failed to load incoming requests</div>
+            <div>${MessagePleaseWait}</div>
         </ul>
     </div>
 </div>
diff --git a/src/quickconnect.html b/src/quickconnect.html
index 7d7ec879a..dff74eb83 100644
--- a/src/quickconnect.html
+++ b/src/quickconnect.html
@@ -3,16 +3,16 @@
         <div class="content-primary">
             <div class="verticalSection">
                 <div class="sectionTitleContainer flex align-items-center">
-                    <h2 class="sectionTitle">Quick Connect</h2>
+                    <h2 class="sectionTitle">${QuickConnect}</h2>
                 </div>
             </div>
 
-            Quick connect is: <span id="quickConnectStatus">Failed to load status</span>
+            ${LabelCurrentStatus} <span id="quickConnectStatus"></span>
 
             <div class="checkboxList paperList" style="padding:.5em 1em;">
                 <label>
                     <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
-                    <span>Enable quick connect on this server</span>
+                    <span>${EnableQuickConnect}</span>
                 </label>
             </div>
 
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index 131dcf747..e3ef65f22 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -351,7 +351,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             icon: "devices"
         });
         links.push({
-            name: "Quick Connect",
+            name: globalize.translate("QuickConnect"),
             href: "quickconnect.html",
             pageIds: ["quickConnectPage", "quickConnectPage"],
             icon: "tap_and_play"
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index d5fc40ef0..ad390a0fe 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -48,6 +48,7 @@
     "AuthProviderHelp": "Select an Authentication Provider to be used to authenticate this user's password.",
     "Auto": "Auto",
     "AutoBasedOnLanguageSetting": "Auto (based on language setting)",
+    "Authorize": "authorize",
     "Backdrop": "Backdrop",
     "Backdrops": "Backdrops",
     "Banner": "Banner",
@@ -63,6 +64,7 @@
     "Browse": "Browse",
     "BrowsePluginCatalogMessage": "Browse our plugin catalog to view available plugins.",
     "BurnSubtitlesHelp": "Determines if the server should burn in subtitles when transcoding videos. Avoiding this will greatly improve performance. Select Auto to burn image based formats (VOBSUB, PGS, SUB, IDX) and certain ASS or SSA subtitles.",
+    "ButtonActivate": "Activate",
     "ButtonAdd": "Add",
     "ButtonAddImage": "Add Image",
     "ButtonAddMediaLibrary": "Add Media Library",
@@ -140,6 +142,7 @@
     "ButtonTrailer": "Trailer",
     "ButtonUninstall": "Uninstall",
     "ButtonUp": "Up",
+    "ButtonUseQuickConnect": "Use Quick Connect",
     "ButtonViewWebsite": "View website",
     "ButtonWebsite": "Website",
     "CancelRecording": "Cancel recording",
@@ -231,6 +234,7 @@
     "EnableNextVideoInfoOverlayHelp": "At the end of a video, display info about the next video coming up in the current playlist.",
     "EnablePhotos": "Display photos",
     "EnablePhotosHelp": "Images will be detected and displayed alongside other media files.",
+    "EnableQuickConnect": "Enable quick connect on this server",
     "EnableStreamLooping": "Auto-loop live streams",
     "EnableStreamLoopingHelp": "Enable this if live streams only contain a few seconds of data and need to be continuously requested. Enabling this when not needed may cause problems.",
     "EnableThemeSongs": "Theme songs",
@@ -587,6 +591,7 @@
     "LabelCountry": "Country:",
     "LabelCriticRating": "Critic rating:",
     "LabelCurrentPassword": "Current password:",
+    "LabelCurrentStatus": "Current status:",
     "LabelCustomCertificatePath": "Custom SSL certificate path:",
     "LabelCustomCertificatePathHelp": "Path to a PKCS #12 file containing a certificate and private key to enable TLS support on a custom domain.",
     "LabelCustomCss": "Custom CSS:",
@@ -1260,6 +1265,11 @@
     "Programs": "Programs",
     "Quality": "Quality",
     "QueueAllFromHere": "Queue all from here",
+    "QuickConnect": "Quick Connect",
+    "QuickConnectActivationSuccessful": "Successfully activated",
+    "QuickConnectAuthorizeCode": "Authorize request {0} to continue",
+    "QuickConnectNoPending": "No pending login requests",
+    "QuickConnectNotAvailable": "Quick connect is not available on this server",
     "Raised": "Raised",
     "Rate": "Rate",
     "RecentlyWatched": "Recently watched",

From a6d37e763319c1e65f1a7358a1b8ac0895b6492c Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sun, 26 Apr 2020 17:47:31 -0500
Subject: [PATCH 08/16] Change missed var declarations into let

---
 .../quickconnectsettings/quickconnectsettings.js   |  8 ++++----
 src/controllers/auth/login.js                      | 14 +++++++-------
 src/controllers/quickconnect.js                    | 10 +++++-----
 src/controllers/user/quickconnect.js               |  2 +-
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickconnectsettings/quickconnectsettings.js
index 6010fab5c..45bfe815c 100644
--- a/src/components/quickconnectsettings/quickconnectsettings.js
+++ b/src/components/quickconnectsettings/quickconnectsettings.js
@@ -23,16 +23,16 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     QuickConnectSettings.prototype.list = function(argPage) {
         ApiClient.getJSON("/QuickConnect/List").then(json => {
             let found = false;
-            var elem = argPage.querySelector('#quickConnectIncoming');
+            let elem = argPage.querySelector('#quickConnectIncoming');
             elem.innerText = globalize.translate('QuickConnectNoPending');
 
-            for (var i = 0; i < json.length; i++) {
+            for (let i = 0; i < json.length; i++) {
                 if (!found) {
                     elem.innerHTML = "";
                     found = true;
                 }
 
-                var current = json[i];
+                let current = json[i];
 
                 let html = '<div class="listItem listItem-border" id="div' + current.Lookup + '"><div class="listItemBody three-line">';
                 html += '<div class="listItemBodyText"><code style="font-size:large">' + current.Code + '</code></div>';
@@ -57,7 +57,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     };
 
     QuickConnectSettings.prototype.activate = function() {
-        var url = ApiClient.getUrl("/QuickConnect/Activate");
+        let url = ApiClient.getUrl("/QuickConnect/Activate");
         ApiClient.ajax({
             type: "POST",
             url: url,
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 86e8874e7..8b0bcdd28 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -151,10 +151,10 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
         }
 
         function loginQuickConnect() {
-            var apiClient = getApiClient();
-            var friendlyName = navigator.userAgent;
+            let apiClient = getApiClient();
+            let friendlyName = navigator.userAgent;
 
-            var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
+            let url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
             apiClient.getJSON(url)
                 .then(json => {
                     if (!json.Secret || !json.Code) {
@@ -173,15 +173,15 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
                     loading.show();
 
-                    var interval = setInterval(async function() {
+                    let interval = setInterval(async function() {
                         try {
                             let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
                             let data = await apiClient.getJSON(connectUrl);
                             if (data.Authenticated) {
                                 let result = await apiClient.quickConnect(data.Authentication);
-                                var user = result.User;
-                                var serverId = getParameterByName("serverid");
-                                var newUrl = "home.html";
+                                let user = result.User;
+                                let serverId = getParameterByName("serverid");
+                                let newUrl = "home.html";
 
                                 if (user.Policy.IsAdministrator && !serverId) {
                                     newUrl = "dashboard.html";
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickconnect.js
index 3432e7923..93b74a1b5 100644
--- a/src/controllers/quickconnect.js
+++ b/src/controllers/quickconnect.js
@@ -1,9 +1,9 @@
 define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     "use strict";
 
-    var page;
+    let page;
     function loadPage(status) {
-        var available = status === "Available" || status === "Active";
+        let available = status === "Available" || status === "Active";
 
         page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase();
         page.querySelector("#chkQuickConnectAvailable").checked = available;
@@ -14,9 +14,9 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     function onSubmit() {
         loading.show();
 
-        var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
+        let newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
 
-        var url = ApiClient.getUrl("/QuickConnect/Available");
+        let url = ApiClient.getUrl("/QuickConnect/Available");
 
         ApiClient.ajax({
             type: "POST",
@@ -41,7 +41,7 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     }
 
     function updatePage() {
-        var promise1 = ApiClient.getQuickConnect("Status");
+        let promise1 = ApiClient.getQuickConnect("Status");
         Promise.all([promise1]).then((responses) => {
             loadPage(responses[0]);
             return true;
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickconnect.js
index 035aef8f2..bee0c1b81 100644
--- a/src/controllers/user/quickconnect.js
+++ b/src/controllers/user/quickconnect.js
@@ -2,7 +2,7 @@ define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "
     "use strict";
 
     return function (view) {
-        var quickConnectSettingsInstance = null;
+        let quickConnectSettingsInstance = null;
 
         view.addEventListener("viewshow", function () {
             quickConnectSettingsInstance = new QuickConnectSettings({

From 8655de4469c3aade0e1f949169c8f536a43e210b Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Fri, 1 May 2020 13:49:06 -0500
Subject: [PATCH 09/16] Rename to camel case

---
 .../quickConnectSettings.js}                                      | 0
 src/controllers/{quickconnect.js => quickConnect.js}              | 0
 src/controllers/user/{quickconnect.js => quickConnect.js}         | 0
 ...referencesquickconnect.html => myPreferencesQuickConnect.html} | 0
 src/{quickconnect.html => quickConnect.html}                      | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{quickconnectsettings/quickconnectsettings.js => quickConnectSettings/quickConnectSettings.js} (100%)
 rename src/controllers/{quickconnect.js => quickConnect.js} (100%)
 rename src/controllers/user/{quickconnect.js => quickConnect.js} (100%)
 rename src/{mypreferencesquickconnect.html => myPreferencesQuickConnect.html} (100%)
 rename src/{quickconnect.html => quickConnect.html} (100%)

diff --git a/src/components/quickconnectsettings/quickconnectsettings.js b/src/components/quickConnectSettings/quickConnectSettings.js
similarity index 100%
rename from src/components/quickconnectsettings/quickconnectsettings.js
rename to src/components/quickConnectSettings/quickConnectSettings.js
diff --git a/src/controllers/quickconnect.js b/src/controllers/quickConnect.js
similarity index 100%
rename from src/controllers/quickconnect.js
rename to src/controllers/quickConnect.js
diff --git a/src/controllers/user/quickconnect.js b/src/controllers/user/quickConnect.js
similarity index 100%
rename from src/controllers/user/quickconnect.js
rename to src/controllers/user/quickConnect.js
diff --git a/src/mypreferencesquickconnect.html b/src/myPreferencesQuickConnect.html
similarity index 100%
rename from src/mypreferencesquickconnect.html
rename to src/myPreferencesQuickConnect.html
diff --git a/src/quickconnect.html b/src/quickConnect.html
similarity index 100%
rename from src/quickconnect.html
rename to src/quickConnect.html

From d8cfe064e60379033fdf61a963efbc27296130af Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Fri, 1 May 2020 14:18:04 -0500
Subject: [PATCH 10/16] Changed code to camel case

---
 src/controllers/user/menu.js | 2 +-
 src/scripts/librarymenu.js   | 2 +-
 src/scripts/routes.js        | 8 ++++----
 src/scripts/site.js          | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js
index f5d05c5be..9482b26cb 100644
--- a/src/controllers/user/menu.js
+++ b/src/controllers/user/menu.js
@@ -24,7 +24,7 @@ define(["apphost", "connectionManager", "layoutManager", "listViewStyle", "emby-
             page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId);
             page.querySelector(".lnkPlaybackPreferences").setAttribute("href", "mypreferencesplayback.html?userId=" + userId);
             page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId);
-            page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId);
+            page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "myPreferencesQuickConnect.html?userId=" + userId);
 
             if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) {
                 page.querySelector(".clientSettings").classList.remove("hide");
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index e3ef65f22..d123395ca 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -352,7 +352,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         });
         links.push({
             name: globalize.translate("QuickConnect"),
-            href: "quickconnect.html",
+            href: "quickConnect.html",
             pageIds: ["quickConnectPage", "quickConnectPage"],
             icon: "tap_and_play"
         });
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 1520e9663..f0806f56e 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -73,10 +73,10 @@ define([
         controller: "user/subtitles"
     });
     defineRoute({
-        path: "/mypreferencesquickconnect.html",
+        path: "/myPreferencesQuickConnect.html",
         autoFocus: false,
         transition: "fade",
-        controller: "user/quickconnect"
+        controller: "user/quickConnect"
     });
 
     defineRoute({
@@ -110,10 +110,10 @@ define([
         controller: "device"
     });
     defineRoute({
-        path: "/quickconnect.html",
+        path: "/quickConnect.html",
         autoFocus: false,
         roles: "admin",
-        controller: "quickconnect"
+        controller: "quickConnect"
     });
     defineRoute({
         path: "/dlnaprofile.html",
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 3b8abf2bf..ca8a828b0 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -829,7 +829,7 @@ var AppInfo = {};
         define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);
         define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency);
         define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency);
-        define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency);
+        define("quickConnectSettings", [componentsPath + "/quickConnectSettings/quickConnectSettings"], returnFirstDependency);
         define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager);
         define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager);
         define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency);

From 2655b4dca3da200f9dc720f37b4d6e7f32b4d839 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Mon, 4 May 2020 17:23:57 -0500
Subject: [PATCH 11/16] Migrate API changes to apiclient repo

---
 src/libraries/apiclient/apiclientcore.js | 25 ------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js
index e1892505f..557a4e103 100644
--- a/src/libraries/apiclient/apiclientcore.js
+++ b/src/libraries/apiclient/apiclientcore.js
@@ -356,31 +356,6 @@ define(["events", "appStorage"], function(events, appStorage) {
                 instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
             }, reject)
         })
-    }, ApiClient.prototype.quickConnect = function (token) {
-        if (!token) return Promise.reject();
-        var url = this.getUrl("Users/AuthenticateWithQuickConnect");
-        var instance = this;
-        return new Promise(function(resolve, reject) {
-            var postData = {
-                Token: token
-            };
-            instance.ajax({
-                type: "POST",
-                url: url,
-                data: JSON.stringify(postData),
-                dataType: "json",
-                contentType: "application/json"
-            }).then(function(result) {
-                var afterOnAuthenticated = function() {
-                    redetectBitrate(instance);
-                    return resolve(result);
-                };
-                instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
-            }, reject)
-        })
-    }, ApiClient.prototype.getQuickConnect = function(verb) {
-        var url = this.getUrl("/QuickConnect/" + verb);
-        return this.getJSON(url);
     }, ApiClient.prototype.ensureWebSocket = function() {
         if (!this.isWebSocketOpenOrConnecting() && this.isWebSocketSupported()) try {
             this.openWebSocket()

From ae5fa9d304d5388fcdbc91ee7b9233c4d5141c93 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Sun, 26 Jul 2020 23:57:28 -0500
Subject: [PATCH 12/16] Migrate to ES6

---
 package.json                                  |   3 +
 .../quickConnectSettings.js                   | 115 +++++-------------
 src/controllers/dashboard/quickconnect.js     |  62 ++++++++++
 src/controllers/quickConnect.js               |  61 ----------
 src/controllers/session/login/index.js        |  17 +--
 src/controllers/user/menu/index.js            |   2 +-
 src/controllers/user/quickConnect.js          |  53 --------
 src/controllers/user/quickConnect/index.html  |  17 +++
 src/controllers/user/quickConnect/index.js    |  78 ++++++++++++
 src/myPreferencesQuickConnect.html            |  11 --
 src/{quickConnect.html => quickconnect.html}  |   8 +-
 src/scripts/routes.js                         |   9 +-
 src/strings/en-us.json                        |  11 +-
 13 files changed, 220 insertions(+), 227 deletions(-)
 create mode 100644 src/controllers/dashboard/quickconnect.js
 delete mode 100644 src/controllers/quickConnect.js
 delete mode 100644 src/controllers/user/quickConnect.js
 create mode 100644 src/controllers/user/quickConnect/index.html
 create mode 100644 src/controllers/user/quickConnect/index.js
 delete mode 100644 src/myPreferencesQuickConnect.html
 rename src/{quickConnect.html => quickconnect.html} (89%)

diff --git a/package.json b/package.json
index d1831b13e..88a361d8b 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/quickConnectSettings/quickConnectSettings.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
           "src/components/search/searchfields.js",
@@ -178,6 +179,7 @@
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
           "src/controllers/dashboard/playback.js",
+          "src/controllers/dashboard/quickconnect.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
@@ -204,6 +206,7 @@
           "src/controllers/user/menu/index.js",
           "src/controllers/user/playback/index.js",
           "src/controllers/user/profile/index.js",
+          "src/controllers/user/quickConnect/index.js",
           "src/controllers/user/subtitles/index.js",
           "src/controllers/user/subtitles/index.js",
           "src/controllers/wizard/finish/index.js",
diff --git a/src/components/quickConnectSettings/quickConnectSettings.js b/src/components/quickConnectSettings/quickConnectSettings.js
index 45bfe815c..35f051a12 100644
--- a/src/components/quickConnectSettings/quickConnectSettings.js
+++ b/src/components/quickConnectSettings/quickConnectSettings.js
@@ -1,115 +1,64 @@
-define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager) {
-    "use strict";
+import globalize from 'globalize';
+import toast from 'toast';
 
-    function authorizeRequest(event) {
-        let lookup = event.data.lookup;
-        let url = ApiClient.getUrl("/QuickConnect/Authorize");
+export class QuickConnectSettings {
+    constructor() { }
+
+    authorize(code) {
+        let url = ApiClient.getUrl('/QuickConnect/Authorize');
         ApiClient.ajax({
-            type: "POST",
+            type: 'POST',
             url: url,
             data: {
-                "Lookup": lookup
+                'Code': code
             }
-        }, true);
-
-        require(["toast"], function (toast) {
-            toast("Request authorized");
+        }, true).then(() => {
+            require(['toast'], function (toast) {
+                toast(globalize.translate('QuickConnectAuthorizeSuccess'));
+            });
+        }).catch(() => {
+            require(['toast'], function (toast) {
+                toast(globalize.translate('QuickConnectAuthorizeFail'));
+            });
         });
 
         // prevent bubbling
         return false;
     }
 
-    QuickConnectSettings.prototype.list = function(argPage) {
-        ApiClient.getJSON("/QuickConnect/List").then(json => {
-            let found = false;
-            let elem = argPage.querySelector('#quickConnectIncoming');
-            elem.innerText = globalize.translate('QuickConnectNoPending');
-
-            for (let i = 0; i < json.length; i++) {
-                if (!found) {
-                    elem.innerHTML = "";
-                    found = true;
-                }
-
-                let current = json[i];
-
-                let html = '<div class="listItem listItem-border" id="div' + current.Lookup + '"><div class="listItemBody three-line">';
-                html += '<div class="listItemBodyText"><code style="font-size:large">' + current.Code + '</code></div>';
-                html += '<div class="listItemBodyText secondary">' + current.FriendlyName + '</div>';
-                html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
-
-                if (!current.Authenticated) {
-                    html += '<a style="color:rgb(15,150,255)" href="#" id="qc' + current.Lookup + '">' + globalize.translate('Authorize') + '</a>';
-                }
-
-                html += '</div></div></div>';
-                elem.innerHTML += html;
-
-                $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
-                $("#div" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
-            }
-
-            return true;
-        }).catch((e) => {
-            console.error("Unable to get quick connect login requests. error:", e);
-        });
-    };
-
-    QuickConnectSettings.prototype.activate = function() {
-        let url = ApiClient.getUrl("/QuickConnect/Activate");
-        ApiClient.ajax({
-            type: "POST",
+    activate() {
+        let url = ApiClient.getUrl('/QuickConnect/Activate');
+        return ApiClient.ajax({
+            type: 'POST',
             url: url,
-            contentType: "application/json",
-            dataType: "json"
+            contentType: 'application/json',
+            dataType: 'json'
         }).then((json) => {
             let message = json.Error;
 
-            if (message && message !== "") {
-                console.error("Error activating quick connect. Error: ", json.Error);
+            if (message && message !== '') {
+                console.error('Error activating quick connect. Error: ', json.Error);
 
                 Dashboard.alert({
-                    title: "Unable to activate quick connect",
+                    title: 'Unable to activate quick connect',
                     message: message
                 });
 
                 return false;
             }
 
-            require(["toast"], function (toast) {
-                toast(globalize.translate("QuickConnectActivationSuccessful"));
-            });
+            toast(globalize.translate('QuickConnectActivationSuccessful'));
 
             return true;
         }).catch((e) => {
-            console.error("Error activating quick connect. Error:", e);
+            console.error('Error activating quick connect. Error:', e);
             throw e;
         });
-    };
-
-    function QuickConnectSettings(options) {
-        this.options = options;
     }
 
-    QuickConnectSettings.prototype.loadData = function () {
-        this.options.interval = setInterval(this.list, 5000, this.options.page);
-        this.list(this.options.page);
-    };
-
-    QuickConnectSettings.prototype.submit = function () {
+    submit() {
         return false;
-    };
+    }
+}
 
-    QuickConnectSettings.prototype.destroy = function () {
-        console.debug("clearing refresh interval", this.options.interval);
-        clearInterval(this.options.interval);
-        this.options = null;
-    };
-
-    QuickConnectSettings.prototype.interval = function (interval) {
-        this.options.interval = interval;
-    };
-
-    return QuickConnectSettings;
-});
+export default QuickConnectSettings;
diff --git a/src/controllers/dashboard/quickconnect.js b/src/controllers/dashboard/quickconnect.js
new file mode 100644
index 000000000..22f4781b7
--- /dev/null
+++ b/src/controllers/dashboard/quickconnect.js
@@ -0,0 +1,62 @@
+import loading from 'loading';
+
+/* eslint-disable indent */
+
+    let page;
+    export default function(view) {
+        view.addEventListener('viewshow', function () {
+            page = this;
+            loading.show();
+            page.querySelector('#btnQuickConnectSubmit').onclick = onSubmit;
+            updatePage();
+        });
+    }
+
+    function loadPage(status) {
+        let available = status === 'Available' || status === 'Active';
+
+        page.querySelector('#quickConnectStatus').textContent = status.toLocaleLowerCase();
+        page.querySelector('#chkQuickConnectAvailable').checked = available;
+
+        loading.hide();
+    }
+
+    function onSubmit() {
+        loading.show();
+
+        let newStatus = page.querySelector('#chkQuickConnectAvailable').checked ? 'Available' : 'Unavailable';
+
+        let url = ApiClient.getUrl('/QuickConnect/Available');
+
+        ApiClient.ajax({
+            type: 'POST',
+            data: {
+                'Status': newStatus
+            },
+            url: url
+        }, true).then(() => {
+            require(['toast'], function (toast) {
+                toast('Settings saved');
+            });
+
+            setTimeout(updatePage, 500);
+
+            return true;
+        }).catch((e) => {
+            console.error('Unable to set quick connect status. error:', e);
+        });
+
+        loading.hide();
+        return false;
+    }
+
+    function updatePage() {
+        ApiClient.getQuickConnect('Status').then((response) => {
+            loadPage(response);
+            return true;
+        }).catch((e) => {
+            console.error('Unable to get quick connect status. error:', e);
+        });
+    }
+
+/* eslint-enable indent */
diff --git a/src/controllers/quickConnect.js b/src/controllers/quickConnect.js
deleted file mode 100644
index 93b74a1b5..000000000
--- a/src/controllers/quickConnect.js
+++ /dev/null
@@ -1,61 +0,0 @@
-define(["jQuery", "loading", "fnchecked"], function ($, loading) {
-    "use strict";
-
-    let page;
-    function loadPage(status) {
-        let available = status === "Available" || status === "Active";
-
-        page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase();
-        page.querySelector("#chkQuickConnectAvailable").checked = available;
-
-        loading.hide();
-    }
-
-    function onSubmit() {
-        loading.show();
-
-        let newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
-
-        let url = ApiClient.getUrl("/QuickConnect/Available");
-
-        ApiClient.ajax({
-            type: "POST",
-            data: {
-                "Status": newStatus
-            },
-            url: url
-        }, true).then(() => {
-            require(["toast"], function (toast) {
-                toast("Settings saved");
-            });
-
-            setTimeout(updatePage, 500);
-
-            return true;
-        }).catch((e) => {
-            console.error("Unable to set quick connect status. error:", e);
-        });
-
-        loading.hide();
-        return false;
-    }
-
-    function updatePage() {
-        let promise1 = ApiClient.getQuickConnect("Status");
-        Promise.all([promise1]).then((responses) => {
-            loadPage(responses[0]);
-            return true;
-        }).catch((e) => {
-            console.error("Unable to get quick connect status. error:", e);
-        });
-    }
-
-    $(document).on("pageshow", "#quickConnectPage", function () {
-        loading.show();
-        page = this;
-
-        page.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
-
-        updatePage();
-    });
-});
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index cdccdd5fb..b1fdf1bc5 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -163,11 +163,7 @@ import 'emby-checkbox';
             apiClient.getJSON(url)
                 .then(json => {
                     if (!json.Secret || !json.Code) {
-                        Dashboard.alert({
-                            message: json.Error,
-                            title: 'Error'
-                        });
-
+                        console.error('Malformed quick connect response', json);
                         return false;
                     }
 
@@ -215,10 +211,17 @@ import 'emby-checkbox';
 
                     return true;
                 }).catch((e) => {
-                    console.error('Unable to initiate quick connect login request. Error:', e);
+                    Dashboard.alert({
+                        message: Globalize.translate('QuickConnectNotActive'),
+                        title: 'Error'
+                    });
+
+                    console.error('Quick connect error: ', e);
+
+                    return false;
                 });
         }
-      
+
         view.querySelector('#divUsers').addEventListener('click', function (e) {
             const card = dom.parentWithClass(e.target, 'card');
             const cardContent = card ? card.querySelector('.cardContent') : null;
diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js
index 73e7012f1..6d0f5f802 100644
--- a/src/controllers/user/menu/index.js
+++ b/src/controllers/user/menu/index.js
@@ -27,7 +27,7 @@ export default function (view, params) {
         page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
         page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId);
         page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId);
-        page.querySelector('.lnkQuickConnectPreferences').setAttribute('href', 'myPreferencesQuickConnect.html?userId=' + userId);
+        page.querySelector('.lnkQuickConnectPreferences').setAttribute('href', 'mypreferencesquickconnect.html');
 
         if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) {
             page.querySelector('.clientSettings').classList.remove('hide');
diff --git a/src/controllers/user/quickConnect.js b/src/controllers/user/quickConnect.js
deleted file mode 100644
index bee0c1b81..000000000
--- a/src/controllers/user/quickConnect.js
+++ /dev/null
@@ -1,53 +0,0 @@
-define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
-    "use strict";
-
-    return function (view) {
-        let quickConnectSettingsInstance = null;
-
-        view.addEventListener("viewshow", function () {
-            quickConnectSettingsInstance = new QuickConnectSettings({
-                page: view,
-                interval: 0
-            });
-
-            view.querySelector("#btnQuickConnectActivate").addEventListener("click", () => {
-                quickConnectSettingsInstance.activate(quickConnectSettingsInstance);
-            });
-
-            quickConnectSettingsInstance.loadData();
-
-            ApiClient.getQuickConnect("Status").then((status) => {
-                let btn = view.querySelector("#btnQuickConnectActivate");
-
-                if (status === "Unavailable") {
-                    btn.textContent = globalize.translate("QuickConnectNotAvailable");
-                    btn.disabled = true;
-                    return false;
-                } else if (status === "Available") {
-                    return false;
-                }
-
-                btn.style.display = "none";
-                return true;
-            }).catch((e) => {
-                throw e;
-            });
-        });
-        view.addEventListener("viewbeforehide", function () {
-            if (quickConnectSettingsInstance) {
-                quickConnectSettingsInstance.submit();
-            }
-            onDestroy();
-        });
-        view.addEventListener("viewdestroy", function () {
-            onDestroy();
-        });
-
-        function onDestroy() {
-            if (quickConnectSettingsInstance) {
-                quickConnectSettingsInstance.destroy();
-                quickConnectSettingsInstance = null;
-            }
-        }
-    };
-});
diff --git a/src/controllers/user/quickConnect/index.html b/src/controllers/user/quickConnect/index.html
new file mode 100644
index 000000000..5f698a4a6
--- /dev/null
+++ b/src/controllers/user/quickConnect/index.html
@@ -0,0 +1,17 @@
+<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true" style="margin: 0 auto; max-width: 54em">
+    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
+        <span>${ButtonActivate}</span>
+    </button>
+
+    <form class="quickConnectSettingsContainer">
+        <div style="margin-bottom: 1em">
+            ${QuickConnectDescription}
+        </div>
+        <div class="inputContainer">
+            <input is="emby-input" type="number" min="0" max="999999" required id="txtQuickConnectCode" label="${LabelQuickConnectCode}" autocomplete="off" />
+        </div>
+        <button id="btnQuickConnectAuthorize" is="emby-button" type="submit" class="raised button-submit block">
+            <span>${Authorize}</span>
+        </button>
+    </form>
+</div>
diff --git a/src/controllers/user/quickConnect/index.js b/src/controllers/user/quickConnect/index.js
new file mode 100644
index 000000000..80543a0b5
--- /dev/null
+++ b/src/controllers/user/quickConnect/index.js
@@ -0,0 +1,78 @@
+import QuickConnectSettings from 'quickConnectSettings';
+import globalize from 'globalize';
+import toast from 'toast';
+
+export default function (view) {
+    let quickConnectSettingsInstance = null;
+
+    view.addEventListener('viewshow', function () {
+        let codeElement = view.querySelector('#txtQuickConnectCode');
+
+        quickConnectSettingsInstance = new QuickConnectSettings({
+            page: view,
+            interval: 0
+        });
+
+        view.querySelector('#btnQuickConnectActivate').addEventListener('click', () => {
+            quickConnectSettingsInstance.activate(quickConnectSettingsInstance).then(() => {
+                renderPage();
+            });
+        });
+
+        view.querySelector('#btnQuickConnectAuthorize').addEventListener('click', () => {
+            if (!codeElement.validity.valid) {
+                toast(globalize.translate('QuickConnectInvalidCode'));
+
+                return;
+            }
+
+            let code = codeElement.value;
+            quickConnectSettingsInstance.authorize(code);
+        });
+
+        renderPage();
+    });
+    view.addEventListener('viewbeforehide', function () {
+        if (quickConnectSettingsInstance) {
+            quickConnectSettingsInstance.submit();
+        }
+        onDestroy();
+    });
+    view.addEventListener('viewdestroy', function () {
+        onDestroy();
+    });
+
+    function onDestroy() {
+        if (quickConnectSettingsInstance) {
+            quickConnectSettingsInstance.destroy();
+            quickConnectSettingsInstance = null;
+        }
+    }
+
+    function renderPage(forceActive = false) {
+        ApiClient.getQuickConnect('Status').then((status) => {
+            let btn = view.querySelector('#btnQuickConnectActivate');
+            let container = view.querySelector('.quickConnectSettingsContainer');
+
+            // The activation button should only be visible when quick connect is unavailable (with the text replaced with an error) or when it is available (so it can be activated)
+            // The authorization container is only usable when quick connect is active, so it should be hidden otherwise
+            container.style.display = 'none';
+
+            if (status === 'Unavailable') {
+                btn.textContent = globalize.translate('QuickConnectNotAvailable');
+                btn.disabled = true;
+                btn.classList.remove('button-submit');
+                btn.classList.add('button');
+            } else if (status === 'Active' || forceActive) {
+                container.style.display = '';
+                btn.style.display = 'none';
+            }
+
+            return true;
+        }).catch((e) => {
+            throw e;
+        });
+    }
+
+    renderPage();
+}
diff --git a/src/myPreferencesQuickConnect.html b/src/myPreferencesQuickConnect.html
deleted file mode 100644
index 4f1f9feba..000000000
--- a/src/myPreferencesQuickConnect.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
-    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
-        <span>${ButtonActivate}</span>
-    </button>
-
-    <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
-        <div id="quickConnectIncoming" class="paperList">
-            <div>${MessagePleaseWait}</div>
-        </ul>
-    </div>
-</div>
diff --git a/src/quickConnect.html b/src/quickconnect.html
similarity index 89%
rename from src/quickConnect.html
rename to src/quickconnect.html
index dff74eb83..671bb88d7 100644
--- a/src/quickConnect.html
+++ b/src/quickconnect.html
@@ -1,6 +1,6 @@
 <div id="quickConnectPage" data-role="page" class="page type-interior advancedConfigurationPage">
-    <div>
-        <div class="content-primary">
+    <div class="content-primary">
+        <form class="quickConnectSettings">
             <div class="verticalSection">
                 <div class="sectionTitleContainer flex align-items-center">
                     <h2 class="sectionTitle">${QuickConnect}</h2>
@@ -19,6 +19,6 @@
             <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
                 <span>${ButtonSave}</span>
             </button>
-        </div>
+        </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 3472d6649..ec623a485 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -94,10 +94,11 @@ define([
         controller: 'user/home/index'
     });
     defineRoute({
-        path: '/myPreferencesQuickConnect.html',
+        alias: '/mypreferencesquickconnect.html',
+        path: '/controllers/user/quickConnect/index.html',
         autoFocus: false,
         transition: 'fade',
-        controller: 'user/quickConnect'
+        controller: 'user/quickConnect/index'
     });
     defineRoute({
         alias: '/mypreferencesplayback.html',
@@ -145,10 +146,10 @@ define([
         controller: 'dashboard/devices/device'
     });
     defineRoute({
-        path: '/quickConnect.html',
+        path: '/quickconnect.html',
         autoFocus: false,
         roles: 'admin',
-        controller: "quickConnect"
+        controller: 'dashboard/quickconnect'
     });
     defineRoute({
         path: '/dlnaprofile.html',
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 57a025d8b..17e4662d2 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -48,7 +48,7 @@
     "AuthProviderHelp": "Select an Authentication Provider to be used to authenticate this user's password.",
     "Auto": "Auto",
     "AutoBasedOnLanguageSetting": "Auto (based on language setting)",
-    "Authorize": "authorize",
+    "Authorize": "Authorize",
     "Backdrop": "Backdrop",
     "Backdrops": "Backdrops",
     "Banner": "Banner",
@@ -816,6 +816,7 @@
     "LabelPublicHttpPortHelp": "The public port number that should be mapped to the local HTTP port.",
     "LabelPublicHttpsPort": "Public HTTPS port number:",
     "LabelPublicHttpsPortHelp": "The public port number that should be mapped to the local HTTPS port.",
+    "LabelQuickConnectCode": "Quick connect code:",
     "LabelReadHowYouCanContribute": "Learn how you can contribute.",
     "LabelReasonForTranscoding": "Reason for transcoding:",
     "LabelRecord": "Record:",
@@ -1322,8 +1323,12 @@
     "QuickConnect": "Quick Connect",
     "QuickConnectActivationSuccessful": "Successfully activated",
     "QuickConnectAuthorizeCode": "Authorize request {0} to continue",
-    "QuickConnectNoPending": "No pending login requests",
-    "QuickConnectNotAvailable": "Quick connect is not available on this server",
+    "QuickConnectAuthorizeSuccess": "Request authorized",
+    "QuickConnectAuthorizeFail": "Unknown quick connect code",
+    "QuickConnectDescription": "To sign in with quick connect, select the Quick Connect button on the device you are logging in from and enter the displayed code below.",
+    "QuickConnectInvalidCode": "Invalid quick connect code",
+    "QuickConnectNotAvailable": "Ask your server administrator to enable quick connect",
+    "QuickConnectNotActive": "Quick connect is not active on this server",
     "Raised": "Raised",
     "Rate": "Rate",
     "RecentlyWatched": "Recently watched",

From 28928ead7cfb101f7b8d55fd21361e0bcfb0fa44 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Thu, 3 Sep 2020 16:19:35 -0500
Subject: [PATCH 13/16] Modified to work with latest server code

---
 .../quickConnectSettings.js                   | 39 ++------
 src/controllers/dashboard/quickconnect.js     |  5 +-
 src/controllers/session/login/index.js        | 93 ++++++++-----------
 src/controllers/user/quickConnect/index.js    |  2 -
 src/strings/en-us.json                        |  1 +
 5 files changed, 51 insertions(+), 89 deletions(-)

diff --git a/src/components/quickConnectSettings/quickConnectSettings.js b/src/components/quickConnectSettings/quickConnectSettings.js
index 35f051a12..a62cfc229 100644
--- a/src/components/quickConnectSettings/quickConnectSettings.js
+++ b/src/components/quickConnectSettings/quickConnectSettings.js
@@ -5,21 +5,14 @@ export class QuickConnectSettings {
     constructor() { }
 
     authorize(code) {
-        let url = ApiClient.getUrl('/QuickConnect/Authorize');
+        let url = ApiClient.getUrl('/QuickConnect/Authorize?Code=' + code);
         ApiClient.ajax({
             type: 'POST',
-            url: url,
-            data: {
-                'Code': code
-            }
+            url: url
         }, true).then(() => {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('QuickConnectAuthorizeSuccess'));
-            });
+            toast(globalize.translate('QuickConnectAuthorizeSuccess'));
         }).catch(() => {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('QuickConnectAuthorizeFail'));
-            });
+            toast(globalize.translate('QuickConnectAuthorizeFail'));
         });
 
         // prevent bubbling
@@ -30,28 +23,16 @@ export class QuickConnectSettings {
         let url = ApiClient.getUrl('/QuickConnect/Activate');
         return ApiClient.ajax({
             type: 'POST',
-            url: url,
-            contentType: 'application/json',
-            dataType: 'json'
-        }).then((json) => {
-            let message = json.Error;
-
-            if (message && message !== '') {
-                console.error('Error activating quick connect. Error: ', json.Error);
-
-                Dashboard.alert({
-                    title: 'Unable to activate quick connect',
-                    message: message
-                });
-
-                return false;
-            }
-
+            url: url
+        }).then(() => {
             toast(globalize.translate('QuickConnectActivationSuccessful'));
-
             return true;
         }).catch((e) => {
             console.error('Error activating quick connect. Error:', e);
+            Dashboard.alert({
+                title: globalize.translate('HeaderError'),
+                message: globalize.translate('DefaultErrorMessage')
+            });
             throw e;
         });
     }
diff --git a/src/controllers/dashboard/quickconnect.js b/src/controllers/dashboard/quickconnect.js
index 22f4781b7..9d08bb6b4 100644
--- a/src/controllers/dashboard/quickconnect.js
+++ b/src/controllers/dashboard/quickconnect.js
@@ -26,13 +26,10 @@ import loading from 'loading';
 
         let newStatus = page.querySelector('#chkQuickConnectAvailable').checked ? 'Available' : 'Unavailable';
 
-        let url = ApiClient.getUrl('/QuickConnect/Available');
+        let url = ApiClient.getUrl('/QuickConnect/Available?Status=' + newStatus);
 
         ApiClient.ajax({
             type: 'POST',
-            data: {
-                'Status': newStatus
-            },
             url: url
         }, true).then(() => {
             require(['toast'], function (toast) {
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index d0446de09..aa5c8cc2d 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -154,71 +154,56 @@ import 'emby-checkbox';
             });
         }
 
+        // FIXME: Clicking ok on the code dialog redirects back to the homepage.
         function loginQuickConnect() {
             let apiClient = getApiClient();
-            let friendlyName = navigator.userAgent;
 
-            let url = apiClient.getUrl('/QuickConnect/Initiate?FriendlyName=' + friendlyName);
-            apiClient.getJSON(url)
-                .then(json => {
-                    if (!json.Secret || !json.Code) {
-                        console.error('Malformed quick connect response', json);
-                        return false;
-                    }
+            let url = apiClient.getUrl('/QuickConnect/Initiate');
+            apiClient.getJSON(url).then(function (json) {
+                if (!json.Secret || !json.Code) {
+                    console.error('Malformed quick connect response', json);
+                    return false;
+                }
 
-                    Dashboard.alert({
-                        message: Globalize.translate('QuickConnectAuthorizeCode', json.Code),
-                        title: Globalize.translate('QuickConnect')
-                    });
+                Dashboard.alert({
+                    message: globalize.translate('QuickConnectAuthorizeCode', json.Code),
+                    title: globalize.translate('QuickConnect')
+                });
 
-                    loading.show();
-
-                    let interval = setInterval(async function() {
-                        try {
-                            let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                            let data = await apiClient.getJSON(connectUrl);
-                            if (data.Authenticated) {
-                                let result = await apiClient.quickConnect(data.Authentication);
-                                let user = result.User;
-                                let serverId = getParameterByName('serverid');
-                                let newUrl = 'home.html';
-
-                                if (user.Policy.IsAdministrator && !serverId) {
-                                    newUrl = 'dashboard.html';
-                                }
-
-                                loading.hide();
-                                Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
-                                Dashboard.navigate(newUrl);
-                                clearInterval(interval);
-
-                                return true;
-                            }
-                        } catch (e) {
-                            Dashboard.alert({
-                                message: 'Quick connect was deactivated before the login request could be approved',
-                                title: 'Unexpected error'
-                            });
-
-                            console.error('Unable to login with quick connect', e);
-                            clearInterval(interval);
-                            loading.hide();
+                let interval = setInterval(function() {
+                    let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                    apiClient.getJSON(connectUrl).then(async function(data) {
+                        if (!data.Authenticated) {
+                            return;
                         }
 
-                        return false;
-                    }, 5000);
+                        clearInterval(interval);
 
-                    return true;
-                }).catch((e) => {
-                    Dashboard.alert({
-                        message: Globalize.translate('QuickConnectNotActive'),
-                        title: 'Error'
+                        let result = await apiClient.quickConnect(data.Authentication);
+                        Dashboard.onServerChanged(result.User.Id, result.AccessToken, apiClient);
+                        Dashboard.navigate('home.html');
+                    }, function (e) {
+                        clearInterval(interval);
+
+                        Dashboard.alert({
+                            message: globalize.translate('QuickConnectDeactivated'),
+                            title: globalize.translate('HeaderError')
+                        });
+
+                        console.error('Unable to login with quick connect', e);
                     });
+                }, 5000);
 
-                    console.error('Quick connect error: ', e);
-
-                    return false;
+                return true;
+            }, function(e) {
+                Dashboard.alert({
+                    message: globalize.translate('QuickConnectNotActive'),
+                    title: globalize.translate('HeaderError')
                 });
+
+                console.error('Quick connect error: ', e);
+                return false;
+            });
         }
 
         view.querySelector('#divUsers').addEventListener('click', function (e) {
diff --git a/src/controllers/user/quickConnect/index.js b/src/controllers/user/quickConnect/index.js
index 80543a0b5..2d6f4b15c 100644
--- a/src/controllers/user/quickConnect/index.js
+++ b/src/controllers/user/quickConnect/index.js
@@ -73,6 +73,4 @@ export default function (view) {
             throw e;
         });
     }
-
-    renderPage();
 }
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index b46020794..b4442ee0f 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1156,6 +1156,7 @@
     "QuickConnectAuthorizeCode": "Authorize request {0} to continue",
     "QuickConnectAuthorizeSuccess": "Request authorized",
     "QuickConnectAuthorizeFail": "Unknown quick connect code",
+    "QuickConnectDeactivated": "Quick connect was deactivated before the login request could be approved",
     "QuickConnectDescription": "To sign in with quick connect, select the Quick Connect button on the device you are logging in from and enter the displayed code below.",
     "QuickConnectInvalidCode": "Invalid quick connect code",
     "QuickConnectNotAvailable": "Ask your server administrator to enable quick connect",

From 723472aca58a0cc4a4cfbbcbaea8267e83341c48 Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Thu, 3 Sep 2020 16:51:15 -0500
Subject: [PATCH 14/16] Complete modifications to work with latest server code

---
 src/controllers/dashboard/quickconnect.js    |   7 +-
 src/controllers/session/login/index.js       | 115 ++++++++++---------
 src/controllers/user/quickConnect/index.html |   2 +-
 src/controllers/user/quickConnect/index.js   |  20 +---
 src/quickconnect.html                        |   2 +-
 src/strings/en-us.json                       |   2 +-
 6 files changed, 71 insertions(+), 77 deletions(-)

diff --git a/src/controllers/dashboard/quickconnect.js b/src/controllers/dashboard/quickconnect.js
index 9d08bb6b4..012f7b7aa 100644
--- a/src/controllers/dashboard/quickconnect.js
+++ b/src/controllers/dashboard/quickconnect.js
@@ -1,4 +1,6 @@
 import loading from 'loading';
+import toast from 'toast';
+import globalize from 'globalize';
 
 /* eslint-disable indent */
 
@@ -32,10 +34,7 @@ import loading from 'loading';
             type: 'POST',
             url: url
         }, true).then(() => {
-            require(['toast'], function (toast) {
-                toast('Settings saved');
-            });
-
+            toast(globalize.translate('SettingsSaved'));
             setTimeout(updatePage, 500);
 
             return true;
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index aa5c8cc2d..c49ed0aee 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -19,8 +19,7 @@ import 'emby-checkbox';
             var user = result.User;
             loading.hide();
 
-            Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
-            Dashboard.navigate('home.html');
+            onLoginSuccessful(user.Id, result.AccessToken, apiClient);
         }, function (response) {
             page.querySelector('#txtManualName').value = '';
             page.querySelector('#txtManualPassword').value = '';
@@ -41,6 +40,60 @@ import 'emby-checkbox';
         });
     }
 
+    function authenticateQuickConnect(apiClient) {
+        let url = apiClient.getUrl('/QuickConnect/Initiate');
+        apiClient.getJSON(url).then(function (json) {
+            if (!json.Secret || !json.Code) {
+                console.error('Malformed quick connect response', json);
+                return false;
+            }
+
+            Dashboard.alert({
+                message: globalize.translate('QuickConnectAuthorizeCode', json.Code),
+                title: globalize.translate('QuickConnect')
+            });
+
+            let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+
+            let interval = setInterval(function() {
+                apiClient.getJSON(connectUrl).then(async function(data) {
+                    if (!data.Authenticated) {
+                        return;
+                    }
+
+                    clearInterval(interval);
+
+                    let result = await apiClient.quickConnect(data.Authentication);
+                    onLoginSuccessful(result.User.Id, result.AccessToken, apiClient);
+                }, function (e) {
+                    clearInterval(interval);
+
+                    Dashboard.alert({
+                        message: globalize.translate('QuickConnectDeactivated'),
+                        title: globalize.translate('HeaderError')
+                    });
+
+                    console.error('Unable to login with quick connect', e);
+                });
+            }, 5000, connectUrl);
+
+            return true;
+        }, function(e) {
+            Dashboard.alert({
+                message: globalize.translate('QuickConnectNotActive'),
+                title: globalize.translate('HeaderError')
+            });
+
+            console.error('Quick connect error: ', e);
+            return false;
+        });
+    }
+
+    function onLoginSuccessful(id, accessToken, apiClient) {
+        Dashboard.onServerChanged(id, accessToken, apiClient);
+        Dashboard.navigate('home.html');
+    }
+
     function showManualForm(context, showCancel, focusPassword) {
         context.querySelector('.chkRememberLogin').checked = appSettings.enableAutoLogin();
         context.querySelector('.manualLoginForm').classList.remove('hide');
@@ -154,58 +207,6 @@ import 'emby-checkbox';
             });
         }
 
-        // FIXME: Clicking ok on the code dialog redirects back to the homepage.
-        function loginQuickConnect() {
-            let apiClient = getApiClient();
-
-            let url = apiClient.getUrl('/QuickConnect/Initiate');
-            apiClient.getJSON(url).then(function (json) {
-                if (!json.Secret || !json.Code) {
-                    console.error('Malformed quick connect response', json);
-                    return false;
-                }
-
-                Dashboard.alert({
-                    message: globalize.translate('QuickConnectAuthorizeCode', json.Code),
-                    title: globalize.translate('QuickConnect')
-                });
-
-                let interval = setInterval(function() {
-                    let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                    apiClient.getJSON(connectUrl).then(async function(data) {
-                        if (!data.Authenticated) {
-                            return;
-                        }
-
-                        clearInterval(interval);
-
-                        let result = await apiClient.quickConnect(data.Authentication);
-                        Dashboard.onServerChanged(result.User.Id, result.AccessToken, apiClient);
-                        Dashboard.navigate('home.html');
-                    }, function (e) {
-                        clearInterval(interval);
-
-                        Dashboard.alert({
-                            message: globalize.translate('QuickConnectDeactivated'),
-                            title: globalize.translate('HeaderError')
-                        });
-
-                        console.error('Unable to login with quick connect', e);
-                    });
-                }, 5000);
-
-                return true;
-            }, function(e) {
-                Dashboard.alert({
-                    message: globalize.translate('QuickConnectNotActive'),
-                    title: globalize.translate('HeaderError')
-                });
-
-                console.error('Quick connect error: ', e);
-                return false;
-            });
-        }
-
         view.querySelector('#divUsers').addEventListener('click', function (e) {
             const card = dom.parentWithClass(e.target, 'card');
             const cardContent = card ? card.querySelector('.cardContent') : null;
@@ -239,7 +240,11 @@ import 'emby-checkbox';
             Dashboard.navigate('forgotpassword.html');
         });
         view.querySelector('.btnCancel').addEventListener('click', showVisualForm);
-        view.querySelector('.btnQuick').addEventListener('click', loginQuickConnect);
+        view.querySelector('.btnQuick').addEventListener('click', function () {
+            const apiClient = getApiClient();
+            authenticateQuickConnect(apiClient);
+            return false;
+        });
         view.querySelector('.btnManual').addEventListener('click', function () {
             view.querySelector('#txtManualName').value = '';
             showManualForm(view, true);
diff --git a/src/controllers/user/quickConnect/index.html b/src/controllers/user/quickConnect/index.html
index 5f698a4a6..15df59ff1 100644
--- a/src/controllers/user/quickConnect/index.html
+++ b/src/controllers/user/quickConnect/index.html
@@ -1,4 +1,4 @@
-<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true" style="margin: 0 auto; max-width: 54em">
+<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${QuickConnect}" data-backbutton="true" style="margin: 0 auto; max-width: 54em">
     <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
         <span>${ButtonActivate}</span>
     </button>
diff --git a/src/controllers/user/quickConnect/index.js b/src/controllers/user/quickConnect/index.js
index 2d6f4b15c..9e8d1a3b3 100644
--- a/src/controllers/user/quickConnect/index.js
+++ b/src/controllers/user/quickConnect/index.js
@@ -8,10 +8,7 @@ export default function (view) {
     view.addEventListener('viewshow', function () {
         let codeElement = view.querySelector('#txtQuickConnectCode');
 
-        quickConnectSettingsInstance = new QuickConnectSettings({
-            page: view,
-            interval: 0
-        });
+        quickConnectSettingsInstance = new QuickConnectSettings();
 
         view.querySelector('#btnQuickConnectActivate').addEventListener('click', () => {
             quickConnectSettingsInstance.activate(quickConnectSettingsInstance).then(() => {
@@ -30,24 +27,17 @@ export default function (view) {
             quickConnectSettingsInstance.authorize(code);
         });
 
+        view.querySelector('.quickConnectSettingsContainer').addEventListener('submit', (e) => {
+            e.preventDefault();
+        });
+
         renderPage();
     });
     view.addEventListener('viewbeforehide', function () {
         if (quickConnectSettingsInstance) {
             quickConnectSettingsInstance.submit();
         }
-        onDestroy();
     });
-    view.addEventListener('viewdestroy', function () {
-        onDestroy();
-    });
-
-    function onDestroy() {
-        if (quickConnectSettingsInstance) {
-            quickConnectSettingsInstance.destroy();
-            quickConnectSettingsInstance = null;
-        }
-    }
 
     function renderPage(forceActive = false) {
         ApiClient.getQuickConnect('Status').then((status) => {
diff --git a/src/quickconnect.html b/src/quickconnect.html
index 671bb88d7..b5b6d4899 100644
--- a/src/quickconnect.html
+++ b/src/quickconnect.html
@@ -17,7 +17,7 @@
             </div>
 
             <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
-                <span>${ButtonSave}</span>
+                <span>${Save}</span>
             </button>
         </form>
     </div>
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index b4442ee0f..df5b6a36c 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1153,7 +1153,7 @@
     "Quality": "Quality",
     "QuickConnect": "Quick Connect",
     "QuickConnectActivationSuccessful": "Successfully activated",
-    "QuickConnectAuthorizeCode": "Authorize request {0} to continue",
+    "QuickConnectAuthorizeCode": "Enter code {0} to login",
     "QuickConnectAuthorizeSuccess": "Request authorized",
     "QuickConnectAuthorizeFail": "Unknown quick connect code",
     "QuickConnectDeactivated": "Quick connect was deactivated before the login request could be approved",

From fa7d8bf4daf4fb2aba5a706219b77d68f3b5b83a Mon Sep 17 00:00:00 2001
From: Matt Montgomery <33811686+ConfusedPolarBear@users.noreply.github.com>
Date: Thu, 10 Sep 2020 15:04:06 -0500
Subject: [PATCH 15/16] Apply suggestions from code review

---
 .../quickConnectSettings.js                   |  4 -
 src/controllers/dashboard/quickconnect.js     | 90 +++++++++----------
 src/controllers/user/quickConnect/index.js    |  5 --
 3 files changed, 45 insertions(+), 54 deletions(-)

diff --git a/src/components/quickConnectSettings/quickConnectSettings.js b/src/components/quickConnectSettings/quickConnectSettings.js
index a62cfc229..e802f92ba 100644
--- a/src/components/quickConnectSettings/quickConnectSettings.js
+++ b/src/components/quickConnectSettings/quickConnectSettings.js
@@ -36,10 +36,6 @@ export class QuickConnectSettings {
             throw e;
         });
     }
-
-    submit() {
-        return false;
-    }
 }
 
 export default QuickConnectSettings;
diff --git a/src/controllers/dashboard/quickconnect.js b/src/controllers/dashboard/quickconnect.js
index 012f7b7aa..87c88d8a4 100644
--- a/src/controllers/dashboard/quickconnect.js
+++ b/src/controllers/dashboard/quickconnect.js
@@ -2,57 +2,57 @@ import loading from 'loading';
 import toast from 'toast';
 import globalize from 'globalize';
 
-/* eslint-disable indent */
+const unavailable = 'Unavailable';
+const available = 'Available';
+const active = 'Active';
+let page;
 
-    let page;
-    export default function(view) {
-        view.addEventListener('viewshow', function () {
-            page = this;
-            loading.show();
-            page.querySelector('#btnQuickConnectSubmit').onclick = onSubmit;
-            updatePage();
-        });
-    }
-
-    function loadPage(status) {
-        let available = status === 'Available' || status === 'Active';
-
-        page.querySelector('#quickConnectStatus').textContent = status.toLocaleLowerCase();
-        page.querySelector('#chkQuickConnectAvailable').checked = available;
-
-        loading.hide();
-    }
-
-    function onSubmit() {
+export default function(view) {
+    view.addEventListener('viewshow', function () {
+        page = this;
         loading.show();
+        page.querySelector('#btnQuickConnectSubmit').onclick = onSubmit;
+        updatePage();
+    });
+}
 
-        let newStatus = page.querySelector('#chkQuickConnectAvailable').checked ? 'Available' : 'Unavailable';
+function loadPage(status) {
+    let check = status === available || status === active;
 
-        let url = ApiClient.getUrl('/QuickConnect/Available?Status=' + newStatus);
+    page.querySelector('#quickConnectStatus').textContent = status.toLocaleLowerCase();
+    page.querySelector('#chkQuickConnectAvailable').checked = check;
 
-        ApiClient.ajax({
-            type: 'POST',
-            url: url
-        }, true).then(() => {
-            toast(globalize.translate('SettingsSaved'));
-            setTimeout(updatePage, 500);
+    loading.hide();
+}
 
-            return true;
-        }).catch((e) => {
-            console.error('Unable to set quick connect status. error:', e);
-        });
+function onSubmit() {
+    loading.show();
 
-        loading.hide();
-        return false;
-    }
+    let newStatus = page.querySelector('#chkQuickConnectAvailable').checked ? available : unavailable;
 
-    function updatePage() {
-        ApiClient.getQuickConnect('Status').then((response) => {
-            loadPage(response);
-            return true;
-        }).catch((e) => {
-            console.error('Unable to get quick connect status. error:', e);
-        });
-    }
+    let url = ApiClient.getUrl('/QuickConnect/Available?Status=' + newStatus);
 
-/* eslint-enable indent */
+    ApiClient.ajax({
+        type: 'POST',
+        url: url
+    }, true).then(() => {
+        toast(globalize.translate('SettingsSaved'));
+        setTimeout(updatePage, 500);
+
+        return true;
+    }).catch((e) => {
+        console.error('Unable to set quick connect status. error:', e);
+    });
+
+    loading.hide();
+    return false;
+}
+
+function updatePage() {
+    ApiClient.getQuickConnect('Status').then((response) => {
+        loadPage(response);
+        return true;
+    }).catch((e) => {
+        console.error('Unable to get quick connect status. error:', e);
+    });
+}
diff --git a/src/controllers/user/quickConnect/index.js b/src/controllers/user/quickConnect/index.js
index 9e8d1a3b3..00fc5488b 100644
--- a/src/controllers/user/quickConnect/index.js
+++ b/src/controllers/user/quickConnect/index.js
@@ -33,11 +33,6 @@ export default function (view) {
 
         renderPage();
     });
-    view.addEventListener('viewbeforehide', function () {
-        if (quickConnectSettingsInstance) {
-            quickConnectSettingsInstance.submit();
-        }
-    });
 
     function renderPage(forceActive = false) {
         ApiClient.getQuickConnect('Status').then((status) => {

From 1ca4a9960559d43644e69f823e4c1b508fab7c3f Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Tue, 15 Sep 2020 15:03:06 +0900
Subject: [PATCH 16/16] minor style changes

---
 src/controllers/session/login/index.html | 2 +-
 src/quickconnect.html                    | 2 +-
 src/scripts/libraryMenu.js               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/controllers/session/login/index.html b/src/controllers/session/login/index.html
index d22d903a1..8c6945616 100644
--- a/src/controllers/session/login/index.html
+++ b/src/controllers/session/login/index.html
@@ -43,7 +43,7 @@
                 <span>${ButtonManualLogin}</span>
             </button>
 			
-			<button is="emby-button" type="button" class="raised cancel block btnQuick">
+            <button is="emby-button" type="button" class="raised cancel block btnQuick">
                 <span>${ButtonUseQuickConnect}</span>
             </button>
 
diff --git a/src/quickconnect.html b/src/quickconnect.html
index b5b6d4899..2b646837c 100644
--- a/src/quickconnect.html
+++ b/src/quickconnect.html
@@ -7,7 +7,7 @@
                 </div>
             </div>
 
-            ${LabelCurrentStatus} <span id="quickConnectStatus"></span>
+            <div>${LabelCurrentStatus}<span id="quickConnectStatus" style="padding:0 0.4em;"></span></div>
 
             <div class="checkboxList paperList" style="padding:.5em 1em;">
                 <label>
diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js
index eef06beb7..10e4a3c9c 100644
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@@ -407,7 +407,7 @@ import 'flexStyles';
         links.push({
             name: globalize.translate('QuickConnect'),
             href: 'quickConnect.html',
-            pageIds: ['quickConnectPage', 'quickConnectPage'],
+            pageIds: ['quickConnectPage'],
             icon: 'tap_and_play'
         });
         links.push({