281 lines
11 KiB
HTML
281 lines
11 KiB
HTML
{{template "header" .}}
|
||
<div class="container mt-4">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="text-dark">
|
||
<i class="bi bi-grid-3x3-gap-fill me-2"></i>客户端管理
|
||
</h2>
|
||
<button type="button" class="btn btn-primary px-4 py-2 d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#newClientModal">
|
||
<i class="bi bi-plus-lg me-2"></i>新建客户端
|
||
</button>
|
||
</div>
|
||
<div class="card shadow-sm">
|
||
<div class="card-body p-0">
|
||
<table class="table table-hover mb-0">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="px-4" style="width: 20%">客户端ID</th>
|
||
<th class="px-4" style="width: 20%">客户端密钥</th>
|
||
<th class="px-4" style="width: 10%">名称</th>
|
||
<th class="px-4" style="width: 30%">重定向URI</th>
|
||
<th class="px-4" style="width: 12%">创建时间</th>
|
||
<th class="px-4 text-end" style="width: 8%">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range .clients}}
|
||
<tr>
|
||
<td class="px-4 align-middle text-truncate" title="{{.ClientID}}">{{.ClientID}}</td>
|
||
<td class="px-4 align-middle text-truncate" title="{{.ClientSecret}}">{{.ClientSecret}}</td>
|
||
<td class="px-4 align-middle text-truncate" title="{{.ClientName}}">{{.ClientName}}</td>
|
||
<td class="px-4 align-middle">
|
||
<div class="text-truncate" title="{{range $i, $uri := .RedirectURIs}}{{if $i}}, {{end}}{{$uri}}{{end}}">
|
||
{{range $i, $uri := .RedirectURIs}}{{if $i}}, {{end}}{{$uri}}{{end}}
|
||
</div>
|
||
</td>
|
||
<td class="px-4 align-middle">{{.ClientIDIssuedAt.Format "2006-01-02 15:04:05"}}</td>
|
||
<td class="px-4 align-middle text-end">
|
||
{{$redirectURIsStr := ""}}
|
||
{{range $i, $uri := .RedirectURIs}}
|
||
{{if $i}}
|
||
{{$redirectURIsStr = printf "%s,%s" $redirectURIsStr $uri}}
|
||
{{else}}
|
||
{{$redirectURIsStr = $uri}}
|
||
{{end}}
|
||
{{end}}
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editClientModal"
|
||
data-client-id="{{.ClientID}}"
|
||
data-client-name="{{.ClientName}}"
|
||
data-redirect-uris="{{$redirectURIsStr}}">
|
||
<i class="bi bi-pencil-square"></i>
|
||
</button>
|
||
<button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteClient('{{.ClientID}}')">
|
||
<i class="bi bi-trash"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="mt-4">
|
||
<ul class="pagination justify-content-center">
|
||
{{if gt .page 1}}
|
||
<li class="page-item">
|
||
<a class="page-link" href="?page={{subtract .page 1}}&page_size={{.pageSize}}">
|
||
<i class="bi bi-chevron-left"></i>
|
||
</a>
|
||
</li>
|
||
{{end}}
|
||
<li class="page-item">
|
||
<a class="page-link" href="?page={{add .page 1}}&page_size={{.pageSize}}">
|
||
<i class="bi bi-chevron-right"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- 新建客户端模态框 -->
|
||
<div class="modal fade" id="newClientModal" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header border-bottom-0">
|
||
<h5 class="modal-title">
|
||
<i class="bi bi-plus-circle me-2"></i>新建客户端
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body px-4">
|
||
<form id="newClientForm">
|
||
<div class="mb-4">
|
||
<label for="newClientName" class="form-label">名称</label>
|
||
<input type="text" class="form-control" id="newClientName" required>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label for="newRedirectURIs" class="form-label">重定向URI</label>
|
||
<textarea class="form-control" id="newRedirectURIs" rows="3" required></textarea>
|
||
<div class="form-text text-muted">每行一个URI，或用逗号分隔多个URI</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer border-top-0">
|
||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-primary px-4" onclick="createClient()">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑客户端模态框 -->
|
||
<div class="modal fade" id="editClientModal" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header border-bottom-0">
|
||
<h5 class="modal-title">
|
||
<i class="bi bi-pencil-square me-2"></i>编辑客户端
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body px-4">
|
||
<form id="editClientForm">
|
||
<input type="hidden" id="editClientID">
|
||
<div class="mb-4">
|
||
<label for="editClientName" class="form-label">名称</label>
|
||
<input type="text" class="form-control" id="editClientName" required>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label for="editRedirectURIs" class="form-label">重定向URI</label>
|
||
<textarea class="form-control" id="editRedirectURIs" rows="3" required></textarea>
|
||
<div class="form-text text-muted">每行一个URI，或用逗号分隔多个URI</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer border-top-0">
|
||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-primary px-4" onclick="updateClient()">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.table th {
|
||
font-weight: 600;
|
||
border-bottom-width: 1px;
|
||
}
|
||
.table td {
|
||
vertical-align: middle;
|
||
white-space: nowrap;
|
||
max-width: 0;
|
||
}
|
||
.text-truncate {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 100%;
|
||
}
|
||
.btn-group .btn {
|
||
padding: 0.375rem 0.75rem;
|
||
}
|
||
.modal-dialog {
|
||
max-width: 500px;
|
||
}
|
||
.form-control:focus {
|
||
border-color: #80bdff;
|
||
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||
}
|
||
.card {
|
||
border-radius: 0.5rem;
|
||
border: none;
|
||
}
|
||
.page-link {
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: 0.25rem;
|
||
margin: 0 0.25rem;
|
||
}
|
||
.page-link:hover {
|
||
background-color: #e9ecef;
|
||
}
|
||
.btn-group .btn i {
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 创建新客户端
|
||
function createClient() {
|
||
const clientName = document.getElementById('newClientName').value;
|
||
const redirectURIs = document.getElementById('newRedirectURIs').value
|
||
.split(/[\n,]/)
|
||
.map(uri => uri.trim())
|
||
.filter(uri => uri.length > 0);
|
||
|
||
fetch('/api/clients', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
client_name: clientName,
|
||
redirect_uris: redirectURIs,
|
||
token_endpoint_auth_method: 'client_secret_basic',
|
||
grant_types: ['authorization_code'],
|
||
response_types: ['code']
|
||
})
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
location.reload();
|
||
} else {
|
||
alert('创建失败，请重试');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 编辑客户端模态框数据填充
|
||
document.getElementById('editClientModal').addEventListener('show.bs.modal', function (event) {
|
||
const button = event.relatedTarget;
|
||
const clientId = button.getAttribute('data-client-id');
|
||
const clientName = button.getAttribute('data-client-name');
|
||
const redirectURIs = button.getAttribute('data-redirect-uris');
|
||
|
||
document.getElementById('editClientID').value = clientId;
|
||
document.getElementById('editClientName').value = clientName;
|
||
document.getElementById('editRedirectURIs').value = redirectURIs.split(',').join('\n');
|
||
});
|
||
|
||
// 更新客户端
|
||
function updateClient() {
|
||
const clientID = document.getElementById('editClientID').value;
|
||
const clientName = document.getElementById('editClientName').value;
|
||
const redirectURIs = document.getElementById('editRedirectURIs').value
|
||
.split(/[\n,]/)
|
||
.map(uri => uri.trim())
|
||
.filter(uri => uri.length > 0);
|
||
|
||
fetch(`/api/clients/${clientID}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
client_name: clientName,
|
||
redirect_uris: redirectURIs,
|
||
token_endpoint_auth_method: 'client_secret_basic',
|
||
grant_types: ['authorization_code'],
|
||
response_types: ['code']
|
||
})
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
location.reload();
|
||
} else {
|
||
alert('更新失败，请重试');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 删除客户端
|
||
function deleteClient(clientID) {
|
||
if (!confirm('确定要删除这个客户端吗？')) {
|
||
return;
|
||
}
|
||
|
||
fetch(`/api/clients/${clientID}`, {
|
||
method: 'DELETE'
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
location.reload();
|
||
} else {
|
||
alert('删除失败，请重试');
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
{{template "footer" .}} |