<div *ngIf="auth.authState| async as user; then authenticated else none">

</div>

<ng-template #authenticated>
  <mat-card *ngIf="auth.user | async as user">
    <!--<form [formGroup]="updateFormGroup" >-->
    <!--card header-->
    <mat-card-header fxLayout="column" fxLayoutAlign="center center">

      <img mat-card-avatar [src]="authProcess?.getUserPhotoUrl()">

      <div *ngIf="user.emailVerified; then emailVerified else emailNotVerified"></div>
      <ng-template #emailVerified>
        <mat-icon color="primary"
                  matTooltip="email is verified"
                  matTooltipPosition="after">
          verified_user
        </mat-icon>
      </ng-template>
      <ng-template #emailNotVerified>
        <mat-icon color="warn"
                  matTooltip="email is not verified"
                  matTooltipPosition="after">
          warning
        </mat-icon>
      </ng-template>

    </mat-card-header>

    <!--card content-->
    <mat-card-content *ngIf="editMode; then edit else readonly">
    </mat-card-content>

    <ng-template #edit>
      <form [formGroup]="updateFormGroup" (submit)="save()">

        <mat-card-content fxLayout="column" fxLayoutAlign="center center">
          <div fxLayoutAlign="center">
            <button mat-raised-button color="warn" class="edit-button"
                    (click)="changeEditMode()">
              cancel
            </button>
          </div>

          <!--name-->
          <mat-form-field class="full-width" [appearance]="appearance">
            <mat-label>Name</mat-label>
            <input matInput
                   placeholder="Name"
                   [formControl]="updateNameFormControl">
            <mat-icon matSuffix>person</mat-icon>
            <mat-hint align="end" aria-live="polite"> {{ updateNameFormControl.value?.length }} / {{ config.nameMaxLength }} </mat-hint>
            <mat-error *ngIf="updateNameFormControl.hasError('required')">
              Name is required
            </mat-error>
          </mat-form-field>

          <!--email-->
          <mat-form-field class="full-width" [appearance]="appearance">
            <mat-label>E-mail</mat-label>
            <input matInput
                   placeholder="E-mail"
                   [formControl]="updateEmailFormControl">
            <mat-icon matSuffix>email</mat-icon>
            <mat-error *ngIf="updateEmailFormControl.hasError('required')">
              E-mail is required {{updateEmailFormControl.value}}
            </mat-error>
            <mat-error *ngIf="updateEmailFormControl.hasError('pattern')">
              Please enter a valid e-mail address {{updateEmailFormControl.value}}
            </mat-error>
          </mat-form-field>

          <!--phone number-->
          <mat-form-field *ngIf="false" class="full-width" [appearance]="appearance">
            <mat-label>Phone number</mat-label>
            <input matInput
                   type="tel"
                   placeholder="Phone number"
                   [formControl]="updatePhoneNumberFormControl">
            <mat-icon matSuffix>phone</mat-icon>
            <mat-hint align="end" aria-live="polite">
              The phone number is international. Therefore, it should start with a + sign or 00,
              followed by the country code, - and national number e.g: +49-12345678 or 0041-1234567890

              NOTE : the phone number must be a valid phone credential !!
            </mat-hint>
            <mat-error *ngIf="updatePhoneNumberFormControl.hasError('pattern')">
              Please enter a valid phone number
            </mat-error>
          </mat-form-field>

        </mat-card-content>

        <mat-card-actions fxLayout="column">
          <button mat-button
                  color="primary"
                  type="submit">
            Save changes
          </button>
        </mat-card-actions>
      </form>
    </ng-template>

    <ng-template #readonly>
      <div fxLayoutAlign="center">
        <button mat-raised-button color="primary" class="edit-button"
                (click)="changeEditMode()">
          edit
        </button>
      </div>

      <!--name-->
      <mat-form-field class="full-width" [appearance]="appearance">
        <mat-label>Name</mat-label>
        <input matInput
               placeholder="Name"
               [value]="user.displayName"
               [disabled]="!editMode">
        <mat-icon matSuffix color="primary">person</mat-icon>
      </mat-form-field>

      <!--email-->
      <mat-form-field class="full-width" [appearance]="appearance">
        <mat-label>E-mail</mat-label>
        <input matInput
               placeholder="E-mail" [value]="user.email"
               [disabled]="!editMode">
        <mat-icon matSuffix color="primary">email</mat-icon>
      </mat-form-field>

      <!--phone number-->
      <mat-form-field *ngIf="false" class="full-width" [appearance]="appearance">
        <mat-label>Phone number</mat-label>
        <input matInput
               placeholder="Phone number"
               [value]="user.phoneNumber"
               [disabled]="!editMode">
        <mat-icon matSuffix color="primary">phone</mat-icon>
      </mat-form-field>

      <mat-card-actions fxLayout="column">
        <button *ngIf="canLogout" mat-button color="primary" (click)="signOut()">Sign out</button>
        <button *ngIf="canDeleteAccount" mat-button color="warn" (click)="deleteAccount()">Delete account</button>
      </mat-card-actions>

    </ng-template>

  </mat-card>

</ng-template>


<ng-template #none>
  <mat-card class="none-card" fxLayout="row" fxLayoutAlign="center center">
    <mat-card-content fxLayout="row" fxLayoutAlign="center center">
      <mat-icon color="accent">warning</mat-icon>
      <span>You are not logged in!</span>
    </mat-card-content>
  </mat-card>
</ng-template>

./user.component.scss

.edit-button {
  margin: 1rem;
}

.full-width {
  width: 100%;
}

.cut-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.none-card {
  min-height: 430px;

  span {
    font-size: 24px;
    text-align: center;
    color: rgba(0, 0, 0, .54);
  }
}