cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Remove activate feature from Quick Connect page

Browse Source 
Also added a heading and updates the layout in general
This commit is contained in:
Niels van Velzen 2021-06-18 21:41:59 +02:00
parent 0dde17fbd7
commit 5cbac6bcae
3 changed files with 11 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/controllers/user/quickConnect/helper.js
View File

@ -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;
});
};

18
src/controllers/user/quickConnect/index.html
View File

@ -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">
<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>
<form class="quickConnectSettingsContainer">
<div class="verticalSection">
<h2 class="sectionTitle">${QuickConnect}</h2>
<div>${QuickConnectDescription}</div>
<br />
<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>

44
src/controllers/user/quickConnect/index.js
View File

@ -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', () => {
activate().then(() => {
renderPage();
});
});
view.querySelector('.quickConnectSettingsContainer').addEventListener('submit', (e) => {
e.preventDefault();
view.querySelector('#btnQuickConnectAuthorize').addEventListener('click', () => {
if (!codeElement.validity.valid) {
toast(globalize.translate('QuickConnectInvalidCode'));
return;
}
const code = codeElement.value;
authorize(code);
authorize(codeElement.value);
});
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;
});
}
}