Adds field "Add account" on profile

dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html

@@ -0,0 +1,19 @@
+<div class="template-container">
+	<div mat-dialog-title class="row d-flex m-0">
+		<h1 mat-dialog-title class="title">{{'USER-PROFILE.ACTIONS.ADD-NEW-ACCOUNT' | translate}}</h1>
+		<span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span>
+	</div>
+	<!-- <div class="row m-0">
+	</div> -->
+	<div mat-dialog-content class="definition-content pt-2">
+		<mat-form-field class="full-width">
+			<input matInput placeholder="{{'USER-PROFILE.SETTINGS.YOUR-EMAIL' | translate}}">
+		</mat-form-field>
+	</div>
+	<div mat-mat-dialog-actions>
+		<div class="col-auto d-flex pb-2 pt-2">
+			<button mat-raised-button type="button" class="cancel-btn ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
+			<button mat-raised-button type="button" class="add-btn ml-4" (click)="add()">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss

@@ -0,0 +1,55 @@
+.template-container {
+	.header {
+		display: flex;
+		width: 100%;
+		height: 89px;
+		background-color: #129d99;
+		color: #ffffff;
+		font-size: 1.25rem;
+	}
+
+	.title {
+		font-weight: 700;
+		font-size: 1.25rem;
+		color: #212121;
+		opacity: 1;
+	}
+
+	.template-title {
+		margin-left: 37px;
+	}
+
+	.close-icon {
+		cursor: pointer;
+		margin-right: 20px;
+	}
+
+	.close-icon:hover {
+		background-color: #fefefe6e !important;
+		border-radius: 50%;
+	}
+
+	.cancel-btn {
+		width: 101px;
+		height: 43px;
+		background: #ffffff;
+		border: 1px solid #b5b5b5;
+		border-radius: 30px;
+		opacity: 1;
+	}
+
+	.add-btn {
+		width: 84px;
+		height: 43px;
+		background: #ffffff;
+		color: #129d99;
+		border: 1px solid #129d99;
+		border-radius: 30px;
+		opacity: 1;
+	}
+
+	.add-btn:hover {
+		background-color: #129d99;
+		color: #ffffff;
+	}
+}

dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts

@@ -0,0 +1,40 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
+
+@Component({
+	selector: 'app-add-account-dialog-component',
+	templateUrl: 'add-account-dialog.component.html',
+	styleUrls: ['./add-account-dialog.component.scss'],
+})
+export class AddAccountDialogComponent implements OnInit {
+
+	datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
+	datasetProfileDefinitionFormGroup: FormGroup;
+	progressIndication = false;
+
+	constructor(
+		public dialogRef: MatDialogRef<AddAccountDialogComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: any
+	) {
+
+	}
+
+	ngOnInit(): void {
+
+	}
+
+	add(): void {
+		this.dialogRef.close(true);
+	}
+
+	cancel(): void {
+		this.dialogRef.close();
+	}
+
+	closeDialog(): void {
+		this.dialogRef.close();
+	}
+
+}

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

@@ -13,7 +13,7 @@
 						</div>
 						<div class="col-auto d-flex flex-column justify-content-center main-info">
 							<div class="name">{{formGroup.get('name').value}}</div>
-							<div><span class="connected">{{'USER-PROFILE.SETTINGS.CONNECTED-WITH' | translate}}:</span><span class="mail">{{userProfile.email}}</span></div>
+							<!-- <div><span class="connected">{{'USER-PROFILE.SETTINGS.CONNECTED-WITH' | translate}}: </span><span class="mail">{{userProfile.email}}</span></div> -->
 						</div>
 					</div>
 					<!-- Name -->
@@ -25,7 +25,7 @@
 							<div class="row">
 								<div class="col name-form">
 									<mat-form-field>
-										<input matInput placeholder="" type="text" name="name" [formControl]="formGroup.get('name')" required>
+										<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
 										<!-- <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
 										<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
 									</mat-form-field>
@@ -33,6 +33,37 @@
 							</div>
 						</div>
 					</div>
+					<!-- Accounts -->
+					<div class="row mb-5">
+						<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">
+										<div *ngFor="let userCredential of userCredentials">
+											<div class="row">
+												<!-- <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"></div>
+												<div class="col-auto d-flex align-items-center" (click)="removeAccount()"><mat-icon class="clear-icon mat-icon">clear</mat-icon></div> -->
+											</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>
+											<span>{{'USER-PROFILE.ACTIONS.ADD-NEW' | translate}}</span>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
 					<!-- Organization -->
 					<div class="row mb-5">
 						<div class="col">

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

@@ -121,6 +121,65 @@
 	cursor: pointer;
 }
 
+.vertical-line {
+	border-left: 2px solid #129d99;
+}
+
+.email-title {
+	margin-top: 1.6875rem;
+	letter-spacing: 0.15px;
+	color: #a8a8a8;
+	opacity: 1;
+}
+
+.mail-text {
+	cursor: pointer;
+	line-height: 2;
+	letter-spacing: 0.15px;
+	color: #212121;
+}
+
+// .mail-text:hover {
+// 	background-color: #f4f8f9;
+// }
+
+.check-icon {
+	color: #129d99;
+	transform: scale(0.75);
+}
+
+.clear-icon {
+	color: #f16868;
+	cursor: pointer;
+}
+
+.add-new-btn {
+	margin-top: 2rem;
+}
+
+.add-mail {
+	padding-left: 22px;
+	line-height: 2rem;
+	cursor: pointer;
+
+	mat-icon {
+		color: #129d99;
+		display: inline-flex;
+		vertical-align: middle;
+	}
+
+	span {
+		font-weight: 500;
+		letter-spacing: -0.35px;
+		color: #212121;
+		opacity: 1;
+	}
+}
+
+.add-mail:hover {
+	background-color: #f4f8f9;
+}
+
 ::ng-deep .name-form .mat-form-field-appearance-outline .mat-form-field-outline {
 	background: #fafafa !important;
 }

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

@@ -22,6 +22,9 @@ import { ExternalSourcesService } from '@app/core/services/external-sources/exte
 import { UserProfileEditorModel } from './user-profile-editor.model';
 import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
 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';
 
 const availableLanguages: any[] = require('../../../assets/resources/language.json');
 
@@ -34,6 +37,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 
 	userProfileEditorModel: UserProfileEditorModel;
 	user: Observable<UserListingModel>;
+	userCredentials: UserCredentialModel[];
 	currentUserId: string;
 	cultures: Observable<CultureInfo[]>;
 	timezones: Observable<any[]>;
@@ -64,6 +68,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 		private languageService: LanguageService,
 		private configurationService: ConfigurationService,
 		private oauth2DialogService: Oauth2DialogService,
+		private dialog: MatDialog,
 		public enumUtils: EnumUtils
 	) { super(); }
 
@@ -97,6 +102,11 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 					this.unlock();
 					return result;
 				}));
+
+				this.userService.getEmails(userId).pipe(takeUntil(this._destroyed))
+				.subscribe(result => {
+					this.userCredentials = result;
+				});
 			});
 
 	}
@@ -237,4 +247,22 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 		.subscribe(() => this.router.navigate(['/reload']).then(() => this.router.navigate(['/profile'])));
 	}
 
+	public removeAccount() {
+
+	}
+
+	public addAccount() {
+		const dialogRef = this.dialog.open(AddAccountDialogComponent, {
+			restoreFocus: false,
+			autoFocus: false,
+			width: '603px',
+			data: {
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+			}
+		});
+	}
+
 }

dmp-frontend/src/app/ui/user-profile/user-profile.module.ts

@@ -3,6 +3,7 @@ import { FormattingModule } from '@app/core/formatting.module';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
+import { AddAccountDialogComponent } from './add-account/add-account-dialog.component';
 import { UserProfileComponent } from './user-profile.component';
 import { UserProfileRoutingModule } from './user-profile.routing';
 
@@ -15,7 +16,11 @@ import { UserProfileRoutingModule } from './user-profile.routing';
 		AutoCompleteModule
 	],
 	declarations: [
-		UserProfileComponent
+		UserProfileComponent,
+		AddAccountDialogComponent
+	],
+	entryComponents: [
+		AddAccountDialogComponent
 	]
 })
 export class UserProfileModule { }

dmp-frontend/src/assets/i18n/de.json

@@ -1368,7 +1368,8 @@
 			"ROLE": "Rolle",
 			"SELECT-ROLE": "Select Role",
 			"ACCOUNTS": "Accounts",
-			"EMAILS": "Emails"
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "Zugehörige DMPs",
 		"DMPS": {
@@ -1400,7 +1401,10 @@
 		},
 		"ACTIONS": {
 			"SAVE": "Save",
-			"ADD-NEW": "Add new"
+			"ADD-NEW": "Add new",
+			"ADD-NEW-ACCOUNT": "Add new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {

dmp-frontend/src/assets/i18n/en.json

@@ -1368,7 +1368,8 @@
 			"ROLE": "Role",
 			"SELECT-ROLE": "Select Role",
 			"ACCOUNTS": "Accounts",
-			"EMAILS": "Emails"
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "Associated DMPs",
 		"DMPS": {
@@ -1400,7 +1401,10 @@
 		},
 		"ACTIONS": {
 			"SAVE": "Save",
-			"ADD-NEW": "Add new"
+			"ADD-NEW": "Add new",
+			"ADD-NEW-ACCOUNT": "Add new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {

dmp-frontend/src/assets/i18n/es.json

@@ -1368,7 +1368,8 @@
 			"ROLE": "Role",
 			"SELECT-ROLE": "Select Role",
 			"ACCOUNTS": "Accounts",
-			"EMAILS": "Emails"
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "PGDs asociados",
 		"DMPS": {
@@ -1400,7 +1401,10 @@
 		},
 		"ACTIONS": {
 			"SAVE": "Save",
-			"ADD-NEW": "Add new"
+			"ADD-NEW": "Add new",
+			"ADD-NEW-ACCOUNT": "Add new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {

dmp-frontend/src/assets/i18n/gr.json

@@ -1368,7 +1368,8 @@
 			"ROLE": "Ρόλος",
 			"SELECT-ROLE": "Select Role",
 			"ACCOUNTS": "Accounts",
-			"EMAILS": "Emails"
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "Συσχετιζόμενα Σχέδια Διαχείρισης Δεδομένων",
 		"DMPS": {
@@ -1400,7 +1401,10 @@
 		},
 		"ACTIONS": {
 			"SAVE": "Save",
-			"ADD-NEW": "Add new"
+			"ADD-NEW": "Add new",
+			"ADD-NEW-ACCOUNT": "Add new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {

dmp-frontend/src/assets/i18n/sk.json

@@ -1368,7 +1368,8 @@
 			"ROLE": "Rola",
 			"SELECT-ROLE": "Select Role",
 			"ACCOUNTS": "Accounts",
-			"EMAILS": "Emails"
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "Pridružené DMP",
 		"DMPS": {
@@ -1400,7 +1401,10 @@
 		},
 		"ACTIONS": {
 			"SAVE": "Save",
-			"ADD-NEW": "Add new"
+			"ADD-NEW": "Add new",
+			"ADD-NEW-ACCOUNT": "Add new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {

dmp-frontend/src/assets/i18n/tr.json

@@ -1368,7 +1368,8 @@
 			"ROLE": "Görev",
 			"SELECT-ROLE": "Select Role",
 			"ACCOUNTS": "Accounts",
-			"EMAILS": "Emails"
+			"EMAILS": "Emails",
+			"YOUR-EMAIL": "Your Email"
 		},
 		"ASSOCIATED-DMPS": "İlişkili VYP'ları",
 		"DMPS": {
@@ -1400,7 +1401,10 @@
 		},
 		"ACTIONS": {
 			"SAVE": "Save",
-			"ADD-NEW": "Add new"
+			"ADD-NEW": "Add new",
+			"ADD-NEW-ACCOUNT": "Add new account",
+			"ADD": "Add",
+			"CANCEL": "Cancel"
 		}
 	},
 	"DATASET-REFERENCED-MODELS": {