307 lines
14 KiB
HTML
307 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PKI Manager</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1><i class="fas fa-shield-alt"></i> PKI Manager</h1>
|
|
<p>Manage your Certificate Authority infrastructure</p>
|
|
<div style="margin-bottom: 10px;">
|
|
<button class="btn" onclick="pki.debugData()" style="background: #38a169;">
|
|
<i class="fas fa-bug"></i> Debug Data
|
|
</button>
|
|
<button onclick="testDropdown()" style="padding: 8px 12px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
|
Test Dropdown
|
|
</button>
|
|
<script>
|
|
function testDropdown() {
|
|
console.log('=== TEST DROPDOWN ===');
|
|
const dropdown = document.getElementById('issuerCA');
|
|
console.log('Dropdown:', dropdown);
|
|
console.log('Parent:', dropdown?.parentElement);
|
|
console.log('All selects:', document.querySelectorAll('select'));
|
|
|
|
// Simuler le remplissage
|
|
if (dropdown) {
|
|
dropdown.innerHTML = '';
|
|
const option = document.createElement('option');
|
|
option.value = 'test';
|
|
option.textContent = 'Test Option';
|
|
dropdown.appendChild(option);
|
|
console.log('Test option added');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</div>
|
|
<nav>
|
|
<button class="nav-btn" data-tab="dashboard">
|
|
<i class="fas fa-home"></i> Dashboard
|
|
</button>
|
|
<button class="nav-btn" data-tab="cas">
|
|
<i class="fas fa-certificate"></i> CAs
|
|
</button>
|
|
<button class="nav-btn" data-tab="subcas">
|
|
<i class="fas fa-sitemap"></i> Sub CAs
|
|
</button>
|
|
<button class="nav-btn" data-tab="certificates">
|
|
<i class="fas fa-key"></i> Certificates
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Dashboard Tab -->
|
|
<div id="dashboardTab" class="tab-content">
|
|
<div id="dashboardContent">
|
|
<!-- Dashboard content will be loaded here -->
|
|
<div style="text-align: center; padding: 50px;">
|
|
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
|
<p>Loading dashboard...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CAs Tab -->
|
|
<div id="casTab" class="tab-content hidden">
|
|
<div id="casContent">
|
|
<div style="text-align: center; padding: 50px;">
|
|
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
|
<p>Loading CAs...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub CAs Tab -->
|
|
<div id="subcasTab" class="tab-content hidden">
|
|
<div id="subcasContent">
|
|
<div style="text-align: center; padding: 50px;">
|
|
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
|
<p>Loading Sub CAs...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Certificates Tab -->
|
|
<div id="certificatesTab" class="tab-content hidden">
|
|
<div id="certsContent">
|
|
<div style="text-align: center; padding: 50px;">
|
|
<i class="fas fa-spinner fa-spin fa-2x"></i>
|
|
<p>Loading Certificates...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Create CA Modal -->
|
|
<div id="createCAModal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<button class="close-btn" onclick="pki.hideModal()" style="background: none; border: none; float: right; font-size: 24px; cursor: pointer;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<h2>Create Root CA</h2>
|
|
<form id="createCAForm">
|
|
<div class="form-group">
|
|
<label for="caName">Name</label>
|
|
<input type="text" id="caName" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caCommonName">Common Name</label>
|
|
<input type="text" id="caCommonName" name="common_name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caOrganization">Organization</label>
|
|
<input type="text" id="caOrganization" name="organization" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caCountry">Country (2 letters)</label>
|
|
<input type="text" id="caCountry" name="country" maxlength="2" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caProvince">Province/State</label>
|
|
<input type="text" id="caProvince" name="province">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caLocality">Locality/City</label>
|
|
<input type="text" id="caLocality" name="locality">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caEmail">Email</label>
|
|
<input type="email" id="caEmail" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caKeySize">Key Size</label>
|
|
<select id="caKeySize" name="key_size" required>
|
|
<option value="2048">2048 bits</option>
|
|
<option value="4096" selected>4096 bits</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="caValidYears">Validity (Years)</label>
|
|
<input type="number" id="caValidYears" name="valid_years" value="10" min="1" max="20" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="caIsRoot" name="is_root" value="true" checked>
|
|
Is Root CA
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn">Create CA</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Sub CA Modal -->
|
|
<div id="createSubCAModal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<button class="close-btn" onclick="pki.hideModal()" style="background: none; border: none; float: right; font-size: 24px; cursor: pointer;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<h2>Create Sub CA</h2>
|
|
<form id="createSubCAForm">
|
|
<div class="form-group">
|
|
<label for="subcaName">Name</label>
|
|
<input type="text" id="subcaName" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaCommonName">Common Name</label>
|
|
<input type="text" id="subcaCommonName" name="common_name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaOrganization">Organization</label>
|
|
<input type="text" id="subcaOrganization" name="organization" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaEmail">Email (optional)</label>
|
|
<input type="email" id="subcaEmail" name="email" placeholder="Optional email address">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaCountry">Country (2 letters)</label>
|
|
<input type="text" id="subcaCountry" name="country" maxlength="2" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaProvince">Province/State</label>
|
|
<input type="text" id="subcaProvince" name="province">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaLocality">Locality/City</label>
|
|
<input type="text" id="subcaLocality" name="locality">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaParentCA">Parent CA</label>
|
|
<select id="parentCA" name="parent_ca_id" required></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaKeySize">Key Size</label>
|
|
<select id="subcaKeySize" name="key_size" required>
|
|
<option value="2048">2048 bits</option>
|
|
<option value="4096" selected>4096 bits</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="subcaValidYears">Validity (Years)</label>
|
|
<input type="number" id="subcaValidYears" name="valid_years" value="5" min="1" max="10" required>
|
|
</div>
|
|
<button type="submit" class="btn">Create Sub CA</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Create Certificate Modal -->
|
|
|
|
<div id="createCertModal" class="modal hidden">
|
|
<div class="modal-content" style="max-width: 600px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h2 style="margin: 0;">Create Certificate</h2>
|
|
<button class="close-btn" onclick="pki.hideModal()"
|
|
style="background: none; border: none; font-size: 24px; cursor: pointer; color: #666;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="createCertForm">
|
|
<div class="form-group">
|
|
<label for="certCommonName">Common Name *</label>
|
|
<input type="text" id="certCommonName" name="common_name" required
|
|
placeholder="e.g., server.example.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="certType">Certificate Type *</label>
|
|
<select id="certType" name="type" required>
|
|
<option value="">-- Select Type --</option>
|
|
<option value="server">Server Certificate</option>
|
|
<option value="client">Client Certificate</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- IMPORTANT: Ce dropdown doit avoir l'ID "issuerCA" -->
|
|
<div class="form-group">
|
|
<label for="issuerCA">Issuer (CA or Sub CA) *</label>
|
|
<select id="issuerCA" name="issuer_ca_id" required
|
|
style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
|
|
<option value="">-- Loading issuers... --</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="certDNSNames">DNS Names (optional, comma-separated)</label>
|
|
<input type="text" id="certDNSNames" name="dns_names"
|
|
placeholder="e.g., example.com, www.example.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="certIPs">IP Addresses (optional, comma-separated)</label>
|
|
<input type="text" id="certIPs" name="ip_addresses"
|
|
placeholder="e.g., 192.168.1.1, 10.0.0.1">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="certKeySize">Key Size *</label>
|
|
<select id="certKeySize" name="key_size" required>
|
|
<option value="2048">2048 bits (Recommended)</option>
|
|
<option value="4096">4096 bits (High Security)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="certValidDays">Validity Period (Days) *</label>
|
|
<input type="number" id="certValidDays" name="valid_days"
|
|
value="365" min="1" max="3650" required>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 10px; margin-top: 30px;">
|
|
<button type="submit" class="btn"
|
|
style="flex: 1; padding: 12px; background: #667eea; color: white;">
|
|
<i class="fas fa-plus"></i> Create Certificate
|
|
</button>
|
|
<button type="button" class="btn" onclick="pki.hideModal()"
|
|
style="padding: 12px; background: #ccc; color: #333;">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- View Details Modal -->
|
|
<div id="viewModal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<button class="close-btn" onclick="pki.hideModal()" style="background: none; border: none; float: right; font-size: 24px; cursor: pointer;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<h2>View Details</h2>
|
|
<div class="modal-body">
|
|
<!-- Content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html> |