argos/dmp-frontend/src/app/ui/auth/login/login.component.html

<div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center">
	<div class="login-logo"></div>
	<div class="card login-card">
		<div class="container card-header">
			<div class="row social-btns">
				<div class="col">
					<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
						<i class="fa fa-google"></i>
					</button>
					<button *ngIf="hasLinkedInOauth()" mat-icon-button class="login-social-button">
						<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
					</button>
					<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()" class="login-social-button">
						<i class="fa fa-facebook-square"></i>
					</button>
					<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()" class="login-social-button">
						<i class="fa fa-twitter"></i>
					</button>
				</div>
			</div>
			<div class="row mt-2 accesss-methods">
				<div class="col justify-content-center">
					<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
						<span class="iconmedium"></span>
						<!-- <span></span> -->
					</button>
					<button *ngIf="hasOrcidOauth()" class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
						<span class="orcidIconMedium"></span>
						<!-- <span></span> -->
					</button>
					<button *ngIf="hasOpenAireOauth()" class="openaire-button" mat-icon-button (click)="openaireLogin()" class="login-social-button">
						<span class="openaireIcon"></span>
						<!-- <span></span> -->
					</button>
				</div>
			</div>
		</div>
		<div class="card-footer">
			<h4 class="text-uppercase">
				<strong>{{ 'HOME.LOGIN.TITLE' | translate }}</strong>
			</h4>
			<br />
			<h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5>
		</div>
	</div>
</div>