Merge pull request #14442 from deaflynx/improve-api-key-generated-dialog

Enhance API key generated dialog: increase width, added warning for insecure connection

ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html

@@ -96,6 +96,10 @@
 <ng-template #executeCommand>
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
+    <div class="tb-form-hint tb-primary-fill insecure-url-warning flex gap-2" [class.hidden]="secureUrl">
+      <mat-icon class="tb-mat-24">warning</mat-icon>
+      <span>{{ 'api-key.generated-api-key-insecure-url' | translate }}</span>
+    </div>
     <tb-markdown usePlainMarkdown containerClass="tb-command-code" [data]='createMarkDownCommand(apiKeyCommand)'></tb-markdown>
   </div>
 </ng-template>

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 {

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<ApiKeyGeneratedDialogComponent, void> {
 
-  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<AppState>,

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<ApiKeyId>, HasTenantId {
   enabled: boolean;

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",