887 lines
35 KiB
JavaScript
887 lines
35 KiB
JavaScript
class PKIManager {
|
|
constructor() {
|
|
this.apiBase = '/api/v1';
|
|
this.currentTab = 'dashboard';
|
|
this.cas = [];
|
|
this.subcas = [];
|
|
this.certificates = [];
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.bindEvents();
|
|
this.showTab('dashboard');
|
|
}
|
|
|
|
bindEvents() {
|
|
// Tab navigation
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const tab = e.target.dataset.tab || e.target.closest('.nav-btn').dataset.tab;
|
|
this.showTab(tab);
|
|
});
|
|
});
|
|
|
|
// Form submissions
|
|
const caForm = document.getElementById('createCAForm');
|
|
const subcaForm = document.getElementById('createSubCAForm');
|
|
const certForm = document.getElementById('createCertForm');
|
|
|
|
if (caForm) caForm.addEventListener('submit', (e) => this.handleCreateCA(e));
|
|
if (subcaForm) subcaForm.addEventListener('submit', (e) => this.handleCreateSubCA(e));
|
|
if (certForm) certForm.addEventListener('submit', (e) => this.handleCreateCertificate(e));
|
|
|
|
// Close modal buttons
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('close-btn') || e.target.closest('.close-btn')) {
|
|
this.hideModal();
|
|
}
|
|
});
|
|
|
|
// Click outside modal
|
|
window.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('modal')) {
|
|
this.hideModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
showTab(tabName) {
|
|
console.log(`Showing tab: ${tabName}`);
|
|
|
|
// Hide all tabs
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
tab.classList.add('hidden');
|
|
});
|
|
|
|
// Update active button
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
|
|
const activeBtn = document.querySelector(`[data-tab="${tabName}"]`);
|
|
if (activeBtn) activeBtn.classList.add('active');
|
|
|
|
// Show selected tab
|
|
const tabElement = document.getElementById(tabName + 'Tab');
|
|
if (tabElement) {
|
|
tabElement.classList.remove('hidden');
|
|
}
|
|
|
|
this.currentTab = tabName;
|
|
|
|
// Load data for tab
|
|
setTimeout(() => this.loadTabData(tabName), 50);
|
|
}
|
|
|
|
async loadTabData(tabName) {
|
|
switch(tabName) {
|
|
case 'dashboard':
|
|
await this.loadDashboard();
|
|
break;
|
|
case 'cas':
|
|
await this.loadCAs();
|
|
break;
|
|
case 'subcas':
|
|
await this.loadSubCAs();
|
|
break;
|
|
case 'certificates':
|
|
await this.loadCertificates();
|
|
break;
|
|
}
|
|
}
|
|
|
|
async loadDashboard() {
|
|
const content = document.getElementById('dashboardContent');
|
|
if (!content) return;
|
|
|
|
content.innerHTML = '<div class="loading">Loading dashboard...</div>';
|
|
|
|
try {
|
|
// Charger les données
|
|
await this.fetchAllData();
|
|
|
|
content.innerHTML = `
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Root CAs</h3>
|
|
<p class="stat-number">${this.cas.filter(c => c.is_root).length}</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Sub CAs</h3>
|
|
<p class="stat-number">${this.subcas.length}</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Certificates</h3>
|
|
<p class="stat-number">${this.certificates.length}</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Active</h3>
|
|
<p class="stat-number">${this.certificates.filter(c => !c.revoked && new Date(c.valid_to) > new Date()).length}</p>
|
|
</div>
|
|
</div>
|
|
<div class="recent-activity">
|
|
<h3>Recent Certificates</h3>
|
|
${this.certificates.length > 0 ? `
|
|
<table class="table">
|
|
<thead>
|
|
<tr><th>Name</th><th>Type</th><th>Issued</th><th>Expires</th><th>Status</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.certificates.slice(0, 5).map(cert => `
|
|
<tr>
|
|
<td>${cert.common_name}</td>
|
|
<td>${cert.type}</td>
|
|
<td>${new Date(cert.created_at).toLocaleDateString()}</td>
|
|
<td>${new Date(cert.valid_to).toLocaleDateString()}</td>
|
|
<td><span class="status ${cert.revoked ? 'revoked' : new Date(cert.valid_to) > new Date() ? 'valid' : 'expired'}">
|
|
${cert.revoked ? 'Revoked' : new Date(cert.valid_to) > new Date() ? 'Valid' : 'Expired'}
|
|
</span></td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
` : '<p>No certificates yet</p>'}
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
console.error('Dashboard error:', error);
|
|
content.innerHTML = '<div class="error">Failed to load dashboard</div>';
|
|
}
|
|
}
|
|
|
|
async loadCAs() {
|
|
const content = document.getElementById('casContent');
|
|
if (!content) return;
|
|
|
|
content.innerHTML = '<div class="loading">Loading CAs...</div>';
|
|
|
|
try {
|
|
await this.fetchCAs();
|
|
|
|
content.innerHTML = `
|
|
<div class="section-header">
|
|
<h3>Certificate Authorities</h3>
|
|
<button class="btn primary" onclick="pki.showCreateCAModal()">
|
|
<i class="fas fa-plus"></i> New CA
|
|
</button>
|
|
</div>
|
|
${this.cas.length > 0 ? `
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Common Name</th>
|
|
<th>Organization</th>
|
|
<th>Valid From</th>
|
|
<th>Valid To</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.cas.map(ca => `
|
|
<tr>
|
|
<td>${ca.name}</td>
|
|
<td>${ca.common_name}</td>
|
|
<td>${ca.organization}</td>
|
|
<td>${new Date(ca.valid_from).toLocaleDateString()}</td>
|
|
<td>${new Date(ca.valid_to).toLocaleDateString()}</td>
|
|
<td class="actions">
|
|
<button class="btn small" onclick="pki.viewCA('${ca.id}')">View</button>
|
|
<button class="btn small danger" onclick="pki.deleteCA('${ca.id}')">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
` : `
|
|
<div class="empty-state">
|
|
<p>No Certificate Authorities found</p>
|
|
<button class="btn primary" onclick="pki.showCreateCAModal()">
|
|
Create your first CA
|
|
</button>
|
|
</div>
|
|
`}
|
|
`;
|
|
} catch (error) {
|
|
console.error('CAs error:', error);
|
|
content.innerHTML = '<div class="error">Failed to load CAs</div>';
|
|
}
|
|
}
|
|
|
|
async loadSubCAs() {
|
|
const content = document.getElementById('subcasContent');
|
|
if (!content) return;
|
|
|
|
content.innerHTML = '<div class="loading">Loading Sub CAs...</div>';
|
|
|
|
try {
|
|
await this.fetchSubCAs();
|
|
await this.fetchCAs(); // Need CAs for parent info
|
|
|
|
content.innerHTML = `
|
|
<div class="section-header">
|
|
<h3>Sub Certificate Authorities</h3>
|
|
<button class="btn primary" onclick="pki.showCreateSubCAModal()">
|
|
<i class="fas fa-plus"></i> New Sub CA
|
|
</button>
|
|
</div>
|
|
${this.subcas.length > 0 ? `
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Common Name</th>
|
|
<th>Parent CA</th>
|
|
<th>Valid From</th>
|
|
<th>Valid To</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.subcas.map(subca => {
|
|
const parent = this.cas.find(ca => ca.id === subca.parent_ca_id);
|
|
return `
|
|
<tr>
|
|
<td>${subca.name}</td>
|
|
<td>${subca.common_name}</td>
|
|
<td>${parent ? parent.name : 'Unknown'}</td>
|
|
<td>${new Date(subca.valid_from).toLocaleDateString()}</td>
|
|
<td>${new Date(subca.valid_to).toLocaleDateString()}</td>
|
|
<td class="actions">
|
|
<button class="btn small" onclick="pki.viewSubCA('${subca.id}')">View</button>
|
|
<button class="btn small danger" onclick="pki.deleteSubCA('${subca.id}')">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('')}
|
|
</tbody>
|
|
</table>
|
|
` : `
|
|
<div class="empty-state">
|
|
<p>No Sub Certificate Authorities found</p>
|
|
${this.cas.length > 0 ? `
|
|
<button class="btn primary" onclick="pki.showCreateSubCAModal()">
|
|
Create your first Sub CA
|
|
</button>
|
|
` : '<p>Create a CA first to create Sub CAs</p>'}
|
|
</div>
|
|
`}
|
|
`;
|
|
} catch (error) {
|
|
console.error('SubCAs error:', error);
|
|
content.innerHTML = '<div class="error">Failed to load Sub CAs</div>';
|
|
}
|
|
}
|
|
|
|
async loadCertificates() {
|
|
const content = document.getElementById('certsContent');
|
|
if (!content) return;
|
|
|
|
content.innerHTML = '<div class="loading">Loading Certificates...</div>';
|
|
|
|
try {
|
|
await this.fetchCertificates();
|
|
await this.fetchCAs();
|
|
await this.fetchSubCAs();
|
|
|
|
content.innerHTML = `
|
|
<div class="section-header">
|
|
<h3>Certificates</h3>
|
|
<button class="btn primary" onclick="pki.showCreateCertModal()">
|
|
<i class="fas fa-plus"></i> New Certificate
|
|
</button>
|
|
</div>
|
|
${this.certificates.length > 0 ? `
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Common Name</th>
|
|
<th>Type</th>
|
|
<th>Issuer</th>
|
|
<th>Issued</th>
|
|
<th>Expires</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${this.certificates.map(cert => {
|
|
const issuer = [...this.cas, ...this.subcas].find(i => i.id === cert.issuer_ca_id);
|
|
const status = cert.revoked ? 'revoked' : new Date(cert.valid_to) > new Date() ? 'valid' : 'expired';
|
|
return `
|
|
<tr>
|
|
<td>${cert.common_name}</td>
|
|
<td>${cert.type}</td>
|
|
<td>${issuer ? issuer.name : 'Unknown'}</td>
|
|
<td>${new Date(cert.created_at).toLocaleDateString()}</td>
|
|
<td>${new Date(cert.valid_to).toLocaleDateString()}</td>
|
|
<td><span class="status ${status}">${status.charAt(0).toUpperCase() + status.slice(1)}</span></td>
|
|
<td class="actions">
|
|
<button class="btn small" onclick="pki.viewCertificate('${cert.id}')">View</button>
|
|
<button class="btn small" onclick="pki.downloadCertificate('${cert.id}')">Download</button>
|
|
${!cert.revoked ? `<button class="btn small warning" onclick="pki.revokeCertificate('${cert.id}')">Revoke</button>` : ''}
|
|
<button class="btn small danger" onclick="pki.deleteCertificate('${cert.id}')">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('')}
|
|
</tbody>
|
|
</table>
|
|
` : `
|
|
<div class="empty-state">
|
|
<p>No certificates found</p>
|
|
${this.cas.length > 0 || this.subcas.length > 0 ? `
|
|
<button class="btn primary" onclick="pki.showCreateCertModal()">
|
|
Create your first certificate
|
|
</button>
|
|
` : '<p>Create a CA or Sub CA first</p>'}
|
|
</div>
|
|
`}
|
|
`;
|
|
} catch (error) {
|
|
console.error('Certificates error:', error);
|
|
content.innerHTML = '<div class="error">Failed to load certificates</div>';
|
|
}
|
|
}
|
|
|
|
async fetchAllData() {
|
|
try {
|
|
const [cas, subcas, certs] = await Promise.all([
|
|
this.fetchCAs(),
|
|
this.fetchSubCAs(),
|
|
this.fetchCertificates()
|
|
]);
|
|
return { cas, subcas, certs };
|
|
} catch (error) {
|
|
console.error('Error fetching all data:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async fetchCAs() {
|
|
try {
|
|
console.log('Fetching CAs from:', `${this.apiBase}/cas`);
|
|
const response = await fetch(`${this.apiBase}/cas`);
|
|
|
|
console.log('CAs response status:', response.status);
|
|
|
|
if (!response.ok) {
|
|
console.warn(`CAs fetch failed: ${response.status} ${response.statusText}`);
|
|
this.cas = [];
|
|
return this.cas;
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('CAs raw data:', data);
|
|
|
|
// S'assurer que c'est un tableau
|
|
this.cas = Array.isArray(data) ? data : [];
|
|
console.log(`Loaded ${this.cas.length} CAs`);
|
|
|
|
return this.cas;
|
|
} catch (error) {
|
|
console.error('CAs fetch error:', error);
|
|
this.cas = [];
|
|
return this.cas;
|
|
}
|
|
}
|
|
|
|
async fetchSubCAs() {
|
|
try {
|
|
console.log('Fetching SubCAs from:', `${this.apiBase}/subcas`);
|
|
const response = await fetch(`${this.apiBase}/subcas`);
|
|
|
|
console.log('SubCAs response status:', response.status);
|
|
|
|
if (!response.ok) {
|
|
console.warn(`SubCAs fetch failed: ${response.status} ${response.statusText}`);
|
|
this.subcas = [];
|
|
return this.subcas;
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('SubCAs raw data:', data);
|
|
|
|
// S'assurer que c'est un tableau
|
|
this.subcas = Array.isArray(data) ? data : [];
|
|
console.log(`Loaded ${this.subcas.length} SubCAs`);
|
|
|
|
return this.subcas;
|
|
} catch (error) {
|
|
console.error('SubCAs fetch error:', error);
|
|
this.subcas = [];
|
|
return this.subcas;
|
|
}
|
|
}
|
|
|
|
async fetchCertificates() {
|
|
try {
|
|
console.log('Fetching certificates...');
|
|
const response = await fetch(`${this.apiBase}/certificates`);
|
|
|
|
if (!response.ok) {
|
|
console.warn(`Certificates fetch failed: ${response.status}`);
|
|
this.certificates = [];
|
|
return this.certificates;
|
|
}
|
|
|
|
const data = await response.json();
|
|
this.certificates = Array.isArray(data) ? data : [];
|
|
console.log(`Loaded ${this.certificates.length} certificates`);
|
|
return this.certificates;
|
|
} catch (error) {
|
|
console.warn('Certificates fetch error:', error);
|
|
this.certificates = [];
|
|
return this.certificates;
|
|
}
|
|
}
|
|
|
|
async showCreateCAModal() {
|
|
const modal = document.getElementById('createCAModal');
|
|
if (modal) modal.classList.remove('hidden');
|
|
}
|
|
|
|
async showCreateSubCAModal() {
|
|
try {
|
|
// Charger les CAs pour le dropdown
|
|
await this.fetchCAs();
|
|
|
|
if (this.cas.length === 0) {
|
|
this.showError('Create a CA first before creating a Sub CA');
|
|
return;
|
|
}
|
|
|
|
// Mettre à jour le dropdown
|
|
const dropdown = document.getElementById('parentCA');
|
|
if (dropdown) {
|
|
dropdown.innerHTML = this.cas.map(ca =>
|
|
`<option value="${ca.id}">${ca.name} (${ca.common_name})</option>`
|
|
).join('');
|
|
}
|
|
|
|
const modal = document.getElementById('createSubCAModal');
|
|
if (modal) modal.classList.remove('hidden');
|
|
} catch (error) {
|
|
console.error('Error showing SubCA modal:', error);
|
|
this.showError('Failed to load CAs');
|
|
}
|
|
}
|
|
|
|
async showCreateCertModal() {
|
|
console.log('=== showCreateCertModal START ===');
|
|
|
|
try {
|
|
// 1. Charger les données
|
|
console.log('Loading issuers...');
|
|
await this.fetchCAs();
|
|
await this.fetchSubCAs();
|
|
|
|
// 2. Vérifier les données
|
|
console.log(`CAs: ${this.cas.length} items`, this.cas);
|
|
console.log(`SubCAs: ${this.subcas.length} items`, this.subcas);
|
|
|
|
// 3. Combiner tous les émetteurs
|
|
const allIssuers = [];
|
|
|
|
// Ajouter les CAs
|
|
if (this.cas && Array.isArray(this.cas)) {
|
|
this.cas.forEach(ca => {
|
|
if (ca && ca.id) {
|
|
allIssuers.push({
|
|
id: ca.id,
|
|
name: ca.name || ca.common_name || 'Unnamed CA',
|
|
common_name: ca.common_name || 'No CN',
|
|
type: 'CA'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Ajouter les SubCAs
|
|
if (this.subcas && Array.isArray(this.subcas)) {
|
|
this.subcas.forEach(subca => {
|
|
if (subca && subca.id) {
|
|
allIssuers.push({
|
|
id: subca.id,
|
|
name: subca.name || subca.common_name || 'Unnamed SubCA',
|
|
common_name: subca.common_name || 'No CN',
|
|
type: 'SubCA'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
console.log('All issuers combined:', allIssuers);
|
|
|
|
if (allIssuers.length === 0) {
|
|
this.showError('Please create a CA or Sub CA first.');
|
|
return;
|
|
}
|
|
|
|
// 4. Remplir le dropdown
|
|
const dropdown = document.getElementById('issuerCA');
|
|
if (!dropdown) {
|
|
console.error('ERROR: Dropdown #issuerCA not found in DOM!');
|
|
// Vérifier si l'élément existe avec un autre ID
|
|
console.log('Available select elements:', document.querySelectorAll('select'));
|
|
return;
|
|
}
|
|
|
|
console.log('Dropdown found, populating...');
|
|
|
|
// Sauvegarder la sélection actuelle
|
|
const currentValue = dropdown.value;
|
|
|
|
// Vider et remplir
|
|
dropdown.innerHTML = '<option value="">-- Select Issuer --</option>';
|
|
|
|
allIssuers.forEach(issuer => {
|
|
const option = document.createElement('option');
|
|
option.value = issuer.id;
|
|
option.textContent = `${issuer.name} (${issuer.type})`;
|
|
dropdown.appendChild(option);
|
|
});
|
|
|
|
// Restaurer la sélection si possible
|
|
if (currentValue && allIssuers.some(i => i.id === currentValue)) {
|
|
dropdown.value = currentValue;
|
|
}
|
|
|
|
console.log(`Dropdown populated with ${allIssuers.length} options`);
|
|
console.log('Dropdown HTML:', dropdown.innerHTML);
|
|
|
|
// 5. Afficher la modal
|
|
const modal = document.getElementById('createCertModal');
|
|
if (modal) {
|
|
modal.classList.remove('hidden');
|
|
console.log('Modal shown');
|
|
|
|
// Focus sur le premier champ
|
|
setTimeout(() => {
|
|
const firstInput = modal.querySelector('input, select');
|
|
if (firstInput) firstInput.focus();
|
|
}, 100);
|
|
} else {
|
|
console.error('ERROR: Modal #createCertModal not found!');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error in showCreateCertModal:', error);
|
|
this.showError('Failed to open certificate form: ' + error.message);
|
|
}
|
|
|
|
console.log('=== showCreateCertModal END ===');
|
|
}
|
|
|
|
hideModal() {
|
|
document.querySelectorAll('.modal').forEach(modal => {
|
|
modal.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
async handleCreateCA(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/cas`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: data.name,
|
|
common_name: data.common_name,
|
|
organization: data.organization,
|
|
country: data.country,
|
|
province: data.province || '',
|
|
locality: data.locality || '',
|
|
email: data.email || '',
|
|
key_size: parseInt(data.key_size) || 4096,
|
|
valid_years: parseInt(data.valid_years) || 10,
|
|
is_root: data.is_root === 'true'
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
this.showSuccess('CA created successfully');
|
|
this.hideModal();
|
|
e.target.reset();
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to create CA');
|
|
}
|
|
} catch (error) {
|
|
console.error('CA creation error:', error);
|
|
this.showError('Failed to create CA: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async handleCreateSubCA(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/subcas`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: data.name,
|
|
common_name: data.common_name,
|
|
organization: data.organization,
|
|
email: data.email || '',
|
|
country: data.country,
|
|
province: data.province || '',
|
|
locality: data.locality || '',
|
|
parent_ca_id: data.parent_ca_id,
|
|
key_size: parseInt(data.key_size) || 4096,
|
|
valid_years: parseInt(data.valid_years) || 5
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
this.showSuccess('Sub CA created successfully');
|
|
this.hideModal();
|
|
e.target.reset();
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to create Sub CA');
|
|
}
|
|
} catch (error) {
|
|
console.error('SubCA creation error:', error);
|
|
this.showError('Failed to create Sub CA: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async handleCreateCertificate(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
try {
|
|
const dnsNames = data.dns_names ? data.dns_names.split(',').map(s => s.trim()).filter(s => s) : [];
|
|
const ipAddresses = data.ip_addresses ? data.ip_addresses.split(',').map(s => s.trim()).filter(s => s) : [];
|
|
|
|
const response = await fetch(`${this.apiBase}/certificates`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
common_name: data.common_name,
|
|
type: data.type,
|
|
dns_names: dnsNames,
|
|
ip_addresses: ipAddresses,
|
|
issuer_ca_id: data.issuer_ca_id,
|
|
key_size: parseInt(data.key_size) || 2048,
|
|
valid_days: parseInt(data.valid_days) || 365
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
this.showSuccess('Certificate created successfully');
|
|
this.hideModal();
|
|
e.target.reset();
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to create certificate');
|
|
}
|
|
} catch (error) {
|
|
console.error('Certificate creation error:', error);
|
|
this.showError('Failed to create certificate: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async deleteCA(id) {
|
|
if (!confirm('Delete this CA?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/cas/${id}`, { method: 'DELETE' });
|
|
if (response.ok) {
|
|
this.showSuccess('CA deleted');
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
throw new Error('Delete failed');
|
|
}
|
|
} catch (error) {
|
|
this.showError('Failed to delete CA');
|
|
}
|
|
}
|
|
|
|
async deleteSubCA(id) {
|
|
if (!confirm('Delete this Sub CA?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/subcas/${id}`, { method: 'DELETE' });
|
|
if (response.ok) {
|
|
this.showSuccess('Sub CA deleted');
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
throw new Error('Delete failed');
|
|
}
|
|
} catch (error) {
|
|
this.showError('Failed to delete Sub CA');
|
|
}
|
|
}
|
|
|
|
async deleteCertificate(id) {
|
|
if (!confirm('Delete this certificate?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/certificates/${id}`, { method: 'DELETE' });
|
|
if (response.ok) {
|
|
this.showSuccess('Certificate deleted');
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
throw new Error('Delete failed');
|
|
}
|
|
} catch (error) {
|
|
this.showError('Failed to delete certificate');
|
|
}
|
|
}
|
|
|
|
async revokeCertificate(id) {
|
|
const reason = prompt('Revocation reason:') || 'Administrative revocation';
|
|
if (!reason) return;
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/certificates/${id}/revoke`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ reason })
|
|
});
|
|
|
|
if (response.ok) {
|
|
this.showSuccess('Certificate revoked');
|
|
await this.fetchAllData();
|
|
this.showTab(this.currentTab);
|
|
} else {
|
|
throw new Error('Revocation failed');
|
|
}
|
|
} catch (error) {
|
|
this.showError('Failed to revoke certificate');
|
|
}
|
|
}
|
|
|
|
downloadCertificate(id) {
|
|
window.open(`${this.apiBase}/certificates/${id}/download/cert`, '_blank');
|
|
}
|
|
|
|
async viewCA(id) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/cas/${id}`);
|
|
if (!response.ok) throw new Error('Not found');
|
|
|
|
const ca = await response.json();
|
|
this.showModal('CA Details', `
|
|
<h3>${ca.name}</h3>
|
|
<p><strong>Common Name:</strong> ${ca.common_name}</p>
|
|
<p><strong>Organization:</strong> ${ca.organization}</p>
|
|
<p><strong>Valid From:</strong> ${new Date(ca.valid_from).toLocaleString()}</p>
|
|
<p><strong>Valid To:</strong> ${new Date(ca.valid_to).toLocaleString()}</p>
|
|
<p><strong>Serial:</strong> ${ca.serial_number}</p>
|
|
<button class="btn" onclick="window.open('${this.apiBase}/cas/${id}/download/cert')">Download Certificate</button>
|
|
`);
|
|
} catch (error) {
|
|
this.showError('Failed to load CA details');
|
|
}
|
|
}
|
|
|
|
async viewSubCA(id) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/subcas/${id}`);
|
|
if (!response.ok) throw new Error('Not found');
|
|
|
|
const subca = await response.json();
|
|
this.showModal('Sub CA Details', `
|
|
<h3>${subca.name}</h3>
|
|
<p><strong>Common Name:</strong> ${subca.common_name}</p>
|
|
<p><strong>Organization:</strong> ${subca.organization}</p>
|
|
<p><strong>Valid From:</strong> ${new Date(subca.valid_from).toLocaleString()}</p>
|
|
<p><strong>Valid To:</strong> ${new Date(subca.valid_to).toLocaleString()}</p>
|
|
<p><strong>Serial:</strong> ${subca.serial_number}</p>
|
|
<button class="btn" onclick="window.open('${this.apiBase}/subcas/${id}/download/cert')">Download Certificate</button>
|
|
`);
|
|
} catch (error) {
|
|
this.showError('Failed to load Sub CA details');
|
|
}
|
|
}
|
|
|
|
async viewCertificate(id) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/certificates/${id}`);
|
|
if (!response.ok) throw new Error('Not found');
|
|
|
|
const cert = await response.json();
|
|
this.showModal('Certificate Details', `
|
|
<h3>${cert.common_name}</h3>
|
|
<p><strong>Type:</strong> ${cert.type}</p>
|
|
<p><strong>Valid From:</strong> ${new Date(cert.valid_from).toLocaleString()}</p>
|
|
<p><strong>Valid To:</strong> ${new Date(cert.valid_to).toLocaleString()}</p>
|
|
<p><strong>Status:</strong> ${cert.revoked ? 'Revoked' : new Date(cert.valid_to) > new Date() ? 'Valid' : 'Expired'}</p>
|
|
<p><strong>Serial:</strong> ${cert.serial_number}</p>
|
|
<div class="button-group">
|
|
<button class="btn" onclick="window.open('${this.apiBase}/certificates/${id}/download/cert')">Download Certificate</button>
|
|
<button class="btn" onclick="window.open('${this.apiBase}/certificates/${id}/download/key')">Download Private Key</button>
|
|
</div>
|
|
`);
|
|
} catch (error) {
|
|
this.showError('Failed to load certificate details');
|
|
}
|
|
}
|
|
|
|
showModal(title, content) {
|
|
const modal = document.getElementById('viewModal');
|
|
if (!modal) return;
|
|
|
|
modal.querySelector('h2').textContent = title;
|
|
modal.querySelector('.modal-body').innerHTML = content;
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
showSuccess(message) {
|
|
this.showAlert(message, 'success');
|
|
}
|
|
|
|
showError(message) {
|
|
this.showAlert(message, 'error');
|
|
}
|
|
|
|
showAlert(message, type) {
|
|
// Remove existing alerts
|
|
document.querySelectorAll('.alert').forEach(a => a.remove());
|
|
|
|
const alert = document.createElement('div');
|
|
alert.className = `alert alert-${type}`;
|
|
alert.textContent = message;
|
|
alert.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 15px 20px;
|
|
border-radius: 5px;
|
|
z-index: 10000;
|
|
animation: slideIn 0.3s ease;
|
|
`;
|
|
|
|
document.body.appendChild(alert);
|
|
|
|
setTimeout(() => {
|
|
alert.style.animation = 'slideOut 0.3s ease';
|
|
setTimeout(() => alert.remove(), 300);
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.pki = new PKIManager();
|
|
}); |