From 06708c4746a800af901b86956c9e89c2db8b19fe Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <dgerik2015@gmail.com>
Date: Tue, 21 Sep 2021 18:15:20 +0300
Subject: [PATCH] Add button Copy JWT token to profile

---
 .../home/pages/profile/profile.component.html |  9 ++++++++
 .../home/pages/profile/profile.component.ts   | 23 ++++++++++++++++++-
 .../assets/locale/locale.constant-en_US.json  |  5 +++-
 .../assets/locale/locale.constant-ru_RU.json  |  5 +++-
 .../assets/locale/locale.constant-uk_UA.json  |  5 +++-
 5 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index f1a42344fb..4312b89d77 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/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 ngxClipboard
+                    (cbOnSuccess)="onTokenCopied($event)"
+                    [cbContent]="token">
+              <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+              <span>{{ 'profile.copy-jwt-token' | translate }}</span>
+            </button>
+            <span style="padding: 10px; opacity: 0.7;">{{getExpirationDate}}</span>
+          </div>
           <div fxLayout="row" class="layout-wrap">
             <span fxFlex></span>
             <button mat-button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts b/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
index 60b4fbb8a8..cb746be964 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
@@ -34,6 +34,8 @@ 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';
 
 @Component({
   selector: 'tb-profile',
@@ -48,6 +50,15 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
   languageList = env.supportedLangs;
   private readonly authUser: AuthUser;
 
+  get token() {
+    return `Bearer ${localStorage.getItem('jwt_token')}`;
+  }
+
+  get getExpirationDate() {
+    const expirationData = this.datePipe.transform(localStorage.getItem('jwt_token_expiration'), '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 +66,8 @@ 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) {
     super(store);
     this.authUser = getCurrentAuthUser(this.store);
   }
@@ -141,4 +153,13 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
     return this.authUser.authority === Authority.SYS_ADMIN;
   }
 
+  onTokenCopied($event) {
+    this.store.dispatch(new ActionNotificationShow({
+      message: this.translate.instant('profile.tokenCopiedMessage'),
+      type: 'success',
+      duration: 750,
+      verticalPosition: 'bottom',
+      horizontalPosition: 'right'
+    }));
+  }
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index ff33319c0a..935a7bc76c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2364,7 +2364,10 @@
         "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}}",
+        "tokenCopiedMessage": "JWT token has been copied to clipboard"
     },
     "relation": {
         "relations": "Relations",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
index 5916860fb0..6c10c92a0a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
@@ -1262,7 +1262,10 @@
         "profile": "Профиль",
         "last-login-time": "Время последнего входа в систему",
         "change-password": "Изменить пароль",
-        "current-password": "Текущий пароль"
+        "current-password": "Текущий пароль",
+        "copy-jwt-token": "Копировать JWT токен",
+        "valid-till": "Годен до {{expirationData}}",
+        "tokenCopiedMessage": "JWT токен скопирован в буфер обмена"
     },
     "relation": {
         "relations": "Отношения",
diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
index 20615d34e3..e1406e02fa 100644
--- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
+++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
@@ -1677,7 +1677,10 @@
         "profile": "Профіль",
         "last-login-time": "Час останнього входу",
         "change-password": "Змінити пароль",
-        "current-password": "Поточний пароль"
+        "current-password": "Поточний пароль",
+        "copy-jwt-token": "Копіювати JWT токен",
+        "valid-till": "Придатний до {{expirationData}}",
+        "tokenCopiedMessage": "JWT токен скопійовано в буфер обміну"
     },
     "relation": {
         "relations": "Відношення",