A Kubernetes operator that bridges Hardware Security Module (HSM) data storage with Kubernetes Secrets, providing true secret portability th
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HSM Secrets Manager</title>
7 <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10 <div class="container">
11 <div class="header">
12 <div class="header-content">
13 <div class="header-text">
14 <h1>🔐 HSM Secrets Manager</h1>
15 <p>Manage your Hardware Security Module secrets through a simple web interface</p>
16 </div>
17 <div class="header-auth">
18 <div id="authStatus" class="auth-status not-authenticated">❌ Not Authenticated</div>
19 <button class="btn btn-secondary btn-small" onclick="logout()" title="Clear authentication token">🚪 Logout</button>
20 </div>
21 </div>
22 </div>
23
24 <div class="stats" id="stats">
25 <div class="stat-card">
26 <div class="stat-number" id="totalSecrets">-</div>
27 <div class="stat-label">Total Secrets</div>
28 </div>
29 <div class="stat-card">
30 <div class="stat-number" id="apiStatus">-</div>
31 <div class="stat-label">API Status</div>
32 </div>
33 <div class="stat-card">
34 <div class="stat-number" id="deviceCount">-</div>
35 <div class="stat-label">HSM Devices</div>
36 </div>
37 </div>
38
39 <div class="section" id="deviceSection">
40 <h2>🔌 HSM Device Status</h2>
41 <div class="toolbar">
42 <button class="btn btn-secondary" onclick="refreshDeviceStatus()">🔄 Refresh Devices</button>
43 <button class="btn btn-secondary" onclick="refreshAll()">🔄 Refresh All</button>
44 </div>
45 <div id="deviceStatus" class="device-status">
46 <div class="loading">Loading device status...</div>
47 </div>
48 </div>
49
50 <div class="section">
51 <h2>📋 Secrets List</h2>
52 <div class="toolbar">
53 <button class="btn btn-secondary" onclick="refreshSecrets()">🔄 Refresh</button>
54 <button class="btn" onclick="showCreateForm()">➕ Create New Secret</button>
55 </div>
56 <div id="secretsList" class="secrets-list">
57 <div class="loading">Loading secrets...</div>
58 </div>
59 </div>
60
61 <div class="section" id="createSection" style="display: none;">
62 <h2>➕ Create New Secret</h2>
63 <div id="createMessage"></div>
64 <form id="createForm">
65 <div class="form-group">
66 <label for="secretName">Secret Name</label>
67 <input type="text" id="secretName" name="secretName" placeholder="e.g., my-app-secrets" required>
68 </div>
69
70 <div class="form-group">
71 <label>Secret Data</label>
72 <div class="kv-container">
73 <div class="kv-header">
74 <span>Key-Value Pairs</span>
75 <button type="button" class="btn btn-add btn-small" onclick="ui.addKeyValuePair()" title="Add new key-value pair">
76 ➕
77 </button>
78 </div>
79 <div id="kvPairs">
80 <!-- Initial key-value pair will be added by JavaScript -->
81 </div>
82 </div>
83 </div>
84
85 <div class="advanced-section">
86 <button type="button" class="advanced-toggle" onclick="ui.toggleAdvanced()">
87 <span>🔧 Advanced Metadata (Optional)</span>
88 <span class="arrow">▼</span>
89 </button>
90 <div id="advancedContent" class="advanced-content">
91
92 <div class="metadata-field">
93 <label for="metadataDescription">Description</label>
94 <textarea id="metadataDescription" name="metadataDescription" placeholder="Description of this secret's purpose"></textarea>
95 </div>
96
97 <div class="metadata-field">
98 <label for="metadataFormat">Format</label>
99 <input type="text" id="metadataFormat" name="metadataFormat" placeholder="e.g., json, yaml, text">
100 </div>
101
102 <div class="metadata-field">
103 <label for="metadataDataType">Data Type</label>
104 <input type="text" id="metadataDataType" name="metadataDataType" placeholder="e.g., credentials, config, certificate">
105 </div>
106
107 <div class="metadata-field">
108 <label for="metadataSource">Source</label>
109 <input type="text" id="metadataSource" name="metadataSource" placeholder="Source system or application">
110 </div>
111
112 <div class="metadata-field">
113 <label>Labels</label>
114 <div class="tags-container">
115 <div class="tags-header">
116 <span>Kubernetes Labels (will be applied to Secret)</span>
117 <button type="button" class="btn btn-add btn-small" onclick="ui.addLabelPair()" title="Add new label">
118 ➕
119 </button>
120 </div>
121 <div id="labelPairs">
122 <!-- Label pairs will be added by JavaScript -->
123 </div>
124 </div>
125 </div>
126 </div>
127 </div>
128
129 <div style="display: flex; gap: 10px;">
130 <button type="submit" class="btn">Create Secret</button>
131 <button type="button" class="btn btn-secondary" onclick="hideCreateForm()">Cancel</button>
132 </div>
133 </form>
134 </div>
135
136 <div class="section" id="viewSection" style="display: none;">
137 <h2>🔍 Secret Details</h2>
138 <div id="viewMessage"></div>
139 <div id="secretDetails"></div>
140 <div style="margin-top: 20px;">
141 <button class="btn btn-secondary" onclick="hideViewSection()">Close</button>
142 </div>
143 </div>
144 </div>
145
146 <script src="app.js"></script>
147</body>
148</html>