From 3594e9c65f340cf7e1b6c54cb92298a16eb44b4d Mon Sep 17 00:00:00 2001
From: Masa Ivanov <masa.ivanov04.10@gmail.com>
Date: Wed, 1 Oct 2025 18:01:38 +0200
Subject: [PATCH 1/2] Add manage keys looks

---
 MiniKmsClient/src/app/auth/auth.guard.ts      |  1 +
 .../manage-keys/manage-keys.component.html    | 57 ++++++++++++++++++-
 .../manage-keys/manage-keys.component.scss    | 37 ++++++++++++
 .../app/manage-keys/manage-keys.component.ts  | 30 ++++++++++
 MiniKmsClient/src/styles.scss                 |  1 +
 5 files changed, 125 insertions(+), 1 deletion(-)

diff --git a/MiniKmsClient/src/app/auth/auth.guard.ts b/MiniKmsClient/src/app/auth/auth.guard.ts
index c94f9e8..f19d9f0 100644
--- a/MiniKmsClient/src/app/auth/auth.guard.ts
+++ b/MiniKmsClient/src/app/auth/auth.guard.ts
@@ -3,6 +3,7 @@ import { inject } from '@angular/core';
 import { AuthService } from './auth.service';
 
 export const authGuard: CanActivateFn = (route, state) => {
+  return true;
   const router = inject(Router);
   const authService = inject(AuthService);
   
diff --git a/MiniKmsClient/src/app/manage-keys/manage-keys.component.html b/MiniKmsClient/src/app/manage-keys/manage-keys.component.html
index 012e432..b682bd4 100644
--- a/MiniKmsClient/src/app/manage-keys/manage-keys.component.html
+++ b/MiniKmsClient/src/app/manage-keys/manage-keys.component.html
@@ -1 +1,56 @@
-<p>manage-keys works!</p>
+<div class="controls-row">
+  <mat-form-field appearance="outline" class="control">
+    <mat-label>Alias</mat-label>
+    <input matInput placeholder="Enter alias">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="control">
+    <mat-label>Key Type</mat-label>
+    <mat-select>
+      <mat-option *ngFor="let type of keyTypes" [value]="type">
+        {{ type }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <button mat-raised-button color="primary" class="add-btn" (click)="addKey()">
+    Add Key
+  </button>
+</div>
+
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z2 full-width-table">
+
+  <!-- Key ID -->
+  <ng-container matColumnDef="keyId">
+    <th mat-header-cell *matHeaderCellDef> Key ID </th>
+    <td mat-cell *matCellDef="let element"> {{element.keyId}} </td>
+  </ng-container>
+
+  <!-- Alias -->
+  <ng-container matColumnDef="alias">
+    <th mat-header-cell *matHeaderCellDef> Alias </th>
+    <td mat-cell *matCellDef="let element"> {{element.alias}} </td>
+  </ng-container>
+
+  <!-- Key Type -->
+  <ng-container matColumnDef="keyType">
+    <th mat-header-cell *matHeaderCellDef> Key Type </th>
+    <td mat-cell *matCellDef="let element"> {{element.keyType}} </td>
+  </ng-container>
+
+  <!-- Actions -->
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> Actions </th>
+    <td mat-cell *matCellDef="let element" class="actions-cell">
+      <button mat-stroked-button color="warn" (click)="deleteKey(element)">
+        Delete
+      </button>
+      <button mat-stroked-button color="accent" (click)="rotateKey(element)">
+        Rotate
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/MiniKmsClient/src/app/manage-keys/manage-keys.component.scss b/MiniKmsClient/src/app/manage-keys/manage-keys.component.scss
index e69de29..45e5640 100644
--- a/MiniKmsClient/src/app/manage-keys/manage-keys.component.scss
+++ b/MiniKmsClient/src/app/manage-keys/manage-keys.component.scss
@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  min-height: 100vh; 
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.controls-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin: 20px auto;   
+  width: 60%;
+  background: white;  
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  padding-top: 36px;
+}
+
+.control {
+  flex: 1;
+}
+
+button.add-btn {
+  height: 56px;        
+}
+
+.full-width-table {
+  width: 80%;          
+  margin: 0 auto;      
+  background: white;   
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
\ No newline at end of file
diff --git a/MiniKmsClient/src/app/manage-keys/manage-keys.component.ts b/MiniKmsClient/src/app/manage-keys/manage-keys.component.ts
index f016840..a7899db 100644
--- a/MiniKmsClient/src/app/manage-keys/manage-keys.component.ts
+++ b/MiniKmsClient/src/app/manage-keys/manage-keys.component.ts
@@ -1,4 +1,11 @@
 import { Component } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+
+export interface KeyRecord {
+  keyId: string;
+  alias: string;
+  keyType: string;
+}
 
 @Component({
   selector: 'app-manage-keys',
@@ -6,5 +13,28 @@ import { Component } from '@angular/core';
   styleUrl: './manage-keys.component.scss'
 })
 export class ManageKeysComponent {
+keyTypes: string[] = ['AES', 'RSA', 'HMAC'];
+
+  displayedColumns: string[] = ['keyId', 'alias', 'keyType', 'actions'];
+  dataSource = new MatTableDataSource<KeyRecord>([
+    { keyId: '1', alias: 'Key One', keyType: 'AES' },
+    { keyId: '2', alias: 'Key Two', keyType: 'RSA' },
+    { keyId: '3', alias: 'Key Three', keyType: 'AES' },
+    { keyId: '4', alias: 'Key Four', keyType: 'HMAC' }
+  ]);
+
+  addKey() {
+    console.log('Add key clicked');
+    // TODO: implement
+  }
+
+  deleteKey(key: KeyRecord) {
+    console.log('Delete key', key);
+    // TODO: implement
+  }
 
+  rotateKey(key: KeyRecord) {
+    console.log('Rotate key', key);
+    // TODO: implement
+  }
 }
diff --git a/MiniKmsClient/src/styles.scss b/MiniKmsClient/src/styles.scss
index 36688b1..53607e7 100644
--- a/MiniKmsClient/src/styles.scss
+++ b/MiniKmsClient/src/styles.scss
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 html, body { 
   height: 100%; 

From eb6083eb5d0d5d677cd2299ada455b9c8a24e720 Mon Sep 17 00:00:00 2001
From: Masa Ivanov <masa.ivanov04.10@gmail.com>
Date: Wed, 1 Oct 2025 18:02:43 +0200
Subject: [PATCH 2/2] Minor fix

---
 MiniKmsClient/src/app/auth/auth.guard.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/MiniKmsClient/src/app/auth/auth.guard.ts b/MiniKmsClient/src/app/auth/auth.guard.ts
index f19d9f0..c94f9e8 100644
--- a/MiniKmsClient/src/app/auth/auth.guard.ts
+++ b/MiniKmsClient/src/app/auth/auth.guard.ts
@@ -3,7 +3,6 @@ import { inject } from '@angular/core';
 import { AuthService } from './auth.service';
 
 export const authGuard: CanActivateFn = (route, state) => {
-  return true;
   const router = inject(Router);
   const authService = inject(AuthService);