add-account functionality from my-profile and styling changes

dmp-frontend/src/app/core/model/user/user.ts

@@ -75,3 +75,7 @@ export interface DmpAssociatedUser {
 	name: string;
 	email: string;
 }
+
+export interface UserMergeRequestPersist {
+	email: string;
+}

dmp-frontend/src/app/core/services/user/user.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
-import { DmpAssociatedUser, User, UserPersist, UserRolePatchPersist } from '@app/core/model/user/user';
+import { DmpAssociatedUser, User, UserMergeRequestPersist, UserPersist, UserRolePatchPersist } from '@app/core/model/user/user';
 import { UserLookup } from '@app/core/query/user.lookup';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
@@ -99,6 +99,14 @@ export class UserService {
 		return this.http.post(url, formData, { params: params });
 	}
 
+	mergeAccount(item: UserMergeRequestPersist): Observable<boolean> {
+		const url = `${this.apiBase}/mine/merge-account-request`;
+
+		return this.http
+			.post<boolean>(url, item).pipe(
+				catchError((error: any) => throwError(error)));
+	}
+
 	//
 	// Autocomplete Commons
 	//

dmp-frontend/src/app/library/notification/popup/popup-notification.component.html

@@ -1,5 +1,21 @@
-<h2 mat-dialog-title>{{notification.title}}</h2>
+<div class="dialog-wrapper">
-<mat-dialog-content>{{notification.message}}</mat-dialog-content>
+	<div mat-dialog-title class="row d-flex mb-4">
-<mat-dialog-actions class="d-flex">
+		<div class="col p-0">
-	<button class="ml-auto" mat-button mat-dialog-close>{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
+			<span>
-</mat-dialog-actions>
+				{{notification.title}}
+			</span>
+		</div>
+	</div>
+	<div class="row  mt-2 mb-4">
+		<div class="col-12">
+			<span>
+				{{notification.message}}
+			</span>
+		</div>
+	</div>
+	<div class="row justify-content-end">
+		<div class="col-auto">
+			<button class="ml-auto" mat-button mat-dialog-close>{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/library/notification/popup/popup-notification.component.scss

@@ -0,0 +1,4 @@
+.dialog-wrapper {
+  padding: 2.0rem;
+  width: 40vw;
+}

dmp-frontend/src/app/library/notification/popup/popup-notification.component.ts

@@ -4,7 +4,8 @@ import { PopupNotification } from '../../../core/services/notification/ui-notifi
 
 @Component({
 	selector: 'app-popup-notification-dialog',
-	templateUrl: './popup-notification.component.html'
+	templateUrl: './popup-notification.component.html',
+	styleUrls: ['popup-notification.component.scss']
 })
 export class PopupNotificationDialogComponent {
 

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

@@ -1,20 +1,27 @@
 <div class="template-container">
-	<div mat-dialog-title class="row d-flex m-0">
+	<div mat-dialog-title class="row d-flex mb-4">
-		<h1 mat-dialog-title class="title">{{'USER-PROFILE.ACTIONS.LINK-NEW-ACCOUNT' | translate}}</h1>
+		<div class="col p-0">
-		<span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span>
+			<span class="title">{{'USER-PROFILE.ACTIONS.LINK-NEW-ACCOUNT' | translate}}</span>
+		</div>
+		<div class="col-auto p-0">
+			<mat-icon class="close-icon" (click)="closeDialog()">close</mat-icon>
+		</div>
 	</div>
 	<!-- <app-login *ngIf="hasEmail" [mergeUsers]="true" redirect="false"></app-login> -->
-	<div *ngIf="!hasEmail">
+	<!-- <div *ngIf="!hasEmail"> -->
-		<div  mat-dialog-content class="definition-content pt-2">
+	<div class="row mt-2 mb-4">
-			<mat-form-field class="full-width">
+		<div class="col-12">
-				<input matInput placeholder="{{'USER-PROFILE.SETTINGS.YOUR-EMAIL' | translate}}">
+			<mat-form-field class="w-100">
+				<input required matInput [formControl]="form.get('email')" placeholder="{{'USER-PROFILE.SETTINGS.YOUR-EMAIL' | translate}}">
 			</mat-form-field>
 		</div>
-		<div mat-mat-dialog-actions>
+	</div>
-			<div class="col-auto d-flex pb-2 pt-2">
+	<div class="row justify-content-end">
-				<button mat-raised-button type="button" class="cancel-btn ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
+		<div class="col-auto">
-				<button mat-raised-button type="button" class="add-btn ml-4" (click)="add()">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
+			<button mat-raised-button type="button" class="cancel-btn ml-auto" (click)="cancel()">{{'USER-PROFILE.ACTIONS.CANCEL' | translate}}</button>
-			</div>
+		</div>
+		<div class="col-auto">
+			<button mat-raised-button type="button" class="add-btn ml-4" (click)="add()" [disabled]="!form.valid">{{'USER-PROFILE.ACTIONS.ADD' | translate}}</button>
 		</div>
 	</div>
 </div>

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

@@ -1,4 +1,8 @@
 .template-container {
+
+	width: 40vw;
+	padding: 2.0rem;
+
 	.header {
 		display: flex;
 		width: 100%;

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

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -13,18 +13,22 @@ export class AddAccountDialogComponent implements OnInit {
 	datasetProfileDefinitionModel: any;
 	datasetProfileDefinitionFormGroup: UntypedFormGroup;
 	progressIndication = false;
-	public hasEmail = true;
+	form: FormGroup;
+	// public hasEmail = true;
 	//TODO: refactor
-	private request: any;
+	// private request: any;
 
 	constructor(
+		private formBuilder: FormBuilder,
 		public dialogRef: MatDialogRef<AddAccountDialogComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) {
+	) {	}
-
-	}
 
 	ngOnInit(): void {
+		this.form = this.formBuilder.group({
+			email: [this.data.email, [Validators.required, Validators.email]]
+		});
+
 		//TODO refactor
 		// this.mergeLoginService.getObservable().subscribe(result => {
 		// 	if (result !== undefined) {
@@ -39,16 +43,14 @@ export class AddAccountDialogComponent implements OnInit {
 	}
 
 	add(): void {
-		this.request.email = 'email';
+		this.closeDialog(this.form.value);
-		this.dialogRef.close(this.request);
 	}
 
 	cancel(): void {
-		this.dialogRef.close();
+		this.closeDialog();
 	}
 
-	closeDialog(): void {
+	closeDialog(data?: any): void {
-		this.dialogRef.close();
+		this.dialogRef.close(data);
 	}
-
 }

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

@@ -330,13 +330,30 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 		const dialogRef = this.dialog.open(AddAccountDialogComponent, {
 			restoreFocus: false,
 			autoFocus: false,
-			width: '653px',
+			// width: '653px',
-			maxHeight: '90vh',
+			// maxHeight: '90vh',
 			data: {
+				email: ''
 			}
 		});
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (result) {
+				console.log('email result:');
+				console.log(result);
+				this.userService.mergeAccount({ email: result.email })
+				.subscribe(result => {
+					if (result) {
+						this.dialog.open(PopupNotificationDialogComponent, {
+							data: {
+								title: this.language.instant('USER-PROFILE.MERGING-EMAILS-DIALOG.TITLE'),
+								message: this.language.instant('USER-PROFILE.MERGING-EMAILS-DIALOG.MESSAGE')
+							}//, maxWidth: '30em'
+						});
+					}
+				},
+				error => console.error(error)); //TODO how to handle this
+
+
 				//TODO refactor
 				// this.mergeEmailConfirmation.sendConfirmationEmail(result).pipe(takeUntil(this._destroyed))
 				// 	.subscribe(res => {