mirror of
https://github.com/outbackdingo/step-ca-webui.git
synced 2026-01-27 18:20:22 +00:00
135 lines
4.8 KiB
HTML
135 lines
4.8 KiB
HTML
<!-- 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="topbar-logo">SSH Cert Manager</div>
|
|
<div class="topbar-nav-container">
|
|
<button class="topbar-nav-button">Dashboard</button>
|
|
<button class="topbar-nav-button">Logs</button>
|
|
<button class="topbar-nav-button">Menu</button>
|
|
</div>
|
|
</div>
|
|
<div class="main-container">
|
|
<h1 class="main-header">Certificate Management</h1>
|
|
<div class="main-container-content">
|
|
<table class="certs-table">
|
|
<thead class="certs-table-header">
|
|
<tr>
|
|
<th>Cert Name</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Cert 1</td>
|
|
<td>Active</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Renew</button>
|
|
<button class="small-button">Revoke</button>
|
|
<button class="small-button">View</button>
|
|
<button class="small-button">Do smth else</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cert 2</td>
|
|
<td>Expired</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Delete</button>
|
|
<button class="small-button">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cert 3</td>
|
|
<td>Test</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Delete</button>
|
|
<button class="small-button">Yes</button>
|
|
<button class="small-button">No no no</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cert 5</td>
|
|
<td>Test</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cert 4</td>
|
|
<td>Test</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Delete</button>
|
|
<button class="small-button">I</button>
|
|
<button class="small-button">Love</button>
|
|
<button class="small-button">You</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cert 6</td>
|
|
<td>Test</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cert 7</td>
|
|
<td>Test</td>
|
|
<td class="certs-actions-td">
|
|
<button class="small-button">Delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div id="generateCertModal" class="modal-layer-container">
|
|
<div class="modal-content">
|
|
<span class="modal-close">×</span> <!-- ྾ -->
|
|
<h2>Generate New Certificate</h2>
|
|
<form id="generateCertForm" class="modal-cert-form">
|
|
<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>
|
|
<!--suppress HtmlFormInputWithoutLabel -->
|
|
<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"> <!-- TODO: use full log component-->
|
|
<h3>Logs:</h3>
|
|
<div id="logContent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |