argos/dmp-frontend/src/app/user-management/login/login.component.html

<div class="container">
  <div class="container">
    <div class="row">
      <div class="row col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
        <div class="card col-md-8 col-md-offset-2">
          <div class="card-header">
            <h4>Login</h4>
            <div class="social-btns">
              <button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton">
                <i class="fa fa-google-plus"></i>
              </button>
              <button *ngIf="hasLinkedInOauth()" mat-icon-button>
                <i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
              </button>
              <button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()">
                <i class="fa fa-facebook-square"></i>
              </button>
              <button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()">
                <i class="fa fa-twitter"></i>
              </button>
            </div>
            <button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()">
              <span class="iconmedium"></span>
              <span></span>
            </button>
          </div>
          <div *ngIf="hasNativeLogin()">
            <!-- <p class="tip">Or Be Classical</p> -->
            <div class="card-form">
              <div class="form-row">
                <i class="material-icons">email</i>
                <mat-form-field color="accent">
                  <input type="text" [(ngModel)]="credential.username" matInput placeholder="Email address" />
                </mat-form-field>
              </div>
              <div class="form-row">
                <i class="material-icons">lock_outline</i>
                <mat-form-field color="accent">
                  <input type="password" [(ngModel)]="credential.secret" matInput placeholder="Password" />
                </mat-form-field>
              </div>
            </div>
            <div class="card-footer">
              <button mat-button (click)="nativeLogin()">LOGIN</button>
            </div>
          </div>
          <p>You dont need to have a registered account for OpenDMP</p>
        </div>
      </div>
    </div>
  </div>
</div>