mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-31 03:30:39 +00:00
107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
|
<template>
|
||
|
<div>
|
||
|
<div class="d-flex flex-row align-items-center p-1 overflow-hidden">
|
||
|
<div class="m-3 ps-3">
|
||
|
<font-awesome-icon class="cert-icon" icon="file-contract" />
|
||
|
</div>
|
||
|
<div class="m-3">
|
||
|
<table class="text-start">
|
||
|
<tbody>
|
||
|
<tr class="my-3">
|
||
|
<td class="px-3">Subject:</td>
|
||
|
<td>{{ formatSubject(cert.subject) }}</td>
|
||
|
</tr>
|
||
|
<tr class="my-3">
|
||
|
<td class="px-3">Valid To:</td>
|
||
|
<td><Datetime :value="cert.validTo" /></td>
|
||
|
</tr>
|
||
|
<tr class="my-3">
|
||
|
<td class="px-3">Days Remaining:</td>
|
||
|
<td>{{ cert.daysRemaining }}</td>
|
||
|
</tr>
|
||
|
<tr class="my-3">
|
||
|
<td class="px-3">Issuer:</td>
|
||
|
<td>{{ formatSubject(cert.issuer) }}</td>
|
||
|
</tr>
|
||
|
<tr class="my-3">
|
||
|
<td class="px-3">Fingerprint:</td>
|
||
|
<td>{{ cert.fingerprint }}</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="d-flex">
|
||
|
<font-awesome-icon
|
||
|
v-if="cert.issuerCertificate"
|
||
|
class="m-2 ps-6 link-icon"
|
||
|
icon="link"
|
||
|
/>
|
||
|
</div>
|
||
|
<certificate-info-row
|
||
|
v-if="cert.issuerCertificate"
|
||
|
:cert="cert.issuerCertificate"
|
||
|
/>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import Datetime from "../components/Datetime.vue";
|
||
|
export default {
|
||
|
name: "CertificateInfoRow",
|
||
|
components: {
|
||
|
Datetime,
|
||
|
},
|
||
|
props: {
|
||
|
cert: {
|
||
|
type: Object,
|
||
|
required: true,
|
||
|
},
|
||
|
},
|
||
|
methods: {
|
||
|
formatSubject(subject) {
|
||
|
if (subject.O && subject.CN && subject.C) {
|
||
|
return `${subject.CN} - ${subject.O} (${subject.C})`;
|
||
|
} else if (subject.O && subject.CN) {
|
||
|
return `${subject.CN} - ${subject.O}`;
|
||
|
} else if (subject.CN) {
|
||
|
return subject.CN;
|
||
|
} else {
|
||
|
return "no info";
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
@import "../assets/vars.scss";
|
||
|
|
||
|
table {
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.cert-icon {
|
||
|
font-size: 70px;
|
||
|
color: $link-color;
|
||
|
opacity: 0.5;
|
||
|
|
||
|
.dark & {
|
||
|
color: $dark-font-color;
|
||
|
opacity: 0.3;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.link-icon {
|
||
|
font-size: 20px;
|
||
|
margin-left: 50px !important;
|
||
|
color: $link-color;
|
||
|
opacity: 0.5;
|
||
|
|
||
|
.dark & {
|
||
|
color: $dark-font-color;
|
||
|
opacity: 0.3;
|
||
|
}
|
||
|
}
|
||
|
</style>
|