Index: trip-planner-front/src/app/_models/city.ts
===================================================================
--- trip-planner-front/src/app/_models/city.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/_models/city.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -7,6 +7,6 @@
     constructor(){
         this.id = 1;
-        this.name= 'City name';
-        this.description= 'City description';
+        this.name= '';
+        this.description= '';
     }
 }
Index: trip-planner-front/src/app/_models/dto/usernameDto.ts
===================================================================
--- trip-planner-front/src/app/_models/dto/usernameDto.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/_models/dto/usernameDto.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,8 @@
+export class UsernameDto{
+
+    username: string;
+    
+    constructor(){
+        this.username = '';
+    }
+}
Index: trip-planner-front/src/app/_services/location.service.ts
===================================================================
--- trip-planner-front/src/app/_services/location.service.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/_services/location.service.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -23,5 +23,5 @@
     postLocationToPlanner(plannerLocationDto : PlannerLocationDto) : Observable<Location>{
         let url = "http://localhost:8080/api/add-location";
-        return this.httpClient.put<Location>(url, plannerLocationDto);
+        return this.httpClient.post<Location>(url, plannerLocationDto);
     }
 
Index: trip-planner-front/src/app/_services/planner.service.ts
===================================================================
--- trip-planner-front/src/app/_services/planner.service.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/_services/planner.service.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -3,4 +3,5 @@
 import { Observable } from "rxjs";
 import { PlannerDto } from "../_models/dto/plannerDto";
+import { PlannerLocationDto } from "../_models/dto/plannerLocationDto";
 import { Planner } from "../_models/planner";
 
@@ -15,5 +16,4 @@
         'Content-Type': 'application/json'
     });
-
 
     constructor(private httpClient: HttpClient) {
@@ -30,5 +30,5 @@
     postInitialPlanner(plannerDto: PlannerDto): Observable<Planner> {
         let url = "http://localhost:8080/api/planner/new";
-        return this.httpClient.post<Planner>(url, plannerDto);
+        return this.httpClient.post<Planner>(url, plannerDto, {headers: this.httpHeaders});
     }
 
@@ -47,3 +47,16 @@
         return this.httpClient.delete<Planner>(url, { headers: this.httpHeaders });
     }
+
+    deleteLocationFromPlanner(plannerLocationDto : PlannerLocationDto) {
+        let url = "http://localhost:8080/api/delete-location";
+        const options = {
+            body: {
+                "plannerId": plannerLocationDto.plannerId, 
+                "locationId": plannerLocationDto.locationId
+            } 
+        }
+        return this.httpClient.request('delete', url, options);
+    }
+ 
+
 }
Index: trip-planner-front/src/app/_services/user.service.ts
===================================================================
--- trip-planner-front/src/app/_services/user.service.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/_services/user.service.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -43,9 +43,23 @@
     let user = sessionStorage.getItem("username");
     let token = sessionStorage.getItem("token");
-    console.log(user);
-    console.log(token);
-    console.log(!(user === null));
     return !(user === null);
   }
 
+  getAllUsernames() {
+    let url = "http://localhost:8080/api/users/usernames";
+    return this.httpClient.get<string[]>(url);
+  }
+
+  getPassword(loginRequest : LoginRequest){
+    let url="http://localhost:8080/api/users/password";
+    const options = {
+      
+      body: {
+          "username": loginRequest.username
+          
+      } 
+  }
+    return this.httpClient.request('get', url, options);
+  }
+
 }
Index: trip-planner-front/src/app/app-routing.module.ts
===================================================================
--- trip-planner-front/src/app/app-routing.module.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/app-routing.module.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from './auth/auth.guard';
+import { ExploreComponent } from './explore/explore.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { LoginComponent } from './homepage/login/login.component';
@@ -17,5 +17,6 @@
   {path: '', component: HomepageComponent},
   {path: '', component:LoginComponent},
-  {path: 'location', component: LocationDetailsComponent}
+  {path: 'location', component: LocationDetailsComponent},
+  {path: 'explore', component: ExploreComponent}
 ];
 
Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/app.module.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -4,5 +4,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CategoryService } from './_services/cateogry.service';
@@ -26,5 +26,4 @@
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
-import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
 import { AddLocationToPlannerPanelComponent } from './location/add-location-to-planner-panel/add-location-to-planner-panel.component';
 import { HomepageComponent } from './homepage/homepage.component';
@@ -49,5 +48,9 @@
 import { AuthGuard } from './auth/auth.guard';
 import { AuthInterceptor } from './auth/auth.interceptor';
-
+import { ExploreComponent } from './explore/explore.component';
+import {AutoCompleteModule} from 'primeng/autocomplete';
+import { ExploreResultComponent } from './explore/explore-result/explore-result.component';
+import {RatingModule} from 'primeng/rating';
+import { CustomValidators } from './providers/CustomValidators';
 
 @NgModule({
@@ -59,10 +62,11 @@
     LocationsFormComponent,
     EditPlannerComponent,
-    DetailPlannerComponent,
     AddLocationToPlannerPanelComponent,
     HomepageComponent,
     LocationDetailsComponent,
     RegisterComponent,
-    LoginComponent
+    LoginComponent,
+    ExploreComponent,
+    ExploreResultComponent
   ],
   imports: [
@@ -104,5 +108,7 @@
     FormsModule,
     PaginatorModule,
-    CardModule
+    CardModule,
+    AutoCompleteModule,
+    RatingModule
   ],
 
Index: trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts
===================================================================
--- trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -19,5 +19,5 @@
 
   ngOnInit(): void {
-    this.plannerDto = new Planner();
+    this.plannerDto = new PlannerDto();
   }
 
Index: trip-planner-front/src/app/explore/explore-result/explore-result.component.html
===================================================================
--- trip-planner-front/src/app/explore/explore-result/explore-result.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore-result/explore-result.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,25 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+
+  <title></title>
+</head>
+
+<body>
+
+  <header>
+  </header>
+
+  <main role="main" style="background-color: #F9F2E8;">
+  </main>
+  <br>
+
+  <footer class="bg-dark text-center text-white">
+
+  </footer>
+</body>
+
+</html>
Index: trip-planner-front/src/app/explore/explore-result/explore-result.component.ts
===================================================================
--- trip-planner-front/src/app/explore/explore-result/explore-result.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore-result/explore-result.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-explore-result',
+  templateUrl: './explore-result.component.html',
+  styleUrls: ['./explore-result.component.css']
+})
+export class ExploreResultComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
Index: trip-planner-front/src/app/explore/explore.component.css
===================================================================
--- trip-planner-front/src/app/explore/explore.component.css	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore.component.css	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,3 @@
+#button{
+    margin-left: 20px;
+}
Index: trip-planner-front/src/app/explore/explore.component.html
===================================================================
--- trip-planner-front/src/app/explore/explore.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,31 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Explore</title>
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-sm">
+      <strong class="navbar-brand">Trivia Trip</strong>
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item">
+          <p-autoComplete [(ngModel)]="text" [suggestions]="filteredCountries" (completeMethod)="search($event)"
+            field="name" [minLength]="1">
+            <mat-option *ngFor="let cityName of cities" 
+            [value]="cityName.name">
+                {{cityName.name}}
+            </mat-option></p-autoComplete>
+          <p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" id="button"></p-button>
+        </li>
+        <li class="nav-item">
+        </li>
+      </ul>
+    </nav>
+  </header>
+</body>
+
+</html>
Index: trip-planner-front/src/app/explore/explore.component.ts
===================================================================
--- trip-planner-front/src/app/explore/explore.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/explore/explore.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { City } from '../_models/city';
+import { CityService } from '../_services/city.service';
+
+
+@Component({
+  selector: 'app-explore',
+  templateUrl: './explore.component.html',
+  styleUrls: ['./explore.component.css']
+})
+export class ExploreComponent implements OnInit {
+
+  cities: City[];
+  filteredCountries: any[];
+  text: string;
+  loading = [false, false, false, false];
+
+  constructor(private cityService: CityService) {
+    this.cities = [];
+    this.filteredCountries = [];
+    this.text = '';
+  }
+
+  ngOnInit(): void {
+    this.cityService.getAllCities().subscribe(
+      cities => {
+        this.cities = cities;
+      }
+    );
+  }
+
+  search(event) {
+    let filtered: any[] = [];
+    let query = event.query;
+    for (let i = 0; i < this.cities.length; i++) {
+      let city = this.cities[i];
+      if (city.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+        filtered.push(city);
+      }
+    }
+    this.filteredCountries = filtered;
+  }
+
+  load(index) {
+    this.loading[index] = true;
+    setTimeout(() => this.loading[index] = false, 1000);
+  }
+}
Index: trip-planner-front/src/app/homepage/homepage.component.html
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/homepage/homepage.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -10,5 +10,5 @@
 
 <body>
-
+  <p-toast></p-toast>
   <header>
     <nav class="navbar navbar-expand-sm bg-light">
Index: trip-planner-front/src/app/homepage/homepage.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/homepage/homepage.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,5 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
+import { identifierModuleUrl } from '@angular/compiler';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { MessageService } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { LoginRequest } from '../_models/dto/loginRequest';
@@ -20,5 +22,4 @@
 
    imageURI = 'https://i.pinimg.com/736x/a1/1a/57/a11a572a1ec4e07039bbd04661a3b035.jpg';
-   myLogo = 'http://www.logo-designer.co/wp-content/uploads/2020/02/2020-tripadvisor-new-logo-design-by-mother-design-4.png';
    responsiveOptions;
    locations: Location[];
@@ -27,5 +28,5 @@
 
    constructor(private locationService: LocationService, private dialogService: DialogService, private userService: UserService,
-      private router: Router) {
+      private router: Router, private messageService: MessageService) {
       this.responsiveOptions = [
          {
@@ -61,5 +62,4 @@
          }
       );
-
    }
 
@@ -82,5 +82,5 @@
       },
          err => {
-
+            console.log("oops");
          });
    }
Index: trip-planner-front/src/app/homepage/login/login.component.html
===================================================================
--- trip-planner-front/src/app/homepage/login/login.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/homepage/login/login.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,18 +1,43 @@
-<div class="p-col-12 p-md-4">
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-        <input type="text" pInputText placeholder="Email address (Username)" 
-             [(ngModel)]="loginRequest.username" name="username">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+
+
+
+<div class="readersack">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6 offset-md-3">
+                <form [formGroup]="form" #myform="ngForm" (ngSubmit)="onFormLogIn(loginRequest)">
+                    <div class="form-group">
+
+                        <label>Username (email)</label>
+                        <input formControlName="username" id="username" type="text" class="form-control"
+                            [(ngModel)]="loginRequest.username"
+                            [ngClass]="{ 'is-invalid': myform.submitted && (form.get('username')?.errors?.['required'] 
+                        || form.get('username')?.errors?.['validateUser'])}" />
+                        <div *ngIf="form.get('username')?.hasError('required') && myform.submitted"
+                            class="invalid-feedback">
+                            Username is required
+                        </div>
+                        <div *ngIf="form.get('username')?.hasError('validateUser') && myform.submitted"
+                            class="invalid-feedback">
+                            Invalid username
+                        </div>
+
+                        <label>Password</label>
+                        <input formControlName="password" id="password" type="password" class="form-control"
+                            [(ngModel)]="loginRequest.password" [ngClass]="{ 'is-invalid': myform.submitted && form.get('password')?.errors?.['required']}" />
+                        <div *ngIf="form.get('password')?.hasError('required') && myform.submitted"
+                            class="invalid-feedback">
+                            Password is required</div>
+                        
+
+                        <div class="p-col-12 p-md-4">
+                            <button type="submit" pButton pRipple class="p-button-secondary">Submit</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
 </div>
-<div class="p-col-12 p-md-4">
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-        <input type="password" pInputText placeholder="Password" name="password" [(ngModel)]="loginRequest.password">
-    </div>
-</div>
-
-<div class="p-col-12 p-md-4">
-    <button pButton pRipple label="Log in" class="p-button-secondary" type="submit"
-        (click)="onFormLogIn(loginRequest)"></button>
-</div>
Index: trip-planner-front/src/app/homepage/login/login.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/login/login.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/homepage/login/login.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { LoginRequest } from 'src/app/_models/dto/loginRequest';
+import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
+import { UserDto } from 'src/app/_models/dto/userDto';
+import { UsernameDto } from 'src/app/_models/dto/usernameDto';
 import { UserService } from 'src/app/_services/user.service';
 
@@ -12,18 +15,62 @@
 export class LoginComponent implements OnInit {
 
+  form: FormGroup;
+  loginRequest: LoginRequest;
+  usernames: string[];
 
-  loginRequest : LoginRequest;
+  constructor(private ref: DynamicDialogRef, private userService: UserService, formBuilder: FormBuilder) {
+    this.loginRequest = new LoginRequest();
+    this.usernames = [];
 
-  constructor(private ref: DynamicDialogRef, private router: Router, private userService : UserService) { 
-    this.loginRequest = new LoginRequest();
-    
+    this.form = formBuilder.group({
+      username: new FormControl('', [Validators.required]),
+      password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    },
+      {
+        validators: [
+          this.validateUser('username')
+        ]
+      }
+    );
   }
 
   ngOnInit(): void {
+
   }
 
-  onFormLogIn(loginRequest){
-    this.ref.close(loginRequest);
-   
+  onFormLogIn(loginRequest) {
+    const { valid } = this.form;
+    if (valid) {
+      this.ref.close(loginRequest);
+    }
+  }
+
+  validateUser(username: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[username];
+
+      if (control.errors && !control.errors.validateUser) {
+        return;
+      }
+
+      this.userService.getAllUsernames().subscribe(
+        data => {
+          this.usernames = data;
+          for (let i = 0; i < this.usernames.length; i++) {
+            if (control.value === this.usernames[i]) {
+              control.setErrors(null);
+             
+              break;
+            } else {
+              control.setErrors({ validateUser: true });
+            }
+
+          }
+        }
+      );
+      return null;
+  
+    };
+
   }
 }
Index: trip-planner-front/src/app/homepage/register/register.component.html
===================================================================
--- trip-planner-front/src/app/homepage/register/register.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/homepage/register/register.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -2,42 +2,73 @@
     integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
-<div class="p-grid p-fluid">
-    <div class="p-col-12 p-md-4">
-        <div class="p-inputgroup">
-            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-            <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
-                class="form-control">
 
+<div class="readersack">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6 offset-md-3">
+                <form [formGroup]="form" #myform="ngForm" (ngSubmit)="onFormSubmitSignUp(user)">
+                    <div class="form-group">
+                        <label>Full name</label>
+                        <input formControlName="fullName" id="fullName" type="text" class="form-control"
+                            [(ngModel)]="user.fullName"
+                            [ngClass]="{ 'is-invalid': myform.submitted && form.get('fullName')?.errors?.['required']}" />
+                        <div *ngIf="myform.submitted && form.get('fullName')?.errors" class="invalid-feedback">
+                            <div *ngIf="form.get('fullName')?.hasError('required') && myform.submitted">
+                                Full Name is required
+                            </div>
+                        </div>
+
+                        <label>Username (email)</label>
+                        <input formControlName="username" id="username" type="text" class="form-control"
+                            [(ngModel)]="user.username"
+                            [ngClass]="{ 'is-invalid': myform.submitted && (form.get('username')?.errors?.['required'] || 
+                            form.get('username')?.errors?.['email'] || form.get('username')?.hasError('validateUsername'))}" />
+                        <div *ngIf="form.get('username')?.hasError('required') && myform.submitted"
+                            class="invalid-feedback">
+                            Username is required</div>
+                        <div *ngIf="form.get('username')?.hasError('email') && myform.submitted"
+                            class="invalid-feedback">
+                            Please enter valid email.</div>
+                        <div *ngIf="form.get('username')?.hasError('validateUsername') && myform.submitted"
+                            class="invalid-feedback">
+                            Username already exists</div>
+
+
+
+                        <label>Password</label>
+                        <input formControlName="password" id="password" type="password" class="form-control"
+                            [(ngModel)]="user.password" [ngClass]="{ 'is-invalid': myform.submitted && (form.get('password')?.errors?.['required'] ||
+                            form.get('password')?.errors?.['minlength'])}" />
+                        <div *ngIf="form.get('password')?.hasError('required') && myform.submitted"
+                            class="invalid-feedback">
+                            Password is required</div>
+                        <div *ngIf="form.get('password')?.errors?.['minlength'] && myform.submitted"
+                            class="invalid-feedback">
+                            Password must be at least 6 characters long.
+                        </div>
+
+                        <label>Confirm password</label>
+                        <input formControlName="confirmPassword" id="confirmPassword" type="password"
+                            class="form-control" [(ngModel)]="user.confirmPassword"
+                            [ngClass]="{ 'is-invalid': myform.submitted && (form.get('confirmPassword')?.errors?.['required'] || 
+                            form.get('confirmPassword')?.errors?.['minlength'] || form.get('confirmPassword')?.errors?.['mustMatch'])}" />
+                        <div *ngIf="form.get('confirmPassword')?.hasError('required') && myform.submitted"
+                            class="invalid-feedback">
+                            Confirm Password is required</div>
+                        <div *ngIf="form.get('confirmPassword')?.errors?.['minlength'] && myform.submitted"
+                            class="invalid-feedback">
+                            Confirm Password must be at least 6 characters long.
+                        </div>
+                        <div *ngIf="form.get('confirmPassword')?.errors?.['mustMatch'] && myform.submitted"
+                            class="invalid-feedback">Password and confirm password must match
+                        </div>
+
+                        <div class="p-col-12 p-md-4">
+                            <button type="submit" pButton pRipple class="p-button-secondary">Submit</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
         </div>
     </div>
-
-    <div class="p-col-12 p-md-4">
-        <div class="p-inputgroup">
-            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-            <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username"
-                name="username">
-        </div>
-    </div>
-
-    <div class="p-col-12 p-md-4">
-        <div class="p-inputgroup">
-            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-            <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password">
-        </div>
-    </div>
-
-    <div class="p-col-12 p-md-4">
-        <div class="p-inputgroup">
-            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-            <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword"
-                name="confirmPassword">
-        </div>
-    </div>
-
-    <div class="p-col-12 p-md-4">
-        <button pButton pRipple label="Submit" class="p-button-secondary" type="button"
-            (click)="onFormSubmitSignUp(user)"></button>
-    </div>
 </div>
-
-
Index: trip-planner-front/src/app/homepage/register/register.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/register/register.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/homepage/register/register.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { CustomValidators } from 'src/app/providers/CustomValidators';
 import { UserDto } from 'src/app/_models/dto/userDto';
+import { UserService } from 'src/app/_services/user.service';
 
 @Component({
@@ -12,25 +14,59 @@
 
   user: UserDto;
-  myForm: FormGroup;
+  form: FormGroup;
+  usernames: string[];
 
-  constructor(private ref: DynamicDialogRef, private fb: FormBuilder) {
+
+  constructor(private ref: DynamicDialogRef, 
+    formBuilder: FormBuilder, private userService: UserService) {
     this.user = new UserDto();
-    this.myForm = fb.group({
-      title: fb.control('initial value', Validators.required)
+    this.usernames = [];
+
+    this.form = formBuilder.group({
+      fullName: new FormControl('', [Validators.required, Validators.minLength(3)]),
+      username: new FormControl('', [Validators.required, Validators.email]),
+      password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+      confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)])
+    }, {
+      validators: [
+        CustomValidators.mustMatch('password', 'confirmPassword'),
+        this.validateUsername('username')
+      ]
     });
   }
 
   ngOnInit(): void {
-    this.myForm = this.fb.group({
-      fullName: this.fb.control('', Validators.required),
-      username: this.fb.control('', Validators.required),
-      password: this.fb.control('', Validators.required),
-      confirmPassword: this.fb.control('', Validators.required)
-    });
   }
 
   onFormSubmitSignUp(user) {
-    this.ref.close(user);
-    //window.location.reload();
+    const { valid } = this.form;
+    if (valid) {
+      this.ref.close(user);
+    }
+  }
+
+  validateUsername(username: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[username];
+
+      if (control.errors && !control.errors.validateUsername) {
+        return;
+      }
+
+      this.userService.getAllUsernames().subscribe(
+        data => {
+          this.usernames = data;
+          for (let i = 0; i < this.usernames.length; i++) {
+            if (control.value === this.usernames[i]) {
+              control.setErrors({ validateUsername: true });
+              break;
+            } else {
+              control.setErrors(null);
+            }
+          }
+        }
+      );
+      return null;
+    };
 
   }
Index: trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html
===================================================================
--- trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -7,5 +7,5 @@
         </tr>
     </ng-template>
-    <ng-template pTemplate="body" let-planner let-data>
+    <ng-template pTemplate="body" let-planner>
         <tr>
             <td>{{planner.name}}</td>
Index: trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts
===================================================================
--- trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Planner } from 'src/app/_models/planner';
 import { PlannerService } from 'src/app/_services/planner.service';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
-import { LocationService } from 'src/app/_services/location.service';
 
 
@@ -17,6 +15,5 @@
   planners: Planner[];
   
-  constructor(private plannerService: PlannerService,
-    private route: ActivatedRoute, private ref: DynamicDialogRef, private locationService : LocationService) {
+  constructor(private plannerService: PlannerService, private ref: DynamicDialogRef) {
     this.planners = [];
   }
@@ -29,5 +26,4 @@
       }
     );
-
   }
 
Index: trip-planner-front/src/app/location/location-details/location-details.component.html
===================================================================
--- trip-planner-front/src/app/location/location-details/location-details.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/location-details/location-details.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -18,4 +18,6 @@
             </ng-template>
         </p-galleria>
+        <br>
+        <p-rating></p-rating>
     </div>
 </div>
Index: trip-planner-front/src/app/location/location-details/location-details.component.ts
===================================================================
--- trip-planner-front/src/app/location/location-details/location-details.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/location-details/location-details.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -1,3 +1,3 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Images } from 'src/app/_models/images';
Index: trip-planner-front/src/app/location/location.component.css
===================================================================
--- trip-planner-front/src/app/location/location.component.css	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/location.component.css	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,5 @@
+img{
+    width: 150px;
+    height: 120px;
+    display: block;
+}
Index: trip-planner-front/src/app/location/location.component.html
===================================================================
--- trip-planner-front/src/app/location/location.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/location.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -9,4 +9,5 @@
     <tr>
       <th scope="col">#</th>
+      <th scope="col">Photo</th>
       <th scope="col">Location name</th>
       <th scope="col"> Add to my planner</th>
@@ -17,9 +18,11 @@
     <tr *ngFor="let location of listLocations">
       <td>{{location.id}}</td>
+      <td><img src="data:image/png;base64,{{location.photo}}" /></td>
       <td>{{location.name}}</td>
       <td><button type="button" (click)="show(location)" pButton icon="pi pi-info-circle"
           label="Add to my planner"></button></td>
       <td><button type="button" color="primary" pButton icon="pi pi-info-circle"
-          (click)="onClickSeeDetails(location.id)" label="See details"></button></td>
+          (click)="onClickSeeDetails(location.id)" label="See details"></button>
+      </td>
     </tr>
   </tbody>
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/location/location.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -93,25 +93,13 @@
 
     this.ref.onClose.subscribe((planner: Planner) => {
-      if(planner){
-      this.plannerLocationDto.locationId = location.id;
-      this.plannerLocationDto.plannerId = planner.id;
-      console.log("LOC ID: " + this.plannerLocationDto.locationId);
-      console.log("PLANNER ID: " + this.plannerLocationDto.plannerId);
+      if (planner) {
+        this.plannerLocationDto.locationId = location.id;
+        this.plannerLocationDto.plannerId = planner.id;
+        console.log("LOC ID: " + this.plannerLocationDto.locationId);
+        console.log("PLANNER ID: " + this.plannerLocationDto.plannerId);
 
-      this.locationService.getAllLocationIdsForPlanner(planner.id).subscribe(
-        lid => {
-          if (lid.length == 0) {
-            this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
-              data => {
-                console.log(data);
-              }
-            );
-            this.messageService.add({ severity: 'success', summary: 'Location ' + location.name + ' has been added to planner: ', detail: planner.name });
-
-          } else if (lid.length > 0) {
-            if (lid.indexOf(this.plannerLocationDto.locationId) !== -1) {
-              console.log("LOKACIJATA VEKE JA IMA VO PLANEROT");
-              this.messageService.add({ severity: 'error', summary: 'Location ' + location.name + ' already exists in the planner.' });
-            } else {
+        this.locationService.getAllLocationIdsForPlanner(planner.id).subscribe(
+          lid => {
+            if (lid.length == 0) {
               this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
                 data => {
@@ -120,12 +108,24 @@
               );
               this.messageService.add({ severity: 'success', summary: 'Location ' + location.name + ' has been added to planner: ', detail: planner.name });
+
+            } else if (lid.length > 0) {
+              if (lid.indexOf(this.plannerLocationDto.locationId) !== -1) {
+                console.log("LOKACIJATA VEKE JA IMA VO PLANEROT");
+                this.messageService.add({ severity: 'error', summary: 'Location ' + location.name + ' already exists in the planner.' });
+              } else {
+                this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
+                  data => {
+                    console.log(data);
+                  }
+                );
+                this.messageService.add({ severity: 'success', summary: 'Location ' + location.name + ' has been added to planner: ', detail: planner.name });
+              }
+
             }
-
           }
-        }
-      );
+        );
       }
     });
-  
+
   }
 
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ 	(revision )
@@ -1,1 +1,0 @@
-<p>detail-planner works!</p>
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ 	(revision )
@@ -1,25 +1,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DetailPlannerComponent } from './detail-planner.component';
-
-describe('DetailPlannerComponent', () => {
-  let component: DetailPlannerComponent;
-  let fixture: ComponentFixture<DetailPlannerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ DetailPlannerComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DetailPlannerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ 	(revision )
@@ -1,15 +1,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-detail-planner',
-  templateUrl: './detail-planner.component.html',
-  styleUrls: ['./detail-planner.component.css']
-})
-export class DetailPlannerComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -38,5 +38,5 @@
                                 </td>
                                 <td>
-                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
+                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" (click)="onClickRemoveLocation(planner, location)"></button>
                                 </td>
                             </tr>
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -3,4 +3,5 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { PlannerDto } from 'src/app/_models/dto/plannerDto';
+import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
 import { Location } from 'src/app/_models/location';
 import { Planner } from 'src/app/_models/planner';
@@ -21,5 +22,5 @@
   id: number;
   locations: Location[];
-
+  plannerLocationDto: PlannerLocationDto;
 
   constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
@@ -33,4 +34,5 @@
     this.id = 1;
     this.locations = [];
+    this.plannerLocationDto = new PlannerLocationDto();
   }
 
@@ -64,5 +66,5 @@
   }
 
-  private updatePlanner() {
+  updatePlanner() {
     this.plannerService.updatePlanner(this.id, this.form.value)
       .pipe()
@@ -81,6 +83,17 @@
   }
 
-  onClickRemoveLocation(id : number){
-    
+  onClickRemoveLocation(planner: Planner, location: Location) {
+    planner.id = this.id;
+
+    this.plannerLocationDto.plannerId = planner.id;
+    this.plannerLocationDto.locationId = location.id;
+    console.log(this.plannerLocationDto.plannerId);
+    console.log(this.plannerLocationDto.locationId);
+    this.plannerService.deleteLocationFromPlanner(this.plannerLocationDto).subscribe(
+      data => {
+        console.log("deleted")
+      }
+    );
+    window.location.reload();
   }
 }
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -72,5 +72,5 @@
         this.messageService.add({ severity: 'success', summary: 'The planner: ' + plannerDto.name + ' has been created.' });
       }
-      
+
     });
 
Index: trip-planner-front/src/app/providers/CustomValidators.ts
===================================================================
--- trip-planner-front/src/app/providers/CustomValidators.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
+++ trip-planner-front/src/app/providers/CustomValidators.ts	(revision b73803523f0488ec52498c2ba88889f1642ad263)
@@ -0,0 +1,42 @@
+import {
+  AbstractControl,
+  ValidatorFn,
+    FormGroup
+  } from '@angular/forms';
+
+export class CustomValidators {
+    constructor() {}
+    
+    static onlyChar(): ValidatorFn {
+      return (control: AbstractControl): { [key: string]: boolean } | null => {
+        if (control.value == '') return null;
+  
+        let re = new RegExp('^[a-zA-Z ]*$');
+        if (re.test(control.value)) {
+          return null;
+        } else {
+          return { onlyChar: true };
+        }
+      };
+    }
+
+    static mustMatch(controlName: string, matchingControlName: string)  {
+      return (formGroup: FormGroup) => {
+        const control = formGroup.controls[controlName];
+        const matchingControl = formGroup.controls[matchingControlName];
+  
+        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
+          return;
+        }
+  
+        // set error on matchingControl if validation fails
+        if (control.value !== matchingControl.value) {
+            matchingControl.setErrors({ mustMatch: true });
+        } else {
+          matchingControl.setErrors(null);
+        }
+        return null;
+      };
+    }
+    
+  }
