add name to access token

src/app/shared/users/access-tokens/access-token.service.ts

@@ -22,8 +22,8 @@ export class AccessTokenService extends GenericDataService {
         return this.http.put<void>(`${this.getUrl()}/${id}`, '')
     }
 
-    public createToken(): Observable<AccessToken> {
-        return this.http.post<AccessToken>(this.getUrl(), '')
+    public createToken(tokenName: string): Observable<AccessToken> {
+        return this.http.post<AccessToken>(this.getUrl(), tokenName)
     }
 
     private getUrl(): string {

src/app/shared/users/access-tokens/access-token.ts

@@ -1,5 +1,6 @@
 export class AccessToken {
     public id: number
+    public name: string
     public userId: number
     public tokenValue: string
     public valid: boolean

src/app/shared/users/access-tokens/access-tokens.component.html

@@ -5,6 +5,7 @@
             <thead>
             <tr>
                 <th scope="col">{{'TOKENS.TABLE.ID' | translate}}</th>
+                <th scope="col">{{'TOKENS.TABLE.NAME' | translate}}</th>
                 <th scope="col">{{'TOKENS.TABLE.VALUE' | translate}}</th>
                 <th scope="col">{{'TOKENS.TABLE.VALID' | translate}}</th>
                 <th scope="col">{{'TOKENS.TABLE.ACTIONS' | translate}}</th>
@@ -13,10 +14,12 @@
             <tbody>
             <tr *ngFor="let token of tokensList">
                 <td>{{token.id}}</td>
+                <td>{{token.name}}</td>
                 <td>{{token.tokenValue}}</td>
                 <td>{{token.valid}}</td>
                 <td>
-                    <button type="button" class="btn btn-danger" (click)="invalidate(token.id)">{{'TOKENS.BUTTON_INVALIDATE' | translate}}</button>
+                    <button type="button" class="btn btn-danger"
+                            (click)="invalidate(token.id)">{{'TOKENS.BUTTON_INVALIDATE' | translate}}</button>
                 </td>
             </tr>
             <tr *ngIf="tokensList.length === 0">
@@ -25,7 +28,33 @@
             </tbody>
         </table>
         <div>
-            <button type="button" class="btn btn-primary" (click)="createNewToken()">{{'TOKENS.NEW_TOKEN' | translate}}</button>
+            <button type="button" class="btn btn-success"
+                    (click)="modal.show()">{{'TOKENS.NEW_TOKEN' | translate}}</button>
+
         </div>
     </div>
 </div>
+
+<nmaas-modal styleModal="info">
+    <div class="nmaas-modal-header">{{'TOKENS.MODAL.HEADER' | translate}}</div>
+    <div class="nmaas-modal-body" style="height: 60%; max-height: 80vh;overflow-y: auto;">
+        <form [formGroup]="requestForm" (ngSubmit)="createNewToken()">
+            <div class="form-group">
+                <label class="control-label" for="new-token-name">
+                    {{'TOKENS.MODAL.NAME' | translate}}:
+                </label>
+                <input id="new-token-name" type="text" class="form-control" formControlName="name">
+            </div>
+            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
+                <div *ngIf="name.errors.required">{{'SSH_KEYS.MODAL.ERROR.NAME_REQUIRED' | translate}}</div>
+                <div *ngIf="name.errors.minlength">{{'SSH_KEYS.MODAL.ERROR.NAME_MINLENGTH' | translate}}</div>
+                <div *ngIf="name.errors.maxlength">{{'SSH_KEYS.MODAL.ERROR.NAME_MAXLENGTH' | translate}}</div>
+            </div>
+            <input type="submit" class="btn btn-success" value="{{'SSH_KEYS.MODAL.BUTTON_ADD' | translate}}"
+                   [disabled]="!requestForm.valid">
+            <button type="button" class="btn btn-primary pull-right"
+                    (click)="modal.hide()">{{'SSH_KEYS.MODAL.BUTTON_CANCEL' | translate}}</button>
+
+        </form>
+    </div>
+</nmaas-modal>

src/app/shared/users/access-tokens/access-tokens.component.spec.ts

@@ -1,23 +1,34 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {AccessTokensComponent} from './access-tokens.component';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core';
 
 describe('AccessTokensComponent', () => {
-  let component: AccessTokensComponent;
-  let fixture: ComponentFixture<AccessTokensComponent>;
+    let component: AccessTokensComponent;
+    let fixture: ComponentFixture<AccessTokensComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AccessTokensComponent ]
-    })
-    .compileComponents();
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [AccessTokensComponent],
+            imports: [
+                HttpClientTestingModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: TranslateFakeLoader
+                    }
+                }),
+            ]
+        })
+            .compileComponents();
 
-    fixture = TestBed.createComponent(AccessTokensComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+        fixture = TestBed.createComponent(AccessTokensComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

src/app/shared/users/access-tokens/access-tokens.component.ts

@@ -1,7 +1,9 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {Observable} from 'rxjs';
 import {AccessToken} from './access-token';
 import {AccessTokenService} from './access-token.service';
+import {ModalComponent} from '../../modal';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 
 @Component({
     selector: 'app-access-tokens',
@@ -13,47 +15,53 @@ export class AccessTokensComponent implements OnInit {
     public tokens: Observable<AccessToken[]> = undefined;
     public tokensList: AccessToken[] = [];
 
-    constructor(private tokenService: AccessTokenService) {
+    public requestForm: UntypedFormGroup = undefined;
+
+    public newTokenName = '';
+
+    @ViewChild(ModalComponent, {static: true})
+    public readonly modal: ModalComponent;
+
+    constructor(private tokenService: AccessTokenService,
+                private formBuilder: UntypedFormBuilder) {
     }
 
     ngOnInit() {
+        this.requestForm = this.formBuilder.group({
+            name: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(30)]],
+        })
+
         this.tokens = this.tokenService.getAll();
         this.getData();
     }
 
     getData() {
         this.tokensList = [];
         this.tokens.subscribe(
-            data => {
-                this.tokensList.push(...data);
-                console.log('tokens: ', data)
-            },
-            error => {
-                console.error(error);
-            }
+            data => this.tokensList.push(...data),
+            error => console.error(error)
         )
     }
 
     invalidate(id: number) {
         this.tokenService.invalidate(id).subscribe(
-            data => {
-                console.log('invalidating access token id: ' + id + ' success');
-                this.getData();
-            },
-            error => {
-                console.error(error);
-            }
+            (_) => this.getData(),
+            error => console.error(error)
         );
     }
 
     public createNewToken() {
-        console.log('trying to create new token')
-        this.tokenService.createToken().subscribe({
+        this.tokenService.createToken(this.requestForm.value.name.trim()).subscribe({
             next: val => {
-                console.log('access token created: ', val)
                 this.tokensList.push(val)
+                this.requestForm.reset();
+                this.modal.hide();
             },
             error: err => console.warn(err)
         })
     }
+
+    get name() {
+        return this.requestForm.get('name');
+    }
 }