mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migrate apikeys to React (#6390)
This commit is contained in:
parent
4e750711b7
commit
fa749e4d45
8 changed files with 241 additions and 121 deletions
|
@ -1,26 +0,0 @@
|
|||
<div id="apiKeysPage" data-role="page" class="page type-interior advancedConfigurationPage fullWidthContent" data-title="${HeaderApiKeys}">
|
||||
<div>
|
||||
<div class="content-primary">
|
||||
<div class="detailSectionHeader">
|
||||
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
|
||||
<button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${Add}">
|
||||
<span class="material-icons add" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p>${HeaderApiKeysHelp}</p>
|
||||
<br />
|
||||
<table class="tblApiKeys detailTable">
|
||||
<caption class="clipForScreenReader">${ApiKeysCaption}</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="detailTableHeaderCell"></th>
|
||||
<th scope="col" class="detailTableHeaderCell">${HeaderApiKey}</th>
|
||||
<th scope="col" class="detailTableHeaderCell">${HeaderApp}</th>
|
||||
<th scope="col" class="detailTableHeaderCell">${HeaderDateIssued}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="resultBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,89 +0,0 @@
|
|||
import escapeHTML from 'escape-html';
|
||||
|
||||
import datetime from '../../scripts/datetime';
|
||||
import loading from '../../components/loading/loading';
|
||||
import dom from '../../scripts/dom';
|
||||
import globalize from '../../lib/globalize';
|
||||
import '../../elements/emby-button/emby-button';
|
||||
import confirm from '../../components/confirm/confirm';
|
||||
import { pageIdOn } from '../../utils/dashboard';
|
||||
|
||||
function revoke(page, key) {
|
||||
confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
|
||||
loading.show();
|
||||
ApiClient.ajax({
|
||||
type: 'DELETE',
|
||||
url: ApiClient.getUrl('Auth/Keys/' + key)
|
||||
}).then(function () {
|
||||
loadData(page);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderKeys(page, keys) {
|
||||
const rows = keys.map(function (item) {
|
||||
let html = '';
|
||||
html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
|
||||
html += '<td class="detailTableBodyCell">';
|
||||
html += '<button type="button" is="emby-button" data-token="' + escapeHTML(item.AccessToken) + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
|
||||
html += '</td>';
|
||||
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
|
||||
html += escapeHTML(item.AccessToken);
|
||||
html += '</td>';
|
||||
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
|
||||
html += escapeHTML(item.AppName) || '';
|
||||
html += '</td>';
|
||||
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
|
||||
const date = datetime.parseISO8601Date(item.DateCreated, true);
|
||||
html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
|
||||
html += '</td>';
|
||||
html += '</tr>';
|
||||
return html;
|
||||
}).join('');
|
||||
page.querySelector('.resultBody').innerHTML = rows;
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function loadData(page) {
|
||||
loading.show();
|
||||
ApiClient.getJSON(ApiClient.getUrl('Auth/Keys')).then(function (result) {
|
||||
renderKeys(page, result.Items);
|
||||
});
|
||||
}
|
||||
|
||||
function showNewKeyPrompt(page) {
|
||||
import('../../components/prompt/prompt').then(({ default: prompt }) => {
|
||||
prompt({
|
||||
title: globalize.translate('HeaderNewApiKey'),
|
||||
label: globalize.translate('LabelAppName'),
|
||||
description: globalize.translate('LabelAppNameExample')
|
||||
}).then(function (value) {
|
||||
ApiClient.ajax({
|
||||
type: 'POST',
|
||||
url: ApiClient.getUrl('Auth/Keys', {
|
||||
App: value
|
||||
})
|
||||
}).then(function () {
|
||||
loadData(page);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
pageIdOn('pageinit', 'apiKeysPage', function () {
|
||||
const page = this;
|
||||
page.querySelector('.btnNewKey').addEventListener('click', function () {
|
||||
showNewKeyPrompt(page);
|
||||
});
|
||||
page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
|
||||
const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
|
||||
|
||||
if (btnRevoke) {
|
||||
revoke(page, btnRevoke.getAttribute('data-token'));
|
||||
}
|
||||
});
|
||||
});
|
||||
pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
|
||||
loadData(this);
|
||||
});
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue