diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html index 82cd665f36..dbcad96b16 100644 --- a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html @@ -96,6 +96,10 @@
device.connectivity.execute-following-command
+
+ warning + {{ 'api-key.generated-api-key-insecure-url' | translate }} +
diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss index 7122a08f23..6fb607f5a5 100644 --- a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss @@ -15,9 +15,8 @@ */ @import '../../src/scss/constants'; -:host{ +:host { display: grid; - width: 500px; height: 100%; max-width: 100%; max-height: 100vh; @@ -26,6 +25,20 @@ .tb-install-instruction-text { min-height: 42px; } + + .insecure-url-warning { + .mat-icon { + color: #FAA405; + } + } + + @media #{$mat-sm} { + width: 470px; + } + + @media #{$mat-gt-sm} { + width: 720px; + } } :host ::ng-deep { diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.ts b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.ts index b60ba9ecde..999a701ae1 100644 --- a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.ts @@ -34,7 +34,10 @@ export interface ApiKeyGeneratedDialogData { }) export class ApiKeyGeneratedDialogComponent extends DialogComponent { - apiKeyCommand = userInfoCommand(this.data.apiKey.value); + private baseUrl = window.location.origin; + + apiKeyCommand = userInfoCommand(this.baseUrl, this.data.apiKey.value); + secureUrl = this.baseUrl.startsWith('https'); selectedTab: number; constructor(protected store: Store, diff --git a/ui-ngx/src/app/shared/models/api-key.models.ts b/ui-ngx/src/app/shared/models/api-key.models.ts index e3950cc5dd..3e0360f1ee 100644 --- a/ui-ngx/src/app/shared/models/api-key.models.ts +++ b/ui-ngx/src/app/shared/models/api-key.models.ts @@ -19,7 +19,7 @@ import { HasTenantId } from '@shared/models/entity.models'; import { ApiKeyId } from '@shared/models/id/api-key-id'; import { UserId } from '@shared/models/id/user-id'; -export const userInfoCommand = (key: string): string => `curl -X GET "${window.location.origin}/api/auth/user" -H "Content-Type: application/json" -H "X-Authorization: ApiKey ${key}"` +export const userInfoCommand = (baseUrl: string, apiKey: string): string => `curl -X GET "${baseUrl}/api/auth/user" -H "Content-Type: application/json" -H "X-Authorization: ApiKey ${apiKey}"` export interface ApiKeyInfo extends BaseData, HasTenantId { enabled: boolean; 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 25efae80b3..b834af6d8e 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -1012,6 +1012,7 @@ "generated-api-key-title": "API key generated. Let’s check connectivity!", "generated-api-key-copy": "Make sure to copy and save your API key now as you will not be able to see it again.", "generated-api-key-command": "Use the following instructions to check connectivity. As a result, you should receive the current user information:", + "generated-api-key-insecure-url": "Executing commands over an insecure HTTP connection will send your API key unencrypted, making it vulnerable to interception.", "list": "{ count, plural, =1 {One API key} other {List of # API keys} }", "manage": "Manage", "manage-api-keys": "Manage API keys",