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>