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 4296b8bfb3..746384a64c 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 557a4e1033..80be946a60 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 8e48901c11..343b85906e 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 0000000000..a30db441e6
--- /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 746384a64c..f5dc9b487b 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 0000000000..e3d1f76054
--- /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 e7d816fb6f..ff8db72681 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 0000000000..d6f2ae25c1
--- /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 80be946a60..04421b8372 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 4219059dd0..c8db1d17f3 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 0000000000..326ce51b48
--- /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 0000000000..770796a10e
--- /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 11c89b01da..930df8be49 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 9c3db58a7f..1520e96632 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 3b992eaf2b..311478c019 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 aa3ec707e3..ffbf054829 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 a30db441e6..ed7985dcfa 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 f5dc9b487b..845ae9a38f 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 e3d1f76054..5c3c8f9a18 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 ff8db72681..f5d05c5be3 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 d6f2ae25c1..6e63bcdc08 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 326ce51b48..b9ffdfaccd 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 770796a10e..875716285c 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 ed7985dcfa..fc167802d8 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 845ae9a38f..94fa15d412 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 5c3c8f9a18..a6ebc381ce 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 6e63bcdc08..fae5d49865 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 c8db1d17f3..bfc5e793ef 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 b9ffdfaccd..d92e49a427 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 875716285c..9a7dfdfb3e 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 930df8be49..2accf4948d 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 311478c019..3b8abf2bfe 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 fc167802d8..c65782cafe 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 a6ebc381ce..35e5516f45 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 fae5d49865..2b03dec415 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 04421b8372..e1892505fc 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 c65782cafe..59250df76a 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 94fa15d412..ff36939fb2 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 35e5516f45..3432e79231 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 bfc5e793ef..6f753e5554 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 d92e49a427..b58ca8074f 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 9a7dfdfb3e..7d7ec879a6 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 2accf4948d..131dcf7472 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 59250df76a..6010fab5c3 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 ff36939fb2..86e8874e7e 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 2b03dec415..035aef8f2f 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 343b85906e..49472d8817 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 6f753e5554..43dfa4f55b 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 b58ca8074f..4f1f9febab 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 7d7ec879a6..dff74eb836 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 131dcf7472..e3ef65f22f 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 d5fc40ef01..ad390a0fe2 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 6010fab5c3..45bfe815cc 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 86e8874e7e..8b0bcdd28d 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 3432e79231..93b74a1b52 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 035aef8f2f..bee0c1b817 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 f5d05c5be3..9482b26cb5 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 e3ef65f22f..d123395ca0 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 1520e96632..f0806f56e0 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 3b8abf2bfe..ca8a828b0b 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 e1892505fc..557a4e1033 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 d1831b13ee..88a361d8ba 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 45bfe815cc..35f051a121 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 0000000000..22f4781b7d
--- /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 93b74a1b52..0000000000
--- 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 cdccdd5fb4..b1fdf1bc58 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 73e7012f19..6d0f5f8021 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 bee0c1b817..0000000000
--- 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 0000000000..5f698a4a6b
--- /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 0000000000..80543a0b58
--- /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 4f1f9febab..0000000000
--- 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 dff74eb836..671bb88d77 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 3472d66496..ec623a485c 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 57a025d8b7..17e4662d2a 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 35f051a121..a62cfc2298 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 22f4781b7d..9d08bb6b48 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 d0446de099..aa5c8cc2d2 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 80543a0b58..2d6f4b15c8 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 b46020794e..b4442ee0f9 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 9d08bb6b48..012f7b7aa3 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 aa5c8cc2d2..c49ed0aee6 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 5f698a4a6b..15df59ff17 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 2d6f4b15c8..9e8d1a3b31 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 671bb88d77..b5b6d48991 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 b4442ee0f9..df5b6a36c6 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 a62cfc2298..e802f92ba1 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 012f7b7aa3..87c88d8a41 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 9e8d1a3b31..00fc5488b9 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 d22d903a1d..8c69456168 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 b5b6d48991..2b646837c6 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 eef06beb78..10e4a3c9c9 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({