Adds Local Profile Pictures Implementation

src/app/header/header-popup/my-profile/my-profile.component.html

@@ -16,10 +16,9 @@
             <div class="row">
 
                 <div class="btn-container">
-                    <button class="picture-btn"
-                            (click)="onAddProfilePicture()">
-                        Add Profile Picture
-                    </button>
+                    <app-profile-picture-picker
+                    (imageSent)="onProfilePictureSent($event)">
+                    </app-profile-picture-picker>
                 </div>
 
                 <div class="separator-line">

src/app/header/header-popup/my-profile/my-profile.component.ts

@@ -11,6 +11,7 @@ import {first, take} from "rxjs";
 import UserChecker from "../../../shared/model/user/user.checker";
 import HttpErrorChecker from "../../../shared/model/httpError/httpErrorChecker";
 import {HttpError} from "../../../shared/model/httpError/httpError.model";
+import {faFileUpload} from "@fortawesome/free-solid-svg-icons";
 
 
 @Component({
@@ -101,6 +102,8 @@ export class MyProfileComponent implements OnInit {
 
     isShowErrorMessage = false;
 
+    _fileIcon = faFileUpload
+
     constructor(private authService: AuthService) {
     }
 
@@ -116,36 +119,27 @@ export class MyProfileComponent implements OnInit {
         this.stateChange.emit(state);
     }
 
-    public showErrorMessage(): string {
+    showErrorMessage(): string {
         if (this.isShowErrorMessage) {
             return "show";
         }
         return "hide";
     }
 
-    public hideErrorMessage(): string {
+    hideErrorMessage(): string {
         if (!!this.errorMessage) {
             return "hide";
         }
         return "show";
     }
 
-    public onDeleteAccount() {
+    onDeleteAccount() {
         this.authService.deleteAccount().subscribe({
-            next: (res) => {
-                if (res && UserChecker.test(res)) {
-                    this.closePopup()
-                } if (HttpErrorChecker.test(res)) {
-                    this.errorMessage = (<HttpError>res).details;
-                }
+            next: (response: any) => {
+                this.authService.logout();
             }
         })
-        // this.authService.logout()
-        // this.onStateChange(false);
-    }
-
-    public onAddProfilePicture() {
-        this.authService.addProfilePicture()
+        this.closePopup();
     }
 
     hideAuthContainer(event: any) {
@@ -155,6 +149,12 @@ export class MyProfileComponent implements OnInit {
         }
     }
 
+    onProfilePictureSent(event: any) {
+        if (event) {
+            this.closePopup();
+        }
+    }
+
     private closePopup() {
         this.onStateChange(false);
     }

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.html

@@ -0,0 +1,20 @@
+<div class="btn-container">
+    <div class="input-group mb-3">
+        <div class="custom-file">
+            <input type="file"
+                   class="custom-file-input"
+                   id="inputProfilePicture"
+                   aria-describedby="inputProfilePicture"
+                   (change)="handleFileInput($event)">
+            <label class="custom-file-label"
+                   for="inputProfilePicture">
+                Profile Picture
+            </label>
+        </div>
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary"
+            [disabled]="isProfilePictureSelected"
+            (click)="uploadProfilePicture()">Upload</button>
+        </div>
+    </div>
+</div>

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilePicturePickerComponent } from './profile-picture-picker.component';
+
+describe('ProfilePicturePickerComponent', () => {
+  let component: ProfilePicturePickerComponent;
+  let fixture: ComponentFixture<ProfilePicturePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfilePicturePickerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProfilePicturePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.ts

@@ -0,0 +1,35 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {AuthService} from "../../../../shared/auth/auth.service";
+
+@Component({
+    selector: 'app-profile-picture-picker',
+    templateUrl: './profile-picture-picker.component.html',
+    styleUrls: ['./profile-picture-picker.component.css']
+})
+export class ProfilePicturePickerComponent  {
+
+    @Output()
+        imageSent  = new EventEmitter<boolean>();
+
+    private profilePicture!: File;
+
+    constructor(private authService: AuthService) { }
+
+    handleFileInput(event: Event) {
+        const element = event.currentTarget as HTMLInputElement;
+        const fileList: FileList | null = element.files;
+        if (fileList != null && fileList.length > 0 && fileList[0] != null) {
+            this.profilePicture = fileList[0];
+        }
+    }
+
+    uploadProfilePicture() {
+        this.authService.addProfilePicture(this.profilePicture);
+        this.imageSent.emit(true);
+    }
+
+    get isProfilePictureSelected(): boolean {
+        return !this.profilePicture;
+    }
+
+}