Add warning tooltip if token expiration time out

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -85,9 +85,9 @@
             </button>
           </div>
           <div fxLayout="row" fxLayoutAlign=" center" style="padding-bottom: 16px;">
-            <button mat-raised-button ngxClipboard
+            <button mat-raised-button
-                    (cbOnSuccess)="onTokenCopied()"
+                    type="button"
-                    [cbContent]="jwtToken">
+                    (click)="copyToken()">
               <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
               <span>{{ 'profile.copy-jwt-token' | translate }}</span>
             </button>

ui-ngx/src/app/modules/home/pages/profile/profile.component.ts

@@ -36,6 +36,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { DatePipe } from '@angular/common';
+import { ClipboardService } from 'ngx-clipboard';
 
 @Component({
   selector: 'tb-profile',
@@ -54,8 +55,12 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
     return `Bearer ${localStorage.getItem('jwt_token')}`;
   }
 
+  get jwtTokenExpiration(): string {
+    return localStorage.getItem('jwt_token_expiration');
+  }
+
   get expirationJwtData(): string {
-    const expirationData = this.datePipe.transform(localStorage.getItem('jwt_token_expiration'), 'yyyy-MM-dd HH:mm:ss');
+    const expirationData = this.datePipe.transform(this.jwtTokenExpiration, 'yyyy-MM-dd HH:mm:ss');
     return this.translate.instant('profile.valid-till', { expirationData });
   }
 
@@ -67,7 +72,8 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
               public dialog: MatDialog,
               public dialogService: DialogService,
               public fb: FormBuilder,
-              private datePipe: DatePipe) {
+              private datePipe: DatePipe,
+              private clipboardService: ClipboardService) {
     super(store);
     this.authUser = getCurrentAuthUser(this.store);
   }
@@ -153,9 +159,19 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
     return this.authUser.authority === Authority.SYS_ADMIN;
   }
 
-  onTokenCopied() {
+  copyToken() {
+    if (+this.jwtTokenExpiration < Date.now()) {
       this.store.dispatch(new ActionNotificationShow({
-      message: this.translate.instant('profile.tokenCopiedMessage'),
+        message: this.translate.instant('profile.tokenCopiedWarnMessage'),
+        type: 'warn',
+        duration: 1500,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+    } else {
+      this.clipboardService.copyFromContent(this.jwtToken);
+      this.store.dispatch(new ActionNotificationShow({
+        message: this.translate.instant('profile.tokenCopiedSuccessMessage'),
         type: 'success',
         duration: 750,
         verticalPosition: 'bottom',
@@ -163,3 +179,4 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
       }));
     }
   }
+}

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2367,7 +2367,8 @@
         "current-password": "Current password",
         "copy-jwt-token": "Copy JWT token",
         "valid-till": "Valid till {{expirationData}}",
-        "tokenCopiedMessage": "JWT token has been copied to clipboard"
+        "tokenCopiedSuccessMessage": "JWT token has been copied to clipboard",
+        "tokenCopiedWarnMessage": "JWT token is expired! Please, refresh the page."
     },
     "relation": {
         "relations": "Relations",

ui-ngx/src/assets/locale/locale.constant-ru_RU.json

@@ -1265,7 +1265,8 @@
         "current-password": "Текущий пароль",
         "copy-jwt-token": "Копировать JWT токен",
         "valid-till": "Действителен до {{expirationData}}",
-        "tokenCopiedMessage": "JWT токен скопирован в буфер обмена"
+        "tokenCopiedMessage": "JWT токен скопирован в буфер обмена",
+        "tokenCopiedWarnMessage": "JWT токен недействителен! Перезагрузите страницу."
     },
     "relation": {
         "relations": "Отношения",

ui-ngx/src/assets/locale/locale.constant-uk_UA.json

@@ -1680,7 +1680,8 @@
         "current-password": "Поточний пароль",
         "copy-jwt-token": "Копіювати JWT токен",
         "valid-till": "Дійсний до {{expirationData}}",
-        "tokenCopiedMessage": "JWT токен скопійовано в буфер обміну"
+        "tokenCopiedMessage": "JWT токен скопійовано в буфер обміну",
+        "tokenCopiedWarnMessage": "JWT токен не є дійсним! Перезавантажте сторінку."
     },
     "relation": {
         "relations": "Відношення",