<ng-container *ngIf="authProcess.user$ | async as user; else showForm">

  <!-- This component will be shown when:
    - we just sent a verification mail (notably after sign up)
    - we arrived from the guard after trying to access a protected route even though we are connected
  -->
  <div *ngIf="(config.guardProtectedRoutesUntilEmailIsVerified && !user.emailVerified) || (authProcess.emailConfirmationSent && !user.emailVerified); else signedInUser"
       fxLayout="row" fxLayoutAlign="center center">
      <ngx-auth-firebaseui-email-confirmation
        [template]="verifyEmailTemplate"
        [email]="user.email"
        [goBackURL]="goBackURL"
        [verifyEmailTitleText]="verifyEmailTitleText"
        [verifyEmailConfirmationText]="verifyEmailConfirmationText"
        [verifyEmailGoBackText]="verifyEmailGoBackText"
        [sendNewVerificationEmailText]="sendNewVerificationEmailText"
        [signOutText]="signOutText"
        [messageOnEmailConfirmationSuccess]="messageOnEmailConfirmationSuccess"
        (signOut)="signOut()">
    </ngx-auth-firebaseui-email-confirmation>
  </div>

  <ng-template #signedInUser>
      <div class="signed-in-container" fxLayout="column" fxLayoutAlign="center center">
        <img class="account-circle" *ngIf="user.photoURL; else noPhoto" [src]="user.photoURL">
        <ng-template #noPhoto><mat-icon class="account-circle">account_circle</mat-icon></ng-template>
        <div class="user-display-name mat-title">{{ user.displayName }}</div>
        <div class="user-email mat-body-2">{{ user.email }}</div>
        <div class="actions">
          <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
          <a mat-stroked-button class="go-back-button action-button" color="primary" [routerLink]="goBackURL">{{ verifyEmailGoBackText }}</a>
          <button mat-stroked-button class="sign-out-button action-button" color="warn" (click)="signOut()">{{ signOutText }}</button>
        </div>
      </div>
  </ng-template>

</ng-container>

<ng-template #showForm>
  <mat-tab-group [color]="color" [selectedIndex]="tabIndex" (selectedTabChange)="onTabChange($event)">
    <!--Sign in tab-->
    <mat-tab [label]="signInTabText">
      <mat-card>
        <mat-card-title>{{signInCardTitleText}}</mat-card-title>
        <mat-card-content>
          <form  [@animateStagger]="{ value: '50' }"
                 [formGroup]="signInFormGroup"
                (ngSubmit)="signIn()">
            <div fxLayout="column" fxLayoutAlign="center">
              <mat-form-field [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
                              [appearance]="appearance">
                <mat-label>{{emailText}}</mat-label>
                <input matInput
                      formControlName="email"
                      required>
                <mat-icon matSuffix [color]="color">email</mat-icon>
                <mat-error *ngIf="signInEmailFormControl.hasError('required')">
                  {{emailErrorRequiredText}}
                </mat-error>
                <mat-error *ngIf="signInEmailFormControl.hasError('pattern')">
                  {{emailErrorPatternText}}
                </mat-error>
              </mat-form-field>

              <mat-form-field [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
                            [appearance]="appearance">
                <mat-label>{{passwordText}}</mat-label>
                <input matInput [type]="togglePass.type" [minlength]="min" [maxlength]="max" formControlName="password"
                      required/>
                <mat-pass-toggle-visibility #togglePass matSuffix></mat-pass-toggle-visibility>
                <mat-icon matSuffix [color]="color">lock</mat-icon>
                <mat-hint align="end" aria-live="polite"> {{ signInFormGroup.value.password.length }}
                  / {{ max }} </mat-hint>
                <mat-error *ngIf="sigInPasswordFormControl.hasError('required')">
                  {{passwordErrorRequiredText}}
                </mat-error>
                <mat-error *ngIf="sigInPasswordFormControl.hasError('minlength')">
                  {{ passwordErrorMinLengthText }}
                </mat-error>
                <mat-error *ngIf="sigInPasswordFormControl.hasError('maxlength')">
                  {{ passwordErrorMaxLengthText }}
                </mat-error>
              </mat-form-field>

              <button [@animate]="{ value: '*', params: { x: '50px' } }"
                    mat-raised-button
                      style="margin-top: 20px"
                      type="submit"
                      class="space-top"
                      [color]="color"
                      [disabled]="signInFormGroup.invalid">
                {{loginButtonText}}
              </button>

            </div>
          </form>

          <div fxLayoutAlign="center">
            <button *ngIf="resetPasswordEnabled"
                    [@animate]="{ value: '*', params: { x: '-50px' } }"
                  mat-button
                  class="space-top"
                  [color]="color"
                  (click)="createForgotPasswordTab()">
            {{forgotPasswordButtonText}}
          </button>
        </div>

        </mat-card-content>
        <mat-card-footer *ngIf="isLoading">
          <mat-progress-bar [@animate]="{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }"
                          mode="indeterminate"></mat-progress-bar>
        </mat-card-footer>
      </mat-card>
    </mat-tab>

    <!--tab register-->
    <mat-tab [label]="registerTabText" *ngIf="registrationEnabled">
      <mat-card>
        <mat-card-title>{{registerCardTitleText}}</mat-card-title>
          <mat-card-content fxLayout="column" fxLayoutAlign="center">
            <form [@animateStagger]="{ value: '50' }"
                [formGroup]="signUpFormGroup" (ngSubmit)="signUpFormGroup.valid &&
            processLegalSignUP(authProvider.EmailAndPassword)">
              <div fxLayout="column" fxLayoutAlign="center">
                <!--name-->
                <mat-form-field [@animate]="{ value: '*', params: { x: '50px' } }"
                              [appearance]="appearance">
                  <!--labels will work only with @angular/material@6.2.0 -->
                  <mat-label>{{nameText}}</mat-label>
                  <input
                    matInput
                    [minlength]="config.nameMinLength"
                    [maxlength]="config.nameMaxLength"
                    [formControl]="sigUpNameFormControl"
                    required
                  />
                  <mat-icon matSuffix [color]="color">person</mat-icon>
                  <mat-hint align="end" aria-live="polite"> {{ signUpFormGroup.value.name?.length }}
                    / {{ config.nameMaxLength }} </mat-hint>
                  <mat-error *ngIf="sigUpNameFormControl.hasError('required')">
                    {{nameErrorRequiredText}}
                  </mat-error>
                  <mat-error *ngIf="sigUpNameFormControl.hasError('minlength')">
                    {{nameErrorMinLengthText}}
                  </mat-error>
                  <mat-error *ngIf="sigUpNameFormControl.hasError('maxlength')">
                    {{nameErrorMaxLengthText}}
                  </mat-error>
                </mat-form-field>

                <!--email-->
                <mat-form-field [@animate]="{ value: '*', params: { x: '50px' } }"
                              [appearance]="appearance">
                  <mat-label>{{emailText}}</mat-label>
                  <input matInput
                        type="email"
                        [formControl]="sigUpEmailFormControl"
                        required>
                  <mat-icon matSuffix [color]="color">email</mat-icon>
                  <mat-error *ngIf="sigUpEmailFormControl.hasError('required')">
                    {{emailErrorRequiredText}}
                  </mat-error>
                  <mat-error *ngIf="sigUpEmailFormControl.hasError('pattern')">
                    {{emailErrorPatternText}}
                  </mat-error>
                </mat-form-field>

                <!--password-->
                <div fxLayout="column">
                  <mat-form-field [@animate]="{ value: '*', params: { x: '50px' } }"
                                [appearance]="appearance">
                    <mat-label>{{passwordText}}</mat-label>
                    <input
                      matInput
                      [type]="toggle.type"
                      name="password"
                      [formControl]="sigUpPasswordFormControl"
                      required
                      [minlength]="min"
                      [maxlength]="max"
                    />
                    <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>

                    <mat-icon matSuffix [color]="color">lock</mat-icon>

                    <mat-hint align="end" aria-live="polite">
                      {{signUpFormGroup.value.password?.length}} / {{ max }}
                    </mat-hint>

                    <mat-error *ngIf="sigUpPasswordFormControl.hasError('required')" class="cut-text">
                      {{passwordErrorRequiredText}}
                    </mat-error>

                    <mat-error *ngIf="sigUpPasswordFormControl.hasError('minlength')" class="cut-text">
                      {{ passwordErrorMinLengthText }}
                    </mat-error>
                    <mat-error *ngIf="sigUpPasswordFormControl.hasError('maxlength')" class="cut-text">
                      {{ passwordErrorMaxLengthText }}
                    </mat-error>

                  </mat-form-field>

                  <mat-password-strength #passwordStrength
                                        [min]="min"
                                        [max]="max"
                                        [customValidator]="customValidator"
                                        [enableLengthRule]="enableLengthRule"
                                        [enableLowerCaseLetterRule]="enableLowerCaseLetterRule"
                                        [enableUpperCaseLetterRule]="enableUpperCaseLetterRule"
                                        [enableDigitRule]="enableDigitRule"
                                        [enableSpecialCharRule]="enableSpecialCharRule"
                                        [password]="signUpFormGroup.value.password"
                                        [externalError]="sigUpPasswordFormControl.dirty">
                  </mat-password-strength>

                </div>

                <button [@animate]="{ value: '*', params: { x: '100px' } }"
                      mat-raised-button
                        style="margin-top: 20px"
                        type="submit"
                        [disabled]="signUpFormGroup.invalid"
                        [color]="color">
                  {{registerButtonText}}
                </button>

              </div>
            </form>

            <button *ngIf="guestEnabled"
                    [@animate]="{ value: '*', params: { x: '-100px' } }"
                  mat-button
                  style="margin-top: 20px"
                  [color]="color"
                  (click)="processLegalSignUP(authProvider.ANONYMOUS)">
            <mat-icon>fingerprint</mat-icon>
            {{guestButtonText}}
          </button>

          </mat-card-content>

          <mat-card-footer *ngIf="isLoading">
            <mat-progress-bar [@animate]="{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }"
                            mode="indeterminate"></mat-progress-bar>
          </mat-card-footer>

      </mat-card>
    </mat-tab>

    <!--Reset password tab-->
    <mat-tab *ngIf="passwordResetWished" class="reset-password-tab">
      <ng-template mat-tab-label>
        <button mat-icon-button class="reset-password-tab__close-button" (click)="passwordResetWished = false">
          {{ resetPasswordTabText }}
          <mat-icon>close</mat-icon>
        </button>
      </ng-template>
      <form [@animateStagger]="{ value: '50' }"
            [formGroup]="resetPasswordFormGroup"
            (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
        <mat-card class="reset-password-card">
          <mat-card-content>
            <mat-form-field [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}" class="full-width"
                            [appearance]="appearance">
              <mat-label> {{ resetPasswordInputText }} </mat-label>
              <input matInput
                    [title]="resetPasswordInputText"
                    formControlName="email"
                    required>
              <mat-icon matSuffix [color]="color">email</mat-icon>
              <mat-error *ngIf="resetPasswordEmailFormControl.hasError('required')">
                {{resetPasswordErrorRequiredText}}
              </mat-error>
              <mat-error *ngIf="resetPasswordEmailFormControl.hasError('pattern')">
                {{resetPasswordErrorPatternText}}
              </mat-error>
            </mat-form-field>
            <p *ngIf="passReset">{{resetPasswordInstructionsText}}</p>
          </mat-card-content>
          <mat-card-actions fxLayoutAlign="center">
            <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
            <button [@animate]="{ value: '*', params: { x: '50px' } }"
                    mat-raised-button
                    type="submit"
                    [color]="color">
              {{resetPasswordActionButtonText}}
            </button>
          </mat-card-actions>
        </mat-card>
      </form>
    </mat-tab>

  </mat-tab-group>
  <mat-divider></mat-divider>
  <ngx-auth-firebaseui-providers *ngIf="tabIndex !== 2"
                                 [providers]="providers"
                                 [theme]="providersTheme">
  </ngx-auth-firebaseui-providers>
</ng-template>

auth.component.scss

.mat-card {
  margin: 2rem;
}

.space-top {
  margin-top: .5rem;
}

.full-width {
  width: 100%;
}

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

.signed-in-container {
  .account-circle {
    font-size: 12rem;
    width: 12rem;
    height: 12rem;
  }
  img.account-circle {
    object-fit: cover;
    border-radius: 50%;
  }
  .sign-out-button {
    margin-top: 2rem;
  }
  .user-display-name {
    margin-top: 1rem;
  }
  .user-email {
    margin-top: -1rem;
  }
  .actions {
    margin-top: 2rem;
    .action-button, mat-progress-bar {
      width: 100%;
    }
    .action-button {
      margin-top: 1rem;
    }
  }
}

.reset-password-tab {
  mat-progress-bar {
    margin-bottom: 1rem;
  }
  &__close-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    mat-icon {
      font-size: 18px;
      position: relative;
      top: -1px;
    }
  }
}