Implemented updating profile properties in the settings page; user now saves his email in front-end

5 files changed, 133 insertions, 3 deletions

diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index f615262..4ed42a6 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -21,6 +21,7 @@ export class PostComponent implements OnInit {
         'gosho_trapov',
         'Gosho',
         'Trapov',
+        'gotra@bg.com',
         AppConstants.FALLBACK_PROFILE_ICON
     );
 
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index 24c3eef..27a8c10 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -6,5 +6,59 @@
 		<button class="submit-btn" (click)="logout()">Logout</button>
 	</nav>
 	<hr>
+	<form [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+		<div class="input-selection">
+			<input type="text" class="input-field" formControlName="firstName" required>
+			<label class="input-field-label">First Name</label>
+
+			<div class="input-errors">
+				<label *ngIf="updateUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="updateUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" class="input-field" formControlName="lastName" required>
+			<label class="input-field-label">Last Name</label>
+
+			<div class="input-errors">
+				<label *ngIf="updateUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="updateUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" class="input-field" formControlName="username" required>
+			<label class="input-field-label">Username</label>
+
+			<div class="input-errors">
+				<label *ngIf="updateUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="updateUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" class="input-field" formControlName="email" required>
+			<label class="input-field-label">Email</label>
+
+			<div class="input-errors">
+				<label *ngIf="updateUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="updateUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="password" class="input-field" formControlName="password" required>
+			<label class="input-field-label">Password</label>
+
+			<div class="input-errors">
+				<label *ngIf="updateUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="updateUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+				<label *ngIf="updateUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
+			</div>
+		</div>
+		<button class="submit-btn" type="submit">Update profile</button>
+	</form>
+	<hr>
 	<button id="delete-account" class="submit-btn" (click)="deleteAccount()">Delete account</button>
 </div>
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
index b278e42..424ed83 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
@@ -1,5 +1,6 @@
 import {HttpErrorResponse} from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {AppConstants} from 'src/app/app-constants.module';
 import {UserService} from 'src/app/services/user.service';
@@ -12,10 +13,11 @@ import {User} from 'src/models/identity/user';
 })
 export class ProfileSettingsComponent implements OnInit {
   private _urlUsername: string;
+  public updateUserFormGroup: FormGroup;
   public dataArrived = false;
   public user: User;
 
-  constructor(private _router: Router, private _userService: UserService)
+  constructor(private _router: Router, private _userService: UserService, private _fb: FormBuilder)
   { }
 
   ngOnInit(): void {
@@ -43,6 +45,7 @@ export class ProfileSettingsComponent implements OnInit {
           Object.assign(userFromToken, tokenRes);
 
           if (userFromToken.userName === this._urlUsername) {
+            this.initForm();
             this.dataArrived = true;
           }
           else {
@@ -57,11 +60,45 @@ export class ProfileSettingsComponent implements OnInit {
     }
   }
 
+  private initForm(): void {
+    this.updateUserFormGroup = this._fb.group({
+      firstName: new FormControl(this.user.firstName, [
+        Validators.required,
+        Validators.minLength(3)
+      ]),
+      lastName: new FormControl(this.user.lastName, [
+        Validators.required,
+        Validators.minLength(3)
+      ]),
+      username: new FormControl(this.user.userName, [
+        Validators.required,
+        Validators.minLength(3)
+      ]),
+      email: new FormControl(this.user.email, [
+        Validators.required,
+        Validators.email,
+      ]),
+      password: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.pattern('.*[0-9].*') // Check if password contains atleast one number
+      ]),
+    });
+
+  }
+
   private bailOnBadToken(): void {
     this._userService.logoutUserFromSessionStorage();
     this._router.navigate(['/login']);
   }
 
+  onSubmit(): void {
+    this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup).subscribe(
+        res => console.log(res),
+        (err: HttpErrorResponse) => console.log(err.message)
+    );
+  }
+
   goToProfile(): void {
     this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]);
   }
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 5bd26e9..b8678d7 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -16,7 +16,7 @@ export class UserService {
   constructor(private http: HttpClient) { }
 
   getDefaultUser(): User {
-    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', AppConstants.FALLBACK_PROFILE_ICON);
+    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', 'gotra@bg.com', AppConstants.FALLBACK_PROFILE_ICON);
   }
 
   getUserIdFromSessionStorageToken(): Guid {
@@ -38,6 +38,14 @@ export class UserService {
     return this.getUserRequest(userCred.ID, jwt.token);
   }
 
+  putUserFromSessionStorageRequest(updateUserFormGroup: FormGroup): Observable<object> {
+    // Get the token and userid from session storage
+    const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
+    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+
+    return this.putUserRequest(userCred.ID, jwt.token, updateUserFormGroup);
+  }
+
   deleteUserFromSessionStorageRequest(): Observable<object> {
     // Get the token and userid from session storage
     const jwt: IJWTPayload = { token: sessionStorage.getItem('UserCred') ?? '' };
@@ -85,6 +93,27 @@ export class UserService {
     return this.http.get(AppConstants.API_USER_URL + '/GetUser', options);
   }
 
+  putUserRequest(userId: Guid, authToken: string, updateUserFormGroup: FormGroup): Observable<object> {
+    // TODO?: add a check for form data validity
+    const body = {
+      UserName: updateUserFormGroup.get('username')?.value,
+      Email: updateUserFormGroup.get('email')?.value,
+      FirstName: updateUserFormGroup.get('firstName')?.value,
+      LastName: updateUserFormGroup.get('lastName')?.value,
+      Password: updateUserFormGroup.get('password')?.value,
+      // TODO: make the following fields dynamically selectable
+      Roles: [ { Name: 'User' } ],
+      Friends: [],
+      Languages: [],
+      Technologies: []
+    };
+    const options = {
+      params: new HttpParams().set('Id', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this.http.put(AppConstants.API_USER_URL, body, options);
+  }
+
   deleteUserRequest(userId: Guid, authToken: string): Observable<object> {
     const options = {
       params: new HttpParams().set('Id', userId.toString()),
diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts
index 2c5c57d..68a14fb 100644
--- a/src/DevHive.Angular/src/models/identity/user.ts
+++ b/src/DevHive.Angular/src/models/identity/user.ts
@@ -5,13 +5,15 @@ export class User {
   private _lastName : string;
   private _firstName : string;
   private _userName : string;
+  private _email: string;
   private _imageUrl : string;
 
-  constructor(id: Guid, userName: string, firstName: string, lastName: string, imageUrl: string) {
+  constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string) {
     this.id = id;
     this.userName = userName;
     this.firstName = firstName;
     this.lastName = lastName;
+    this.email = email;
     this.imageUrl = imageUrl;
   }
 
@@ -43,6 +45,13 @@ export class User {
     this._lastName = v;
   }
 
+  public get email(): string {
+    return this._email;
+  }
+  public set email(v: string) {
+    this._email = v;
+  }
+
   public get imageUrl(): string {
     return this._imageUrl;
   }