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

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { CultureInfo } from '@app/core/model/culture-info';
import { DmpModel } from '@app/core/model/dmp/dmp';
import { UserListingModel } from '@app/core/model/user/user-listing';
import { AuthService } from '@app/core/services/auth/auth.service';
import { CultureService } from '@app/core/services/culture/culture-service';
import { UserService } from '@app/core/services/user/user.service';
import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core';
import * as moment from 'moment-timezone';
import { Observable, of } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { LanguageService } from '@app/core/services/language/language.service';
import { isNullOrUndefined } from 'util';
import { Oauth2DialogService } from '../misc/oauth2-dialog/service/oauth2-dialog.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';

const availableLanguages: any[] = require('../../../assets/resources/language.json');

@Component({
	selector: 'app-user-profile',
	templateUrl: './user-profile.component.html',
	styleUrls: ['./user-profile.component.scss'],
})
export class UserProfileComponent extends BaseComponent implements OnInit, OnDestroy {

	user: Observable<UserListingModel>;
	currentUserId: string;
	cultures: Observable<CultureInfo[]>;
	timezones: Observable<any[]>;
	editMode = false;
	languages = availableLanguages;
	zenodoToken: string;
	zenodoEmail: string;

	formGroup: FormGroup;
	constructor(
		private userService: UserService,
		private route: ActivatedRoute,
		private router: Router,
		private authService: AuthService,
		private language: TranslateService,
		private cultureService: CultureService,
		private authentication: AuthService,
		private languageService: LanguageService,
		private configurationService: ConfigurationService,
		private oauth2DialogService: Oauth2DialogService
	) { super(); }

	ngOnInit() {
		this.route.params
			.pipe(takeUntil(this._destroyed))
			.subscribe((params: Params) => {
				this.currentUserId = this.authService.current().id;
				const userId = !params['id'] ? 'me' : params['id'];
				this.user = this.userService.getUser(userId).pipe(map(result => {
					result['additionalinfo'] = JSON.parse(result['additionalinfo']);
					this.zenodoToken = result['additionalinfo']['zenodoToken'];
					this.zenodoEmail = result['additionalinfo']['zenodoEmail'];
					this.formGroup = new FormBuilder().group({
						language: new FormControl(result['additionalinfo']['language'] ? availableLanguages.filter(x => x.value === result['additionalinfo']['language']['value']).pop() : '', [Validators.required]),
						timezone: new FormControl(result['additionalinfo']['timezone'], [Validators.required]),
						culture: new FormControl(result['additionalinfo']['culture'], [Validators.required])
					});
					//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).subscribe(x => { if (x) this.translate.use(x.value) })
					this.formGroup.get('timezone').valueChanges
						.pipe(takeUntil(this._destroyed))
						.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
					this.formGroup.get('culture').valueChanges
						.pipe(takeUntil(this._destroyed))
						.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
					this.formGroup.disable();
					return result;
				}));
			});

	}

	ngOnDestroy(): void {
	}

	logout(): void {
		this.authentication.logout();
	}

	getUserRole(dmp: DmpModel) {
		if (dmp.creator.id === this.currentUserId) {
			return this.language.instant('USER-PROFILE.DMPS.CREATOR');
		} else if (dmp.associatedUsers.map(x => x.id).indexOf(this.currentUserId) !== -1) {
			return this.language.instant('USER-PROFILE.DMPS.MEMBER');
		}
	}

	showAllDmps() {
		this.router.navigate(['/plans']);
	}

	navigateToDmp(dmp: DmpModel) {
		this.router.navigate(['/plans/edit/' + dmp.id]);
	}

	private _filterTimezone(value: string): Observable<any[]> {
		if (value && typeof value === 'string') {
			const filterValue = value.toLowerCase();
			return of(moment.tz.names().filter(option => option.toLowerCase().includes(filterValue)));
		} else {
			return of(moment.tz.names());
		}
	}

	private _filterCulture(value: string): Observable<any[]> {
		if (value && typeof value === 'string') {
			const filterValue = value.toLowerCase();
			return of(this.cultureService.getCultureValues().filter(option => option.displayName.toLowerCase().includes(filterValue)));
		} else {
			return of(this.cultureService.getCultureValues());
		}
	}

	displayFn(culture?: CultureInfo): string | undefined {
		return culture ? culture.displayName + '-' + culture.nativeName : undefined;
	}

	save() {

	}

	public unlock() {
		this.editMode = true;
		this.formGroup.enable();
	}

	public lock() {
		if (!this.formGroup.valid) { return; }
		this.userService.updateUserSettings(this.formGroup.value)
			.pipe(takeUntil(this._destroyed))
			.subscribe(
				x => {
					this.editMode = false;
					this.languageService.changeLanguage(this.formGroup.value.language.value);
					this.authService.current().culture = this.formGroup.value.culture.name;
					this.formGroup.disable();
					this.authService.me()
						.pipe(takeUntil(this._destroyed))
						.subscribe(result => this.router.navigate(['/profile']));
					// .subscribe(result => window.location.reload());
				},
				error => {
					console.log(error);
				});
	}

	public applyFallbackAvatar(ev: Event) {
		(ev.target as HTMLImageElement).src = 'assets/images/profile-placeholder.png';
	}

	public hasZenodo(): boolean {
		return !isNullOrUndefined(this.zenodoToken) && this.zenodoToken !== "";
	}

	public loginToZenodo() {
		this.showOauth2Dialog(this.getAccessUrl());
	}

	getAccessUrl(): string {
		const redirectUri = this.configurationService.app + 'oauth2';
		const url = this.configurationService.loginProviders.zenodoConfiguration.oauthUrl
			+ '?client_id=' + this.configurationService.loginProviders.zenodoConfiguration.clientId
			+ '&response_type=code&scope=deposit:write+deposit:actions+user:email&state=astate&redirect_uri='
			+ redirectUri;
		return url;
	}

	showOauth2Dialog(url: string) {
		this.oauth2DialogService.login(url)
			.pipe(takeUntil(this._destroyed))
			.subscribe(code => {
				if (!isNullOrUndefined(code)) {
					this.userService.registerDOIToken(code, this.configurationService.app + 'oauth2')
						.pipe(takeUntil(this._destroyed))
						.subscribe(() => this.router.navigate(['/reload']).then(() => this.router.navigate(['/profile'])));
				}
			});
	}

	public RemoveZenodo() {
		this.userService.deleteDOIToken()
		.pipe(takeUntil(this._destroyed))
		.subscribe(() => this.router.navigate(['/reload']).then(() => this.router.navigate(['/profile'])));
	}

}