From 06708c4746a800af901b86956c9e89c2db8b19fe Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Tue, 21 Sep 2021 18:15:20 +0300 Subject: [PATCH 1/3] 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}} +
+ + {{getExpirationDate}} +
- {{getExpirationDate}} + {{ expirationJwtData }}
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.scss b/ui-ngx/src/app/modules/home/pages/profile/profile.component.scss index a72519090d..0832ef03f3 100644 --- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.scss +++ b/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} { 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 cb746be964..47497b3ebc 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,7 +34,7 @@ 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 { ActionNotificationShow } from '@core/notification/notification.actions'; import { DatePipe } from '@angular/common'; @Component({ @@ -50,14 +50,14 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir languageList = env.supportedLangs; private readonly authUser: AuthUser; - get token() { + get jwtToken(): string { return `Bearer ${localStorage.getItem('jwt_token')}`; } - get getExpirationDate() { + get expirationJwtData(): string { const expirationData = this.datePipe.transform(localStorage.getItem('jwt_token_expiration'), 'yyyy-MM-dd HH:mm:ss'); - return this.translate.instant('profile.valid-till', {expirationData}); - }; + return this.translate.instant('profile.valid-till', { expirationData }); + } constructor(protected store: Store, private route: ActivatedRoute, @@ -153,7 +153,7 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir return this.authUser.authority === Authority.SYS_ADMIN; } - onTokenCopied($event) { + onTokenCopied() { this.store.dispatch(new ActionNotificationShow({ message: this.translate.instant('profile.tokenCopiedMessage'), type: 'success', 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 6c10c92a0a..e03828a36c 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json +++ b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json @@ -1264,7 +1264,7 @@ "change-password": "Изменить пароль", "current-password": "Текущий пароль", "copy-jwt-token": "Копировать JWT токен", - "valid-till": "Годен до {{expirationData}}", + "valid-till": "Действителен до {{expirationData}}", "tokenCopiedMessage": "JWT токен скопирован в буфер обмена" }, "relation": { 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 e1406e02fa..b857a8bbbe 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json @@ -1679,7 +1679,7 @@ "change-password": "Змінити пароль", "current-password": "Поточний пароль", "copy-jwt-token": "Копіювати JWT токен", - "valid-till": "Придатний до {{expirationData}}", + "valid-till": "Дійсний до {{expirationData}}", "tokenCopiedMessage": "JWT токен скопійовано в буфер обміну" }, "relation": { From b57a58712ea5d25ed0fc1d1d15b351112f9c7e6e Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Thu, 23 Sep 2021 13:02:00 +0300 Subject: [PATCH 3/3] Add warning tooltip if token expiration time out --- .../home/pages/profile/profile.component.html | 6 +-- .../home/pages/profile/profile.component.ts | 37 ++++++++++++++----- .../assets/locale/locale.constant-en_US.json | 3 +- .../assets/locale/locale.constant-ru_RU.json | 3 +- .../assets/locale/locale.constant-uk_UA.json | 3 +- 5 files changed, 36 insertions(+), 16 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 32ecd28bd3..6d1eeaf3ac 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 @@ -85,9 +85,9 @@
- 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 47497b3ebc..af77f15c71 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 @@ -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,13 +159,24 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir return this.authUser.authority === Authority.SYS_ADMIN; } - onTokenCopied() { - this.store.dispatch(new ActionNotificationShow({ - message: this.translate.instant('profile.tokenCopiedMessage'), - type: 'success', - duration: 750, - verticalPosition: 'bottom', - horizontalPosition: 'right' - })); + 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' + })); + } } } 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 935a7bc76c..9629970ebc 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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", 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 e03828a36c..35df70e300 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json +++ b/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": "Отношения", 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 b857a8bbbe..257a3519a9 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/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": "Відношення",