Add confirmation step before closing the token

src/app/shared/shared.module.ts

@@ -61,6 +61,9 @@ import {InputTextModule} from 'primeng/inputtext';
 import { DomainNamespaceAnnotationsComponent } from './domain-namespace-annotations/domain-namespace-annotations.component';
 import { provideZxvbnServiceForPSM  } from 'angular-password-strength-meter/zxcvbn';
 import { AccessTokensComponent } from './users/access-token/access-tokens.component';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { ButtonModule } from 'primeng/button';
 
 
 @NgModule({
@@ -80,6 +83,9 @@ import { AccessTokensComponent } from './users/access-token/access-tokens.compon
         DropdownModule,
         InputTextModule,
         FormioModule,
+        InputGroupModule,
+        InputGroupAddonModule,
+        ButtonModule
     ],
     declarations: [
         RateComponent,

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

@@ -42,7 +42,7 @@
 <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()">
+        <form *ngIf="!showCopyToken" [formGroup]="requestForm" (ngSubmit)="createNewToken()">
             <div class="form-group">
                 <label class="control-label" for="new-token-name">
                     {{'TOKENS.MODAL.NAME' | translate}}:
@@ -62,5 +62,19 @@
                     (click)="modal.hide()">{{'SSH_KEYS.MODAL.BUTTON_CANCEL' | translate}}</button>
 
         </form>
+        <div *ngIf="showCopyToken">
+                <span class="text-bold">
+                    {{"TOKENS.MODAL.TOKEN_COPY" | translate}}
+                </span>
+                <div>
+                    <p-inputGroup>
+                        <input pInputText [(ngModel)]="newToken.tokenValue" placeholder="Token to copy" />
+                        <button pButton icon="pi pi-copy" (click)="copyToClipboard()">Copy</button>
+                    </p-inputGroup>
+                </div>
+                <div class="mt-6 flex ">
+                    <button (click)="ConfirmAndClose()" pButton >{{"TOKENS.MODAL.TOKEN_SAVED" | translate}}</button>
+                </div>
+        </div>
     </div>
 </nmaas-modal>
\ No newline at end of file

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

@@ -20,6 +20,9 @@ export class AccessTokensComponent implements OnInit {
 
     public newTokenName = '';
 
+    public showCopyToken = false;
+    public newToken :AccessToken;
+
     @ViewChild(ModalComponent, {static: true})
     public readonly modal: ModalComponent;
 
@@ -61,9 +64,11 @@ export class AccessTokensComponent implements OnInit {
     public createNewToken() {
         this.tokenService.createToken(this.requestForm.value.name.trim()).subscribe({
             next: val => {
-                this.tokensList.push(val)
+                // this.tokensList.push(val)
                 this.requestForm.reset();
-                this.modal.hide();
+                this.showCopyToken = true;
+                this.newToken = val;
+                // this.modal.hide();
             },
             error: err => {
                 console.warn(err.error)
@@ -73,6 +78,24 @@ export class AccessTokensComponent implements OnInit {
         })
     }
 
+    public copyToClipboard() {
+        if (this.newToken.tokenValue) {
+            navigator.clipboard.writeText(this.newToken.tokenValue).then(() => {
+                console.log('Copied to clipbord');
+            }, (err) => {
+                console.error('Some errors accoured: ', err);
+            });
+        }
+    }
+
+    public ConfirmAndClose() {
+        this.showCopyToken = false;
+        this.newToken = null;
+        this.getData();
+        this.modal.hide();
+       
+    }
+
     get name() {
         return this.requestForm.get('name');
     }

src/styles.css

@@ -92,3 +92,7 @@
 .btn-text:hover{
     background: #EBEEF5;
 }
+
+.text-bold {
+    font-weight: 700;;
+}