Secrets: rename Slug into Unique identifier

Author: lyubov-voloshko

frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html

@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>
     <mat-icon class="title-icon">history</mat-icon>
-    Audit Log: {{data.secret.slug}}
+    Audit Log: <span class="secret-identifier">{{data.secret.slug}}</span>
 </h2>
 
 <mat-dialog-content>

frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html

@@ -3,11 +3,11 @@ <h2 mat-dialog-title>Create Secret</h2>
 <mat-dialog-content>
     <form [formGroup]="form" (ngSubmit)="onSubmit()" id="createSecretForm">
         <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Slug</mat-label>
+            <mat-label>Unique Identifier</mat-label>
             <input matInput formControlName="slug"
                 placeholder="e.g., api-key, database-password"
                 data-testid="create-secret-slug-input">
-            <mat-hint>Unique identifier (letters, numbers, hyphens, underscores)</mat-hint>
+            <mat-hint>Use letters, numbers, hyphens, and underscores (no spaces)</mat-hint>
             <mat-error *ngIf="form.get('slug')?.invalid">{{slugError}}</mat-error>
         </mat-form-field>
 

frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts

@@ -72,9 +72,9 @@ export class CreateSecretDialogComponent {
 
   get slugError(): string {
     const control = this.form.get('slug');
-    if (control?.hasError('required')) return 'Slug is required';
-    if (control?.hasError('maxlength')) return 'Slug must be 255 characters or less';
-    if (control?.hasError('pattern')) return 'Only letters, numbers, hyphens, and underscores allowed';
+    if (control?.hasError('required')) return 'Unique identifier is required';
+    if (control?.hasError('maxlength')) return 'Unique identifier must be 255 characters or less';
+    if (control?.hasError('pattern')) return 'Only letters, numbers, hyphens, and underscores allowed (no spaces)';
     return '';
   }
 

frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html

@@ -4,7 +4,7 @@ <h2 mat-dialog-title>Delete Secret</h2>
     <div class="warning-container">
         <mat-icon class="warning-icon">warning</mat-icon>
         <div class="warning-content">
-            <p>Are you sure you want to delete the secret <strong>{{data.secret.slug}}</strong>?</p>
+            <p>Are you sure you want to delete the secret with identifier <strong>{{data.secret.slug}}</strong>?</p>
             <p class="warning-details">
                 This action cannot be undone. The secret value and all associated audit logs will be permanently removed.
             </p>

frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Edit Secret: {{data.secret.slug}}</h2>
+<h2 mat-dialog-title>Edit Secret: <span class="secret-identifier">{{data.secret.slug}}</span></h2>
 
 <mat-dialog-content>
     <form [formGroup]="form" (ngSubmit)="onSubmit()" id="editSecretForm">

frontend/src/app/components/secrets/secrets.component.html

@@ -14,7 +14,7 @@ <h1 class="mat-h1">Company Secrets</h1>
             <input matInput
                 [(ngModel)]="searchQuery"
                 (ngModelChange)="onSearchChange($event)"
-                placeholder="Search by slug..."
+                placeholder="Search by unique identifier..."
                 data-testid="secrets-search-input">
             <mat-icon matSuffix>search</mat-icon>
         </mat-form-field>
@@ -41,12 +41,12 @@ <h3>No secrets found</h3>
     </div>
 
     <table *ngIf="!loading && secrets.length > 0" mat-table [dataSource]="secrets" class="mat-elevation-z2 secrets-table">
-        <!-- Slug Column -->
+        <!-- Unique Identifier Column -->
         <ng-container matColumnDef="slug">
-            <th mat-header-cell *matHeaderCellDef>Slug</th>
+            <th mat-header-cell *matHeaderCellDef>Unique Identifier</th>
             <td mat-cell *matCellDef="let secret; let i = index"
                 class="secrets-cell secrets-cell_slug"
-                data-label="Slug"
+                data-label="Unique Identifier"
                 attr.data-testid="secret-slug-{{i}}-cell">
                 <span class="slug-text">{{secret.slug}}</span>
             </td>