From c5e8c48295209012beea627916cec875aebc659c Mon Sep 17 00:00:00 2001
From: "stone-24tch3r (aider)"
 <100294019+stone-w4tch3r@users.noreply.github.com>
Date: Fri, 27 Sep 2024 00:21:29 +0500
Subject: [PATCH] refactor: extract common/base parts to base.html and rewrite
 topbar to use html nav

---
 front/html/base.html      | 28 +++++++++++++++++++++++++
 front/html/dashboard.html | 43 +++++++++++++++------------------------
 front/html/logs.html      | 34 ++++++++++---------------------
 3 files changed, 55 insertions(+), 50 deletions(-)
 create mode 100644 front/html/base.html
diff --git a/front/html/base.html b/front/html/base.html
new file mode 100644
index 0000000..b588f05
--- /dev/null
+++ b/front/html/base.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}SSH Certificate Management{% endblock %}</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<nav class="topbar">
+    <div class="topbar-logo">SSH Cert Manager</div>
+    <ul class="topbar-nav-container">
+        <li><a href="dashboard.html" class="topbar-nav-button">Dashboard</a></li>
+        <li><a href="logs.html" class="topbar-nav-button">Logs</a></li>
+        <li><a href="#" class="topbar-nav-button">Menu</a></li>
+    </ul>
+</nav>
+<div class="main-container">
+    <h1 class="main-header">{% block header %}{% endblock %}</h1>
+    <div class="main-container-content">
+        {% block content %}{% endblock %}
+    </div>
+    {% block bottom_button %}{% endblock %}
+</div>
+{% block extra_content %}{% endblock %}
+{% block scripts %}{% endblock %}
+</body>
+</html>
diff --git a/front/html/dashboard.html b/front/html/dashboard.html
index 6a97b1c..8ddc037 100644
--- a/front/html/dashboard.html
+++ b/front/html/dashboard.html
@@ -1,24 +1,10 @@
-<!-- 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">
+{% extends "base.html" %}
+
+{% block title %}SSH Certificate Management - Dashboard{% endblock %}
+
+{% block header %}Certificate Management{% endblock %}
+
+{% block content %}
         <table class="certs-table">
             <thead class="certs-table-header">
             <tr>
@@ -88,10 +74,13 @@
             </tr>
             </tbody>
         </table>
-    </div>
-    <button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
-</div>
+{% endblock %}
 
+{% block bottom_button %}
+<button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
+{% endblock %}
+
+{% block extra_content %}
 <!-- Modal -->
 <div id="generateCertModal" class="modal">
     <div class="modal-content">
@@ -128,8 +117,8 @@
             <div id="logContent"></div>
         </div>
     </div>
-</div>
+{% endblock %}
 
+{% block scripts %}
 <script src="script.js"></script>
-</body>
-</html>
\ No newline at end of file
+{% endblock %}
diff --git a/front/html/logs.html b/front/html/logs.html
index 402c2a8..0f6306d 100644
--- a/front/html/logs.html
+++ b/front/html/logs.html
@@ -1,23 +1,10 @@
-<!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="topbar-logo">SSH Cert Manager</div>
-    <div>
-        <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">Logs and Command History</h1>
-    <div class="main-container-content">
+{% extends "base.html" %}
+
+{% block title %}SSH Certificate Management - Logs{% endblock %}
+
+{% block header %}Logs and Command History{% endblock %}
+
+{% block content %}
         <div class="logs-filters-container">
             <label class="logs-filters-item">Commands only:
                 <select>
@@ -99,7 +86,8 @@
             </tbody>
         </table>
     </div>
+{% endblock %}
+
+{% block bottom_button %}
     <button class="main-bottom-button">Load More</button>
-</div>
-</body>
-</html>
\ No newline at end of file
+{% endblock %}
