feat(console): more emphasize to preferred login name in user's table and detail (#6588)

* feat: poc

* feat: more emphasize to preferred login name in user's table and detail

* fix: add @peintnermax suggestions

---------

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -78,7 +78,7 @@
 
         <ng-container *ngIf="currentSetting === 'general'">
           <ng-template cnslHasRole [hasRole]="['user.read$', 'user.read:' + user.id]">
-            <cnsl-card *ngIf="user.human" title="{{ 'USER.PROFILE.TITLE' | translate }}">
+            <cnsl-card *ngIf="user.human" title="{{ user.preferredLoginName }} - {{ 'USER.PROFILE.TITLE' | translate }}">
               <cnsl-detail-form
                 [preferredLoginName]="user.preferredLoginName"
                 [disabled]="(canWrite$ | async) === false"

console/src/app/pages/users/user-list/user-table/user-table.component.html

@@ -124,6 +124,20 @@
         </td>
       </ng-container>
 
+      <ng-container matColumnDef="preferredLoginName">
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          mat-sort-header
+          [ngClass]="{ 'search-active': this.userSearchKey === UserListSearchKey.DISPLAY_NAME }"
+        >
+          {{ 'USER.PROFILE.PREFERREDLOGINNAME' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let user" [routerLink]="user.id ? ['/users', user.id] : null">
+          <span *ngIf="user.human">{{ user.preferredLoginName }}</span>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="username">
         <th
           mat-header-cell

console/src/app/pages/users/user-list/user-table/user-table.component.ts

@@ -51,7 +51,7 @@ export class UserTableComponent implements OnInit {
   @Input() public displayedColumnsHuman: string[] = [
     'select',
     'displayName',
-    'username',
+    'preferredLoginName',
     'email',
     'state',
     'creationDate',
@@ -194,6 +194,10 @@ export class UserTableComponent implements OnInit {
         case 'username':
           sortingField = UserFieldName.USER_FIELD_NAME_USER_NAME;
           break;
+        case 'preferredLoginName':
+          // TODO: replace with preferred username sorting once implemented
+          sortingField = UserFieldName.USER_FIELD_NAME_USER_NAME;
+          break;
         case 'email':
           sortingField = UserFieldName.USER_FIELD_NAME_EMAIL;
           break;

console/src/assets/i18n/bg.json

@@ -489,6 +489,7 @@
       "LASTNAME": "Фамилия",
       "NICKNAME": "Псевдоним",
       "DISPLAYNAME": "Екранно име",
+      "PREFERREDLOGINNAME": "Предпочитано име за вход",
       "PREFERRED_LANGUAGE": "език",
       "GENDER": "Пол",
       "PASSWORD": "Парола",

console/src/assets/i18n/de.json

@@ -495,6 +495,7 @@
       "LASTNAME": "Nachname",
       "NICKNAME": "Spitzname",
       "DISPLAYNAME": "Anzeigename",
+      "PREFERREDLOGINNAME": "Bevorzugter Anmeldename",
       "PREFERRED_LANGUAGE": "Sprache",
       "GENDER": "Geschlecht",
       "PASSWORD": "Passwort",

console/src/assets/i18n/en.json

@@ -496,6 +496,7 @@
       "LASTNAME": "Family Name",
       "NICKNAME": "Nickname",
       "DISPLAYNAME": "Display Name",
+      "PREFERREDLOGINNAME": "Preferred login name",
       "PREFERRED_LANGUAGE": "Language",
       "GENDER": "Gender",
       "PASSWORD": "Password",

console/src/assets/i18n/es.json

@@ -496,6 +496,7 @@
       "LASTNAME": "Apellidos",
       "NICKNAME": "Apodo",
       "DISPLAYNAME": "Nombre mostrado",
+      "PREFERREDLOGINNAME": "Nombre de inicio de sesión preferido",
       "PREFERRED_LANGUAGE": "Idioma",
       "GENDER": "Género",
       "PASSWORD": "Contraseña",

console/src/assets/i18n/fr.json

@@ -495,6 +495,7 @@
       "LASTNAME": "Nom de famille",
       "NICKNAME": "Surnom",
       "DISPLAYNAME": "Nom d'affichage",
+      "PREFERREDLOGINNAME": "Nom de connexion préféré",
       "PREFERRED_LANGUAGE": "Langue",
       "GENDER": "Sexe",
       "PASSWORD": "Mot de passe",

console/src/assets/i18n/it.json

@@ -494,6 +494,7 @@
       "LASTNAME": "Cognome",
       "NICKNAME": "Soprannome",
       "DISPLAYNAME": "DisplayName",
+      "PREFERREDLOGINNAME": "Nome di accesso preferito",
       "PREFERRED_LANGUAGE": "Lingua",
       "GENDER": "Genere",
       "PASSWORD": "Password",

console/src/assets/i18n/ja.json

@@ -496,6 +496,7 @@
       "LASTNAME": "姓",
       "NICKNAME": "ニックネーム",
       "DISPLAYNAME": "表示名",
+      "PREFERREDLOGINNAME": "優先ログイン名",
       "PREFERRED_LANGUAGE": "言語",
       "GENDER": "性別",
       "PASSWORD": "パスワード",

console/src/assets/i18n/mk.json

@@ -496,6 +496,7 @@
       "LASTNAME": "Презиме",
       "NICKNAME": "Прекар",
       "DISPLAYNAME": "Име за приказ",
+      "PREFERREDLOGINNAME": "Претпочитано име за најава",
       "PREFERRED_LANGUAGE": "Јазик",
       "GENDER": "Пол",
       "PASSWORD": "Лозинка",

console/src/assets/i18n/pl.json

@@ -495,6 +495,7 @@
       "LASTNAME": "Nazwisko",
       "NICKNAME": "Przezwisko",
       "DISPLAYNAME": "Nazwa wyświetlana",
+      "PREFERREDLOGINNAME": "Preferowana nazwa logowania",
       "PREFERRED_LANGUAGE": "Język",
       "GENDER": "Płeć",
       "PASSWORD": "Hasło",

console/src/assets/i18n/pt.json

@@ -496,6 +496,7 @@
       "LASTNAME": "Sobrenome",
       "NICKNAME": "Apelido",
       "DISPLAYNAME": "Nome de Exibição",
+      "PREFERREDLOGINNAME": "Nome de login preferido",
       "PREFERRED_LANGUAGE": "Idioma",
       "GENDER": "Gênero",
       "SENHA": "Senha",

console/src/assets/i18n/zh.json

@@ -495,6 +495,7 @@
       "LASTNAME": "姓",
       "NICKNAME": "昵称",
       "DISPLAYNAME": "展示名称",
+      "PREFERREDLOGINNAME": "首选登录名",
       "PREFERRED_LANGUAGE": "语言",
       "GENDER": "性别",
       "PASSWORD": "密码",