users can remove ssh keys now

app/src/app/account/account.component.html

@@ -29,7 +29,7 @@
               <li class="list-group-item">
                 Container Name Service:
                 <span class="badge border ms-1 text-uppercase"
-                  [ngClass]="userInfo.triton_cns_enabled ? 'border-success text-success' : 'danger-success text-danger'">
+                      [ngClass]="userInfo.triton_cns_enabled ? 'border-success text-success' : 'danger-success text-danger'">
                   {{ userInfo.triton_cns_enabled ? 'enabled' : 'disabled' }}
                 </span>
               </li>
@@ -48,13 +48,18 @@
             </legend>
 
             <ol class="list-group list-group-flush">
-              <li class="list-group-item" *ngFor="let userKey of userKeys">
+              <li class="list-group-item pt-0 d-flex justify-content-between align-items-center" *ngFor="let userKey of userKeys">
-                {{ userKey.name }}: <b class="text-uppercase">{{ userKey.fingerprint }}</b>
+                <span>{{ userKey.name }}: <b class="text-uppercase">{{ userKey.fingerprint }}</b></span>
+
+                <button class="btn btn-sm btn-link text-danger" tooltip="{{ 'account.removeKey' | translate }}"
+                        (click)="deleteSshKey(userKey.name)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
               </li>
             </ol>
           </fieldset>
         </div>
+      </div>
     </div>
   </div>
 </div>
-</div>

app/src/app/account/account.component.ts

@@ -11,6 +11,7 @@ import { ToastrService } from 'ngx-toastr';
 import { SshKeyEditorComponent } from './ssh-key-editor/ssh-key-editor.component';
 import { Title } from "@angular/platform-browser";
 import { TranslateService } from '@ngx-translate/core';
+import { ConfirmationDialogComponent } from '../components/confirmation-dialog/confirmation-dialog.component';
 
 @Component({
   selector: 'app-account',
@@ -72,6 +73,42 @@ export class AccountComponent implements OnInit, OnDestroy
     const modalRef = this.modalService.show(SshKeyEditorComponent, modalConfig);
   }
 
+  // ----------------------------------------------------------------------------------------------------------------
+  deleteSshKey(keyName: string)
+  {
+    const modalConfig = {
+      ignoreBackdropClick: true,
+      keyboard: false,
+      animated: true,
+      initialState: {
+        prompt: `Are you sure you wish to permanently delete the "${keyName}" key?`,
+        confirmButtonText: 'Yes, delete it',
+        declineButtonText: 'No, keep it',
+        confirmByDefault: false
+      }
+    };
+
+    const modalRef = this.modalService.show(ConfirmationDialogComponent, modalConfig);
+
+    modalRef.content.confirm.pipe(first()).subscribe(() =>
+    {
+      this.accountService.deleteKey(keyName)
+        .subscribe(() =>
+        {
+          const index = this.userKeys.findIndex(x => x.name === keyName);
+          if (index >= 0)
+          {
+            this.userKeys.splice(index, 1);
+            this.toastr.info(`The "${keyName}" key has been deleted`);
+          }
+        }, err =>
+        {
+          const errorDetails = err.error?.message ? `(${err.error.message})` : '';
+          this.toastr.error(`Failed to remove the "${keyName}" key ${errorDetails}`);
+        });
+    });
+  }
+
   // ----------------------------------------------------------------------------------------------------------------
   ngOnInit()
   {

app/src/app/file-manager/file-manager.component.html

@@ -1 +0,0 @@
-<p>file-manager works!</p>

app/src/app/file-manager/file-manager.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FileManagerComponent } from './file-manager.component';
-
-describe('FileManagerComponent', () => {
-  let component: FileManagerComponent;
-  let fixture: ComponentFixture<FileManagerComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ FileManagerComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FileManagerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

app/src/app/file-manager/file-manager.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-file-manager',
-  templateUrl: './file-manager.component.html',
-  styleUrls: ['./file-manager.component.scss']
-})
-export class FileManagerComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

app/src/app/file-manager/file-manager.module.ts

@@ -1,46 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../shared.module';
-import { RouterModule } from '@angular/router';
-
-import { TranslateModule, TranslateService, LangChangeEvent } from '@ngx-translate/core';
-import { TranslateLoader } from '@ngx-translate/core';
-import { WebpackTranslateLoader } from '../helpers/webpack-translate-loader.service';
-import { TranslateCompiler } from '@ngx-translate/core';
-import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
-
-import { FileManagerComponent } from './file-manager.component';
-
-@NgModule({
-  declarations: [FileManagerComponent],
-  imports: [
-    SharedModule,
-    RouterModule.forChild([
-      {
-        path: '',
-        component: FileManagerComponent
-      }
-    ]),
-    TranslateModule.forChild({
-      loader: {
-        provide: TranslateLoader,
-        //useClass: WebpackTranslateLoader
-        useFactory: () => new WebpackTranslateLoader('file-manager')
-      },
-      compiler: {
-        provide: TranslateCompiler,
-        useFactory: () => new TranslateMessageFormatCompiler()
-      },
-      isolate: true
-    })
-  ]
-})
-export class FileManagerModule
-{
-  constructor(private readonly translate: TranslateService)
-  {
-    translate.use(translate.store.currentLang);
-
-    translate.store.onLangChange.subscribe((event: LangChangeEvent) => translate.use(event.lang));
-  }
-}

app/src/assets/i18n/account/en.json

@@ -5,6 +5,7 @@
     "myProfile": "My profile",
     "updateProfile": "Update profile",
     "myKeys": "My keys",
-    "addKey": "Add key"
+    "addKey": "Add key",
+    "removeKey": "Delete this key" 
   }
 }