diff --git a/modules/ui/src/app/model/certificate.ts b/modules/ui/src/app/model/certificate.ts index 384120cf7..ecf47ca84 100644 --- a/modules/ui/src/app/model/certificate.ts +++ b/modules/ui/src/app/model/certificate.ts @@ -15,7 +15,13 @@ */ export interface Certificate { name: string; + status?: string; organisation?: string; expires?: string; uploading?: boolean; } + +export enum CertificateStatus { + Valid = 'Valid', + Expired = 'Expired', +} diff --git a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html index eeb4fb6c8..43da6e299 100644 --- a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html +++ b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html @@ -1,7 +1,21 @@ -
{{ certificate.name }}
diff --git a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.scss b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.scss
index bab73098b..394ddec83 100644
--- a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.scss
+++ b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.scss
@@ -78,3 +78,17 @@
min-height: 20px;
}
}
+
+.certificate-expired {
+ .certificate-item-icon {
+ color: $red-700;
+ }
+ .certificate-item-name {
+ color: $red-800;
+ }
+
+ .certificate-item-organisation,
+ .certificate-item-expires {
+ color: $red-700;
+ }
+}
diff --git a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts
index eb6019b98..0eea2f7ec 100644
--- a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts
+++ b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Certificate } from '../../../model/certificate';
+import { Certificate, CertificateStatus } from '../../../model/certificate';
import { MatIcon } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
@@ -24,4 +24,6 @@ import { MatError } from '@angular/material/form-field';
export class CertificateItemComponent {
@Input() certificate!: Certificate;
@Output() deleteButtonClicked = new EventEmitter