chore(console): resolve warnings due to dependency update (#4270)

* cli, core * material cdk * schematics * chore(deps): bump ngx-color from 7.3.3 to 8.0.2 in /console (#4228) Bumps [ngx-color](https://github.com/scttcper/ngx-color) from 7.3.3 to 8.0.2. - [Release notes](https://github.com/scttcper/ngx-color/releases) - [Commits](https://github.com/scttcper/ngx-color/compare/v7.3.3...v8.0.2) --- updated-dependencies: - dependency-name: ngx-color dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * eslint-plugin * chore(deps): bump moment from 2.29.3 to 2.29.4 in /console (#3926) Bumps [moment](https://github.com/moment/moment) from 2.29.3 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.29.3...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump codemirror from 5.65.6 to 6.0.1 in /console (#3928) Bumps [codemirror](https://github.com/codemirror/basic-setup) from 5.65.6 to 6.0.1. - [Release notes](https://github.com/codemirror/basic-setup/releases) - [Changelog](https://github.com/codemirror/basic-setup/blob/main/CHANGELOG.md) - [Commits](https://github.com/codemirror/basic-setup/commits/6.0.1) --- updated-dependencies: - dependency-name: codemirror dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * lock * use codemirror 5 * remove redundant null undefined checks * i18n, undefined checks * remove redundant null and undefined checks * checks * fix: resolve null check warnings * commonjs deps Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Livio Spring <[email protected]>
2026-11-11 08:35:13 +00:00 · 2022-09-01 07:44:39 +00:00
parent 2f647ce9a2
commit 861464598a
62 changed files with 927 additions and 780 deletions
@@ -1,31 +1,55 @@
-<cnsl-card title="{{'USER.PASSWORDLESS.TITLE' | translate}}"
-  description="{{'USER.PASSWORDLESS.DESCRIPTION' | translate}}">
-  <button card-actions mat-icon-button (click)="getPasswordless()" class="icon-button"
-    matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+<cnsl-card
+  title="{{ 'USER.PASSWORDLESS.TITLE' | translate }}"
+  description="{{ 'USER.PASSWORDLESS.DESCRIPTION' | translate }}"
+>
+  <button
+    card-actions
+    mat-icon-button
+    (click)="getPasswordless()"
+    class="icon-button"
+    matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
+  >
    <mat-icon class="icon">refresh</mat-icon>
  </button>
-  <cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getPasswordless()"
-    [dataSize]="dataSource?.data?.length ?? 0">
-    <button actions class="cnsl-action-button button" (click)="addPasswordless()" mat-raised-button color="primary"
-      matTooltip="{{'ACTIONS.NEW' | translate}}">
+  <cnsl-refresh-table
+    [hideRefresh]="true"
+    [loading]="loading$ | async"
+    (refreshed)="getPasswordless()"
+    [dataSize]="dataSource.data.length"
+  >
+    <button
+      actions
+      class="cnsl-action-button button"
+      (click)="addPasswordless()"
+      mat-raised-button
+      color="primary"
+      matTooltip="{{ 'ACTIONS.NEW' | translate }}"
+    >
      <i class="icon las la-fingerprint"></i>
-      {{'USER.PASSWORDLESS.U2F' | translate}}
+      {{ 'USER.PASSWORDLESS.U2F' | translate }}
    </button>
    <table class="table" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.PASSWORDLESS.NAME' | translate }} </th>
-        <td mat-cell *matCellDef="let mfa"><span *ngIf="mfa?.name" class="centered">
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.PASSWORDLESS.NAME' | translate }}</th>
+        <td mat-cell *matCellDef="let mfa">
+          <span *ngIf="mfa?.name" class="centered">
            {{ mfa?.name }}
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="state">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.PASSWORDLESS.TABLESTATE' | translate }} </th>
-        <td mat-cell *matCellDef="let mfa"><span class="centered">
-            <span class="state"
-              [ngClass]="{'active': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY, 'inactive': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY }">{{'USER.PASSWORDLESS.STATE.'+
-              mfa.state | translate}}</span>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.PASSWORDLESS.TABLESTATE' | translate }}</th>
+        <td mat-cell *matCellDef="let mfa">
+          <span class="centered">
+            <span
+              class="state"
+              [ngClass]="{
+                active: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY,
+                inactive: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY
+              }"
+              >{{ 'USER.PASSWORDLESS.STATE.' + mfa.state | translate }}</span
+            >
          </span>
        </td>
      </ng-container>
@@ -34,8 +58,13 @@
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let mfa">
          <cnsl-table-actions>
-            <button actions matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
-              (click)="deletePasswordless(mfa.id)">
+            <button
+              actions
+              matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
+              color="warn"
+              mat-icon-button
+              (click)="deletePasswordless(mfa.id)"
+            >
              <i class="las la-trash"></i>
            </button>
          </cnsl-table-actions>
@@ -43,11 +72,11 @@
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
-      <span>{{'USER.PASSWORDLESS.EMPTY' | translate}}</span>
+      <span>{{ 'USER.PASSWORDLESS.EMPTY' | translate }}</span>
    </div>
  </cnsl-refresh-table>
  <div class="table-wrapper">
@@ -55,4 +84,4 @@
      <mat-spinner diameter="50"></mat-spinner>
    </div>
  </div>
-</cnsl-card>
+</cnsl-card>
@@ -34,7 +34,7 @@ export class AuthPasswordlessComponent implements OnInit, OnDestroy {

  @ViewChild(MatTable) public table!: MatTable<WebAuthNToken.AsObject>;
  @ViewChild(MatSort) public sort!: MatSort;
-  public dataSource!: MatTableDataSource<WebAuthNToken.AsObject>;
+  public dataSource: MatTableDataSource<WebAuthNToken.AsObject> = new MatTableDataSource<WebAuthNToken.AsObject>([]);

  public AuthFactorState: any = AuthFactorState;
  public error: string = '';
@@ -1,5 +1,5 @@
 <cnsl-top-view
-  title="{{ user?.human ? user.human?.profile?.displayName : user?.machine?.name }}"
+  title="{{ user && user.human ? user.human.profile?.displayName : user?.machine?.name }}"
  sub="{{ user?.preferredLoginName }}"
  [isActive]="user?.state === UserState.USER_STATE_ACTIVE"
  [isInactive]="user?.state === UserState.USER_STATE_INACTIVE"
@@ -95,7 +95,7 @@

      <ng-container *ngIf="currentSetting === 'grants'">
        <cnsl-card
-          *ngIf="user?.id"
+          *ngIf="user && user.id"
          title="{{ 'GRANTS.USER.TITLE' | translate }}"
          description="{{ 'GRANTS.USER.DESCRIPTION' | translate }}"
        >
@@ -130,7 +130,7 @@
      </ng-container>

      <ng-container *ngIf="currentSetting === 'metadata'">
-        <cnsl-metadata *ngIf="user?.id" [userId]="user.id"></cnsl-metadata>
+        <cnsl-metadata *ngIf="user && user.id" [userId]="user.id"></cnsl-metadata>
      </ng-container>
    </cnsl-sidenav>

@@ -23,7 +23,7 @@ import { EditDialogComponent, EditDialogType } from './edit-dialog/edit-dialog.c
  styleUrls: ['./auth-user-detail.component.scss'],
 })
 export class AuthUserDetailComponent implements OnDestroy {
-  public user!: User.AsObject;
+  public user?: User.AsObject;
  public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
  public languages: string[] = ['de', 'en', 'it'];

@@ -132,13 +132,13 @@ export class AuthUserDetailComponent implements OnDestroy {
        labelKey: 'ACTIONS.NEWVALUE',
        titleKey: 'USER.PROFILE.CHANGEUSERNAME_TITLE',
        descriptionKey: 'USER.PROFILE.CHANGEUSERNAME_DESC',
-        value: this.user.userName,
+        value: this.user?.userName,
      },
      width: '400px',
    });

    dialogRef.afterClosed().subscribe((resp: { value: string }) => {
-      if (resp && resp.value && resp.value !== this.user.userName) {
+      if (resp && resp.value && resp.value !== this.user?.userName) {
        this.userService
          .updateMyUserName(resp.value)
          .then(() => {
@@ -153,7 +153,7 @@ export class AuthUserDetailComponent implements OnDestroy {
  }

  public saveProfile(profileData: Profile.AsObject): void {
-    if (this.user.human) {
+    if (this.user?.human) {
      this.user.human.profile = profileData;

      this.userService
@@ -180,7 +180,7 @@ export class AuthUserDetailComponent implements OnDestroy {
      .setMyEmail(email)
      .then(() => {
        this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
-        if (this.user.human) {
+        if (this.user?.human) {
          const mailToSet = new Email();
          mailToSet.setEmail(email);
          this.user.human.email = mailToSet.toObject();
@@ -237,7 +237,7 @@ export class AuthUserDetailComponent implements OnDestroy {
      .removeMyPhone()
      .then(() => {
        this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
-        if (this.user.human?.phone) {
+        if (this.user?.human?.phone) {
          const phone = new Phone();
          this.user.human.phone = phone.toObject();
          this.refreshUser();
@@ -249,12 +249,12 @@ export class AuthUserDetailComponent implements OnDestroy {
  }

  public savePhone(phone: string): void {
-    if (this.user.human) {
+    if (this.user?.human) {
      this.userService
        .setMyPhone(phone)
        .then(() => {
          this.toast.showInfo('USER.TOAST.PHONESAVED', true);
-          if (this.user.human) {
+          if (this.user?.human) {
            const phoneToSet = new Phone();
            phoneToSet.setPhone(phone);
            this.user.human.phone = phoneToSet.toObject();
@@ -277,7 +277,7 @@ export class AuthUserDetailComponent implements OnDestroy {
            labelKey: 'USER.LOGINMETHODS.PHONE.EDITVALUE',
            titleKey: 'USER.LOGINMETHODS.PHONE.EDITTITLE',
            descriptionKey: 'USER.LOGINMETHODS.PHONE.EDITDESC',
-            value: this.user.human?.phone?.phone,
+            value: this.user?.human?.phone?.phone,
            type: type,
          },
          width: '400px',
@@ -297,7 +297,7 @@ export class AuthUserDetailComponent implements OnDestroy {
            labelKey: 'ACTIONS.NEWVALUE',
            titleKey: 'USER.LOGINMETHODS.EMAIL.EDITTITLE',
            descriptionKey: 'USER.LOGINMETHODS.EMAIL.EDITDESC',
-            value: this.user.human?.email?.email,
+            value: this.user?.human?.email?.email,
            type: type,
          },
          width: '400px',
@@ -1,20 +1,35 @@
-<cnsl-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
-  <button card-actions mat-icon-button (click)="getMFAs()" class="icon-button"
-    matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+<cnsl-card title="{{ 'USER.MFA.TITLE' | translate }}" description="{{ 'USER.MFA.DESCRIPTION' | translate }}">
+  <button
+    card-actions
+    mat-icon-button
+    (click)="getMFAs()"
+    class="icon-button"
+    matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
+  >
    <mat-icon class="icon">refresh</mat-icon>
  </button>

-  <cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getMFAs()"
-    [dataSize]="dataSource?.data?.length ?? 0">
-    <button actions class="button cnsl-action-button" (click)="addAuthFactor()" mat-raised-button color="primary"
-      matTooltip="{{'ACTIONS.NEW' | translate}}">
+  <cnsl-refresh-table
+    [hideRefresh]="true"
+    [loading]="loading$ | async"
+    (refreshed)="getMFAs()"
+    [dataSize]="dataSource.data.length"
+  >
+    <button
+      actions
+      class="button cnsl-action-button"
+      (click)="addAuthFactor()"
+      mat-raised-button
+      color="primary"
+      matTooltip="{{ 'ACTIONS.NEW' | translate }}"
+    >
      <mat-icon class="icon">add</mat-icon>
-      <span>{{'USER.MFA.ADD' | translate}}</span>
+      <span>{{ 'USER.MFA.ADD' | translate }}</span>
    </button>

    <table class="table" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.TABLETYPE' | translate }}</th>
        <td mat-cell *matCellDef="let mfa">
          <span *ngIf="mfa.otp !== undefined">OTP (One-Time Password)</span>
          <span *ngIf="mfa.u2f !== undefined">U2F (Universal 2nd Factor)</span>
@@ -22,7 +37,7 @@
      </ng-container>

      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.NAME' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.NAME' | translate }}</th>
        <td mat-cell *matCellDef="let mfa">
          <span *ngIf="mfa?.u2f?.name" class="centered">
            {{ mfa.u2f.name }}
@@ -31,11 +46,17 @@
      </ng-container>

      <ng-container matColumnDef="state">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
-        <td mat-cell *matCellDef="let mfa"><span class="centered">
-            <span class="state"
-              [ngClass]="{'active': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY, 'inactive': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY}">{{'USER.MFA.STATE.'+
-              mfa.state | translate}}</span>
+        <th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.TABLESTATE' | translate }}</th>
+        <td mat-cell *matCellDef="let mfa">
+          <span class="centered">
+            <span
+              class="state"
+              [ngClass]="{
+                active: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY,
+                inactive: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY
+              }"
+              >{{ 'USER.MFA.STATE.' + mfa.state | translate }}</span
+            >
          </span>
        </td>
      </ng-container>
@@ -44,8 +65,13 @@
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let mfa">
          <cnsl-table-actions>
-            <button actions matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
-              (click)="deleteMFA(mfa)">
+            <button
+              actions
+              matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
+              color="warn"
+              mat-icon-button
+              (click)="deleteMFA(mfa)"
+            >
              <i class="las la-trash"></i>
            </button>
          </cnsl-table-actions>
@@ -53,12 +79,12 @@
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>

    <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
-      <span>{{'USER.MFA.EMPTY' | translate}}</span>
+      <span>{{ 'USER.MFA.EMPTY' | translate }}</span>
    </div>
  </cnsl-refresh-table>
  <div class="table-wrapper">
@@ -66,4 +92,4 @@
      <mat-spinner diameter="50"></mat-spinner>
    </div>
  </div>
-</cnsl-card>
+</cnsl-card>
@@ -32,7 +32,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {

  @ViewChild(MatTable) public table!: MatTable<AuthFactor.AsObject>;
  @ViewChild(MatSort) public sort!: MatSort;
-  public dataSource!: MatTableDataSource<AuthFactor.AsObject>;
+  public dataSource: MatTableDataSource<AuthFactor.AsObject> = new MatTableDataSource<AuthFactor.AsObject>([]);

  public AuthFactorState: any = AuthFactorState;

@@ -1,79 +1,105 @@
-<div class="contact-method-col">
-    <div class="contact-method-row">
-        <div class="left">
-            <span class="label cnsl-secondary-text">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
-            <span class="name">*********</span>
+<div class="contact-method-col" *ngIf="human">
+  <div class="contact-method-row">
+    <div class="left">
+      <span class="label cnsl-secondary-text">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
+      <span class="name">*********</span>

-            <ng-content select="[pwdAction]"></ng-content>
-        </div>
-
-        <div class="right">
-            <a matTooltip="{{'USER.PASSWORD.SET' | translate}}" [disabled]="!canWrite" [routerLink]="['password']"
-                mat-icon-button>
-                <i class="las la-pen"></i>
-            </a>
-        </div>
+      <ng-content select="[pwdAction]"></ng-content>
    </div>

-    <div class="contact-method-row">
-        <div class="left">
-            <span class="label cnsl-secondary-text">{{ 'USER.EMAIL' | translate }}</span>
-            <span class="name">{{human?.email?.email}}</span>
-            <span *ngIf="human?.email?.isEmailVerified" class="contact-state verified">{{'USER.EMAILVERIFIED' |
-                translate}}</span>
-            <div *ngIf="!human?.email?.isEmailVerified" class="block">
-                <span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
+    <div class="right">
+      <a
+        matTooltip="{{ 'USER.PASSWORD.SET' | translate }}"
+        [disabled]="!canWrite"
+        [routerLink]="['password']"
+        mat-icon-button
+      >
+        <i class="las la-pen"></i>
+      </a>
+    </div>
+  </div>

-                <ng-container *ngIf="human?.email">
-                    <a *ngIf="canWrite" class="verify cnsl-secondary-text"
-                        matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
-                        (click)="emitEmailVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
-                </ng-container>
-            </div>
+  <div class="contact-method-row">
+    <div class="left">
+      <span class="label cnsl-secondary-text">{{ 'USER.EMAIL' | translate }}</span>
+      <span class="name">{{ human.email?.email }}</span>
+      <span *ngIf="human.email?.isEmailVerified" class="contact-state verified">{{ 'USER.EMAILVERIFIED' | translate }}</span>
+      <div *ngIf="!human.email?.isEmailVerified" class="block">
+        <span class="contact-state notverified">{{ 'USER.NOTVERIFIED' | translate }}</span>

-            <ng-content select="[emailAction]"></ng-content>
-        </div>
+        <ng-container *ngIf="human.email">
+          <a
+            *ngIf="canWrite"
+            class="verify cnsl-secondary-text"
+            matTooltip="{{ 'USER.LOGINMETHODS.EMAIL.RESEND' | translate }}"
+            (click)="emitEmailVerification()"
+            >{{ 'USER.LOGINMETHODS.RESENDCODE' | translate }}</a
+          >
+        </ng-container>
+      </div>

-        <div class="right">
-            <button matTooltip="{{'ACTIONS.EDIT' | translate}}"
-                [disabled]="!canWrite || state === UserState.USER_STATE_INITIAL"
-                (click)="openEditDialog(EditDialogType.EMAIL)" mat-icon-button>
-                <i class="las la-pen"></i>
-            </button>
-        </div>
+      <ng-content select="[emailAction]"></ng-content>
    </div>

-    <div class="contact-method-row">
-        <div class="left">
-            <span class="label cnsl-secondary-text">{{ 'USER.PHONE' | translate }}</span>
-            <span class="name">{{human?.phone?.phone ? human.phone?.phone : ('USER.PHONEEMPTY' | translate)}}</span>
-            <span *ngIf="human?.phone?.isPhoneVerified" class="contact-state verified">{{'USER.PHONEVERIFIED' |
-                translate}}</span>
-            <div *ngIf="human.phone?.phone && !human?.phone?.isPhoneVerified" class="block">
-                <span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
-
-                <ng-container *ngIf="human?.phone?.phone">
-                    <a *ngIf="!disablePhoneCode && canWrite" class="verify cnsl-secondary-text"
-                        matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
-                        (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
-                    <a *ngIf="canWrite" class="verify cnsl-secondary-text"
-                        matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
-                        (click)="emitPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
-                </ng-container>
-            </div>
-
-            <ng-content select="[phoneAction]"></ng-content>
-        </div>
-
-        <div class="right">
-            <button matTooltip="{{'ACTIONS.DELETE' | translate}}" *ngIf="human && human.phone?.phone" color="warn"
-                (click)="emitDeletePhone()" mat-icon-button>
-                <i class="las la-trash"></i>
-            </button>
-            <button matTooltip="{{'ACTIONS.EDIT' | translate}}" [disabled]="!canWrite"
-                (click)="openEditDialog(EditDialogType.PHONE)" mat-icon-button>
-                <i class="las la-pen"></i>
-            </button>
-        </div>
+    <div class="right">
+      <button
+        matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
+        [disabled]="!canWrite || state === UserState.USER_STATE_INITIAL"
+        (click)="openEditDialog(EditDialogType.EMAIL)"
+        mat-icon-button
+      >
+        <i class="las la-pen"></i>
+      </button>
    </div>
-</div>
+  </div>
+
+  <div class="contact-method-row">
+    <div class="left">
+      <span class="label cnsl-secondary-text">{{ 'USER.PHONE' | translate }}</span>
+      <span class="name">{{ human.phone?.phone ? human.phone?.phone : ('USER.PHONEEMPTY' | translate) }}</span>
+      <span *ngIf="human.phone?.isPhoneVerified" class="contact-state verified">{{ 'USER.PHONEVERIFIED' | translate }}</span>
+      <div *ngIf="human.phone?.phone && !human.phone?.isPhoneVerified" class="block">
+        <span class="contact-state notverified">{{ 'USER.NOTVERIFIED' | translate }}</span>
+
+        <ng-container *ngIf="human.phone?.phone">
+          <a
+            *ngIf="!disablePhoneCode && canWrite"
+            class="verify cnsl-secondary-text"
+            matTooltip="{{ 'USER.LOGINMETHODS.ENTERCODE_DESC' | translate }}"
+            (click)="enterCode()"
+            >{{ 'USER.LOGINMETHODS.ENTERCODE' | translate }}</a
+          >
+          <a
+            *ngIf="canWrite"
+            class="verify cnsl-secondary-text"
+            matTooltip="{{ 'USER.LOGINMETHODS.PHONE.RESEND' | translate }}"
+            (click)="emitPhoneVerification()"
+            >{{ 'USER.LOGINMETHODS.RESENDCODE' | translate }}</a
+          >
+        </ng-container>
+      </div>
+
+      <ng-content select="[phoneAction]"></ng-content>
+    </div>
+
+    <div class="right">
+      <button
+        matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+        *ngIf="human && human.phone?.phone"
+        color="warn"
+        (click)="emitDeletePhone()"
+        mat-icon-button
+      >
+        <i class="las la-trash"></i>
+      </button>
+      <button
+        matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
+        [disabled]="!canWrite"
+        (click)="openEditDialog(EditDialogType.PHONE)"
+        mat-icon-button
+      >
+        <i class="las la-pen"></i>
+      </button>
+    </div>
+  </div>
+</div>
@@ -14,7 +14,7 @@ import { EditDialogType } from '../auth-user-detail/edit-dialog/edit-dialog.comp
 export class ContactComponent {
  @Input() disablePhoneCode: boolean = false;
  @Input() canWrite: boolean | null = false;
-  @Input() human!: Human.AsObject;
+  @Input() human?: Human.AsObject;
  @Input() state!: UserState;
  @Output() editType: EventEmitter<EditDialogType> = new EventEmitter<EditDialogType>();
  @Output() resendEmailVerification: EventEmitter<void> = new EventEmitter<void>();
@@ -14,7 +14,7 @@
          *ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
          class="avatar"
          [name]="user.profile?.displayName ?? ''"
-          [avatarUrl]="user?.profile?.avatarUrl || ''"
+          [avatarUrl]="user.profile?.avatarUrl || ''"
          [forColor]="preferredLoginName"
          [size]="80"
        >