mirror of
https://github.com/ferdzo/iotDashboard.git
synced 2026-04-05 01:06:24 +00:00
173 lines
6.6 KiB
HTML
173 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Device Credentials - {{ device_name }}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.credential-box {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.copy-btn {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">IoT Dashboard</a>
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item"><a class="nav-link" href="{% url 'index' %}">Chart</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="{% url 'device_list' %}">Devices</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-5">
|
|
<div class="alert alert-success" role="alert">
|
|
<h4 class="alert-heading">✅ Device Registered Successfully!</h4>
|
|
<p>Device <strong>{{ device_name }}</strong> has been registered.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-warning" role="alert">
|
|
<strong>⚠️ Important:</strong> Save these credentials now! They will not be shown again.
|
|
You'll need them to configure your device.
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Device Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table">
|
|
<tr>
|
|
<th>Device ID:</th>
|
|
<td><code>{{ response.device_id }}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Protocol:</th>
|
|
<td><span class="badge bg-info">{{ response.protocol|upper }}</span></td>
|
|
</tr>
|
|
{% if response.certificate_id %}
|
|
<tr>
|
|
<th>Certificate ID:</th>
|
|
<td><code>{{ response.certificate_id }}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Expires At:</th>
|
|
<td>{{ response.expires_at|date:"Y-m-d H:i:s" }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% if response.protocol == 'mqtt' and response.certificate_pem %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>CA Certificate</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="credential-box" id="ca-cert">{{ response.ca_certificate_pem }}</div>
|
|
<button class="btn btn-sm btn-secondary copy-btn" onclick="copyToClipboard('ca-cert')">Copy CA Certificate</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Device Certificate</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="credential-box" id="device-cert">{{ response.certificate_pem }}</div>
|
|
<button class="btn btn-sm btn-secondary copy-btn" onclick="copyToClipboard('device-cert')">Copy Device Certificate</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Private Key</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="credential-box" id="private-key">{{ response.private_key_pem }}</div>
|
|
<button class="btn btn-sm btn-secondary copy-btn" onclick="copyToClipboard('private-key')">Copy Private Key</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<h6>MQTT Configuration:</h6>
|
|
<ul>
|
|
<li>Broker: <code>localhost:8883</code></li>
|
|
<li>Topic: <code>devices/{{ response.device_id }}/<metric></code></li>
|
|
<li>Example: <code>devices/{{ response.device_id }}/temperature</code></li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if response.protocol == 'http' and response.api_key %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>API Key</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="credential-box" id="api-key">{{ response.api_key }}</div>
|
|
<button class="btn btn-sm btn-secondary copy-btn" onclick="copyToClipboard('api-key')">Copy API Key</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if response.protocol == 'webhook' and response.webhook_secret %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Webhook Secret</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="credential-box" id="webhook-secret">{{ response.webhook_secret }}</div>
|
|
<button class="btn btn-sm btn-secondary copy-btn" onclick="copyToClipboard('webhook-secret')">Copy Webhook Secret</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="text-center mt-4">
|
|
<a href="{% url 'device_list' %}" class="btn btn-primary">Go to Device List</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(elementId) {
|
|
const element = document.getElementById(elementId);
|
|
const text = element.textContent;
|
|
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
// Change button text temporarily
|
|
const btn = event.target;
|
|
const originalText = btn.textContent;
|
|
btn.textContent = '✓ Copied!';
|
|
btn.classList.remove('btn-secondary');
|
|
btn.classList.add('btn-success');
|
|
|
|
setTimeout(() => {
|
|
btn.textContent = originalText;
|
|
btn.classList.remove('btn-success');
|
|
btn.classList.add('btn-secondary');
|
|
}, 2000);
|
|
}).catch(err => {
|
|
alert('Failed to copy: ' + err);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|