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

Adds provider icon on listing accounts on profile page

This commit is contained in:
apapachristou 2020-10-26 14:37:34 +02:00
parent 708206c28a
commit 5b78943131
3 changed files with 82 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dmp-frontend/src/app/ui/user-profile/user-profile.component.html
View File

@ -46,9 +46,18 @@
<div class="col-auto vertical-line">
<div *ngIf="userCredentials">
<div *ngFor="let userCredential of userCredentials">
<div class="row">
<div class="row user-credential">
<!-- <div class="col-auto pl-4 ml-2 pr-0 d-flex align-items-center"><mat-icon class="check-icon mat-icon">check</mat-icon></div> -->
<div class="col-auto mail-text">{{userCredential.email}}</div>
<div class="col-auto mail-text pr-0">{{userCredential.email}}</div>
<span *ngIf="userCredential.provider === authProviderEnum.Google" class="googleIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Facebook" class="facebookIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Twitter" class="twitterIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.LinkedIn" class="linkedInIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.B2Access" class="b2AccessIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.ORCID" class="orcidIconMedium"></span>
<span *ngIf="userCredential.provider === authProviderEnum.OpenAire" class="openaireIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Configurable" class="configurableIcon"></span>
<span *ngIf="userCredential.provider === authProviderEnum.Zenodo" class="zenodoIcon"></span>
<!-- <div class="col-auto"></div>
<div class="col-auto d-flex align-items-center" (click)="removeAccount()"><mat-icon class="clear-icon mat-icon">clear</mat-icon></div> -->
</div>

69
dmp-frontend/src/app/ui/user-profile/user-profile.component.scss
View File

@ -180,6 +180,75 @@
background-color: #f4f8f9;
}
.user-credential {
display: flex;
align-items: center;
span.googleIcon,
span.facebookIcon,
span.twitterIcon {
float: left;
transform: scale(0.4);
width: 45px;
height: 45px;
}
span.googleIcon {
background: url("../../../assets/images/argos-login/NoPath\ -\ Copy\ \(2\).png") no-repeat;
margin-left: .2rem;
}
span.facebookIcon {
background: url("../../../assets/images/argos-login/NoPath\ -\ Copy\ \(4\).png") no-repeat;
}
span.twitterIcon {
background: url("../../../assets/images/argos-login/NoPath\ -\ Copy\ \(5\).png") no-repeat;
}
span.linkedInIcon {
}
span.configurableIcon {
}
span.b2AccessIcon {
background: url(../../ui/auth/login/img/b2access_small.png) no-repeat;
float: left;
width: 45px;
height: 25px;
margin-left: 1rem;
}
span.orcidIconMedium {
background: url("../../../assets/images/argos-login/NoPath\ -\ Copy.png") no-repeat;
background-position: center;
float: left;
transform: scale(0.45);
width: 50px;
height: 45px;
}
span.openaireIcon {
background: url("../../../assets/images/argos-login/NoPath\ -\ Copy\ \(6\).png") no-repeat;
background-position: center;
float: right;
transform: scale(0.4);
width: 50px;
height: 45px;
}
span.zenodoIcon {
background: url("../../../assets/images/argos-login/zenodo-gradient-200.png") no-repeat;
background-position: center;
float: right;
transform: scale(0.35);
width: 200px;
height: 80px;
margin-left: -50px;
}
}
::ng-deep .name-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}

2
dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
View File

@ -25,6 +25,7 @@ import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { AddAccountDialogComponent } from './add-account/add-account-dialog.component';
import { MatDialog } from '@angular/material';
import { UserCredentialModel } from '@app/core/model/user/user-credential';
import { AuthProvider } from '@app/core/common/enum/auth-provider';
const availableLanguages: any[] = require('../../../assets/resources/language.json');
@ -46,6 +47,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
zenodoToken: string;
zenodoEmail: String;
roleOrganizationEnum = RoleOrganizationType;
authProviderEnum = AuthProvider;
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),