Remove activate feature from Quick Connect page

Also added a heading and updates the layout in general

src/controllers/user/quickConnect/helper.js

@@ -1,6 +1,5 @@
 import globalize from '../../../scripts/globalize';
 import toast from '../../../components/toast/toast';
-import Dashboard from '../../../scripts/clientUtils';
 
 export const authorize = (code) => {
     const url = ApiClient.getUrl('/QuickConnect/Authorize?Code=' + code);
@@ -16,22 +15,3 @@ export const authorize = (code) => {
     // prevent bubbling
     return false;
 };
-
-export const activate = () => {
-    const url = ApiClient.getUrl('/QuickConnect/Activate');
-    return ApiClient.ajax({
-        type: 'POST',
-        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;
-    });
-};

src/controllers/user/quickConnect/index.html

@@ -1,19 +1,15 @@
 <div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${QuickConnect}" data-backbutton="true" style="margin: 0 auto; max-width: 54em">
-    <div class="settingsContainer padded-left padded-right padded-bottom-page">
+    <form class="quickConnectSettingsContainer">
-        <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
+        <div class="verticalSection">
-            <span>${ButtonActivate}</span>
+            <h2 class="sectionTitle">${QuickConnect}</h2>
-        </button>
+            <div>${QuickConnectDescription}</div>
-
+            <br />
-        <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>
-    </div>
+    </form>
 </div>

src/controllers/user/quickConnect/index.js

@@ -1,4 +1,4 @@
-import { activate, authorize } from './helper';
+import { authorize } from './helper';
 import globalize from '../../../scripts/globalize';
 import toast from '../../../components/toast/toast';
 
@@ -6,52 +6,16 @@ export default function (view) {
     view.addEventListener('viewshow', function () {
         const codeElement = view.querySelector('#txtQuickConnectCode');
 
-        view.querySelector('#btnQuickConnectActivate').addEventListener('click', () => {
+        view.querySelector('.quickConnectSettingsContainer').addEventListener('submit', (e) => {
-            activate().then(() => {
+            e.preventDefault();
-                renderPage();
-            });
-        });
 
-        view.querySelector('#btnQuickConnectAuthorize').addEventListener('click', () => {
             if (!codeElement.validity.valid) {
                 toast(globalize.translate('QuickConnectInvalidCode'));
 
                 return;
             }
 
-            const code = codeElement.value;
+            authorize(codeElement.value);
-            authorize(code);
         });
-
-        view.querySelector('.quickConnectSettingsContainer').addEventListener('submit', (e) => {
-            e.preventDefault();
-        });
-
-        renderPage();
     });
-
-    function renderPage(forceActive = false) {
-        ApiClient.getQuickConnect('Status').then((status) => {
-            const btn = view.querySelector('#btnQuickConnectActivate');
-            const 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;
-        });
-    }
 }