move from PHP to VUE, improved Certificate listning
This commit is contained in:
Антон
289
UI/client/src/views/Certificates.vue
Normal file
289
UI/client/src/views/Certificates.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="stats-info mb-4" id="statsInfo">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ totalCerts }}</div>
|
||||
<div class="stat-label">Total Certificates</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ activeCerts.length }}</div>
|
||||
<div class="stat-label">Active Certificates</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ expiringCount }}</div>
|
||||
<div class="stat-label">Expiring in 30 days</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ expiredCerts.length }}</div>
|
||||
<div class="stat-label">Expired Certificates</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-3">
|
||||
<div class="d-flex gap-3 align-items-center flex-wrap">
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Search by client name..." v-model="searchQuery">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="hideExpired" v-model="hideExpired">
|
||||
<label class="form-check-label user-select-none text-muted" for="hideExpired">Hide Expired Certificates</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="certificatesCard">
|
||||
<div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom">
|
||||
<span><i class="fas fa-certificate me-2"></i>Certificates List</span>
|
||||
<div>
|
||||
<span class="status-badge status-valid me-1">
|
||||
<i class="fas fa-check-circle me-1"></i><span>{{ activeCerts.length }}</span> Active
|
||||
</span>
|
||||
<span class="status-badge status-expired">
|
||||
<i class="fas fa-times-circle me-1"></i><span>{{ expiredCerts.length }}</span> Expired
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client Name</th>
|
||||
<th>Validity Not After</th>
|
||||
<th>Days Remaining</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="4" class="text-center py-4">
|
||||
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2 mb-0">Loading certificates...</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-else-if="activeCerts.length === 0 && expiredCerts.length === 0">
|
||||
<td colspan="4" class="empty-state text-center py-5">
|
||||
<i class="fas fa-certificate fa-2x mb-3 text-muted"></i>
|
||||
<p class="text-muted">No certificates found</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template v-else>
|
||||
<!-- Active Section -->
|
||||
<tr v-if="activeCerts.length > 0" class="section-divider">
|
||||
<td colspan="4">Active Certificates ({{ activeCerts.length }})</td>
|
||||
</tr>
|
||||
<tr v-for="cert in activeCerts" :key="cert.common_name + '_active'">
|
||||
<td>
|
||||
<div class="fw-semibold" style="color: var(--text-heading);">{{ getClientName(cert) }}</div>
|
||||
<div class="certificate-file text-muted small">{{ cert.file || 'N/A' }}</div>
|
||||
</td>
|
||||
<td>{{ formatDate(cert.not_after || cert.expiration_date) }}</td>
|
||||
<td class="fw-semibold" :class="getDaysClass(cert.days_remaining)">
|
||||
{{ cert.days_remaining || 'N/A' }}
|
||||
</td>
|
||||
<td v-html="getStatusBadgeHTML(cert.days_remaining)"></td>
|
||||
</tr>
|
||||
|
||||
<!-- Expired Section -->
|
||||
<template v-if="!hideExpired && expiredCerts.length > 0">
|
||||
<tr class="section-divider">
|
||||
<td colspan="4">Expired Certificates ({{ expiredCerts.length }})</td>
|
||||
</tr>
|
||||
<tr v-for="cert in expiredCerts" :key="cert.common_name + '_expired'">
|
||||
<td>
|
||||
<div class="fw-semibold" style="color: var(--text-heading);">{{ getClientName(cert) }}</div>
|
||||
<div class="certificate-file text-muted small">{{ cert.file || 'N/A' }}</div>
|
||||
</td>
|
||||
<td>{{ formatDate(cert.not_after || cert.expiration_date) }}</td>
|
||||
<td class="fw-semibold text-danger">
|
||||
{{ formatExpiredDays(cert.days_remaining) }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge status-expired"><i class="fas fa-times-circle me-1"></i>Expired</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useApi } from '../composables/useApi';
|
||||
import { useFormatters } from '../composables/useFormatters';
|
||||
|
||||
const { fetchCertificates } = useApi();
|
||||
// use locally defined format logic to match legacy specificities if needed, but simple date string is likely fine
|
||||
const { formatDate: _formatDate } = useFormatters();
|
||||
|
||||
const loading = ref(true);
|
||||
const allCertificates = ref([]);
|
||||
const searchQuery = ref('');
|
||||
const hideExpired = ref(false);
|
||||
|
||||
const getClientName = (cert) => {
|
||||
const cn = cert.common_name || cert.subject || 'N/A';
|
||||
return cn.replace('CN=', '').trim();
|
||||
}
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr || dateStr === 'N/A') return 'N/A';
|
||||
try {
|
||||
const d = new Date(dateStr);
|
||||
if(isNaN(d)) return dateStr;
|
||||
// Legacy: 'May 16, 2033 11:32:06 AM' format roughly
|
||||
// Using standard locale string which is close enough and better
|
||||
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
|
||||
} catch(e) { return dateStr; }
|
||||
};
|
||||
|
||||
const getDaysClass = (daysText) => {
|
||||
if (!daysText || daysText === 'N/A') return 'text-success'; // default valid
|
||||
if (daysText.includes('Expired')) return 'text-danger';
|
||||
|
||||
const days = parseInt(daysText);
|
||||
if (!isNaN(days) && days <= 30) return 'text-warning';
|
||||
return 'text-success';
|
||||
};
|
||||
|
||||
const getStatusBadgeHTML = (daysText) => {
|
||||
if (!daysText || daysText === 'N/A') return '<span class="status-badge text-muted">Unknown</span>';
|
||||
|
||||
const days = parseInt(daysText);
|
||||
if (!isNaN(days)) {
|
||||
if (days <= 30) {
|
||||
return '<span class="status-badge status-expiring"><i class="fas fa-exclamation-triangle me-1"></i>Expiring Soon</span>';
|
||||
} else {
|
||||
return '<span class="status-badge status-valid"><i class="fas fa-check-circle me-1"></i>Valid</span>';
|
||||
}
|
||||
}
|
||||
return '<span class="status-badge text-muted">Unknown</span>';
|
||||
};
|
||||
|
||||
const formatExpiredDays = (daysText) => {
|
||||
if(!daysText) return 'N/A';
|
||||
if (daysText.includes('Expired')) {
|
||||
return daysText.replace('Expired (', '').replace(' days ago)', '') + ' days ago';
|
||||
}
|
||||
return daysText;
|
||||
};
|
||||
|
||||
// Data Processing
|
||||
const filteredData = computed(() => {
|
||||
let data = allCertificates.value;
|
||||
if (searchQuery.value) {
|
||||
const term = searchQuery.value.toLowerCase();
|
||||
data = data.filter(c => {
|
||||
const commonName = (c.common_name || c.subject || '').toLowerCase();
|
||||
const fileName = (c.file || '').toLowerCase();
|
||||
return commonName.includes(term) || fileName.includes(term);
|
||||
});
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
const categorized = computed(() => {
|
||||
const active = [];
|
||||
const expired = [];
|
||||
|
||||
filteredData.value.forEach(cert => {
|
||||
let isExpired = false;
|
||||
if (cert.days_remaining && typeof cert.days_remaining === 'string' && cert.days_remaining.includes('Expired')) {
|
||||
isExpired = true;
|
||||
} else if ((!cert.days_remaining || cert.days_remaining === 'N/A') && cert.not_after) {
|
||||
const expDate = new Date(cert.not_after);
|
||||
if (expDate < new Date()) isExpired = true;
|
||||
}
|
||||
|
||||
if (isExpired) expired.push(cert);
|
||||
else active.push(cert);
|
||||
});
|
||||
|
||||
// Sort logic from legacy
|
||||
active.sort((a,b) => {
|
||||
const aDays = parseInt(a.days_remaining) || 9999;
|
||||
const bDays = parseInt(b.days_remaining) || 9999;
|
||||
return aDays - bDays;
|
||||
});
|
||||
|
||||
expired.sort((a,b) => {
|
||||
const aMatch = (a.days_remaining||'').match(/\d+/);
|
||||
const bMatch = (b.days_remaining||'').match(/\d+/);
|
||||
const aDays = aMatch ? parseInt(aMatch[0]) : 0;
|
||||
const bDays = bMatch ? parseInt(bMatch[0]) : 0;
|
||||
return bDays - aDays;
|
||||
});
|
||||
|
||||
return { active, expired };
|
||||
});
|
||||
|
||||
const activeCerts = computed(() => categorized.value.active);
|
||||
const expiredCerts = computed(() => categorized.value.expired);
|
||||
const totalCerts = computed(() => allCertificates.value.length);
|
||||
const expiringCount = computed(() => {
|
||||
return activeCerts.value.filter(c => {
|
||||
const days = parseInt(c.days_remaining);
|
||||
return !isNaN(days) && days <= 30;
|
||||
}).length;
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetchCertificates();
|
||||
if(res.success) {
|
||||
allCertificates.value = res.data;
|
||||
}
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stats-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.stat-item {
|
||||
background: var(--bg-card);
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-heading);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.stat-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.section-divider td {
|
||||
background-color: var(--bg-body);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user