hrfee/jellyfin-accounts
1
0
Fork 0
mirror of https://github.com/hrfee/jellyfin-accounts.git synced 2024-12-22 09:00:14 +00:00
Code Issues Projects Releases Wiki Activity

no more jQuery on admin page

Browse Source 
Functions well, but a few changes might be necessary visually.
This commit is contained in:
Harvey Tindall 2020-07-03 21:07:04 +01:00
parent fe12b7c4be
commit d1cd83f5ff
2 changed files with 350 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

411
jellyfin_accounts/data/static/admin.js
View File

@ -1,3 +1,9 @@
var loginModal = new bootstrap.Modal(document.getElementById('login'));
var settingsModal = new bootstrap.Modal(document.getElementById('settingsMenu'));
var userDefaultsModal = new bootstrap.Modal(document.getElementById('userDefaults'));
var usersModal = new bootstrap.Modal(document.getElementById('users'));
var restartModal = new bootstrap.Modal(document.getElementById('restartModal'));
function parseInvite(invite, empty = false) {
if (empty === true) {
return ["None", "", "1"]
@ -70,19 +76,13 @@ function removeInvite(code) {
function generateInvites(empty = false) {
// document.getElementById('invites').textContent = '';
if (empty === false) {
$.ajax('/getInvites', {
type : 'GET',
dataType : 'json',
contentType: 'json',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
data: { get_param: 'value' },
complete: function(response) {
var data = JSON.parse(response['responseText']);
var req = new XMLHttpRequest();
req.open("GET", "/getInvites", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.responseType = 'json';
req.onreadystatechange = function() {
if (this.readyState == 4) {
var data = this.response;
if (data['invites'].length == 0) {
document.getElementById('invites').textContent = '';
addItem(parseInvite([], true));
@ -113,8 +113,9 @@ function generateInvites(empty = false) {
}
};
};
}
});
};
};
req.send();
} else if (empty === true) {
document.getElementById('invites').textContent = '';
addItem(parseInvite([], true));
@ -122,25 +123,23 @@ function generateInvites(empty = false) {
};
function deleteInvite(code) {
var send = JSON.stringify({ "code": code });
$.ajax('/deleteInvite', {
data : send,
contentType : 'application/json',
type : 'POST',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
success: function() { generateInvites(); },
});
var req = new XMLHttpRequest();
req.open("POST", "/deleteInvite", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange = function() {
if (this.readyState == 4) {
generateInvites();
};
};
req.send(send);
};
function addOptions(le, sel) {
for (v = 0; v <= le; v++) {
var opt = document.createElement('option');
opt.appendChild(document.createTextNode(v))
opt.value = v
sel.appendChild(opt)
opt.appendChild(document.createTextNode(v));
opt.value = v;
sel.appendChild(opt);
}
};
function toClipboard(str) {
@ -162,41 +161,65 @@ function toClipboard(str) {
document.getSelection().addRange(selected);
}
};
function serializeForm(id) {
var form = document.getElementById(id);
var formData = {};
for (var i = 0; i < form.elements.length; i++) {
var el = form.elements[i];
if (el.type != 'submit') {
var name = el.name;
if (name == '') {
name = el.id;
};
switch (el.type) {
case 'checkbox':
formData[name] = el.checked;
break;
case 'text':
case 'password':
case 'select-one':
case 'email':
formData[name] = el.value;
break;
};
};
};
return formData;
};
document.getElementById('inviteForm').onsubmit = function() {
var button = document.getElementById('generateSubmit');
button.disabled = true;
button.innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
'Loading...';
var send_object = $("form#inviteForm").serializeObject();
send_object = serializeForm('inviteForm');
console.log(send_object);
if (document.getElementById('send_to_address') != null) {
if (document.getElementById('send_to_address_enabled').checked) {
send_object['email'] = document.getElementById('send_to_address').value;
if (send_object['send_to_address_enabled']) {
send_object['email'] = send_object['send_to_address'];
delete send_object['send_to_address'];
delete send_object['send_to_address_enabled'];
}
}
var send = JSON.stringify(send_object);
$.ajax('/generateInvite', {
data : send,
contentType : 'application/json',
type : 'POST',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
success: function() {
var req = new XMLHttpRequest();
req.open("POST", "/generateInvite", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange = function() {
if (this.readyState == 4) {
button.textContent = 'Generate';
button.disabled = false;
generateInvites();
},
});
};
};
req.send(send);
return false;
};
$("form#loginForm").submit(function() {
document.getElementById('loginForm').onsubmit = function() {
window.token = "";
var details = $("form#loginForm").serializeObject();
var details = serializeForm('loginForm');
var errorArea = document.getElementById('loginErrorArea');
errorArea.textContent = '';
var button = document.getElementById('loginSubmit');
@ -204,19 +227,11 @@ $("form#loginForm").submit(function() {
button.innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
'Loading...';
$.ajax('/getToken', {
type : 'GET',
dataType : 'json',
contentType: 'json',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(details['username'] + ":" + details['password']));
},
data: { get_param: 'value' },
complete: function(data) {
if (data['status'] == 401) {
var req = new XMLHttpRequest();
req.responseType = 'json';
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 401) {
button.disabled = false;
button.textContent = 'Login';
var wrongPassword = document.createElement('div');
@ -225,7 +240,8 @@ $("form#loginForm").submit(function() {
wrongPassword.appendChild(document.createTextNode('Incorrect username or password.'));
errorArea.appendChild(wrongPassword);
} else {
window.token = JSON.parse(data['responseText'])['token'];
var data = this.response;
window.token = data['token'];
generateInvites();
var interval = setInterval(function() { generateInvites(); }, 60 * 1000);
var hour = document.getElementById('hours');
@ -234,35 +250,33 @@ $("form#loginForm").submit(function() {
var minutes = document.getElementById('minutes');
addOptions(59, minutes);
minutes.selected = "30";
$('#login').modal('hide');
}
}
});
loginModal.hide();
};
};
};
req.open("GET", "/getToken", true);
req.setRequestHeader("Authorization", "Basic " + btoa(details['username'] + ":" + details['password']));
req.send();
return false;
});
document.getElementById('openDefaultsWizard').onclick = function () {
this.disabled = true;
};
document.getElementById('openDefaultsWizard').onclick = function() {
this.disabled = true
this.innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
'Loading...';
$.ajax('getUsers', {
type : 'GET',
dataType : 'json',
contentType : 'json',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
complete : function(data) {
if (data['status'] == 200) {
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open("GET", "/getUsers", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
var users = req.response['users'];
var radioList = document.getElementById('defaultUserRadios');
radioList.textContent = '';
if (document.getElementById('setDefaultUser')) {
document.getElementById('setDefaultUser').remove();
};
var users = data['responseJSON']['users'];
for (var i = 0; i < users.length; i++) {
var user = users[i]
var radio = document.createElement('div');
@ -291,11 +305,12 @@ document.getElementById('openDefaultsWizard').onclick = function () {
submitButton.classList.remove('btn-danger');
submitButton.classList.add('btn-primary');
};
$('#settingsMenu').modal('hide');
$('#userDefaults').modal('show');
}
}
});
settingsModal.hide();
userDefaultsModal.show();
};
};
};
req.send();
};
document.getElementById('storeDefaults').onclick = function () {
this.disabled = true;
@ -310,17 +325,13 @@ document.getElementById('storeDefaults').onclick = function () {
if (document.getElementById('storeDefaultHomescreen').checked) {
data['homescreen'] = true;
}
$.ajax('/setDefaults', {
data : JSON.stringify(data),
contentType : 'application/json',
type : 'POST',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
success: function() {
var req = new XMLHttpRequest();
req.open("POST", "/setDefaults", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200 || this.status == 204) {
button.textContent = 'Success';
if (button.classList.contains('btn-danger')) {
button.classList.remove('btn-danger');
@ -330,10 +341,8 @@ document.getElementById('storeDefaults').onclick = function () {
button.classList.add('btn-success');
button.disabled = false;
setTimeout(function(){$('#userDefaults').modal('hide');}, 1000);
},
error: function() {
} else {
button.textContent = 'Failed';
config_base_path = local_dir / "config-base.json"
button.classList.remove('btn-primary');
button.classList.add('btn-danger');
setTimeout(function(){
@ -343,35 +352,69 @@ document.getElementById('storeDefaults').onclick = function () {
button.classList.add('btn-primary');
button.disabled = false;
}, 1000);
}
});
}
}
};
};
};
req.send(JSON.stringify(data));
};
};
};
// $.ajax('/setDefaults', {
// data : JSON.stringify(data),
// contentType : 'application/json',
// type : 'POST',
// xhrFields : {
// withCredentials: true
// },
// beforeSend : function (xhr) {
// xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
// },
// success: function() {
// button.textContent = 'Success';
// if (button.classList.contains('btn-danger')) {
// button.classList.remove('btn-danger');
// } else if (button.classList.contains('btn-primary')) {
// button.classList.remove('btn-primary');
// };
// button.classList.add('btn-success');
// button.disabled = false;
// setTimeout(function(){$('#userDefaults').modal('hide');}, 1000);
// },
// error: function() {
// button.textContent = 'Failed';
// button.classList.remove('btn-primary');
// button.classList.add('btn-danger');
// setTimeout(function(){
// var button = document.getElementById('storeDefaults');
// button.textContent = 'Submit';
// button.classList.remove('btn-danger');
// button.classList.add('btn-primary');
// button.disabled = false;
// }, 1000);
// }
// });
// }
// }
// };
document.getElementById('openUsers').onclick = function () {
this.disabled = true;
this.innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
'Loading...';
$.ajax('/getUsers', {
type : 'GET',
dataType : 'json',
contentType: 'json',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
data: { get_param: 'value' },
complete : function(data) {
if (data['status'] == 200) {
var req = new XMLHttpRequest();
req.open("GET", "/getUsers", true);
req.responseType = 'json';
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
var list = document.getElementById('userList');
list.textContent = '';
if (document.getElementById('saveUsers')) {
document.getElementById('saveUsers').remove();
};
var users = data['responseJSON']['users'];
var users = req.response['users'];
for (var i = 0; i < users.length; i++) {
var user = users[i]
var entry = document.createElement('p');
@ -417,18 +460,18 @@ document.getElementById('openUsers').onclick = function () {
};
};
send = JSON.stringify(send);
$.ajax('/modifyUsers', {
data : send,
contentType : 'application/json',
type : 'POST',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
success: function() { $('#users').modal('hide'); },
});
var req = new XMLHttpRequest();
req.open("POST", "/modifyUsers", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200 || this.status == 204) {
usersModal.hide();
};
};
};
req.send(send);
};
footer.appendChild(saveUsers);
};
@ -440,35 +483,31 @@ document.getElementById('openUsers').onclick = function () {
var button = document.getElementById('openUsers');
button.disabled = false;
button.innerHTML = 'Users <i class="fa fa-user"></i>';
$('#settingsMenu').modal('hide');
$('#users').modal('show');
settingsModal.hide();
usersModal.show();
};
}
});
};
req.send();
};
generateInvites(empty = true);
$("#login").modal('show');
loginModal.show()
var config = {};
var modifiedConfig = {};
document.getElementById('openSettings').onclick = function () {
restart_setting_changed = false;
$.ajax('getConfig', {
type : 'GET',
dataType : 'json',
contentType : 'json',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
complete : function(data) {
if (data['status'] == 200) {
var req = new XMLHttpRequest();
req.open("GET", "/getConfig", true);
req.responseType = 'json';
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var settingsList = document.getElementById('settingsList');
settingsList.textContent = '';
config = data['responseJSON'];
config = this.response;
for (var section of Object.keys(config)) {
var sectionCollapse = document.createElement('div');
sectionCollapse.classList.add('collapse');
@ -578,45 +617,50 @@ document.getElementById('openSettings').onclick = function () {
settingsList.appendChild(sectionCollapse);
};
};
},
});
$('#settingsMenu').modal('show');
};
req.send();
settingsModal.show();
};
$('#settingsMenu').on('shown.bs.modal', function() {
$("a[data-toggle='tooltip']").each(function (i, obj) {
$(obj).tooltip();
document.getElementById('settingsMenu').addEventListener('shown.bs.modal', function() {
var to_trigger = [].slice.call(document.querySelectorAll('a[data-toggle="tooltip"]'));
var tooltips = to_trigger.map(function(el) {
return new bootstrap.Tooltip(el);
});
});
//
// $('#settingsMenu').on('shown.bs.modal', function() {
// $("a[data-toggle='tooltip']").each(function (i, obj) {
// $(obj).tooltip();
// });
// });
//
function sendConfig(modalId) {
var modal = document.getElementById(modalId);
var send = JSON.stringify(modifiedConfig);
$.ajax('/modifyConfig', {
data : send,
contentType : 'application/json',
type : 'POST',
xhrFields : {
withCredentials: true
},
beforeSend : function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
},
success: function() {
$('#' + modalId).modal('hide');
var req = new XMLHttpRequest();
req.open("POST", "/modifyConfig", true);
req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200 || this.status == 204) {
bootstrap.Modal.getInstance(document.getElementById(modalId)).hide();
if (modalId != 'settingsMenu') {
$('#settingsMenu').modal('hide');
settingsModal.hide();
};
},
fail: function(xhr, textStatus, errorThrown) {
var footer = modal.getElementsByClassName('modal-dialog')[0].getElementsByClassName('modal-content')[0].getElementsByClassName('modal-footer')[0];
var alert = document.createElement('div');
alert.classList.add('alert', 'alert-danger');
alert.setAttribute('role', 'alert');
alert.appendChild(document.createTextNode('Error: ' + errorThrown));
footer.appendChild(alert);
},
});
};
};
// fail: function(xhr, textStatus, errorThrown) {
// var footer = modal.getElementsByClassName('modal-dialog')[0].getElementsByClassName('modal-content')[0].getElementsByClassName('modal-footer')[0];
// var alert = document.createElement('div');
// alert.classList.add('alert', 'alert-danger');
// alert.setAttribute('role', 'alert');
// alert.appendChild(document.createTextNode('Error: ' + errorThrown));
// footer.appendChild(alert);
// },
};
req.send(send);
};
document.getElementById('settingsSave').onclick = function() {
@ -650,15 +694,12 @@ document.getElementById('settingsSave').onclick = function() {
// if (restart_setting_changed) {
if (restart_setting_changed) {
document.getElementById('applyRestarts').onclick = function(){sendConfig('restartModal');};
$('#settingsMenu').modal('hide');
$('#restartModal').modal({
backdrop: 'static',
show: true
});
settingsModal.hide();
restartModal.show();
} else if (settings_changed) {
sendConfig('settingsMenu');
} else {
$('#settingsMenu').modal('hide');
settingsModal.hide();
};
};

10
jellyfin_accounts/data/templates/admin.html
View File

@ -56,7 +56,7 @@
<title>Admin</title>
</head>
<body>
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true" data-backdrop="static">
<div class="modal fade" id="login" role="dialog" aria-labelledby="login" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -79,7 +79,7 @@
</div>
</div>
</div>
<div class="modal fade" id="settingsMenu" tabindex="-1" role="dialog" aria-labelledby="settings menu" aria-hidden="true">
<div class="modal fade" id="settingsMenu" role="dialog" aria-labelledby="settings menu" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -108,7 +108,7 @@
</div>
</div>
</div>
<div class="modal fade" id="users" tabindex="-1" role="dialog" aria-labelledby="users" aria-hidden="true">
<div class="modal fade" id="users" role="dialog" aria-labelledby="users" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -127,7 +127,7 @@
</div>
</div>
</div>
<div class="modal fade" id="userDefaults" tabindex="-1" role="dialog" aria-labelledby="users" aria-hidden="true">
<div class="modal fade" id="userDefaults" role="dialog" aria-labelledby="users" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
@ -150,7 +150,7 @@
</div>
</div>
</div>
<div class="modal fade" id="restartModal" tabindex="-1" role="dialog" aria-labelledby"Restart Warning" aria-hidden="true">
<div class="modal fade" id="restartModal" role="dialog" aria-labelledby"Restart Warning" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">