edit-profile.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { UserService } from '../services/user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrl: './edit-profile.component.css'
})
export class EditProfileComponent {

	name: string = '';
	email: string = '';
	profilePhoto: File | null = null;

	constructor(private authService: AuthService, private userService: UserService, private router: Router) {
		let id = this.authService.getUserId();
		this.userService.getUser().subscribe({
			next: (data: any) => {
				this.name = data.name;
				this.email = data.email;
			},
			error: (error: any) => {
				console.error('User retrieval failure');
				this.router.navigate(['/login']);
			}
		});
	};

	onFileSelected(event: any): void {
		const files: FileList = event.target.files;
		if (files.length > 0) {
			this.profilePhoto = files[0];
		} else {
			this.profilePhoto = null;
		}
	}	

	saveProfile(): void{
		this.userService.updateUserEmail(this.email).subscribe({
			next: (data: any) => {
				if (this.profilePhoto) {
					this.userService.updateUserProfilePhoto(this.profilePhoto).subscribe({
						error: (error: any) => {
							console.error('Profile photo update failure');
						}
					});
				}
			},
			error: (error: any) => {
				console.error('User update failure');
			}
		});	
		this.router.navigate(['/']);
		setTimeout(() => {
			window.location.href = window.location.href;
		}, 200);
}
}