From 8a1dba281547d4bc0e9ed3e24896ad737be5f530 Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Fri, 26 Nov 2021 16:26:30 +0100
Subject: [PATCH 1/7] Init api key menu item

---
 .vscode/settings.json                           |  3 +++
 src/app/admin/admin-routing.module.ts           | 17 +++++++++++++++++
 src/app/admin/admin.module.ts                   | 14 ++++++++++++++
 .../api-key-detail.component.html               |  1 +
 .../api-key-detail.component.scss               |  0
 .../api-key-detail/api-key-detail.component.ts  | 15 +++++++++++++++
 .../api-key-edit/api-key-edit.component.html    |  1 +
 .../api-key-edit/api-key-edit.component.scss    |  0
 .../api-key-edit/api-key-edit.component.ts      | 15 +++++++++++++++
 .../api-key-list/api-key-list.component.html    | 11 +++++++++++
 .../api-key-list/api-key-list.component.scss    |  0
 .../api-key-list/api-key-list.component.ts      | 15 +++++++++++++++
 .../api-key-table/api-key-table.component.html  |  1 +
 .../api-key-table/api-key-table.component.scss  |  0
 .../api-key-table/api-key-table.component.ts    | 15 +++++++++++++++
 src/app/admin/api-key/api-key.component.html    |  1 +
 src/app/admin/api-key/api-key.component.scss    |  0
 src/app/admin/api-key/api-key.component.ts      | 15 +++++++++++++++
 src/app/dashboard/dashboard.component.ts        |  4 ++--
 .../organisation-dropdown.component.html        |  9 ++++++++-
 .../organisation-dropdown.component.ts          |  3 ++-
 src/assets/i18n/da.json                         |  5 +++--
 22 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 src/app/admin/api-key/api-key-detail/api-key-detail.component.html
 create mode 100644 src/app/admin/api-key/api-key-detail/api-key-detail.component.scss
 create mode 100644 src/app/admin/api-key/api-key-detail/api-key-detail.component.ts
 create mode 100644 src/app/admin/api-key/api-key-edit/api-key-edit.component.html
 create mode 100644 src/app/admin/api-key/api-key-edit/api-key-edit.component.scss
 create mode 100644 src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
 create mode 100644 src/app/admin/api-key/api-key-list/api-key-list.component.html
 create mode 100644 src/app/admin/api-key/api-key-list/api-key-list.component.scss
 create mode 100644 src/app/admin/api-key/api-key-list/api-key-list.component.ts
 create mode 100644 src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
 create mode 100644 src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.scss
 create mode 100644 src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
 create mode 100644 src/app/admin/api-key/api-key.component.html
 create mode 100644 src/app/admin/api-key/api-key.component.scss
 create mode 100644 src/app/admin/api-key/api-key.component.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..910a2a5f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}
diff --git a/src/app/admin/admin-routing.module.ts b/src/app/admin/admin-routing.module.ts
index fffe9c8a..c2c7250c 100644
--- a/src/app/admin/admin-routing.module.ts
+++ b/src/app/admin/admin-routing.module.ts
@@ -12,6 +12,10 @@ import { UserDetailComponent } from './users/user-detail/user-detail.component';
 import { UserEditComponent } from './users/user-edit/user-edit.component';
 import { UserListComponent } from './users/user-list/user-list.component';
 import { UsersComponent } from './users/users.component';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
+import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.component';
 
 
 const adminRoutes: Routes = [
@@ -44,6 +48,19 @@ const adminRoutes: Routes = [
             },
         ],
     },
+    {
+        path: 'api-key',
+        component: ApiKeyComponent,
+        children: [
+            { path: '', component: ApiKeyListComponent },
+            { path: 'new-api-key', component: ApiKeyEditComponent },
+            { path: ':api-key-id', component: ApiKeyDetailComponent },
+            {
+                path: ':api-key-id/edit-api-key',
+                component: ApiKeyEditComponent,
+            },
+        ],
+    },
 
 
 ];
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index c7c52faf..51bb4216 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -28,6 +28,11 @@ import { UsersComponent } from './users/users.component';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyTableComponent } from './api-key/api-key-list/api-key-table/api-key-table.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
+import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.component';
 
 @NgModule({
   declarations: [
@@ -46,6 +51,11 @@ import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-
     OrganisationDetailComponent,
     OrganisationEditComponent,
     OrganisationListComponent,
+    ApiKeyComponent,
+    ApiKeyListComponent,
+    ApiKeyTableComponent,
+    ApiKeyEditComponent,
+    ApiKeyDetailComponent,
   ],
   imports: [
     AdminRoutingModule,
@@ -79,6 +89,10 @@ import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-
     OrganisationDetailComponent,
     OrganisationEditComponent,
     OrganisationListComponent,
+    ApiKeyComponent,
+    ApiKeyListComponent,
+    ApiKeyTableComponent,
+    ApiKeyEditComponent,
   ],
 })
 export class AdminModule {}
diff --git a/src/app/admin/api-key/api-key-detail/api-key-detail.component.html b/src/app/admin/api-key/api-key-detail/api-key-detail.component.html
new file mode 100644
index 00000000..903c1911
--- /dev/null
+++ b/src/app/admin/api-key/api-key-detail/api-key-detail.component.html
@@ -0,0 +1 @@
+<p>api-key-detail works!</p>
diff --git a/src/app/admin/api-key/api-key-detail/api-key-detail.component.scss b/src/app/admin/api-key/api-key-detail/api-key-detail.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/admin/api-key/api-key-detail/api-key-detail.component.ts b/src/app/admin/api-key/api-key-detail/api-key-detail.component.ts
new file mode 100644
index 00000000..25bc4048
--- /dev/null
+++ b/src/app/admin/api-key/api-key-detail/api-key-detail.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-api-key-detail',
+  templateUrl: './api-key-detail.component.html',
+  styleUrls: ['./api-key-detail.component.scss']
+})
+export class ApiKeyDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.html b/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
new file mode 100644
index 00000000..5eeaea5e
--- /dev/null
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
@@ -0,0 +1 @@
+<p>api-key-edit works!</p>
diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.scss b/src/app/admin/api-key/api-key-edit/api-key-edit.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
new file mode 100644
index 00000000..c4926db9
--- /dev/null
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-api-key-edit',
+  templateUrl: './api-key-edit.component.html',
+  styleUrls: ['./api-key-edit.component.scss']
+})
+export class ApiKeyEditComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/admin/api-key/api-key-list/api-key-list.component.html b/src/app/admin/api-key/api-key-list/api-key-list.component.html
new file mode 100644
index 00000000..e696a106
--- /dev/null
+++ b/src/app/admin/api-key/api-key-list/api-key-list.component.html
@@ -0,0 +1,11 @@
+<app-top-bar [title]="'NAV.API-KEY' | translate">
+</app-top-bar>
+<div class="container-fluid">
+  <div class="row">
+      <div class="col-12">
+          <div class="jumbotron--table">
+              <app-api-key-table></app-api-key-table>
+          </div>
+      </div>
+  </div>
+</div>
diff --git a/src/app/admin/api-key/api-key-list/api-key-list.component.scss b/src/app/admin/api-key/api-key-list/api-key-list.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/admin/api-key/api-key-list/api-key-list.component.ts b/src/app/admin/api-key/api-key-list/api-key-list.component.ts
new file mode 100644
index 00000000..84781d31
--- /dev/null
+++ b/src/app/admin/api-key/api-key-list/api-key-list.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-api-key-list',
+  templateUrl: './api-key-list.component.html',
+  styleUrls: ['./api-key-list.component.scss']
+})
+export class ApiKeyListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
new file mode 100644
index 00000000..554c63e7
--- /dev/null
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
@@ -0,0 +1 @@
+<p>api-key-table works!</p>
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.scss b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
new file mode 100644
index 00000000..30853efb
--- /dev/null
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-api-key-table',
+  templateUrl: './api-key-table.component.html',
+  styleUrls: ['./api-key-table.component.scss']
+})
+export class ApiKeyTableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/admin/api-key/api-key.component.html b/src/app/admin/api-key/api-key.component.html
new file mode 100644
index 00000000..0680b43f
--- /dev/null
+++ b/src/app/admin/api-key/api-key.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/app/admin/api-key/api-key.component.scss b/src/app/admin/api-key/api-key.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/admin/api-key/api-key.component.ts b/src/app/admin/api-key/api-key.component.ts
new file mode 100644
index 00000000..be1ea4b8
--- /dev/null
+++ b/src/app/admin/api-key/api-key.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-api-key',
+  templateUrl: './api-key.component.html',
+  styleUrls: ['./api-key.component.scss']
+})
+export class ApiKeyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 1c6916ae..a071e8ca 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -48,13 +48,13 @@ export class DashboardComponent implements OnInit {
       } else {
         const error = params['error'];
         if (error) {
-          if (error == "MESSAGE.KOMBIT-LOGIN-FAILED") {
+          if (error == "MESSAGE.KOMBIT-LOGIN-FAILED" || error == "MESSAGE.API-KEY-AUTH-FAILED") {
             this.router.navigate(['/not-authorized'], { state: { message: this.kombitError, code: 401 } });
           } if (error == "MESSAGE.USER-INACTIVE") {
             this.router.navigate(['/not-authorized'], { state: { message: this.noAccess, code: 401 } });
           } else {
             this.router.navigate(['/not-authorized'], { state: { message: this.unauthorizedMessage, code: 401 } });
-          } 
+          }
         }
       }
       await this.sharedVariableService.setUserInfo();
diff --git a/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html b/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html
index 566b42df..a38ae7b0 100644
--- a/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html
+++ b/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html
@@ -39,5 +39,12 @@
             </a>
             <fa-icon [icon]="faIdBadge" class="navbar-icon"></fa-icon>
         </li>
+        <li class="nav-item">
+            <a routerLink="/admin/api-key" routerLinkActive="active"
+                class="nav-link pl-5 position-relative rounded">
+                {{'NAV.API-KEY' | translate}}
+            </a>
+            <fa-icon [icon]="faKey" class="navbar-icon"></fa-icon>
+        </li>
     </div>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/src/app/navbar/organisation-dropdown/organisation-dropdown.component.ts b/src/app/navbar/organisation-dropdown/organisation-dropdown.component.ts
index 3d73055b..97364003 100644
--- a/src/app/navbar/organisation-dropdown/organisation-dropdown.component.ts
+++ b/src/app/navbar/organisation-dropdown/organisation-dropdown.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { Organisation } from '@app/admin/organisation/organisation.model';
 import { PermissionType } from '@app/admin/permission/permission.model';
 import { UserResponse } from '@app/admin/users/user.model';
-import { faExchangeAlt, faLayerGroup, faUsers, faIdBadge, faToolbox, faBurn } from '@fortawesome/free-solid-svg-icons';
+import { faExchangeAlt, faLayerGroup, faUsers, faIdBadge, faToolbox, faBurn, faKey } from '@fortawesome/free-solid-svg-icons';
 import { TranslateService } from '@ngx-translate/core';
 import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
 
@@ -24,6 +24,7 @@ export class OrganisationDropdownComponent implements OnInit {
   faIdBadge = faIdBadge;
   faToolbox = faToolbox;
   faBurn = faBurn;
+  faKey = faKey;
 
 
   constructor(
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
index 96c8b754..d39792d8 100644
--- a/src/assets/i18n/da.json
+++ b/src/assets/i18n/da.json
@@ -34,7 +34,8 @@
     "DEVICE-MODEL": "Device model",
     "BACK": "Tilbage",
     "LOGOUT": "Log ud",
-    "HELP": "Hjælp"
+    "HELP": "Hjælp",
+    "API-KEY": "API nøgler"
   },
   "TOPBAR":{
     "SEARCH": {
@@ -150,7 +151,7 @@
     "AUTHORIZATIONHEADER": "Authorization header",
     "NO-AUTHORIZATIONHEADER": "Ingen Authorization header angivet",
     "ADD-TO-OPENDATADK": "Send data til OpenDataDK",
-    "OPENDATA-DK": "OpenDataDK", 
+    "OPENDATA-DK": "OpenDataDK",
     "NO-OPENDATA-DK": "Der er ikke oprettet nogen datadeling med Open Data DK endnu"
   },
   "OPENDATADK": {

From 21f728fb7a572582763e9b114ce8493cad2e8beb Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Tue, 30 Nov 2021 18:25:50 +0100
Subject: [PATCH 2/7] Show api keys

---
 .../api-key-edit/api-key-edit.component.html  |  66 +++++++++-
 .../api-key-edit/api-key-edit.component.ts    |  70 ++++++++++-
 .../api-key-list/api-key-list.component.html  |   2 +-
 .../api-key-list/api-key-list.component.ts    |  21 +++-
 .../api-key-table.component.html              |  99 ++++++++++++++-
 .../api-key-table/api-key-table.component.ts  | 117 +++++++++++++++++-
 src/app/admin/api-key/api-key.model.ts        |  23 ++++
 src/app/admin/api-key/api-key.service.ts      |  85 +++++++++++++
 .../admin/organisation/organisation.model.ts  |   6 +-
 .../permission-list.component.ts              |   1 -
 src/assets/i18n/da.json                       |  29 ++++-
 tsconfig.json                                 |   1 +
 12 files changed, 499 insertions(+), 21 deletions(-)
 create mode 100644 src/app/admin/api-key/api-key.model.ts
 create mode 100644 src/app/admin/api-key/api-key.service.ts

diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.html b/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
index 5eeaea5e..8c477680 100644
--- a/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
@@ -1 +1,65 @@
-<p>api-key-edit works!</p>
+<app-form-header [backButton]="backButton" [title]="title"></app-form-header>
+
+<form (ngSubmit)="onSubmit()" class="os2-form p-3 mt-4">
+  <div *ngIf="errorMessages" class="error-messages p-3">
+    <ul class="mb-0">
+      <li *ngFor="let error of errorMessages">
+        {{ error | translate }}
+      </li>
+    </ul>
+  </div>
+
+  <div class="row mb-5">
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="name">{{
+        'API-KEY.EDIT.NAME' | translate
+      }}</label
+      >*
+      <input
+        type="text"
+        class="form-control"
+        id="name"
+        name="name"
+        [placeholder]="'API-KEY.EDIT.NAME-PLACEHOLDER' | translate"
+        maxlength="50"
+        required
+        [(ngModel)]="apiKeyRequest.name"
+        [ngClass]="{
+          'is-invalid': formFailedSubmit && errorFields.includes('name'),
+          'is-valid': formFailedSubmit && !errorFields.includes('name')
+        }"
+      />
+    </div>
+  </div>
+
+  <div class="row mb-5">
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="permissions">{{
+        'QUESTION.PERMISSION.SELECT-PERMISSION' | translate
+      }}</label
+      >*
+      <mat-select
+        class="form-control"
+        name="permissions"
+        [compareWith]="compare"
+        [(ngModel)]="apiKeyRequest.permissions"
+      >
+        <mat-option
+          *ngFor="let permission of permissions"
+          [value]="permission.id"
+        >
+          {{ permission.name }}
+        </mat-option>
+      </mat-select>
+    </div>
+  </div>
+
+  <div class="form-group mt-5">
+    <button (click)="routeBack()" class="btn btn-secondary" type="button">
+      {{ 'GEN.CANCEL' | translate }}
+    </button>
+    <button class="btn btn-primary ml-2" type="submit">
+      {{ 'GEN.SAVE' | translate }}
+    </button>
+  </div>
+</form>
diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
index c4926db9..1de65ecc 100644
--- a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
@@ -1,15 +1,81 @@
+import { Location } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
+import { TranslateService } from '@ngx-translate/core';
+import { BackButton } from '@shared/models/back-button.model';
+import { ApiKeyRequest } from '../api-key.model';
+import { ApiKeyService } from '../api-key.service';
 
 @Component({
   selector: 'app-api-key-edit',
   templateUrl: './api-key-edit.component.html',
-  styleUrls: ['./api-key-edit.component.scss']
+  styleUrls: ['./api-key-edit.component.scss'],
 })
 export class ApiKeyEditComponent implements OnInit {
+  apiKeyRequest = new ApiKeyRequest();
+  public backButton: BackButton = {
+    label: '',
+    routerLink: ['admin', 'api-key'],
+  };
+  public title = '';
+  public submitButton = '';
+  private apiKeyId: number;
+  public errorMessage: string;
+  public errorMessages: string[];
+  public errorFields: string[];
+  public formFailedSubmit = false;
+  public isEditMode = false;
+  public permissions: PermissionResponse[] = [];
 
-  constructor() { }
+  constructor(
+    private translate: TranslateService,
+    private route: ActivatedRoute,
+    private location: Location,
+    private apiKeyService: ApiKeyService
+  ) {
+    translate.use('da');
+  }
 
   ngOnInit(): void {
+    this.translate
+      .get(['NAV.API-KEY', 'FORM.EDIT-API-KEY', 'API-KEY.EDIT.SAVE'])
+      .subscribe((translations) => {
+        this.backButton.label = translations['NAV.API-KEY'];
+        this.title = translations['FORM.EDIT-API-KEY'];
+        this.submitButton = translations['API-KEY.EDIT.SAVE'];
+      });
+
+    this.apiKeyId = +this.route.snapshot.paramMap.get('api-key-id');
+
+    if (this.apiKeyId > 0) {
+      // TODO: Fetch current api key
+      this.isEditMode = true;
+    }
+  }
+
+  onSubmit(): void {
+    if (this.apiKeyId) {
+      this.update();
+    } else {
+      this.create();
+    }
+  }
+
+  private create(): void {
+    // TODO: CREATE
+  }
+
+  private update(): void {
+    // TODO: UPDATE
+    this.routeBack();
   }
 
+  public compare(o1: any, o2: any): boolean {
+    return o1 === o2;
+  }
+
+  routeBack(): void {
+    this.location.back();
+  }
 }
diff --git a/src/app/admin/api-key/api-key-list/api-key-list.component.html b/src/app/admin/api-key/api-key-list/api-key-list.component.html
index e696a106..0e5f1308 100644
--- a/src/app/admin/api-key/api-key-list/api-key-list.component.html
+++ b/src/app/admin/api-key/api-key-list/api-key-list.component.html
@@ -4,7 +4,7 @@
   <div class="row">
       <div class="col-12">
           <div class="jumbotron--table">
-              <app-api-key-table></app-api-key-table>
+              <app-api-key-table [organisationId]="organisationId"></app-api-key-table>
           </div>
       </div>
   </div>
diff --git a/src/app/admin/api-key/api-key-list/api-key-list.component.ts b/src/app/admin/api-key/api-key-list/api-key-list.component.ts
index 84781d31..f422eac1 100644
--- a/src/app/admin/api-key/api-key-list/api-key-list.component.ts
+++ b/src/app/admin/api-key/api-key-list/api-key-list.component.ts
@@ -1,15 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
 
 @Component({
   selector: 'app-api-key-list',
   templateUrl: './api-key-list.component.html',
-  styleUrls: ['./api-key-list.component.scss']
+  styleUrls: ['./api-key-list.component.scss'],
 })
 export class ApiKeyListComponent implements OnInit {
+  @Input() organisationId: number;
 
-  constructor() { }
+  constructor(
+    public translate: TranslateService,
+    private titleService: Title,
+    private globalService: SharedVariableService
+  ) {
+    translate.use('da');
+  }
 
   ngOnInit(): void {
+    this.translate.get(['TITLE.API-KEY']).subscribe((translations) => {
+      this.titleService.setTitle(translations['TITLE.API-KEY']);
+    });
+    this.organisationId = this.globalService.getSelectedOrganisationId();
   }
-
 }
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
index 554c63e7..e2769aae 100644
--- a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
@@ -1 +1,98 @@
-<p>api-key-table works!</p>
+<div class="mat-elevation-z8">
+  <div class="loading-shade" *ngIf="isLoadingResults">
+    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
+  </div>
+  <table
+    mat-table
+    [dataSource]="data"
+    matSort
+    matSortActive="name"
+    matSortDirection="asc"
+    matSortDisableClear
+  >
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        {{ 'API-KEY.NAME' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <!-- <a *ngIf="canAccess(element); else justText"
+              (click)="routeToPermissions(element)"
+                  routerLinkActive="active" class="permission-link">
+              {{element.name}}
+              </a> -->
+        <!-- <ng-template #justText> -->
+        {{ element.name }}
+        <!-- </ng-template> -->
+      </td>
+    </ng-container>
+
+    <!-- User Groups Column -->
+    <ng-container matColumnDef="permissions">
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'API-KEY.PERMISSIONS' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <div *ngIf="element.users; else noUsers">
+          {{ element.users.length }}
+        </div>
+        <ng-template #noUsers>{{ 'NoUsersAdded' | translate }}</ng-template>
+      </td>
+    </ng-container>
+
+    <!-- Key Column -->
+    <ng-container matColumnDef="key">
+      <th mat-header-cell *matHeaderCellDef>
+        {{ 'API-KEY.KEY' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let element">
+        {{ element.key }}
+      </td>
+    </ng-container>
+
+    <!-- Menu Column -->
+    <ng-container matColumnDef="menu">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <div class="dropdown" *ngIf="canAccess(element)">
+          <a
+            href="#"
+            role="button"
+            id="tableRowDropdown-{{ element.id }}"
+            class="applicationRow__edit dropdown-toggle"
+            data-toggle="dropdown"
+            aria-expanded="false"
+            [attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
+          ></a>
+          <ul
+            class="dropdown-menu dropdown-menu--table"
+            attr.aria-labelledby="tableRowDropdown-{{ element.id }}"
+          >
+            <li class="dropdown-item">
+              <a
+                [routerLink]="['/admin/api-key', element.id, 'edit-api-key']"
+                routerLinkActive="active"
+                >{{ 'API-KEY.TABLE-ROW.EDIT' | translate }}
+              </a>
+            </li>
+            <li class="dropdown-item">
+              <a (click)="deleteApiKey(element.id)" [routerLink]=""
+                >{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+  <mat-paginator
+    [pageSizeOptions]="[5, 10, 20]"
+    [pageSize]="pageSize"
+    [length]="resultsLength"
+    showFirstLastButtons
+  >
+  </mat-paginator>
+</div>
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
index 30853efb..c8ef2dd5 100644
--- a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
@@ -1,15 +1,122 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { Router } from '@angular/router';
+import { environment } from '@environments/environment';
+import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
+import { MeService } from '@shared/services/me.service';
+import { merge, Observable, of } from 'rxjs';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
+import { ApiKeyGetManyResponse, ApiKeyResponse } from '../../api-key.model';
+import { ApiKeyService } from '../../api-key.service';
 
 @Component({
   selector: 'app-api-key-table',
   templateUrl: './api-key-table.component.html',
-  styleUrls: ['./api-key-table.component.scss']
+  styleUrls: ['./api-key-table.component.scss'],
 })
-export class ApiKeyTableComponent implements OnInit {
+export class ApiKeyTableComponent implements AfterViewInit {
+  @Input() organisationId: number;
+  displayedColumns: string[] = ['name', 'permissions', 'key', 'menu'];
+  data: ApiKeyResponse[] = [
+    // { id: 1, name: 'Abcd', key: 'sdafsegjhkjtrewr34252t$25!', permissions: [] },
+    // {
+    //   id: 2,
+    //   name: 'DoofApi',
+    //   key: 'jasdhjlw8o3-4u2qeuqnwodasd-521529f',
+    //   permissions: [],
+    // },
+  ];
+  isLoadingResults = true;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  resultsLength = 0;
+  public pageSize = environment.tablePageSize;
 
-  constructor() { }
+  constructor(
+    private meService: MeService,
+    private router: Router,
+    private apiKeyService: ApiKeyService,
+    private deleteDialogService: DeleteDialogService
+  ) {}
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+    // If the user changes the sort order, reset back to the first page.
+    this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
+
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        startWith({}),
+        switchMap(() => {
+          this.isLoadingResults = true;
+          return this.getApiKeysByOrganisationId(
+            this.sort.active,
+            this.sort.direction
+          );
+        }),
+        map((data) => {
+          // Flip flag to show that loading has finished.
+          this.isLoadingResults = false;
+          this.resultsLength = data.count;
+
+          return data.data;
+        }),
+        catchError(() => {
+          this.isLoadingResults = false;
+          return of([]);
+        })
+      )
+      .subscribe((data) => (this.data = data));
+  }
+
+  getApiKeysByOrganisationId(
+    orderByColumn: string,
+    orderByDirection: string
+  ): Observable<ApiKeyGetManyResponse> {
+    return this.apiKeyService.getApiKeys(
+      this.paginator.pageSize,
+      this.paginator.pageIndex * this.paginator.pageSize,
+      orderByColumn,
+      orderByDirection,
+      null,
+      this.organisationId
+    );
+  }
+
+  canAccess(element: ApiKeyResponse) {
+    // if (element.type === PermissionType.GlobalAdmin) {
+    //   return this.meService.hasGlobalAdmin();
+    // }
+    // return element.permissions?.some(
+    //   (p) =>
+    //     p.organization &&
+    //     this.meService.hasAdminAccessInTargetOrganization(p.organization.id)
+    // );
+    return this.meService.hasAdminAccessInTargetOrganization(
+      this.organisationId
+    );
   }
 
+  routeToPermissions(element: any) {
+    this.router.navigate(['admin/api-key', element.id]);
+  }
+
+  deleteApiKey(id: number) {
+    this.deleteDialogService.showSimpleDialog().subscribe((response) => {
+      if (response) {
+        this.apiKeyService.delete(id).subscribe((response) => {
+          if (response.ok && response.body.affected > 0) {
+            this.refresh();
+          }
+        });
+      }
+    });
+  }
+
+  private refresh() {
+    const pageEvent = new PageEvent();
+    pageEvent.pageIndex = this.paginator.pageIndex;
+    pageEvent.pageSize = this.paginator.pageSize;
+    this.paginator.page.emit(pageEvent);
+  }
 }
diff --git a/src/app/admin/api-key/api-key.model.ts b/src/app/admin/api-key/api-key.model.ts
new file mode 100644
index 00000000..050a799b
--- /dev/null
+++ b/src/app/admin/api-key/api-key.model.ts
@@ -0,0 +1,23 @@
+import { PermissionResponse } from '../permission/permission.model';
+
+export class ApiKeyRequest {
+  id: number;
+  name: string;
+  permissions?: PermissionResponse[];
+}
+
+export interface ApiKeyResponse {
+  id: number;
+  name: string;
+  key: string;
+  permissions?: PermissionResponse[];
+  createdBy: number;
+  updatedBy: number;
+  createdByName: string;
+  updatedByName: string;
+}
+
+export interface ApiKeyGetManyResponse {
+  data: ApiKeyResponse[];
+  count: number;
+}
diff --git a/src/app/admin/api-key/api-key.service.ts b/src/app/admin/api-key/api-key.service.ts
new file mode 100644
index 00000000..77db1c4c
--- /dev/null
+++ b/src/app/admin/api-key/api-key.service.ts
@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import { RestService } from '@shared/services/rest.service';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { UserMinimalService } from '../users/user-minimal.service';
+import {
+  ApiKeyGetManyResponse,
+  ApiKeyRequest,
+  ApiKeyResponse,
+} from './api-key.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ApiKeyService {
+  endpoint = 'api-key';
+  constructor(
+    private restService: RestService,
+    private userMinimalService: UserMinimalService
+  ) {}
+
+  create(body: ApiKeyRequest): Observable<ApiKeyResponse> {
+    return this.restService.post(this.endpoint, body, {
+      observe: 'response',
+    });
+  }
+
+  update(body: ApiKeyRequest, id: number): Observable<ApiKeyResponse> {
+    return this.restService.put(this.endpoint, body, id, {
+      observe: 'response',
+    });
+  }
+
+  get(id: number): Observable<ApiKeyResponse> {
+    return this.restService.get(this.endpoint, {}, id).pipe(
+      map((response: ApiKeyResponse) => {
+        response.createdByName = this.userMinimalService.getUserNameFrom(
+          response.createdBy
+        );
+        response.updatedByName = this.userMinimalService.getUserNameFrom(
+          response.updatedBy
+        );
+        return response;
+      })
+    );
+  }
+
+  getApiKeys(
+    limit: number = 1000,
+    offset: number = 0,
+    orderByColumn?: string,
+    orderByDirection?: string,
+    userId?: number,
+    organisationId?: number
+  ): Observable<ApiKeyGetManyResponse> {
+    if (userId) {
+      return this.restService.get(this.endpoint, {
+        limit,
+        offset,
+        orderOn: orderByColumn,
+        sort: orderByDirection,
+        userId,
+      });
+    } else if (organisationId) {
+      return this.restService.get(this.endpoint, {
+        limit,
+        offset,
+        orderOn: orderByColumn,
+        sort: orderByDirection,
+        organisationId,
+      });
+    } else {
+      return this.restService.get(this.endpoint, {
+        limit,
+        offset,
+        orderOn: orderByColumn,
+        sort: orderByDirection,
+      });
+    }
+  }
+
+  delete(id: number) {
+    return this.restService.delete(this.endpoint, id);
+  }
+}
diff --git a/src/app/admin/organisation/organisation.model.ts b/src/app/admin/organisation/organisation.model.ts
index d3961220..f07c0a52 100644
--- a/src/app/admin/organisation/organisation.model.ts
+++ b/src/app/admin/organisation/organisation.model.ts
@@ -1,5 +1,6 @@
 import { Application } from '@applications/application.model';
 import { PayloadDecoder } from '../../payload-decoder/payload-decoder.model';
+import { PermissionResponse } from '../permission/permission.model';
 
 export class Organisation {
   id?: number;
@@ -18,8 +19,7 @@ export interface OrganisationResponse {
 
   payloadDecoders: PayloadDecoder[];
   applications: Application[];
-  // TODO: This.
-  permissions: any[];
+  permissions: PermissionResponse[];
 }
 
 export interface OrganisationGetManyResponse {
@@ -30,4 +30,4 @@ export interface OrganisationGetManyResponse {
 export interface OrganisationGetMinimalResponse {
   data: Organisation[];
   count: number;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/permission/permission-list/permission-list.component.ts b/src/app/admin/permission/permission-list/permission-list.component.ts
index cec1432d..7559e47a 100644
--- a/src/app/admin/permission/permission-list/permission-list.component.ts
+++ b/src/app/admin/permission/permission-list/permission-list.component.ts
@@ -49,7 +49,6 @@ export class PermissionListComponent implements OnInit, OnChanges {
   }
 
   deletePermission(id: number) {
-    console.log("list")
     this.permissionService.deletePermission(id).subscribe((response) => {
       if (response.ok && response.body.affected > 0) {
         this.getPermissions();
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
index d39792d8..5919fe40 100644
--- a/src/assets/i18n/da.json
+++ b/src/assets/i18n/da.json
@@ -383,7 +383,8 @@
     "EDIT-SIGFOX-GROUPS": "Redigér Sigfox grupper",
     "EDIT-SIGFOX-GROUP": "Redigér Sigfox gruppe",
     "EDIT-USERS": "Redigér bruger",
-    "EDIT-DEVICE-PROFILE": "Redigér device profil"
+    "EDIT-DEVICE-PROFILE": "Redigér device profil",
+    "EDIT-API-KEY": "Redigér API nøgle"
   },
   "QUESTION": {
     "CREATE-IOT-DEVICE": "IoT-enhed",
@@ -507,6 +508,9 @@
       "SELECT-ENERGYLIMITATIONCLASS": "Vælg energibegrænsningsklassen (energyLimitationClass)",
       "SELECT-SUPPORTEDPROTOCOL": "Vælg understøttede protokoller (supportedProtocol)",
       "FIWARE-LINK-TEXT": "Denne data model er adopteret fra Fiware og følger ETSI standarden"
+    },
+    "PERMISSION": {
+      "SELECT-PERMISSION": "Vælg brugergruppe"
     }
   },
   "QUESTION-LORA-GATEWAY": {
@@ -824,7 +828,8 @@
     "DATATARGET": "OS2IoT - Datatarget",
     "BULKIMPORT": "OS2IoT - Bulk import",
     "IOTDEVICE": "OS2IoT - IoT enhed",
-    "FRONTPAGE": "OS2IoT - Forside"
+    "FRONTPAGE": "OS2IoT - Forside",
+    "API-KEY": "OS2IoT - API nøgler"
 
   },
   "PAGINATOR": {
@@ -842,5 +847,23 @@
   "Forbidden resource": "Du har ikke rettigheder til at foretage denne handling",
   "GENERIC_HTTP": "Generisk HTTP",
   "LORAWAN": "LoRaWAN",
-  "SIGFOX": "Sigfox"
+  "SIGFOX": "Sigfox",
+  "API-KEY": {
+    "NAME": "Navn",
+    "PERMISSIONS": "Brugergrupper",
+    "KEY": "Nøgle",
+    "DETAIL": {},
+    "EDIT": {
+      "NAME": "Indtast nøglens navn",
+      "NAME-PLACEHOLDER": "Indtast nøglens navn",
+      "CANCEL": "Annuller",
+      "SAVE": "Gem nøgle",
+      "CREATE-NEW-API-KEY": "Opret nøgle"
+    },
+    "TABLE-ROW": {
+      "EDIT": "Redigér",
+      "DELETE": "Slet"
+    }
+  },
+  "NoUsersAdded": "Ingen brugergrupper er tilføjet"
 }
diff --git a/tsconfig.json b/tsconfig.json
index fc6b17bc..7eecb11c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,5 +30,6 @@
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
+    // "strictTemplates": true // Highly recommended for type-safety in html. Apply if there's ever time to fix the 30+ errors that appear
   }
 }

From ff1ecf9414b24a6f1209a59d4d158c9bdf624c97 Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Wed, 1 Dec 2021 17:37:32 +0100
Subject: [PATCH 3/7] Api key management works

---
 .../api-key-edit/api-key-edit.component.html  |  1 +
 .../api-key-edit/api-key-edit.component.ts    | 84 +++++++++++++++----
 .../api-key-list/api-key-list.component.html  | 16 ++--
 .../api-key-table.component.html              | 21 ++---
 .../api-key-table/api-key-table.component.ts  | 25 ++----
 .../organisation-dropdown.component.html      | 14 ++--
 src/app/shared/pipes/pipes.module.ts          |  3 +
 .../unique-permission-organizations.pipe.ts   | 19 +++++
 src/assets/i18n/da.json                       |  4 +-
 tslint.json                                   |  2 +-
 10 files changed, 130 insertions(+), 59 deletions(-)
 create mode 100644 src/app/shared/pipes/unique-permission-organizations.pipe.ts

diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.html b/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
index 8c477680..268d6972 100644
--- a/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.html
@@ -43,6 +43,7 @@
         name="permissions"
         [compareWith]="compare"
         [(ngModel)]="apiKeyRequest.permissions"
+        [multiple]="true"
       >
         <mat-option
           *ngFor="let permission of permissions"
diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
index 1de65ecc..9a209db2 100644
--- a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
@@ -1,9 +1,13 @@
 import { Location } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PermissionResponse } from '@app/admin/permission/permission.model';
+import { PermissionService } from '@app/admin/permission/permission.service';
 import { TranslateService } from '@ngx-translate/core';
+import { ErrorMessageService } from '@shared/error-message.service';
 import { BackButton } from '@shared/models/back-button.model';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
 import { ApiKeyRequest } from '../api-key.model';
 import { ApiKeyService } from '../api-key.service';
 
@@ -20,24 +24,30 @@ export class ApiKeyEditComponent implements OnInit {
   };
   public title = '';
   public submitButton = '';
-  private apiKeyId: number;
+  private id: number;
   public errorMessage: string;
   public errorMessages: string[];
   public errorFields: string[];
   public formFailedSubmit = false;
   public isEditMode = false;
   public permissions: PermissionResponse[] = [];
+  private organizationId: number;
 
   constructor(
     private translate: TranslateService,
     private route: ActivatedRoute,
     private location: Location,
-    private apiKeyService: ApiKeyService
+    private apiKeyService: ApiKeyService,
+    private permissionService: PermissionService,
+    private errorMessageService: ErrorMessageService,
+    private sharedVariableService: SharedVariableService
   ) {
     translate.use('da');
   }
 
   ngOnInit(): void {
+    this.getPermissions();
+    this.translate.use('da');
     this.translate
       .get(['NAV.API-KEY', 'FORM.EDIT-API-KEY', 'API-KEY.EDIT.SAVE'])
       .subscribe((translations) => {
@@ -46,35 +56,79 @@ export class ApiKeyEditComponent implements OnInit {
         this.submitButton = translations['API-KEY.EDIT.SAVE'];
       });
 
-    this.apiKeyId = +this.route.snapshot.paramMap.get('api-key-id');
+    this.id = +this.route.snapshot.paramMap.get('api-key-id');
+    this.organizationId = this.sharedVariableService.getSelectedOrganisationId();
 
-    if (this.apiKeyId > 0) {
-      // TODO: Fetch current api key
-      this.isEditMode = true;
-    }
+    // if (this.id > 0) {
+    //   // TODO: Fetch current api key
+    //   this.getApiKey(this.id);
+    //   this.isEditMode = true;
+    // }
+  }
+
+  // private getApiKey(id: number) {
+  //   this.apiKeyService.get(id).subscribe(
+  //     (response) => {
+  //       console.log(response);
+  //       this.apiKeyRequest.id = response.id;
+  //       this.apiKeyRequest.name = response.name;
+  //       this.apiKeyRequest.permissions = response.permissions;
+  //     },
+  //     (error: HttpErrorResponse) => {
+  //       this.showError(error);
+  //     }
+  //   );
+  // }
+
+  private getPermissions() {
+    this.permissionService
+      .getPermissions(
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        this.organizationId
+      )
+      .subscribe(
+        (permissions) => {
+          this.permissions = permissions.data.filter(
+            (x) => x.organization?.id === this.organizationId
+          );
+        },
+        (error: HttpErrorResponse) => {
+          this.showError(error);
+        }
+      );
   }
 
   onSubmit(): void {
-    if (this.apiKeyId) {
-      this.update();
-    } else {
-      this.create();
-    }
+    this.id ? this.update() : this.create();
   }
 
   private create(): void {
-    // TODO: CREATE
+    this.apiKeyService.create(this.apiKeyRequest).subscribe(
+      () => this.routeBack(),
+      (err) => this.showError(err)
+    );
   }
 
   private update(): void {
-    // TODO: UPDATE
-    this.routeBack();
+    this.apiKeyService
+      .update(this.apiKeyRequest, this.id)
+      .subscribe(this.routeBack, this.showError);
   }
 
   public compare(o1: any, o2: any): boolean {
     return o1 === o2;
   }
 
+  private showError(err: HttpErrorResponse) {
+    const result = this.errorMessageService.handleErrorMessageWithFields(err);
+    this.errorFields = result.errorFields;
+    this.errorMessages = result.errorMessages;
+  }
+
   routeBack(): void {
     this.location.back();
   }
diff --git a/src/app/admin/api-key/api-key-list/api-key-list.component.html b/src/app/admin/api-key/api-key-list/api-key-list.component.html
index 0e5f1308..8ecf306e 100644
--- a/src/app/admin/api-key/api-key-list/api-key-list.component.html
+++ b/src/app/admin/api-key/api-key-list/api-key-list.component.html
@@ -1,11 +1,17 @@
-<app-top-bar [title]="'NAV.API-KEY' | translate">
+<app-top-bar
+  [title]="'NAV.API-KEY' | translate"
+  [ctaLabel]="'API-KEY.CREATE-NEW-API-KEY' | translate"
+  [ctaRouterLink]="'new-api-key'"
+>
 </app-top-bar>
 <div class="container-fluid">
   <div class="row">
-      <div class="col-12">
-          <div class="jumbotron--table">
-              <app-api-key-table [organisationId]="organisationId"></app-api-key-table>
-          </div>
+    <div class="col-12">
+      <div class="jumbotron--table">
+        <app-api-key-table
+          [organisationId]="organisationId"
+        ></app-api-key-table>
       </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
index e2769aae..92109f40 100644
--- a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
@@ -16,14 +16,7 @@
         {{ 'API-KEY.NAME' | translate }}
       </th>
       <td mat-cell *matCellDef="let element">
-        <!-- <a *ngIf="canAccess(element); else justText"
-              (click)="routeToPermissions(element)"
-                  routerLinkActive="active" class="permission-link">
-              {{element.name}}
-              </a> -->
-        <!-- <ng-template #justText> -->
         {{ element.name }}
-        <!-- </ng-template> -->
       </td>
     </ng-container>
 
@@ -33,9 +26,12 @@
         {{ 'API-KEY.PERMISSIONS' | translate }}
       </th>
       <td mat-cell *matCellDef="let element">
-        <div *ngIf="element.users; else noUsers">
-          {{ element.users.length }}
-        </div>
+        <ng-container *ngIf="element.permissions; else noUsers">
+          <ng-container *ngFor="let pm of element.permissions">
+            <span>{{ pm.name }}</span>
+            <br />
+          </ng-container>
+        </ng-container>
         <ng-template #noUsers>{{ 'NoUsersAdded' | translate }}</ng-template>
       </td>
     </ng-container>
@@ -68,13 +64,14 @@
             class="dropdown-menu dropdown-menu--table"
             attr.aria-labelledby="tableRowDropdown-{{ element.id }}"
           >
-            <li class="dropdown-item">
+            <!-- TODO: Delete. Edit is not part of estimate. Since it's only one option, use a delete button instead -->
+            <!-- <li class="dropdown-item">
               <a
                 [routerLink]="['/admin/api-key', element.id, 'edit-api-key']"
                 routerLinkActive="active"
                 >{{ 'API-KEY.TABLE-ROW.EDIT' | translate }}
               </a>
-            </li>
+            </li> -->
             <li class="dropdown-item">
               <a (click)="deleteApiKey(element.id)" [routerLink]=""
                 >{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
index c8ef2dd5..208d9c8e 100644
--- a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts
@@ -17,16 +17,13 @@ import { ApiKeyService } from '../../api-key.service';
 })
 export class ApiKeyTableComponent implements AfterViewInit {
   @Input() organisationId: number;
-  displayedColumns: string[] = ['name', 'permissions', 'key', 'menu'];
-  data: ApiKeyResponse[] = [
-    // { id: 1, name: 'Abcd', key: 'sdafsegjhkjtrewr34252t$25!', permissions: [] },
-    // {
-    //   id: 2,
-    //   name: 'DoofApi',
-    //   key: 'jasdhjlw8o3-4u2qeuqnwodasd-521529f',
-    //   permissions: [],
-    // },
+  displayedColumns: string[] = [
+    'name',
+    'permissions',
+    'key',
+    'menu',
   ];
+  data: ApiKeyResponse[] = [];
   isLoadingResults = true;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -83,15 +80,7 @@ export class ApiKeyTableComponent implements AfterViewInit {
     );
   }
 
-  canAccess(element: ApiKeyResponse) {
-    // if (element.type === PermissionType.GlobalAdmin) {
-    //   return this.meService.hasGlobalAdmin();
-    // }
-    // return element.permissions?.some(
-    //   (p) =>
-    //     p.organization &&
-    //     this.meService.hasAdminAccessInTargetOrganization(p.organization.id)
-    // );
+  canAccess(_element: ApiKeyResponse) {
     return this.meService.hasAdminAccessInTargetOrganization(
       this.organisationId
     );
diff --git a/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html b/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html
index a38ae7b0..f6a9a123 100644
--- a/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html
+++ b/src/app/navbar/organisation-dropdown/organisation-dropdown.component.html
@@ -39,12 +39,12 @@
             </a>
             <fa-icon [icon]="faIdBadge" class="navbar-icon"></fa-icon>
         </li>
-        <li class="nav-item">
-            <a routerLink="/admin/api-key" routerLinkActive="active"
-                class="nav-link pl-5 position-relative rounded">
-                {{'NAV.API-KEY' | translate}}
-            </a>
-            <fa-icon [icon]="faKey" class="navbar-icon"></fa-icon>
-        </li>
     </div>
+    <li *ngIf="user && (isOrgAdmin || isGlobalAdmin)" class="nav-item">
+        <a routerLink="/admin/api-key" routerLinkActive="active"
+            class="nav-link pl-5 position-relative rounded">
+            {{'NAV.API-KEY' | translate}}
+        </a>
+        <fa-icon [icon]="faKey" class="navbar-icon"></fa-icon>
+    </li>
 </ul>
diff --git a/src/app/shared/pipes/pipes.module.ts b/src/app/shared/pipes/pipes.module.ts
index a3e26445..cd9aa58a 100644
--- a/src/app/shared/pipes/pipes.module.ts
+++ b/src/app/shared/pipes/pipes.module.ts
@@ -5,6 +5,7 @@ import { ActiveDeactivePipe } from './activeDeactive.pipe';
 import { isGlobalAdminPipe } from './is-global-admin.pipe';
 import { CreatedUpdatedByPipe } from './created-updated-by.pipe';
 import { CustomDatePipe, CustomTableDatePipe } from './custom-date.pipe';
+import { UniquePermissionOrganizationsPipe } from './unique-permission-organizations.pipe';
 
 @NgModule({
     declarations: [
@@ -14,6 +15,7 @@ import { CustomDatePipe, CustomTableDatePipe } from './custom-date.pipe';
         CustomDatePipe,
         CustomTableDatePipe,
         CreatedUpdatedByPipe,
+        UniquePermissionOrganizationsPipe,
     ],
     imports: [
         CommonModule
@@ -25,6 +27,7 @@ import { CustomDatePipe, CustomTableDatePipe } from './custom-date.pipe';
         CustomDatePipe,
         CustomTableDatePipe,
         CreatedUpdatedByPipe,
+        UniquePermissionOrganizationsPipe,
     ]
 })
 export class PipesModule { }
diff --git a/src/app/shared/pipes/unique-permission-organizations.pipe.ts b/src/app/shared/pipes/unique-permission-organizations.pipe.ts
new file mode 100644
index 00000000..5e646d71
--- /dev/null
+++ b/src/app/shared/pipes/unique-permission-organizations.pipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
+
+@Pipe({
+  name: 'uniquePermissionOrganizations',
+})
+export class UniquePermissionOrganizationsPipe implements PipeTransform {
+  transform(
+    value: PermissionResponse[],
+    ..._: unknown[]
+  ): PermissionResponse[] {
+    // Ensure that no element appears twice. Orders it so that the duplicate (second match) takes priority
+    const uniqueArr = Array.from(
+      new Map(value.map((item) => [item.organization?.id, item])).values()
+    );
+
+    return uniqueArr;
+  }
+}
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
index 5919fe40..fd0e912f 100644
--- a/src/assets/i18n/da.json
+++ b/src/assets/i18n/da.json
@@ -850,15 +850,17 @@
   "SIGFOX": "Sigfox",
   "API-KEY": {
     "NAME": "Navn",
+    "ORGANIZATION": "Organisation",
     "PERMISSIONS": "Brugergrupper",
     "KEY": "Nøgle",
+    "CREATE-NEW-API-KEY": "Opret ny nøgle",
     "DETAIL": {},
     "EDIT": {
       "NAME": "Indtast nøglens navn",
       "NAME-PLACEHOLDER": "Indtast nøglens navn",
       "CANCEL": "Annuller",
       "SAVE": "Gem nøgle",
-      "CREATE-NEW-API-KEY": "Opret nøgle"
+      "CREATE-API-KEY": "Opret nøgle"
     },
     "TABLE-ROW": {
       "EDIT": "Redigér",
diff --git a/tslint.json b/tslint.json
index 4f4dff57..b35a3d4e 100644
--- a/tslint.json
+++ b/tslint.json
@@ -129,7 +129,7 @@
         "use-lifecycle-interface": true,
         "use-pipe-transform-interface": true,
         "variable-name": {
-            "options": ["ban-keywords", "check-format", "allow-pascal-case"]
+            "options": ["ban-keywords", "check-format", "allow-pascal-case", "allow-leading-underscore"]
         },
         "whitespace": {
             "options": [

From a778291493091b0c102fe8cc61d6d236f8589abf Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Wed, 1 Dec 2021 17:43:03 +0100
Subject: [PATCH 4/7] Cleanup after api key

---
 .../api-key-edit/api-key-edit.component.ts    | 31 +---------------
 .../api-key-table.component.html              | 35 ++++---------------
 src/app/admin/api-key/api-key.service.ts      |  6 ----
 3 files changed, 7 insertions(+), 65 deletions(-)

diff --git a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
index 9a209db2..015f7852 100644
--- a/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
+++ b/src/app/admin/api-key/api-key-edit/api-key-edit.component.ts
@@ -24,12 +24,10 @@ export class ApiKeyEditComponent implements OnInit {
   };
   public title = '';
   public submitButton = '';
-  private id: number;
   public errorMessage: string;
   public errorMessages: string[];
   public errorFields: string[];
   public formFailedSubmit = false;
-  public isEditMode = false;
   public permissions: PermissionResponse[] = [];
   private organizationId: number;
 
@@ -56,30 +54,9 @@ export class ApiKeyEditComponent implements OnInit {
         this.submitButton = translations['API-KEY.EDIT.SAVE'];
       });
 
-    this.id = +this.route.snapshot.paramMap.get('api-key-id');
     this.organizationId = this.sharedVariableService.getSelectedOrganisationId();
-
-    // if (this.id > 0) {
-    //   // TODO: Fetch current api key
-    //   this.getApiKey(this.id);
-    //   this.isEditMode = true;
-    // }
   }
 
-  // private getApiKey(id: number) {
-  //   this.apiKeyService.get(id).subscribe(
-  //     (response) => {
-  //       console.log(response);
-  //       this.apiKeyRequest.id = response.id;
-  //       this.apiKeyRequest.name = response.name;
-  //       this.apiKeyRequest.permissions = response.permissions;
-  //     },
-  //     (error: HttpErrorResponse) => {
-  //       this.showError(error);
-  //     }
-  //   );
-  // }
-
   private getPermissions() {
     this.permissionService
       .getPermissions(
@@ -103,7 +80,7 @@ export class ApiKeyEditComponent implements OnInit {
   }
 
   onSubmit(): void {
-    this.id ? this.update() : this.create();
+    this.create();
   }
 
   private create(): void {
@@ -113,12 +90,6 @@ export class ApiKeyEditComponent implements OnInit {
     );
   }
 
-  private update(): void {
-    this.apiKeyService
-      .update(this.apiKeyRequest, this.id)
-      .subscribe(this.routeBack, this.showError);
-  }
-
   public compare(o1: any, o2: any): boolean {
     return o1 === o2;
   }
diff --git a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
index 92109f40..e52194d0 100644
--- a/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
+++ b/src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html
@@ -50,35 +50,12 @@
     <ng-container matColumnDef="menu">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let element">
-        <div class="dropdown" *ngIf="canAccess(element)">
-          <a
-            href="#"
-            role="button"
-            id="tableRowDropdown-{{ element.id }}"
-            class="applicationRow__edit dropdown-toggle"
-            data-toggle="dropdown"
-            aria-expanded="false"
-            [attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
-          ></a>
-          <ul
-            class="dropdown-menu dropdown-menu--table"
-            attr.aria-labelledby="tableRowDropdown-{{ element.id }}"
-          >
-            <!-- TODO: Delete. Edit is not part of estimate. Since it's only one option, use a delete button instead -->
-            <!-- <li class="dropdown-item">
-              <a
-                [routerLink]="['/admin/api-key', element.id, 'edit-api-key']"
-                routerLinkActive="active"
-                >{{ 'API-KEY.TABLE-ROW.EDIT' | translate }}
-              </a>
-            </li> -->
-            <li class="dropdown-item">
-              <a (click)="deleteApiKey(element.id)" [routerLink]=""
-                >{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
-              </a>
-            </li>
-          </ul>
-        </div>
+        <a
+          *ngIf="canAccess(element)"
+          (click)="deleteApiKey(element.id)"
+          [routerLink]=""
+          >{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
+        </a>
       </td>
     </ng-container>
 
diff --git a/src/app/admin/api-key/api-key.service.ts b/src/app/admin/api-key/api-key.service.ts
index 77db1c4c..91a6dc2c 100644
--- a/src/app/admin/api-key/api-key.service.ts
+++ b/src/app/admin/api-key/api-key.service.ts
@@ -25,12 +25,6 @@ export class ApiKeyService {
     });
   }
 
-  update(body: ApiKeyRequest, id: number): Observable<ApiKeyResponse> {
-    return this.restService.put(this.endpoint, body, id, {
-      observe: 'response',
-    });
-  }
-
   get(id: number): Observable<ApiKeyResponse> {
     return this.restService.get(this.endpoint, {}, id).pipe(
       map((response: ApiKeyResponse) => {

From 93dea8cbe83316393f361547cc4ab67dba832eab Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Mon, 24 Jan 2022 13:27:09 +0100
Subject: [PATCH 5/7] Cleanup

---
 src/app/admin/admin-routing.module.ts             |  2 --
 src/app/admin/admin.module.ts                     |  2 --
 .../api-key-detail/api-key-detail.component.html  |  1 -
 .../api-key-detail/api-key-detail.component.scss  |  0
 .../api-key-detail/api-key-detail.component.ts    | 15 ---------------
 5 files changed, 20 deletions(-)
 delete mode 100644 src/app/admin/api-key/api-key-detail/api-key-detail.component.html
 delete mode 100644 src/app/admin/api-key/api-key-detail/api-key-detail.component.scss
 delete mode 100644 src/app/admin/api-key/api-key-detail/api-key-detail.component.ts

diff --git a/src/app/admin/admin-routing.module.ts b/src/app/admin/admin-routing.module.ts
index c2c7250c..e5343681 100644
--- a/src/app/admin/admin-routing.module.ts
+++ b/src/app/admin/admin-routing.module.ts
@@ -15,7 +15,6 @@ import { UsersComponent } from './users/users.component';
 import { ApiKeyComponent } from './api-key/api-key.component';
 import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
 import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
-import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.component';
 
 
 const adminRoutes: Routes = [
@@ -54,7 +53,6 @@ const adminRoutes: Routes = [
         children: [
             { path: '', component: ApiKeyListComponent },
             { path: 'new-api-key', component: ApiKeyEditComponent },
-            { path: ':api-key-id', component: ApiKeyDetailComponent },
             {
                 path: ':api-key-id/edit-api-key',
                 component: ApiKeyEditComponent,
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 51bb4216..93210070 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -32,7 +32,6 @@ import { ApiKeyComponent } from './api-key/api-key.component';
 import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
 import { ApiKeyTableComponent } from './api-key/api-key-list/api-key-table/api-key-table.component';
 import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
-import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.component';
 
 @NgModule({
   declarations: [
@@ -55,7 +54,6 @@ import { ApiKeyDetailComponent } from './api-key/api-key-detail/api-key-detail.c
     ApiKeyListComponent,
     ApiKeyTableComponent,
     ApiKeyEditComponent,
-    ApiKeyDetailComponent,
   ],
   imports: [
     AdminRoutingModule,
diff --git a/src/app/admin/api-key/api-key-detail/api-key-detail.component.html b/src/app/admin/api-key/api-key-detail/api-key-detail.component.html
deleted file mode 100644
index 903c1911..00000000
--- a/src/app/admin/api-key/api-key-detail/api-key-detail.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>api-key-detail works!</p>
diff --git a/src/app/admin/api-key/api-key-detail/api-key-detail.component.scss b/src/app/admin/api-key/api-key-detail/api-key-detail.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/admin/api-key/api-key-detail/api-key-detail.component.ts b/src/app/admin/api-key/api-key-detail/api-key-detail.component.ts
deleted file mode 100644
index 25bc4048..00000000
--- a/src/app/admin/api-key/api-key-detail/api-key-detail.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-api-key-detail',
-  templateUrl: './api-key-detail.component.html',
-  styleUrls: ['./api-key-detail.component.scss']
-})
-export class ApiKeyDetailComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

From 0fb18cbc82d374f4734f42c7ef48b1caaf8116ec Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Mon, 24 Jan 2022 13:31:36 +0100
Subject: [PATCH 6/7] Remove unique permissions pipe

---
 src/app/shared/pipes/pipes.module.ts          |  3 ---
 .../unique-permission-organizations.pipe.ts   | 19 -------------------
 tsconfig.json                                 |  1 -
 3 files changed, 23 deletions(-)
 delete mode 100644 src/app/shared/pipes/unique-permission-organizations.pipe.ts

diff --git a/src/app/shared/pipes/pipes.module.ts b/src/app/shared/pipes/pipes.module.ts
index 997ccc8b..c5aacc28 100644
--- a/src/app/shared/pipes/pipes.module.ts
+++ b/src/app/shared/pipes/pipes.module.ts
@@ -6,7 +6,6 @@ import { isGlobalAdminPipe } from './is-global-admin.pipe';
 import { CreatedUpdatedByPipe } from './created-updated-by.pipe';
 import { CustomDatePipe, CustomTableDatePipe } from './custom-date.pipe';
 import { FilterDevicesPipe } from './filter-devices.pipe';
-import { UniquePermissionOrganizationsPipe } from './unique-permission-organizations.pipe';
 
 @NgModule({
   declarations: [
@@ -17,7 +16,6 @@ import { UniquePermissionOrganizationsPipe } from './unique-permission-organizat
     CustomTableDatePipe,
     CreatedUpdatedByPipe,
     FilterDevicesPipe,
-    UniquePermissionOrganizationsPipe,
   ],
   imports: [CommonModule],
   exports: [
@@ -28,7 +26,6 @@ import { UniquePermissionOrganizationsPipe } from './unique-permission-organizat
     CustomTableDatePipe,
     CreatedUpdatedByPipe,
     FilterDevicesPipe,
-    UniquePermissionOrganizationsPipe,
   ],
 })
 export class PipesModule {}
diff --git a/src/app/shared/pipes/unique-permission-organizations.pipe.ts b/src/app/shared/pipes/unique-permission-organizations.pipe.ts
deleted file mode 100644
index 5e646d71..00000000
--- a/src/app/shared/pipes/unique-permission-organizations.pipe.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { PermissionResponse } from '@app/admin/permission/permission.model';
-
-@Pipe({
-  name: 'uniquePermissionOrganizations',
-})
-export class UniquePermissionOrganizationsPipe implements PipeTransform {
-  transform(
-    value: PermissionResponse[],
-    ..._: unknown[]
-  ): PermissionResponse[] {
-    // Ensure that no element appears twice. Orders it so that the duplicate (second match) takes priority
-    const uniqueArr = Array.from(
-      new Map(value.map((item) => [item.organization?.id, item])).values()
-    );
-
-    return uniqueArr;
-  }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 7eecb11c..fc6b17bc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,6 +30,5 @@
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
-    // "strictTemplates": true // Highly recommended for type-safety in html. Apply if there's ever time to fix the 30+ errors that appear
   }
 }

From 4ee49a239a5392a1ffe1ce6d73048656f3ee6398 Mon Sep 17 00:00:00 2001
From: Aram Al-Sabti <afa@iterator-it.dk>
Date: Mon, 24 Jan 2022 13:38:35 +0100
Subject: [PATCH 7/7] API key cleanup

---
 src/app/admin/api-key/api-key.component.html |  1 -
 src/app/admin/api-key/api-key.component.scss |  0
 src/app/admin/api-key/api-key.component.ts   | 10 +++-------
 3 files changed, 3 insertions(+), 8 deletions(-)
 delete mode 100644 src/app/admin/api-key/api-key.component.html
 delete mode 100644 src/app/admin/api-key/api-key.component.scss

diff --git a/src/app/admin/api-key/api-key.component.html b/src/app/admin/api-key/api-key.component.html
deleted file mode 100644
index 0680b43f..00000000
--- a/src/app/admin/api-key/api-key.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<router-outlet></router-outlet>
diff --git a/src/app/admin/api-key/api-key.component.scss b/src/app/admin/api-key/api-key.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/admin/api-key/api-key.component.ts b/src/app/admin/api-key/api-key.component.ts
index be1ea4b8..97c6b2fe 100644
--- a/src/app/admin/api-key/api-key.component.ts
+++ b/src/app/admin/api-key/api-key.component.ts
@@ -2,14 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-api-key',
-  templateUrl: './api-key.component.html',
-  styleUrls: ['./api-key.component.scss']
+  template: '<router-outlet></router-outlet>',
 })
 export class ApiKeyComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }