107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
{% extends "sqladmin/edit.html" %}
|
||
|
||
{% block content %}
|
||
{{ super() }}
|
||
|
||
{# key_id ใช้ model.id ถ้ามี ไม่งั้น fallback จาก path params #}
|
||
{% set key_id = model.id if (model is defined and model) else request.path_params.get('pk') %}
|
||
|
||
|
||
<div class="card mt-3">
|
||
<div class="card-header">
|
||
<h5>API Key Actions</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<button type="button" class="btn btn-warning me-2" onclick="regenerateApiKey({{ key_id|default('null') }})">
|
||
<i class="fa fa-refresh"></i> Regenerate API Key
|
||
</button>
|
||
<button type="button" class="btn btn-info" onclick="viewApiKey({{ key_id|default('null') }})">
|
||
<i class="fa fa-eye"></i> View API Key (if just created)
|
||
</button>
|
||
|
||
<div id="apiKeyResult" class="mt-3" style="display: none;">
|
||
<div class="alert alert-warning">
|
||
<h6>⚠️ Important: Save this key immediately!</h6>
|
||
<p>This key will only be shown once and cannot be retrieved later.</p>
|
||
<div class="input-group">
|
||
<input type="text" id="apiKeyValue" class="form-control" readonly>
|
||
<button class="btn btn-primary" onclick="copyApiKey()">
|
||
<i class="fa fa-copy"></i> Copy
|
||
</button>
|
||
</div>
|
||
<small id="apiKeyMessage" class="text-muted mt-2 d-block"></small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
async function regenerateApiKey(keyId) {
|
||
if (!confirm('Are you sure you want to regenerate this API key? The old key will stop working immediately!')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const rootPath = '{{ request.scope.get("root_path", "") }}';
|
||
const url = `${rootPath}/admin/api-keys/${keyId}/regenerate`;
|
||
|
||
const response = await fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('apiKeyValue').value = data.api_key;
|
||
document.getElementById('apiKeyMessage').textContent = data.message;
|
||
document.getElementById('apiKeyResult').style.display = 'block';
|
||
|
||
alert('✅ API Key regenerated successfully!\n\nNew Key: ' + data.api_key + '\n\nPlease copy and save it now!');
|
||
} else {
|
||
alert('❌ Error: ' + (data.message || 'Failed to regenerate API key'));
|
||
}
|
||
} catch (error) {
|
||
alert('❌ Error: ' + error.message);
|
||
}
|
||
}
|
||
|
||
async function viewApiKey(keyId) {
|
||
try {
|
||
const rootPath = '{{ request.scope.get("root_path", "") }}';
|
||
const url = `${rootPath}/admin/api-keys/${keyId}/view`;
|
||
|
||
const response = await fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('apiKeyValue').value = data.api_key;
|
||
document.getElementById('apiKeyMessage').textContent = data.message;
|
||
document.getElementById('apiKeyResult').style.display = 'block';
|
||
|
||
alert('✅ API Key retrieved!\n\nKey: ' + data.api_key + '\n\nPlease copy and save it now!');
|
||
} else {
|
||
alert('ℹ️ ' + data.message);
|
||
}
|
||
} catch (error) {
|
||
alert('❌ Error: ' + error.message);
|
||
}
|
||
}
|
||
|
||
function copyApiKey() {
|
||
const input = document.getElementById('apiKeyValue');
|
||
input.select();
|
||
document.execCommand('copy');
|
||
alert('✅ API Key copied to clipboard!');
|
||
}
|
||
</script>
|
||
{% endblock %}
|