MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

redesign-login page_v1

This commit is contained in:
gpapavgeri 2020-07-10 18:29:07 +03:00
parent 09f207eb6e
commit 187831ec08
5 changed files with 138 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
dmp-frontend/src/app/ui/auth/login/login.component.html
View File

@ -1,4 +1,84 @@
<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-body">
<h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3>
<hr class="line">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row pt-2 mb-4 accesss-methods">
<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>
</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>
</button>
</div>
<div *ngIf="hasB2AccessOauth()" class="col-auto logo">
<button class="b2access-button" mat-icon-button (click)="b2AccessLogin()"
class="login-social-button">
<span class="iconmedium"></span>
</button>
</div>
</div>
</li>
<li class="list-group-item">
<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>
</li>
<li class="list-group-item">
<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>
</li>
</ul>
</div>
<div class="card-footer laptop-img"></div>
</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">
@ -25,28 +105,28 @@
</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">
<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>
<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>
<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>
<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">
@ -56,9 +136,9 @@
</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>
<span class="zenodoIcon"></span> -->
<!-- <span></span> -->
<!-- </button>
</div>
</div>
<div class="card-footer">
@ -69,4 +149,4 @@
<h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5>
</div>
</div>
</div>
</div> -->

41
dmp-frontend/src/app/ui/auth/login/login.component.scss
View File

@ -1,10 +1,12 @@
.login-screen {
margin-top: 70px;
// min-height: 517.44px;
min-height: calc(100vh - 10px);
}
.login-card {
width: auto;
// width: auto;
width: 510.92px;
margin-top: 0;
}
@ -28,6 +30,20 @@
margin-top: 40px;
}
.title {
text-align: center;
font: Bold 38px/82px Roboto;
height: 60px;
letter-spacing: -0.95px;
color: #23BCBA;
margin-bottom: 21px;
}
.line {
border-top: 5px solid #23BCBA;
width: 116px;
}
.container {
height: 100%;
position: relative;
@ -106,7 +122,7 @@
.social-btns i {
font-size: 2.5em;
padding: 0.8em;
color: #fff;
// color: #fff;
}
.social-btns .col {
@ -270,15 +286,24 @@ span.zenodoIcon {
width: fit-content;
}
.login-logo {
background: url(img/open-dmp.png) no-repeat;
width: 273px;
height: 300px;
background-size: cover;
// .login-logo {
// background: url(img/open-dmp.png) no-repeat;
// width: 273px;
// height: 300px;
// background-size: cover;
// }
.laptop-img {
background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
width: 116px;
height: 139px;
position: relative;
top: 60px;
left: 245px;
}
.login-bg {
background: url(img/login_bg.png) no-repeat;
// background: url(img/login_bg.png) no-repeat;
background-size: cover;
}

3
dmp-frontend/src/assets/i18n/en.json
View File

@ -126,7 +126,8 @@
"DATASET-PROFILES-CLONE": "New Clone of Dataset Description Template",
"LANGUAGE-EDITOR": "Language Editor",
"GUIDE-EDITOR": "User Guide Editor",
"LANGUAGE": "Language"
"LANGUAGE": "Language",
"SIGN-IN":"Sign in to account"
},
"FILE-TYPES": {
"PDF": "PDF",

3
dmp-frontend/src/assets/i18n/es.json
View File

@ -125,7 +125,8 @@
"DATASET-PROFILES-CLONE": "Nueva copia de la plantilla de descripción del Dataset",
"LANGUAGE-EDITOR": "Language Editor",
"GUIDE-EDITOR": "User Guide Editor",
"LANGUAGE": "Language"
"LANGUAGE": "Language",
"SIGN-IN":"Sign in to account"
},
"FILE-TYPES": {
"PDF": "PDF",

3
dmp-frontend/src/assets/i18n/gr.json
View File

@ -125,7 +125,8 @@
"DATASET-PROFILES-CLONE": "Νέα Κλωνοποίηση του template Περιγραφής Συνόλου Δεδομένων",
"LANGUAGE-EDITOR": "Επεξεργασία γλώσσας",
"GUIDE-EDITOR": "Επεξεργασία Οδηγού Χρήσης",
"LANGUAGE": "Γλώσσα"
"LANGUAGE": "Γλώσσα",
"SIGN-IN":"Sign in to account"
},
"FILE-TYPES": {
"PDF": "PDF",