1
0
Fork 0
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:
viown 2025-01-23 22:58:24 +03:00 committed by GitHub
parent 4e750711b7
commit fa749e4d45
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 241 additions and 121 deletions

View file

@ -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>

View file

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