login.component.html

<div id="page" class="login-page" [style]="'justify-content:center; align-items:center; height:100%'">
  <div fxLayout="row" [style]="'justify-content:center; align-items:center; height:100%'">
    <mat-card *ngIf="isUserAuthSSOEnabled()  == true" fxFlex="400px" class="login-panel" >
      <mat-card-title class="title-panel">{{ "login.title.sso.login" | translate }} {{ lookups.cachedApplicationInfo.ssoAuthenticationLabel }}
      </mat-card-title>
      <mat-card-content class="login-panel-content">
        <a mat-raised-button color="primary" href="{{lookups.cachedApplicationInfo.ssoAuthenticationURI}}">
          <mat-icon>input</mat-icon>
          <span>{{ "login.button.sso.login" | translate }}</span>
        </a>
      </mat-card-content>
    </mat-card>
    <mat-card *ngIf="isUserAuthPasswdEnabled() == true"  class="login-panel">
      <mat-card-title class="title-panel">{{ "login.title.smp.login" | translate }}</mat-card-title>
      <mat-card-content class="login-panel-content">
        <mat-tab-group>
          <mat-tab label="{{ 'login.label.login' | translate }}">
            <ng-container *ngTemplateOutlet="loginFormContainer"></ng-container>
          </mat-tab>
          <mat-tab label="{{ 'login.label.password.reset' | translate }}">
            <ng-container *ngTemplateOutlet="requestResetContainer"></ng-container>
          </mat-tab>
        </mat-tab-group>
      </mat-card-content>
    </mat-card>
  </div>
  <footer></footer>
</div>


<ng-template #loginFormContainer>
  <div [formGroup]="loginForm" class="form-control" (ngSubmit)="login()" (keydown.enter)="onLoginFormEnterKeyDown($event)">
    <mat-form-field style="width: 100%">
      <mat-label>{{ "login.label.login.username" | translate }}</mat-label>
      <input matInput id="username_id"
             formControlName="username"
             auto-focus-directive
             required>
    </mat-form-field>
    <mat-form-field style="width: 100%">
      <mat-label>{{ "login.label.password" | translate }}</mat-label>
      <input matInput id="password_id" type="password"

             formControlName="password" required>
    </mat-form-field>
    <button mat-raised-button color="primary" id="loginbutton_id" [disabled]="!loginForm.valid"
            (click)="login()">
      <mat-icon>input</mat-icon>
      <span>{{ "login.button.login" | translate }}</span>
    </button>
  </div>
</ng-template>

<ng-template #requestResetContainer>
  <div [formGroup]="resetForm" class="form-control">
    <mat-form-field style="width: 100%">
      <mat-label>{{ "login.label.password.reset.username" | translate }}</mat-label>
      <input matInput id="reset_username_id"
             formControlName="resetUsername"
             auto-focus-directive
             required>
    </mat-form-field>
    <button mat-raised-button color="primary" id="resetbutton_id" [disabled]="!resetForm.valid"
            [style]="'width:250px'"
            (click)="requestCredentialReset()"
    >
      <mat-icon>input</mat-icon>
      <span>{{ "login.button.password.reset" | translate }}</span>
    </button>
    </div>
</ng-template>