2020-10-23 09:49:09 +02:00
|
|
|
<div class="profile">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div *ngIf="user | async as userProfile; else loading" class="user-profile">
|
|
|
|
<div class="col user-profile-title">{{'USER-DIALOG.USER-PROFILE' | translate}}</div>
|
|
|
|
<div class="row profile-content" [formGroup]="formGroup">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row mb-4">
|
|
|
|
<div class="col-auto">
|
|
|
|
<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)">
|
|
|
|
</div>
|
|
|
|
<div class="col-auto d-flex flex-column justify-content-center main-info">
|
2020-10-23 10:27:44 +02:00
|
|
|
<div class="name">{{formGroup.get('name').value}}</div>
|
2020-10-23 09:49:09 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Name -->
|
|
|
|
<div class="row mb-5">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
2020-11-17 18:57:39 +01:00
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} *</div>
|
2020-10-23 09:49:09 +02:00
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col name-form">
|
|
|
|
<mat-form-field>
|
2020-11-17 18:57:39 +01:00
|
|
|
<input matInput type="text" name="name" placeholder="{{'USER-PROFILE.SETTINGS.NAME' | translate}}" [formControl]="formGroup.get('name')" required>
|
|
|
|
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
2020-10-23 09:49:09 +02:00
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-10-26 10:57:06 +01:00
|
|
|
<!-- Accounts -->
|
2023-12-29 16:04:16 +01:00
|
|
|
<!-- TODO: How to present these. -->
|
|
|
|
<!-- <div class="row mb-5">
|
2020-10-26 10:57:06 +01:00
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ACCOUNTS' | translate}}</div>
|
|
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
|
|
<div class="col-auto">
|
|
|
|
<span class="email-title">{{'USER-PROFILE.SETTINGS.EMAILS' | translate}}</span>
|
|
|
|
</div>
|
|
|
|
<div class="col-auto vertical-line">
|
|
|
|
<div *ngIf="userCredentials">
|
2023-05-23 16:15:11 +02:00
|
|
|
<div *ngFor="let userCredential of userCredentials; index as i">
|
2020-10-26 13:37:34 +01:00
|
|
|
<div class="row user-credential">
|
|
|
|
<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>
|
2023-06-06 10:16:19 +02:00
|
|
|
<div *ngIf="i != 0" class="col-auto d-flex align-items-center unlink-mail" (click)="userCredential.email !== userCredentials[0].email && removeAccount(userCredential)">
|
|
|
|
<mat-icon [matTooltip]="(userCredential.email !== userCredentials[0].email) ? ('USER-PROFILE.ACTIONS.UNLINK-ACCOUNT' | translate) : ('USER-PROFILE.ACTIONS.UNLINK-ACCOUNT-DISABLED' | translate)" matTooltipPosition="right" [ngClass]="{'disable-unlink':userCredential.email === userCredentials[0].email}">link_off</mat-icon>
|
2023-05-23 16:15:11 +02:00
|
|
|
</div>
|
2020-10-26 10:57:06 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row add-new-btn">
|
|
|
|
<div class="col-auto add-mail" (click)="addAccount()">
|
|
|
|
<mat-icon class="mr-1">add</mat-icon>
|
2020-10-26 12:37:02 +01:00
|
|
|
<span>{{'USER-PROFILE.ACTIONS.LINK-NEW' | translate}}</span>
|
2020-10-26 10:57:06 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-12-29 16:04:16 +01:00
|
|
|
</div> -->
|
2020-10-23 09:49:09 +02:00
|
|
|
<!-- Organization -->
|
|
|
|
<div class="row mb-5">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col organization-form">
|
|
|
|
<mat-form-field>
|
2020-10-23 10:27:44 +02:00
|
|
|
<app-single-auto-complete placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('organization')" [configuration]="organisationsAutoCompleteConfiguration"></app-single-auto-complete>
|
2020-10-23 09:49:09 +02:00
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Role -->
|
|
|
|
<div class="row mb-5">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col role-form">
|
|
|
|
<mat-form-field>
|
|
|
|
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('roleOrganization')">
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Faculty">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Faculty)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Librarian">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Librarian)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Researcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Researcher)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Student">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Student)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.EarlyCareerResearcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.EarlyCareerResearcher)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.ResearchAdministrator">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ResearchAdministrator)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.RepositoryManager">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.RepositoryManager)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.ResearchInfrastructure">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ResearchInfrastructure)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.ServiceProvider">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ServiceProvider)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Publisher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Publisher)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.ResearchFunder">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ResearchFunder)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Policymaker">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Policymaker)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.SMEIndustry">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.SMEIndustry)}}</mat-option>
|
|
|
|
<mat-option [value]="roleOrganizationEnum.Other">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Other)}}</mat-option>
|
|
|
|
</mat-select>
|
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Timezone -->
|
|
|
|
<div class="row mb-5">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
2020-11-17 18:57:39 +01:00
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} *</div>
|
2020-10-23 09:49:09 +02:00
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col timezone-form">
|
|
|
|
<mat-form-field>
|
|
|
|
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
|
|
|
|
<mat-autocomplete #timezone="matAutocomplete">
|
|
|
|
<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
|
|
|
|
{{ timezone | timezoneInfoDisplay }}
|
|
|
|
</mat-option>
|
|
|
|
</mat-autocomplete>
|
2020-11-17 18:57:39 +01:00
|
|
|
<mat-error *ngIf="this.formGroup.get('timezone').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
2020-10-23 09:49:09 +02:00
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Culture -->
|
|
|
|
<div class="row mb-5">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
2020-11-17 18:57:39 +01:00
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} *</div>
|
2020-10-23 09:49:09 +02:00
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col culture-form">
|
|
|
|
<mat-form-field>
|
|
|
|
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
|
|
|
|
<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
|
|
|
|
<mat-option *ngFor="let culture of cultures | async" [value]="culture">
|
|
|
|
{{ culture.displayName }} - {{ culture.nativeName }}
|
|
|
|
</mat-option>
|
|
|
|
</mat-autocomplete>
|
2020-11-17 18:57:39 +01:00
|
|
|
<mat-error *ngIf="this.formGroup.get('culture').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
2020-10-23 09:49:09 +02:00
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Language -->
|
|
|
|
<div class="row mb-5">
|
|
|
|
<div class="col">
|
|
|
|
<div class="row">
|
2020-11-17 18:57:39 +01:00
|
|
|
<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} *</div>
|
2020-10-23 09:49:09 +02:00
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col language-form">
|
|
|
|
<mat-form-field>
|
|
|
|
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required>
|
|
|
|
<mat-option *ngFor="let language of languages" [value]="language">
|
|
|
|
{{ language.label | translate }}
|
|
|
|
</mat-option>
|
|
|
|
</mat-select>
|
2020-11-17 18:57:39 +01:00
|
|
|
<mat-error *ngIf="this.formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
2020-10-23 09:49:09 +02:00
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row d-flex mb-5">
|
|
|
|
<div class="col-auto ml-auto"><button mat-raised-button class="save-btn" type="button" (click)="save()">{{'USER-PROFILE.ACTIONS.SAVE' | translate}}</button></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ng-template #loading>
|
|
|
|
</ng-template>
|
|
|
|
</div>
|
2023-12-29 16:04:16 +01:00
|
|
|
</div>
|