Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

3 files changed, 254 insertions, 285 deletions

diff --git a/src/app/components/profile-settings/profile-settings.component.css b/src/app/components/profile-settings/profile-settings.component.css
index 1c07d9f..a8451c2 100644
--- a/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/app/components/profile-settings/profile-settings.component.css
@@ -1,124 +1,10 @@
-* {
-  box-sizing: border-box;
-}
-
-#content {
-  max-width: 22em;
-  justify-content: start;
-}
-
-form {
-  width: 100%;
-}
-
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
-}
-
-/* Navigation bar (for loggedin user) */
-
-#navigation {
-  display: flex;
-  width: 100%;
-}
-
-#navigation > .submit-btn {
-  flex: 1;
-  margin-top: 0;
-  margin-left: .5em;
-  font-size: inherit;
-}
-
-#navigation > .submit-btn:nth-of-type(1) {
-  margin-left: 0;
-}
-
-/* Form */
-
-#update-profile-picture {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 .5em;
-  flex-wrap: wrap;
-}
-
 #profile-picture {
   width: 5em;
   height: 5em;
 }
 
-#submit-file {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1em;
-}
-
-#upload-file:hover {
-  cursor: inherit;
-}
-
-#upload-file > input:hover {
-  cursor: pointer;
-}
-
-#upload-file > input::-webkit-file-upload-button {
-  visibility: hidden;
-}
-
-#update-user {
-  margin-top: 1.1em;
-}
-
-.input-field {
-  border-color: var(--focus-color) !important;
-  caret-color: var(--focus-color);
-  border-width: 2px !important;
-  margin-top: -1px !important;
-}
-
-.input-field-label {
-  font-size: .7em;
-  color: var(--focus-color);
-  transform: translate(0, -1.2em);
-}
-
-#all-languages, #all-technologies {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/* Buttons */
-
-.edit-btn {
-  border-radius: 0 !important;
-  color: var(--focus-color);
-  background-color: white;
-  border-color: var(--focus-color);
-}
-
-.edit-btn:hover {
-  color: white;
-  background-color: black;
-  border-color: black !important;
-}
-
-.submit-btn {
-  margin-bottom: .5em;
-}
-
-#update-profile-btn {
-  margin-top: 1em;
-}
-
-#confirm-delete {
-  box-sizing: border-box;
-  width: 100%;
-  background-color: var(--failure);
-  color: white;
-  padding: .2em;
-  text-align: center;
+.sec-info {
+  width: fit-content;
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 502697d..1471859 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -1,116 +1,149 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" *ngIf="dataArrived">
-	<nav id="navigation">
-		<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
-		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button>
-		<button class="submit-btn" (click)="logout()">Logout</button>
-	</nav>
-	<hr>
-	<div class="scroll-standalone">
-		<form id="update-profile-picture" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
-			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
-			<div id="submit-file">
-				<div id="upload-file" class="submit-btn">
-					<input type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
-				</div>
-				<button class="submit-btn" type="submit">Update profile picture</button>
-			</div>
-		</form>
-		<hr>
-		<form id="update-user" [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>
+<main class="scroll-standalone under-navbar centered-content flex-col">
+	<section class="card width-full" *ngIf="this.isAdminUser">
+		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" (click)="goToAdminPanel()">
+			Go to admin panel
+		</button>
+	</section>
+	<form class="flex-row card width-full font-size-dot9 margin-top-bot-dot7" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
+		<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
+		<section class="flexible flex-col flex-center-align-items flex-justify-center padding-side-font">
+			<input class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
+			<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-top-dot4" type="submit" *ngIf="newProfilePicture.size > 0">
+				Update profile picture
+			</button>
+		</section>
+	</form>
+	<form class="flex-col card width-full padding-dot6" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible fg-focus">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>
+				<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>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="firstName" required>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible fg-focus">Last Name</label>
 
-			<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>
+				<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>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="lastName" required>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible fg-focus">Username</label>
 
-			<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>
+				<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>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="username" required>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible fg-focus">Email</label>
 
-			<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>
+				<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 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>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="email" required>
+		</section>
+		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleLanguages()">
+			▼ Edit Languages ▼
+		</button>
+		<section class="flex-row flexible-children border-faded-slim padding-dot3 margin-top-dot5" *ngIf="showLanguages">
+			<section class="padding-right-1">
+				<div class="none-message" *ngIf="chosenLanguages.length === 0">
+					You haven't chosen any languages!
 				</div>
-			</div>
-			<button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button>
-			<div *ngIf="showLanguages">
-				<div class="input-selection">
-					<input type="text" class="input-field" formControlName="languageInput" required>
-
-					<div class="input-errors">
-						<label class="error">Type in your desired languages, separated by a space</label>
+				<div class="border-faded-slim border-bottom-only" *ngIf="chosenLanguages.length > 0">
+					Chosen languages:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of chosenLanguages" (click)="langClick(lang.name)">
+						{{ lang.name }}
 					</div>
 				</div>
-				Available languages:
-				<div id="all-languages">
-					<div class="user-language" *ngFor="let lang of availableLanguages">
+			</section>
+			<section>
+				<div class="none-message" *ngIf="availableLanguages.length === 0">
+					No other languages available!
+				</div>
+				<div class="border-faded-slim border-bottom-only" *ngIf="availableLanguages.length > 0">
+					Available languages:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
 						{{ lang.name }}
 					</div>
 				</div>
-			</div>
-
-			<button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button>
-			<div *ngIf="showTechnologies">
-				<div class="input-selection">
-					<input type="text" class="input-field" formControlName="technologyInput" required>
-
-					<div class="input-errors">
-						<label class="error">Type in your desired technologies, separated by a space</label>
+			</section>
+		</section>
+		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleTechnologies()">
+			▼ Edit Technologies ▼
+		</button>
+		<section class="flex-row flexible-children border-faded-slim padding-dot3 margin-top-dot5" *ngIf="showTechnologies">
+			<section class="padding-right-1">
+				<div class="none-message" *ngIf="chosenTechnologies.length === 0">
+					You haven't chosen any technologies!
+				</div>
+				<div class="border-faded-slim border-bottom-only" *ngIf="chosenTechnologies.length > 0">
+					Chosen technologies:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of chosenTechnologies" (click)="techClick(tech.name)">
+						{{ tech.name }}
 					</div>
 				</div>
-				Available technologies:
-				<div id="all-technologies">
-					<div class="user-technology" *ngFor="let tech of availableTechnologies">
+			</section>
+			<section>
+				<div class="none-message" *ngIf="availableTechnologies.length === 0">
+					No other technologies available!
+				</div>
+				<div class="border-faded-slim border-bottom-only" *ngIf="availableTechnologies.length > 0">
+					Available technologies:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
 						{{ tech.name }}
 					</div>
 				</div>
-			</div>
+			</section>
+		</section>
+		<section class="flex-col input-selection">
+			<div class="flex-row">
+				<label class="flexible fg-focus">Current Password</label>
 
-			<button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button>
+				<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>
+			<input [type]="showCurrentPassword ? 'text' : 'password'" class="fancy-input border-faded-slim border-bottom-only padding-right-1dot5" formControlName="password" required>
+			<button type="button" class="show-password-button hover-half-opacity click-effect" (click)="toggleShowPassword(0)">
+				<img [src]="showCurrentPassword ? '/assets/icons/tabler-icon-eye-off.svg' : '/assets/icons/tabler-icon-eye.svg'">
+			</button>
+		</section>
+		<section class="margin-top-bot-dot3">
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
-		</form>
-		<hr>
-		<div id="confirm-delete" *ngIf="deleteAccountConfirm">
+		</section>
+		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
+			Update profile
+		</button>
+	</form>
+	<section class="card width-full">
+		<div class="margin-bot-dot5 text-centered fg-error" *ngIf="deleteAccountConfirm">
 			Are you sure you want to delete your account?<br>This is permanent!
 		</div>
-		<button class="submit-btn delete-btn" (click)="deleteAccount()">Delete account</button>
-	</div>
-</div>
+		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 fg-error" (click)="deleteAccount()">
+			Delete account
+		</button>
+	</section>
+	</main>
+
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index a484665..3d6e491 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -6,14 +6,15 @@ import { Router } from '@angular/router';
 import { LanguageService } from 'src/app/services/language.service';
 import { UserService } from 'src/app/services/user.service';
 import { TechnologyService } from 'src/app/services/technology.service';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
 import { ErrorBarComponent } from '../error-bar/error-bar.component';
 import { SuccessBarComponent } from '../success-bar/success-bar.component';
-import { Language } from 'src/models/language';
-import { Technology } from 'src/models/technology';
+import { Language } from 'src/models/language.model';
+import { Technology } from 'src/models/technology.model';
 import { TokenService } from 'src/app/services/token.service';
 import { Title } from '@angular/platform-browser';
 import { AppConstants } from 'src/app/app-constants.module';
+import { ProfilePictureService } from 'src/app/services/profile-picture.service';
 
 @Component({
   selector: 'app-profile-settings',
@@ -34,10 +35,13 @@ export class ProfileSettingsComponent implements OnInit {
   public updateProfilePictureFormGroup: FormGroup;
   public newProfilePicture: File;
   public user: User;
+  public chosenLanguages: Language[];
+  public chosenTechnologies: Technology[];
   public availableLanguages: Language[];
   public availableTechnologies: Technology[];
+  public showCurrentPassword = false;
 
-  constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService, private _fb: FormBuilder, private _location: Location) {
+  constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _profilePictureService: ProfilePictureService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService, private _fb: FormBuilder, private _location: Location) {
     this._titleService.setTitle(this._title);
   }
 
@@ -50,38 +54,40 @@ export class ProfileSettingsComponent implements OnInit {
     this.availableTechnologies = [];
     this.newProfilePicture = new File([], '');
 
-    this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
-      (res: object) => {
+    // Initializing forms with blank (default) values
+    this.updateUserFormGroup = this._fb.group({
+      firstName: new FormControl(''),
+      lastName: new FormControl(''),
+      username: new FormControl(''),
+      email: new FormControl(''),
+      password: new FormControl(''),
+    });
+    this.updateProfilePictureFormGroup = this._fb.group({
+      fileUpload: new FormControl('')
+    });
+
+    this._userService.getUserByUsernameRequest(this._urlUsername).subscribe({
+      next: (res: object) => {
         Object.assign(this.user, res);
         this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME);
         this.finishUserLoading();
       },
-      (err: HttpErrorResponse) => {
+      error: () => {
         this._router.navigate(['/not-found']);
       }
-    );
-
-    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe(
-      (result: object) => {
-        this.availableLanguages = result as Language[];
-      }
-    );
-    this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe(
-      (result: object) => {
-        this.availableTechnologies = result as Technology[];
-      }
-    );
-  }
+    });
+   }
 
   private finishUserLoading(): void {
     if (sessionStorage.getItem('UserCred')) {
       const userFromToken: User = this._userService.getDefaultUser();
 
-      this._userService.getUserFromSessionStorageRequest().subscribe(
-        (tokenRes: object) => {
+      this._userService.getUserFromSessionStorageRequest().subscribe({
+        next: (tokenRes: object) => {
           Object.assign(userFromToken, tokenRes);
 
           if (userFromToken.userName === this._urlUsername) {
+            this.loadUserSecondaryInfo();
             this.initForms();
             this.dataArrived = true;
           }
@@ -89,16 +95,53 @@ export class ProfileSettingsComponent implements OnInit {
             this.goToProfile();
           }
         },
-        (err: HttpErrorResponse) => {
+        error: () => {
           this.logout();
         }
-      );
+      });
     }
     else {
       this.goToProfile();
     }
   }
 
+  private loadUserSecondaryInfo(): void {
+    // Load languages and tehnologies of user
+    this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(
+      (result) => {
+        this.chosenLanguages = result as Language[];
+        this.loadAvailableLanguages();
+      }
+    );
+
+    this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(
+      (result) => {
+        this.chosenTechnologies = result as Technology[];
+        this.loadAvailableTechnologies();
+      }
+    );
+  }
+
+  private loadAvailableLanguages(): void {
+    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        const allAvailable = result as Language[];
+        // Remove the chosen languages from all of the avaiable ones
+        this.availableLanguages = allAvailable.filter(a => !this.user.languages.some(l => l.name === a.name));
+      }
+    });
+  }
+
+  private loadAvailableTechnologies(): void {
+    this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        const allAvailable = result as Technology[];
+        // Remove the chosen technologies from all of the avaiable ones
+        this.availableTechnologies = allAvailable.filter(a => !this.user.technologies.some(t => t.name === a.name));
+      }
+    });
+  }
+
   private initForms(): void {
     this.updateUserFormGroup = this._fb.group({
       firstName: new FormControl(this.user.firstName, [
@@ -122,52 +165,17 @@ export class ProfileSettingsComponent implements OnInit {
         Validators.minLength(3),
         Validators.pattern('.*[0-9].*') // Check if password contains atleast one number
       ]),
-
-      // For language we have two different controls,
-      // the first one is used for input, the other one for sending data
-      // because if we edit the control for input,
-      // we're also gonna change the input field in the HTML
-      languageInput: new FormControl(''), // The one for input
-      languages: new FormControl(''), // The one that is sent
-
-      // For technologies it's the same as it is with languages
-      technologyInput: new FormControl(''),
-      technologies: new FormControl('')
-    });
-
-    this.getLanguagesForShowing().then(value => {
-        this.updateUserFormGroup.patchValue({ languageInput : value });
-    });
-
-    this.getTechnologiesForShowing().then(value => {
-      this.updateUserFormGroup.patchValue({ technologyInput : value });
     });
 
     this.updateProfilePictureFormGroup = this._fb.group({
       fileUpload: new FormControl('')
     });
 
-    this.updateUserFormGroup.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
-    });
-  }
-
-  private getLanguagesForShowing(): Promise<string> {
-    return new Promise(resolve => {
-      this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(value => {
-        this.user.languages = value;
-        resolve(value.map(x => x.name).join(' '));
-      });
-    });
-  }
-
-  private getTechnologiesForShowing(): Promise<string> {
-    return new Promise(resolve => {
-      this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(value => {
-        this.user.technologies = value;
-        resolve(value.map(x => x.name).join(' '));
-      });
+    this.updateUserFormGroup.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
   }
 
@@ -180,11 +188,11 @@ export class ProfileSettingsComponent implements OnInit {
       return;
     }
 
-    this._userService.putProfilePictureFromSessionStorageRequest(this.newProfilePicture).subscribe(
-      (result: object) => {
+    this._profilePictureService.putPictureWithSessionStorageRequest(this.newProfilePicture).subscribe({
+      next: () => {
         this.reloadPage();
       }
-    );
+    });
     this.dataArrived = false;
   }
 
@@ -195,14 +203,20 @@ export class ProfileSettingsComponent implements OnInit {
     this.patchLanguagesControl();
     this.patchTechnologiesControl();
 
-    this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe(
-        (result: object) => {
+    this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.chosenLanguages, this.chosenTechnologies, this.user.roles, this.user.friends).subscribe({
+        next: () => {
           this._successBar.showMsg('Profile updated successfully!');
+
+          // "Reload" page when changing username
+          const newUsername = this.updateUserFormGroup.get('username')?.value;
+          if (newUsername !== this._urlUsername) {
+            this._router.navigate(['/profile/' + newUsername + '/settings']);
+          }
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-    );
+    });
   }
 
   private patchLanguagesControl(): void {
@@ -261,17 +275,47 @@ export class ProfileSettingsComponent implements OnInit {
     }
   }
 
+  langClick(name: string): void {
+    if (this.chosenLanguages.some(c => c.name === name)) {
+      const index = this.chosenLanguages.findIndex(t => t.name === name);
+
+      this.availableLanguages.push(this.chosenLanguages[index]);
+      this.chosenLanguages.splice(index, 1);
+    }
+    else {
+      const index = this.availableLanguages.findIndex(t => t.name === name);
+
+      this.chosenLanguages.push(this.availableLanguages[index]);
+      this.availableLanguages.splice(index, 1);
+    }
+  }
+
+  techClick(name: string): void {
+    if (this.chosenTechnologies.some(c => c.name === name)) {
+      const index = this.chosenTechnologies.findIndex(t => t.name === name);
+
+      this.availableTechnologies.push(this.chosenTechnologies[index]);
+      this.chosenTechnologies.splice(index, 1);
+    }
+    else {
+      const index = this.availableTechnologies.findIndex(t => t.name === name);
+
+      this.chosenTechnologies.push(this.availableTechnologies[index]);
+      this.availableTechnologies.splice(index, 1);
+    }
+  }
+
   goToProfile(): void {
     this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]);
   }
 
-  navigateToAdminPanel(): void {
+  goToAdminPanel(): void {
     this._router.navigate(['/admin-panel']);
   }
 
   logout(): void {
     this._tokenService.logoutUserFromSessionStorage();
-    this.goToProfile();
+    this._router.navigate(['/login']);
   }
 
   toggleLanguages(): void {
@@ -284,14 +328,14 @@ export class ProfileSettingsComponent implements OnInit {
 
   deleteAccount(): void {
     if (this.deleteAccountConfirm) {
-      this._userService.deleteUserFromSessionStorageRequest().subscribe(
-        (res: object) => {
+      this._userService.deleteUserFromSessionStorageRequest().subscribe({
+        next: () => {
           this.logout();
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
       this.dataArrived = false;
     }
     else {
@@ -304,4 +348,10 @@ export class ProfileSettingsComponent implements OnInit {
     this._router.onSameUrlNavigation = 'reload';
     this._router.navigate([this._router.url]);
   }
+
+  toggleShowPassword(index: number): void {
+    switch (index) {
+      case 0: this.showCurrentPassword = !this.showCurrentPassword;
+    }
+  }
 }