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

<div class="login-bg d-flex flex-column align-items-center justify-content-center" [ngClass]="{'login-screen': !mergeUsers}">
	<div class="card login-card">
		<div class="container card-body">
			<h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3>
			<hr class="line">

			<div class="row justify-content-center pb-4">
				<div class="flex-column">
					<div *ngIf="hasOpenAireOauth()" class="col-auto pr-4">
						<button mat-icon-button (click)="openaireLogin()" class="openaireIconButton d-flex justify-content-center align-items-center">
							<span class="openaireIcon"></span>
						</button>
					</div>
				</div>
				<div class="flex-column">
					<div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4">
						<button mat-icon-button (click)="orcidLogin()" class="orcidIconMediumButton d-flex justify-content-center align-items-center">
							<span class="orcidIconMedium"></span>
						</button>
					</div>
				</div>
				<div class="flex-column">
					<div *ngIf="hasB2AccessOauth()" class="col-auto pl-4">
						<button mat-icon-button (click)="b2AccessLogin()" class="iconmediumButton d-flex justify-content-center align-items-center">
							<span class="iconmedium"></span>
						</button>
					</div>
				</div>
			</div>
			<div class="row justify-content-center">
				<div class="flex-column">
					<div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
						<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center align-items-center">
							<span class="googleIcon"></span>
						</button>
					</div>
				</div>
				<div class="flex-column">
					<div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4">
						<button mat-icon-button (click)="facebookLogin()" class="facebookIconButton d-flex justify-content-center align-items-center">
							<span class="facebookIcon"></span>
						</button>
					</div>
				</div>
				<div class="flex-column">
					<div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
						<button mat-icon-button (click)="twitterLogin()" class="twitterIconButton d-flex justify-content-center align-items-center">
							<span class="twitterIcon"></span>
						</button>
					</div>
				</div>
			</div>
			<div class="row justify-content-center pt-4">
				<ng-template [ngIf]="hasConfigurableProviders()">
					<div *ngFor="let provider of this.configurableProviderService.providers; index as i" class="flex-column">
						<div class="col-auto" 
							[ngClass]="{'pr-4': (i % this.configurableProviderService.providers.length) == 0 || (i % this.configurableProviderService.providers.length) == 1 ||
												this.configurableProviderService.providers.length == 1 || this.configurableProviderService.providers.length == 2, 
										'pl-4': (i % this.configurableProviderService.providers.length) == 2 || (i % this.configurableProviderService.providers.length) == 1 ||
												this.configurableProviderService.providers.length == 1 || this.configurableProviderService.providers.length == 2}">
							<button mat-icon-button class="iconmediumButton d-flex justify-content-center align-items-center" (click)="configurableLogin(provider)">
								<span *ngIf="provider.logoUrl; else elseBlock" class="configurableIcon" style="background: url({{provider.logoUrl}}) no-repeat; background-size: cover;"></span>
								<ng-template #elseBlock>
									<span class="configurableIcon">{{provider.name}}</span>
								</ng-template>
							</button>
						</div>
					</div>
				</ng-template>
				<div *ngIf="hasZenodoOauth()" class="col-auto">
					<button mat-icon-button (click)="zenodoLogin()" class="d-flex justify-content-center">
						<span class="zenodoIcon"></span>
					</button>
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer laptop-img"></div>
</div>






<!-- <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 *ngIf="hasGoogleOauth()" class="row social-btns">
				<div class="col-auto">
					<button mat-icon-button id="googleSignInButton" class="login-social-button">
						<i class="fa fa-google"></i>
					</button>
				</div>
				<div *ngIf="hasLinkedInOauth()" class="col-auto">
					<button mat-icon-button class="login-social-button">
						<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
					</button>
				</div>
				<div *ngIf="hasFacebookOauth()" class="col-auto">
					<button mat-icon-button (click)="facebookLogin()" class="login-social-button">
						<i class="fa fa-facebook-square"></i>
					</button>
				</div>
				<div *ngIf="hasTwitterOauth()" class="col-auto">
					<button mat-icon-button (click)="twitterLogin()" class="login-social-button">
						<i class="fa fa-twitter"></i>
					</button>
				</div>
			</div>
			<div class="w-100"></div>
			<div class="row pt-2 mb-4 accesss-methods"> -->
<!-- <div class="col justify-content-center"> -->
<!-- <div *ngIf="hasB2AccessOauth()" class="col-auto logo">
					<button class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
						<span class="iconmedium"></span> -->
<!-- <span></span> -->
<!-- </button>
				</div>
				<div *ngIf="hasOrcidOauth()" class="col-auto orcid-logo">
					<button class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
						<span class="orcidIconMedium"></span> -->
<!-- <span></span> -->
<!-- </button>
				</div>
				<div *ngIf="hasOpenAireOauth()" class="col-auto openaire-logo">
					<button class="openaire-button" mat-icon-button (click)="openaireLogin()" class="login-social-button">
						<span class="openaireIcon"></span> -->
<!-- <span></span> -->
<!-- </button>
				</div> -->
<!-- </div> -->
<!-- </div>
			<div *ngIf="hasConfigurableProviders()" class="row pt-2 mb-4 accesss-methods">
				<div *ngFor="let provider of this.configurableProviderService.providers" class="col-auto configurable-logo">
					<button mat-icon-button class="configurable-button" (click)="configurableLogin(provider)" class="login-social-button">
						<span class="configurableIcon">{{provider.name}}</span>
					</button>
				</div>
			</div>
			<div *ngIf="hasZenodoOauth()" class="col-auto zenodo-logo">
				<button class="zenodo-button" mat-icon-button (click)="zenodoLogin()" class="login-social-button">
					<span class="zenodoIcon"></span> -->
<!-- <span></span> -->
<!-- </button>
			</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> -->