Merge pull request #5262 from ArtemDzhereleiko/imp/profile/copy-jwt-token

[3.3.2] Add button Copy JWT token to profile

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

@@ -84,6 +84,15 @@
               {{'profile.change-password' | translate}}
             </button>
           </div>
+          <div fxLayout="row" fxLayoutAlign=" center" style="padding-bottom: 16px;">
+            <button mat-raised-button
+                    type="button"
+                    (click)="copyToken()">
+              <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+              <span>{{ 'profile.copy-jwt-token' | translate }}</span>
+            </button>
+            <span class="profile-btn-subtext">{{ expirationJwtData }}</span>
+          </div>
           <div fxLayout="row" class="layout-wrap">
             <span fxFlex></span>
             <button mat-button mat-raised-button color="primary"

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

@@ -38,6 +38,10 @@
       font-size: 16px;
       font-weight: 400;
     }
+    .profile-btn-subtext {
+      opacity: 0.7;
+      padding: 10px;
+    }
     .tb-home-dashboard {
       tb-dashboard-autocomplete {
         @media #{$mat-gt-sm} {

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

@@ -34,6 +34,9 @@ import { AuthService } from '@core/auth/auth.service';
 import { ActivatedRoute } from '@angular/router';
 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',
@@ -48,6 +51,19 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
   languageList = env.supportedLangs;
   private readonly authUser: AuthUser;
 
+  get jwtToken(): string {
+    return `Bearer ${localStorage.getItem('jwt_token')}`;
+  }
+
+  get jwtTokenExpiration(): string {
+    return localStorage.getItem('jwt_token_expiration');
+  }
+
+  get expirationJwtData(): string {
+    const expirationData = this.datePipe.transform(this.jwtTokenExpiration, 'yyyy-MM-dd HH:mm:ss');
+    return this.translate.instant('profile.valid-till', { expirationData });
+  }
+
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute,
               private userService: UserService,
@@ -55,7 +71,9 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
               private translate: TranslateService,
               public dialog: MatDialog,
               public dialogService: DialogService,
-              public fb: FormBuilder) {
+              public fb: FormBuilder,
+              private datePipe: DatePipe,
+              private clipboardService: ClipboardService) {
     super(store);
     this.authUser = getCurrentAuthUser(this.store);
   }
@@ -141,4 +159,24 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
     return this.authUser.authority === Authority.SYS_ADMIN;
   }
 
+  copyToken() {
+    if (+this.jwtTokenExpiration < Date.now()) {
+      this.store.dispatch(new ActionNotificationShow({
+        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',
+        horizontalPosition: 'right'
+      }));
+    }
+  }
 }

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

@@ -2387,7 +2387,11 @@
         "profile": "Profile",
         "last-login-time": "Last Login",
         "change-password": "Change Password",
-        "current-password": "Current password"
+        "current-password": "Current password",
+        "copy-jwt-token": "Copy JWT token",
+        "valid-till": "Valid till {{expirationData}}",
+        "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

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

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

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