Initial commit of AthonetTools

templates/pages/hnk.html

@@ -0,0 +1,45 @@
+{% extends "layout.html" %}
+{% set active_page = 'hnk' %}
+{% block title %}HNK Management - {{ super() }}{% endblock %}
+
+{% block content %}
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 id="page-title" class="mb-0">Home Network Key (HNK) Management</h2>
+    </div>
+    <div class="row align-items-end">
+        <div class="col-md-5" id="host-ip-wrapper">
+            <label for="host" class="form-label">5GC Host IP</label>
+            <input type="text" class="form-control" id="host" placeholder="IPv4 or IPv6 Address">
+        </div>
+        <div class="col-auto">
+             <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-placement="right" title="Enter the IPv4 or IPv6 address. IPv6 addresses are automatically enclosed in [ ] if needed."></i>
+        </div>
+    </div>
+    <hr>
+    <div id="hnk-view">
+        <p>Retrieve a list of all Home Network Keys from the specified 5GC Host.</p>
+        <button class="btn btn-primary" id="listHnkBtn">List HNKs</button>
+    </div>
+    <div class="mt-4">
+        <h4>Results</h4>
+        <div id="spinner" class="d-none spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
+        <div id="results-output" class="p-3"></div>
+    </div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script defer>
+    document.getElementById('listHnkBtn').addEventListener('click', async () => {
+        const rawHost = document.getElementById('host').value;
+        if (!rawHost) {
+            alert('Please enter a 5GC Host IP address.');
+            return;
+        }
+        const host = formatHostIp(rawHost);
+        const hnkData = await apiCall('/api/hnk/list', { host });
+        if (hnkData) {
+            resultsOutput.textContent = JSON.stringify(hnkData, null, 2);
+        }
+    });
+</script>
+{% endblock %}