src/app/app.module.ts

@@ -14,7 +14,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatCardModule} from '@angular/material/card';
 import { MatListModule, MatSidenavModule } from '@angular/material';
-
+import {MatDialogModule} from '@angular/material/dialog'; 
 
 
 import {DashboardModule} from './dashboard/dashboard.module';
@@ -63,9 +63,8 @@ const SERVICES = [
     MatDividerModule,
     MatCardModule,
     MatListModule,
-    MatSidenavModule
- 
-    
+    MatSidenavModule,
+    MatDialogModule
   ],
   providers: [
     ...SERVICES ],

src/app/dashboard/dashboard.module.ts

@@ -21,6 +21,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input'; 
 import { FormsModule , ReactiveFormsModule} from '@angular/forms';
+import {MatDialogModule} from '@angular/material/dialog'; 
 
 import {AuthGuard} from './auth-guard.service';
 import { FulltableComponent } from './fulltable/fulltable.component';
@@ -28,6 +29,7 @@ import { HostnameComponent } from './hostname/hostname.component';
 import { SiteComponent } from './site/site.component';
 import { ServiceComponentComponent } from './service-component/service-component.component';
 import { ServiceComponentHistoryComponent } from './service-component-history/service-component-history.component';
+import { ProfileDialogComponent } from './profile-dialog/profile-dialog.component';
 
 
 export const SINGLETON_SERVICES = [
@@ -38,7 +40,8 @@ export const SINGLETON_SERVICES = [
 
 @NgModule({
   declarations: [TableComponent,
-    FulltableComponent, HostnameComponent, SiteComponent, ServiceComponentComponent, ServiceComponentHistoryComponent ],
+    FulltableComponent, HostnameComponent, SiteComponent, ServiceComponentComponent,
+     ServiceComponentHistoryComponent,ProfileDialogComponent],
   imports: [
     CommonModule,
     RouterModule,
@@ -58,7 +61,9 @@ export const SINGLETON_SERVICES = [
     MatFormFieldModule,
     MatInputModule,
     FormsModule,
-    ReactiveFormsModule
-  ]
+    ReactiveFormsModule,
+    MatDialogModule
+  ],
+  entryComponents: [ProfileDialogComponent]
 })
 export class DashboardModule { }

src/app/dashboard/profile-dialog/profile-dialog.component.html

+<h2 mat-dialog-title><B>Hi, {{user}}</B></h2>
+<div mat-dialog-content >
+  <mat-list *ngIf="hasToken">
+   
+    <p mat-line> <B> Your Id: &nbsp;  </B>{{apitoken.id}} </p>
+    <p mat-line matTooltip="{{this.apitoken.token}}" ><B> Your Token: &nbsp;  </B> {{shortToken}} 
+      <button (click)="copyToken(this.apitoken.token)" value="click to copy" mat-raised-button >
+        <mat-icon>format_align_justify</mat-icon>
+      </button>
+      <button (click)="onDeleteClick()"  mat-raised-button >
+          <mat-icon>delete</mat-icon>
+        </button>
+    </p> 
+    <p mat-line>  <B> Validate till: &nbsp;  </B> {{eDate}} </p>
+   
+  </mat-list>
+  <button   *ngIf = "hasToken === false" mat-button (click)="onCreationClick()">Create an API</button>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">OK</button>
+</div>

src/app/dashboard/profile-dialog/profile-dialog.component.spec.ts

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

src/app/dashboard/profile-dialog/profile-dialog.component.ts

+import { Component, OnInit , Inject } from '@angular/core';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA, throwMatDialogContentAlreadyAttachedError} from '@angular/material/dialog';
+import {HttpClient} from '@angular/common/http';
+import {HttpHeaders} from '@angular/common/http';
+
+import {TableComponent} from '../table/table.component';
+import {SharedService} from '../../shared-service';
+import { TokenInfo } from 'src/app/model/tokenInfo';
+import { resolve } from 'url';
+
+
+@Component({
+  selector: 'app-profile-dialog',
+  templateUrl: './profile-dialog.component.html',
+  styleUrls: ['./profile-dialog.component.css']
+})
+export class ProfileDialogComponent implements OnInit  {
+
+  user: string = "";
+  hasToken: boolean;
+  apitoken: TokenInfo;
+  eDate: Date;
+  shortToken: string;
+
+
+  constructor ( public dialogRef: MatDialogRef<ProfileDialogComponent>,
+    public sharedService: SharedService,
+    private httpClient: HttpClient)
+  {
+    const tmp = sessionStorage.getItem('currentUser');
+    console.log("opened the dialog by " + tmp);
+    this.user = tmp;
+    
+ 
+   }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  ngOnInit()  {
+    this.getApiToken()
+    .then(
+      (atoken: TokenInfo) => {
+         this.apitoken = atoken;
+         if ( this.apitoken === undefined || this.apitoken === null) {
+           this.hasToken = false;
+         } else {
+           this.hasToken = true;
+           this.shortToken=this.apitoken.token.slice(0,20) + " ... ...";
+           this.eDate = new Date(this.apitoken.validationDate);
+           console.log(new Date(this.apitoken.validationDate));
+         }
+      }
+    ).catch(
+      error => {
+        console.log('No token');
+        console.log(error);
+      }
+    );
+  //  console.log(this.apitoken);
+  
+ // this.dialogRef.updatePosition({ top: `200px`, right: `400px`});
+  }
+
+
+  getApiToken() {
+    console.log('Fetching api token');
+    
+    const promise = new Promise(
+      (resolve, reject) => {
+        /** Gets the sites from the source specified (GOCDB or DPMT) **/
+        const getUrl = this.sharedService.apiTokenURL;
+        if ( sessionStorage.getItem('authHeader') !== '') {
+          const headers = new HttpHeaders( sessionStorage.getItem('authHeader') ? {
+           'Authorization' : sessionStorage.getItem('authHeader'),
+          'Content-Type' : 'application/json'
+         } : {}
+         );
+         this.httpClient.get<TokenInfo>(getUrl , {headers : headers })
+         .subscribe(
+           (tokeninfo: TokenInfo) => {
+            // this.apitoken = tokeninfo;
+             resolve(tokeninfo);
+             //return new TokenInfo(tokeninfo.id,tokeninfo.token,tokeninfo.validationDate);
+            // this.apitoken = tokeninfo;
+             //resolve(tokeninfo);
+             //console.log(this.token);
+           },
+           (error) => {
+             reject(error);
+           }
+         );
+        }
+      });
+    return promise;
+  }
+
+
+  postApiToken() {
+    console.log('Creating api token');
+    
+    const promise = new Promise(
+      (resolve, reject) => {
+        /** Gets the sites from the source specified (GOCDB or DPMT) **/
+        const Url = this.sharedService.apiTokenURL;
+        if ( sessionStorage.getItem('authHeader') !== '') {
+          const headers = new HttpHeaders( sessionStorage.getItem('authHeader') ? {
+           'Authorization' : sessionStorage.getItem('authHeader'),
+          'Content-Type' : 'application/json'
+         } : {}
+         );
+         //console.log("post header");
+         //console.log(headers);
+         this.httpClient.post<TokenInfo>(Url , null ,{headers : headers })
+         .subscribe(
+           (tokeninfo: TokenInfo) => {
+            // this.apitoken = tokeninfo;
+             resolve(tokeninfo);
+            // return new TokenInfo(tokeninfo.id,tokeninfo.token,tokeninfo.validationDate);
+            // this.apitoken = tokeninfo;
+             //resolve(tokeninfo);
+             //console.log(this.token);
+           },
+           (error) => {
+             reject(error);
+           }
+         );
+        }
+      });
+    return promise;
+  }
+
+
+  deleteApiToken() {
+    console.log('deleting api token');
+    
+    const promise = new Promise(
+      (resolve, reject) => {
+        /** Gets the sites from the source specified (GOCDB or DPMT) **/
+        const Url = this.sharedService.apiTokenURL;
+        if ( sessionStorage.getItem('authHeader') !== '') {
+          const headers = new HttpHeaders( sessionStorage.getItem('authHeader') ? {
+           'Authorization' : sessionStorage.getItem('authHeader'),
+          'Content-Type' : 'application/json'
+         } : {}
+         );
+         console.log("post header");
+         console.log(headers);
+         this.httpClient.delete(Url ,{headers : headers })
+         .subscribe(
+           (info: string) => {
+            // this.apitoken = tokeninfo;
+             resolve(info);
+             //return new TokenInfo(tokeninfo.id,tokeninfo.token,tokeninfo.validationDate);
+            // this.apitoken = tokeninfo;
+             //resolve(tokeninfo);
+             //console.log(this.token);
+           },
+           (error) => {
+             reject(error);
+           }
+         );
+        }
+      });
+    return promise;
+  }
+
+
+
+
+  copyToken(val: string){
+    let selBox = document.createElement('textarea');
+    selBox.style.position = 'fixed';
+    selBox.style.left = '0';
+    selBox.style.top = '0';
+    selBox.style.opacity = '0';
+    selBox.value = val;
+    document.body.appendChild(selBox);
+    selBox.focus();
+    selBox.select();
+    document.execCommand('copy');
+    document.body.removeChild(selBox);
+  }
+
+
+
+  onCreationClick(){
+    console.log("on creation clicked");
+    this.postApiToken()
+    .then(
+      (atoken: TokenInfo) => {
+         this.apitoken = atoken;
+         if ( this.apitoken === undefined || this.apitoken === null) {
+           this.hasToken = false;
+         } else {
+           this.hasToken = true;
+           this.shortToken=this.apitoken.token.slice(0,20) + " ... ...";
+           this.eDate = new Date(this.apitoken.validationDate);
+           console.log(new Date(this.apitoken.validationDate));
+         }
+      }
+    ).catch(
+      error => {
+        console.log('No token created');
+        console.log(error);
+      }
+    );
+  }
+
+
+  onDeleteClick(){
+    console.log("on creation clicked");
+    this.deleteApiToken()
+    .then(
+      (info: string) => {
+         
+           this.hasToken = false;
+           this.shortToken = "";
+           this.apitoken = null
+         
+      }
+    ).catch(
+      error => {
+        console.log('No token deleted');
+        console.log(error);
+      }
+    );
+  }
+
+
+
+
+
+}

src/app/dashboard/table/table.component.css

@@ -98,6 +98,12 @@ table {
     border:none;
   }
 
+
+  .submenu {
+    pointer-events: none;
+  }
+
+
   img {
     width: 80%;
     padding: 3%;
@@ -110,4 +116,5 @@ table {
   .form-div {
     width: 80%;
     margin:0 auto;
-  }
\ No newline at end of file
+  }
+

src/app/dashboard/table/table.component.html

@@ -57,13 +57,20 @@
 <button class="menu-button" mat-icon-button (click)="sidenavtoggle()"><mat-icon>menu</mat-icon></button>
 
   <span class="example-fill-remaining-space"></span>
-
+<!--
   <button class="menu-button" mat-button [matMenuTriggerFor]="menusite">Site</button>
 <mat-menu  #menusite="matMenu">
   <button mat-menu-item  (click)="onClickSite('dpmt')">DPMT</button>
   <button mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
   <button mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
 </mat-menu> 
+-->
+<button class="menu-button" (mouseenter) ='mouseEnter("Site")'  >Site</button>
+<mat-menu   class="submenu" #menusite="matMenu">
+  <button class="submenu" mat-menu-item  (click)="onClickSite('dpmt')">DPMT</button>
+  <button class="submenu" mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
+  <button class="submenu"  mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
+</mat-menu> 
 
 &nbsp; &nbsp;
 <button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Service</button>
@@ -78,7 +85,7 @@
 
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
-  <button mat-menu-item>Profile</button>
+  <button mat-menu-item (click)="openDialog()">Profile</button>
   <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 

src/app/dashboard/table/table.component.ts

 import {Component, OnInit, Inject, ViewContainerRef,Input, DoCheck,ViewChild,OnDestroy,ChangeDetectorRef,AfterViewInit, ViewChildren} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
-import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
+import {MatPaginator, MatTableDataSource,MatSort,MatMenuTrigger, MatDialog} from '@angular/material';
 import {MediaMatcher} from '@angular/cdk/layout';
 
 import {SiteShort} from '../../model/site-short';
@@ -11,6 +11,7 @@ import {SharedService} from '../../shared-service';
 import {Site} from '../../model/site';
 import { AuthService } from 'src/app/auth.service';
 import { DataSource } from '@angular/cdk/table';
+import { ProfileDialogComponent } from '../profile-dialog/profile-dialog.component';
 
 
 
@@ -41,12 +42,14 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
 
   constructor(
     public siteService: SiteShortService,
     public router: Router,
     public route: ActivatedRoute,
-    public authService: AuthService
+    public authService: AuthService,
+    public dialog: MatDialog
   ) {
     console.log('table constructor');
 
@@ -353,4 +356,31 @@ getPageSizeOptions(): number[] {
 }
 
 
+mouseEnter(name: string) {
+  console.log("enter "+ name);
+  this.trigger.openMenu();
+}
+
+mouseLeave(name: string) {
+  console.log("leave " +name);
+  this.trigger.closeMenu();
+}
+
+
+openDialog(): void {
+  console.log("opening the dialog");
+  const dialogRef = this.dialog.open(ProfileDialogComponent, {
+    width: '500px'
+  });
+
+
+
+  dialogRef.afterClosed().subscribe(result => {
+    console.log('The dialog was closed');
+
+  });
+}
+
+
+
 }

src/app/model/tokenInfo.ts

+
+
+export class TokenInfo {
+
+ id: number;
+ token: string;
+ validationDate: Date;
+
+  constructor (
+    id: number,
+    token: string,
+    validationDate: Date) {
+      this.id =id;
+      this.token = token;
+      this.validationDate = validationDate;
+  }
+
+}

src/app/shared-service.ts

@@ -10,6 +10,7 @@ export class SharedService {
     serviceCompURL: string;
     address: string;
     pagesize: number;
+    apiTokenURL: string;
 
 
 	
@@ -23,6 +24,7 @@ export class SharedService {
         this.signInURL = this.baseURL + 'auth/signin';
         this.redirectionURL = this.address + '/login';
         this.serviceCompURL = this.baseURL + 'serviceComponent/all/historic/';
+        this.apiTokenURL  = this.baseURL + 'auth/api-token'
         this.pagesize = 50;
     }