crafty-4/app/frontend/templates/panel/panel_edit_user_apikeys.html
2023-09-04 19:22:32 -04:00

318 lines
16 KiB
HTML

{% extends ../base.html %}
{% block meta %}
{% end %}
{% block title %}Crafty Controller - Edit User API Keys{% end %}
{% block content %}
<div class="content-wrapper">
<!-- Page Title Header Starts-->
<div class="row page-title-header">
<div class="col-12">
<div class="page-header">
<h4 class="page-title">
{{ translate('apiKeys', 'pageTitle', data['lang']) }} - {{ data['user']['user_id'] }}
<br />
<small>UID: {{ data['user']['user_id'] }}</small>
</h4>
</div>
</div>
</div>
<!-- Page Title Header Ends-->
<div class="row">
<div class="col-sm-12 grid-margin">
<div class="card">
<div class="card-body pt-0">
<ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
<li class="nav-item">
<a class="nav-link" href="/panel/edit_user?id={{ data['user']['user_id'] }}&subpage=config"
role="tab" aria-selected="false">
<i class="fas fa-cogs"></i>{{ translate('apiKeys', 'config', data['lang']) }}</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/panel/edit_user_apikeys?id={{ data['user']['user_id'] }}"
role="tab" aria-selected="true">
<i class="fas fa-key"></i>{{ translate('apiKeys', 'apiKeys', data['lang']) }}</a>
</li>
</ul>
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fas fa-key"></i>{{ translate('apiKeys', 'apiKeys',
data['lang']) }}</h4>
</div>
<div class="card-body">
<div class="form-group">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr class="rounded">
<!--<th>ID</th>-->
<th>{{ translate('apiKeys', 'name', data['lang']) }}</th>
<th>{{ translate('apiKeys', 'created', data['lang']) }}</th>
<th>{{ translate('apiKeys', 'superUser', data['lang']) }}</th>
<th>{{ translate('apiKeys', 'perms', data['lang']) }}</th>
<th>{{ translate('apiKeys', 'buttons', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for apikey in data['api_keys'] %}
<tr>
<!--<td>{-{ apikey.token_id }-}</td>-->
<td>{{ apikey.name }}</td>
<td>{{ apikey.created.strftime('%d/%m/%Y %H:%M:%S') }}</td>
<td>
{% if apikey.superuser %}
<span class="text-success">
<i class="fas fa-check-square"></i> {{
translate('apiKeys', 'yes', data['lang']) }}
</span>
{% else %}
<span class="text-danger">
<i class="far fa-times-square"></i> {{
translate('apiKeys', 'no', data['lang']) }}
</span>
{% end %}
</td>
<td>{{ translate('apiKeys', 'server', data['lang']) }} {{
apikey.server_permissions }}
{{ translate('apiKeys', 'crafty', data['lang']) }} {{
apikey.crafty_permissions }}</td>
<td><button class="btn btn-danger delete-api-key"
data-key-id="{{ apikey.token_id }}"
data-key-name="{{ apikey.name }}">{{translate('panelConfig',
'delete', data['lang'])}}</button>
<button class="btn btn-outline-primary get-a-token"
data-key-id="{{ apikey.token_id }}"
data-key-name="{{ apikey.name }}">{{translate('apiKeys',
'getToken', data['lang'])}}</button>
</td>
</tr>
{% end %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fas fa-plus"></i> {{ translate('apiKeys',
'createNew', data['lang']) }}</h4>
</div>
<div class="card-body">
<form id="user_api_form" class="forms-sample">
<div class="form-group">
<label class="form-label" for="username">{{ translate('apiKeys', 'name',
data['lang']) }}<small class="text-muted ml-1"> - {{
translate('apiKeys', 'nameDesc', data['lang']) }}</small> </label>
<input type="text" class="form-control" name="name" id="name"
placeholder="API Key">
</div>
<table class="table table-hover mb-3">
<thead>
<tr class="rounded">
<th>{{ translate('apiKeys', 'permName', data['lang']) }}</th>
<th>{{ translate('apiKeys', 'auth', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for permission in data['server_permissions_all'] %}
<tr>
<td><label for="permission_{{ permission.name }}">{{ permission.name
}}</label>
</td>
<td>
<input type="checkbox" class="server_perm"
id="permission_{{ permission.name }}"
name="permission_{{ permission.name }}" value="1">
</td>
</tr>
{% end %}
{% for permission in data['crafty_permissions_all'] %}
<tr>
<td><label for="permission_{{ permission.name }}">{{ permission.name
}}</label>
</td>
<td>
<input type="checkbox" class="crafty_perm"
id="permission_{{ permission.name }}"
name="permission_{{ permission.name }}" value="1">
</td>
</tr>
{% end %}
</tbody>
</table>
<label for="superuser">Superuser</label>
<input type="checkbox" class="" id="superuser" name="superuser" value="1">
<br />
<button type="submit" class="btn btn-success mr-2"><i class="fas fa-plus"></i>
Create
</button>
<button type="reset" class="btn btn-light"><i class="fas fa-undo-alt"></i> {{
translate('panelConfig', 'cancel', data['lang']) }}
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
{% end %}
{% block js %}
<script>
//used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
function getCookie(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : undefined;
}
const userId = new URLSearchParams(document.location.search).get('id')
$(document).ready(function () {
$("#user_api_form").on("submit", async function (e) {
e.preventDefault();
const token = getCookie("_xsrf")
let apiForm = document.getElementById("user_api_form");
let formData = new FormData(apiForm);
//Create an object from the form data entries
let formDataObject = Object.fromEntries(formData.entries());
//We need to make sure these are sent regardless of whether or not they're checked
formDataObject.disabled_language_files = $('#lang_select').val();
$('#user_api_form input[type="checkbox"]:checked').each(function () {
if ($(this).val() == 'True') {
formDataObject[this.name] = true;
} else {
formDataObject[this.name] = false;
}
});
let server_permissions = $('.server_perm').map(function () {
if (this.checked) {
return "1";
} else {
return "0"
}
}).get();
server_permissions = server_permissions.join("");
let crafty_permissions = $('.crafty_perm').map(function () {
if (this.checked) {
return "1";
} else {
return "0"
}
}).get();
crafty_permissions = crafty_permissions.join("");
console.log(server_permissions);
console.log(crafty_permissions);
console.log(formDataObject);
// Format the plain form data as JSON
let formDataJsonString = JSON.stringify({
"name": formDataObject.name,
"server_permissions_mask": server_permissions,
"crafty_permissions_mask": crafty_permissions,
"superuser": $("#superuser").prop('checked'),
});
console.log(formDataJsonString);
let res = await fetch(`/api/v2/users/${userId}/key/`, {
method: 'PATCH',
headers: {
'X-XSRFToken': token
},
body: formDataJsonString,
});
let responseData = await res.json();
if (responseData.status === "ok") {
location.reload();
} else {
bootbox.alert({
title: responseData.error,
message: responseData.error_data
});
}
});
});
$(document).ready(function () {
console.log("ready!");
$('.delete-api-key').click(async function () {
let keyId = $(this).data("key-id");
let keyName = $(this).data("key-name");
let token = getCookie("_xsrf");
let res = await fetch(`/api/v2/users/${userId}/key/${keyId}`, {
method: 'DELETE',
headers: {
'X-XSRFToken': token
},
});
let responseData = await res.json();
if (responseData.status === "ok") {
location.reload()
} else {
bootbox.alert({
title: responseData.error,
message: responseData.error_data
});
}
})
$('.get-a-token').click(async function () {
let keyId = $(this).data("key-id");
let keyName = $(this).data("key-name");
let token = getCookie("_xsrf");
let res = await fetch(`/api/v2/users/${userId}/key/${keyId}`, {
method: 'GET',
headers: {
'X-XSRFToken': token
},
});
let responseData = await res.json();
if (responseData.status === "ok") {
bootbox.alert({
title: `API token for ${keyName}`,
message: `Here is an API token for ${keyName}:\n<pre style="white-space: pre-wrap;color:white;word-break:break-all;background: grey;border-radius: 5px;">${responseData.data}</pre>`
});
} else {
bootbox.alert({
title: responseData.error,
message: responseData.error_data
});
}
});
});
</script>
{% end %}