mirror of
https://github.com/outbackdingo/step-ca-webui.git
synced 2026-01-27 10:20:25 +00:00
started front
This commit is contained in:
stone-24tch3r
18
front/header.html
Normal file
18
front/header.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!-- header.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SSH Certificate Management</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="logo">SSH Cert Manager</div>
|
||||
<div>
|
||||
<button class="nav-button">Dashboard</button>
|
||||
<button class="nav-button">Logs</button>
|
||||
<button class="nav-button">Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
94
front/logs.html
Normal file
94
front/logs.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!-- logs.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SSH Certificate Management - Logs</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="logo">SSH Cert Manager</div>
|
||||
<div>
|
||||
<button class="nav-button">Dashboard</button>
|
||||
<button class="nav-button">Logs</button>
|
||||
<button class="nav-button">Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1>Logs and Command History</h1>
|
||||
<div class="filters">
|
||||
<label>Severity:
|
||||
<select>
|
||||
<option>All</option>
|
||||
<option>INFO</option>
|
||||
<option>WARN</option>
|
||||
<option>DEBUG</option>
|
||||
<option>ERROR</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Type:
|
||||
<select>
|
||||
<option>All</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Date Range:
|
||||
<input type="date" placeholder="From">
|
||||
<input type="date" placeholder="To">
|
||||
</label>
|
||||
<button class="filter-button">Apply</button>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<input type="text" placeholder="Search...">
|
||||
<button class="filter-button">Search</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>EntryID</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Severity</th>
|
||||
<th>TraceID</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>00002</td>
|
||||
<td>2023-08-17 10:15</td>
|
||||
<td>INFO</td>
|
||||
<td>abc123</td>
|
||||
<td>
|
||||
Generating new cert<br>
|
||||
$ step ca certificate ...<br>
|
||||
<a href="#">Click to see command output...</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00003</td>
|
||||
<td>2023-08-17 10:14</td>
|
||||
<td>WARN</td>
|
||||
<td>def456</td>
|
||||
<td>Cert not exists</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00004</td>
|
||||
<td>2023-08-17 10:13</td>
|
||||
<td>DEBUG</td>
|
||||
<td>def456</td>
|
||||
<td>Request revoke</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00005</td>
|
||||
<td>2023-08-17 10:12</td>
|
||||
<td>ERROR</td>
|
||||
<td>ghi789</td>
|
||||
<td>Permission denied</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="load-more">Load More</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
89
front/main.html
Normal file
89
front/main.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!-- index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SSH Certificate Management - Dashboard</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="logo">SSH Cert Manager</div>
|
||||
<div>
|
||||
<button class="nav-button">Dashboard</button>
|
||||
<button class="nav-button">Logs</button>
|
||||
<button class="nav-button">Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1>Certificate Management</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Cert Name</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cert 1</td>
|
||||
<td>Active</td>
|
||||
<td>
|
||||
<button class="action-button">Renew</button>
|
||||
<button class="action-button">Revoke</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 2</td>
|
||||
<td>Expired</td>
|
||||
<td>
|
||||
<button class="action-button">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button id="generateCertBtn" class="generate-button">Generate New Certificate</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="generateCertModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Generate New Certificate</h2>
|
||||
<form id="generateCertForm">
|
||||
<label for="keyName">Key Name:</label>
|
||||
<input type="text" id="keyName" name="keyName" required>
|
||||
|
||||
<label for="keyType">Key Type:</label>
|
||||
<select id="keyType" name="keyType">
|
||||
<option value="RSA">RSA</option>
|
||||
<option value="ECDSA">ECDSA</option>
|
||||
<option value="Ed25519">Ed25519</option>
|
||||
</select>
|
||||
|
||||
<label for="duration">Duration:</label>
|
||||
<input type="number" id="duration" name="duration" required>
|
||||
<select id="durationUnit" name="durationUnit">
|
||||
<option value="minutes">minutes</option>
|
||||
<option value="hours">hours</option>
|
||||
<option value="days">days</option>
|
||||
</select>
|
||||
|
||||
<h3>Command that will be executed:</h3>
|
||||
<button type="button" id="reloadPreview">Click here to reload preview</button>
|
||||
<pre id="commandPreview"></pre>
|
||||
|
||||
<button type="submit" id="executeCommand">Execute!</button>
|
||||
</form>
|
||||
<div class="logs">
|
||||
<h3>Logs:</h3>
|
||||
<div id="logContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
48
front/script.js
Normal file
48
front/script.js
Normal file
@@ -0,0 +1,48 @@
|
||||
// script.js
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
const modal = document.getElementById("generateCertModal");
|
||||
const btn = document.getElementById("generateCertBtn");
|
||||
const span = document.getElementsByClassName("close")[0];
|
||||
const form = document.getElementById("generateCertForm");
|
||||
const reloadPreviewBtn = document.getElementById("reloadPreview");
|
||||
const commandPreview = document.getElementById("commandPreview");
|
||||
const logContent = document.getElementById("logContent");
|
||||
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function updateCommandPreview() {
|
||||
const keyName = document.getElementById("keyName").value;
|
||||
const keyType = document.getElementById("keyType").value;
|
||||
const duration = document.getElementById("duration").value;
|
||||
const durationUnit = document.getElementById("durationUnit").value;
|
||||
|
||||
const command = `step-ca command --key-name "${keyName}" --key-type ${keyType} --duration ${duration}${durationUnit}`;
|
||||
commandPreview.textContent = command;
|
||||
}
|
||||
|
||||
reloadPreviewBtn.onclick = updateCommandPreview;
|
||||
|
||||
form.onsubmit = function(e) {
|
||||
e.preventDefault();
|
||||
updateCommandPreview();
|
||||
|
||||
// Here you would typically send an AJAX request to your Flask backend
|
||||
// For now, we'll just simulate it with a timeout
|
||||
logContent.innerHTML = "Executing command...";
|
||||
setTimeout(() => {
|
||||
logContent.innerHTML += "<br>Certificate generated successfully!";
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
165
front/styles.css
Normal file
165
front/styles.css
Normal file
@@ -0,0 +1,165 @@
|
||||
/* styles.css */
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #aa0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 20px auto;
|
||||
background-color: white;
|
||||
border: 2px solid #cc0000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #cc0000;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.action-button, .filter-button {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.generate-button {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filters select, .filters input[type="date"], .filters input[type="text"] {
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal input, .modal select {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.modal button {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.modal pre {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.modal .logs {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user