From 1d83a1ecb47ca3ab6ff60b7aa9e034f6c27af75c Mon Sep 17 00:00:00 2001 From: stone-24tch3r <100294019+stone-w4tch3r@users.noreply.github.com> Date: Mon, 23 Sep 2024 01:15:54 +0500 Subject: [PATCH] started front --- front/header.html | 18 +++++ front/logs.html | 94 ++++++++++++++++++++++++++ front/main.html | 89 +++++++++++++++++++++++++ front/script.js | 48 ++++++++++++++ front/styles.css | 165 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 414 insertions(+) create mode 100644 front/header.html create mode 100644 front/logs.html create mode 100644 front/main.html create mode 100644 front/script.js create mode 100644 front/styles.css diff --git a/front/header.html b/front/header.html new file mode 100644 index 0000000..8ca7e0b --- /dev/null +++ b/front/header.html @@ -0,0 +1,18 @@ + + + + + + + SSH Certificate Management + + + +
+ +
+ + + +
+
\ No newline at end of file diff --git a/front/logs.html b/front/logs.html new file mode 100644 index 0000000..3525f21 --- /dev/null +++ b/front/logs.html @@ -0,0 +1,94 @@ + + + + + + + SSH Certificate Management - Logs + + + +
+ +
+ + + +
+
+
+

Logs and Command History

+
+ + + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EntryIDTimestampSeverityTraceIDMessage
000022023-08-17 10:15INFOabc123 + Generating new cert
+ $ step ca certificate ...
+ Click to see command output... +
000032023-08-17 10:14WARNdef456Cert not exists
000042023-08-17 10:13DEBUGdef456Request revoke
000052023-08-17 10:12ERRORghi789Permission denied
+ +
+ + \ No newline at end of file diff --git a/front/main.html b/front/main.html new file mode 100644 index 0000000..23ef110 --- /dev/null +++ b/front/main.html @@ -0,0 +1,89 @@ + + + + + + + SSH Certificate Management - Dashboard + + + +
+ +
+ + + +
+
+
+

Certificate Management

+ + + + + + + + + + + + + + + + + + + + +
Cert NameStatusActions
Cert 1Active + + +
Cert 2Expired + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/front/script.js b/front/script.js new file mode 100644 index 0000000..b2f3a33 --- /dev/null +++ b/front/script.js @@ -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 += "
Certificate generated successfully!"; + }, 2000); + } +}); \ No newline at end of file diff --git a/front/styles.css b/front/styles.css new file mode 100644 index 0000000..363175f --- /dev/null +++ b/front/styles.css @@ -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; +} \ No newline at end of file