From 17029a1545715be5ee209b0f9fcc5743f03c78be Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Mon, 24 Jun 2024 13:19:35 +0000
Subject: [PATCH] 345258435: (feat) display expired certificate

---
 modules/ui/src/app/model/certificate.ts       |  6 +++++
 .../certificate-item.component.html           | 22 +++++++++++++++----
 .../certificate-item.component.scss           | 14 ++++++++++++
 .../certificate-item.component.ts             |  4 +++-
 4 files changed, 41 insertions(+), 5 deletions(-)

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 @@
-<div class="certificate-item-container">
-  <mat-icon class="certificate-item-icon" fontSet="material-symbols-outlined"
-    >workspace_premium</mat-icon
-  >
+<div
+  class="certificate-item-container"
+  [class.certificate-expired]="
+    certificate.status === CertificateStatus.Expired
+  ">
+  <mat-icon
+    *ngIf="certificate.status !== CertificateStatus.Expired"
+    class="certificate-item-icon"
+    fontSet="material-symbols-outlined">
+    workspace_premium
+  </mat-icon>
+  <mat-icon
+    *ngIf="certificate.status === CertificateStatus.Expired"
+    class="certificate-item-icon"
+    aria-label="The certificate is outdated"
+    aria-hidden="false"
+    fontIcon="error">
+  </mat-icon>
   <div class="certificate-item-information">
     <p class="certificate-item-name">{{ certificate.name }}</p>
     <p class="certificate-item-organisation" *ngIf="certificate.organisation">
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<string>();
+
+  CertificateStatus = CertificateStatus;
 }