Changeset 84d0fbb for trip-planner-front


Ignore:
Timestamp:
12/19/21 19:39:00 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
bdd6491
Parents:
1ad8e64
Message:

spring security 2.0

Location:
trip-planner-front/src/app
Files:
6 added
1 deleted
13 edited

Legend:

Unmodified
Added
Removed

  • trip-planner-front/src/app/_models/dto/plannerDto.ts

    r1ad8e64 r84d0fbb  
    1 import { Location } from "../location";
    21
    32export class PlannerDto{

  • trip-planner-front/src/app/_models/planner.ts

    r1ad8e64 r84d0fbb  
    11export class Planner{
     2   
    23    id: number;
    34    name: string;

  • trip-planner-front/src/app/_services/planner.service.ts

    r1ad8e64 r84d0fbb  
    1 import { HttpClient } from "@angular/common/http";
     1import { HttpClient, HttpHeaders } from "@angular/common/http";
    22import { Injectable } from "@angular/core";
    33import { Observable } from "rxjs";
    … …  
    88    providedIn: 'root'
    99})
    10 export class PlannerService{
    11    
     10export class PlannerService {
     11
     12    httpHeaders: HttpHeaders = new HttpHeaders({
     13        'Authorization': ''+sessionStorage.getItem("token"),
     14        'Accept': 'application/json',
     15        'Content-Type': 'application/json'
     16      });
     17     
     18
    1219    constructor(private httpClient: HttpClient){
    1320    }
    1421
     22   
    1523    getAllPlanners():Observable<Planner[]>{
    16         let url = "http://localhost:8080/api/planners";
    17         return this.httpClient.get<Planner[]>(url);
     24        let url = "http://localhost:8080/api/planners/user";
     25        console.log("SERVID: " + sessionStorage.getItem("token"));
     26        console.log(this.httpHeaders.get('Authorization'))  ;
     27        return this.httpClient.get<Planner[]>(url, {headers: this.httpHeaders});     
    1828    }
    1929
    20     postInitialPlanner(planner: Planner): Observable<Object>{     
     30    postInitialPlanner(planner: Planner): Observable<Planner>{     
    2131        let url = "http://localhost:8080/api/planner/new";
    2232        return this.httpClient.post<Planner>(url, planner);
    … …  
    2535    updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{   
    2636    let url = "http://localhost:8080/api/edit/planner/" + id;
    27     return this.httpClient.put<Planner>(url, plannerDto);
     37    return this.httpClient.put<Planner>(url, plannerDto, {headers: this.httpHeaders});
    2838    }
    2939

  • trip-planner-front/src/app/app-routing.module.ts

    r1ad8e64 r84d0fbb  
    11import { NgModule } from '@angular/core';
    22import { RouterModule, Routes } from '@angular/router';
     3import { AuthGuard } from './auth/auth.guard';
    34import { HomepageComponent } from './homepage/homepage.component';
     5import { LoginComponent } from './homepage/login/login.component';
    46import { LocationDetailsComponent } from './location/location-details/location-details.component';
    57import { LocationComponent } from './location/location.component';
    … …  
    1416  {path: 'locations', component: LocationComponent},
    1517  {path: '', component: HomepageComponent},
     18  {path: '', component:LoginComponent},
    1619  {path: 'location', component: LocationDetailsComponent}
    1720];

  • trip-planner-front/src/app/app.module.ts

    r1ad8e64 r84d0fbb  
    44import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
    55import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    6 import { HttpClient, HttpClientModule } from '@angular/common/http';
     6import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    77import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    88import { CategoryService } from './_services/cateogry.service';
    … …  
    4747import { RegisterComponent } from './homepage/register/register.component';
    4848import { LoginComponent } from './homepage/login/login.component';
     49import { AuthGuard } from './auth/auth.guard';
     50import { AuthInterceptor } from './auth/auth.interceptor';
    4951
    5052@NgModule({
    … …  
    109111    PlannerService,
    110112    {
    111       provide: MatDialogRef,
    112       useValue: {}
     113      provide: MatDialogRef,
     114      useValue: {},
     115   
     116    },
     117    {
     118      provide: HTTP_INTERCEPTORS,
     119      useClass: AuthInterceptor,
     120      multi: true
    113121    },
    114122    DialogService,
    115123    MessageService,
    116     ConfirmationService
    117 
     124    ConfirmationService,
     125    AuthGuard
    118126  ],
    119127 

  • trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts

    r1ad8e64 r84d0fbb  
    1212
    1313  planner: Planner;
    14   plannerDto: PlannerDto;
    1514
    1615  constructor( private ref: DynamicDialogRef) {
    1716                this.planner = new Planner;
    18                 this.plannerDto = new PlannerDto();
    1917              }
    2018
    2119  ngOnInit(): void {
    2220    this.planner = new Planner();
    23     this.plannerDto = new PlannerDto();
    2421  }
    2522

  • trip-planner-front/src/app/homepage/homepage.component.html

    r1ad8e64 r84d0fbb  
    2121        </li>
    2222        <li class="nav-item">
    23           <button class="btn btn-dark">Sign in</button>
     23          <button class="btn btn-dark" (click)="onClickLogIn()">Sign in</button>
    2424        </li>
    2525      </ul>
    … …  
    3030    <img src={{imageURI}} />
    3131    <h4></h4>
    32 
    33     <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
     32<!--
     33  <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
    3434      <div class="card">
    3535        <p-carousel [value]="locations" [numVisible]="3" [numScroll]="3" [circular]="false"
    … …  
    9191      </div>
    9292    </div>
     93-->
     94 
    9395  </main>
    9496<br>

  • trip-planner-front/src/app/homepage/homepage.component.ts

    r1ad8e64 r84d0fbb  
    11import { Component, OnInit } from '@angular/core';
     2import { Router } from '@angular/router';
    23import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
     4import { LoginRequest } from '../_models/dto/loginRequest';
     5import { UserDto } from '../_models/dto/userDto';
    36import { Location } from '../_models/location';
    47import { LocationService } from '../_services/location.service';
     8import { UserService } from '../_services/user.service';
     9import { LoginComponent } from './login/login.component';
    510import { RegisterComponent } from './register/register.component';
    611
    … …  
    2025   ref: DynamicDialogRef;
    2126
    22    constructor(private locationService: LocationService, private dialogService: DialogService) {
     27   constructor(private locationService: LocationService, private dialogService: DialogService, private userService: UserService,
     28      private router: Router) {
    2329      this.responsiveOptions = [
    2430         {
    … …  
    4450
    4551   ngOnInit(): void {
    46 
     52/*
    4753      this.locationService.getWeekendGetaways().subscribe(
    4854         data => {
    … …  
    5561         }
    5662      );
     63      */
    5764   }
    5865
    59    onClickSignUp(){
    60       console.log("VLEGOV");
     66   onClickSignUp() {
    6167      this.ref = this.dialogService.open(RegisterComponent, {
    6268         header: 'Register form',
    … …  
    6470         contentStyle: { "max-height": "500px", "overflow": "auto" },
    6571         baseZIndex: 10000
    66        });
     72      });
     73
     74      this.ref.onClose.subscribe((user: UserDto) => {
     75         this.userService.registerUser(user).subscribe(
     76            data  => {
     77               console.log(data);
     78             
     79            }
     80         );
     81      });
     82   }
     83
     84   
     85   onClickLogIn() {
     86      this.ref = this.dialogService.open(LoginComponent, {
     87         header: 'Log in if you already have an account',
     88         width: '70%',
     89         contentStyle: { "max-height": "500px", "overflow": "auto" },
     90         baseZIndex: 10000
     91      });
     92      this.ref.onClose.subscribe((loginRequest : LoginRequest) => {
     93         this.userService.authenticateUser(loginRequest).subscribe(
     94            (data : any)  => {
     95               console.log(data);
     96               if(this.userService.isUserLoggedIn()){
     97                  this.router.navigate(['planners']);
     98               }
     99            }
     100         );
     101      });
    67102   }
    68103}

  • trip-planner-front/src/app/homepage/login/login.component.html

    r1ad8e64 r84d0fbb  
    1 <p>login works!</p>
     1<div class="p-col-12 p-md-4">
     2    <div class="p-inputgroup">
     3        <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
     4        <input type="text" pInputText placeholder="Email address (Username)"
     5             [(ngModel)]="loginRequest.username" name="username">
     6    </div>
     7</div>
     8<div class="p-col-12 p-md-4">
     9    <div class="p-inputgroup">
     10        <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
     11        <input type="password" pInputText placeholder="Password" name="password" [(ngModel)]="loginRequest.password">
     12    </div>
     13</div>
     14
     15<div class="p-col-12 p-md-4">
     16    <button pButton pRipple label="Log in" class="p-button-secondary" type="submit"
     17        (click)="onFormLogIn(loginRequest)"></button>
     18</div>

  • trip-planner-front/src/app/homepage/login/login.component.ts

    r1ad8e64 r84d0fbb  
    11import { Component, OnInit } from '@angular/core';
     2import { Router } from '@angular/router';
     3import { DynamicDialogRef } from 'primeng/dynamicdialog';
     4import { LoginRequest } from 'src/app/_models/dto/loginRequest';
     5import { UserService } from 'src/app/_services/user.service';
    26
    37@Component({
    … …  
    812export class LoginComponent implements OnInit {
    913
    10   constructor() { }
     14
     15  loginRequest : LoginRequest;
     16
     17  constructor(private ref: DynamicDialogRef, private router: Router, private userService : UserService) {
     18    this.loginRequest = new LoginRequest();
     19   
     20  }
    1121
    1222  ngOnInit(): void {
    1323  }
    1424
     25  onFormLogIn(loginRequest){
     26    this.ref.close(loginRequest);
     27   
     28  }
    1529}

  • trip-planner-front/src/app/homepage/register/register.component.html

    r1ad8e64 r84d0fbb  
    1 <div class="p-grid p-fluid">
    2     <div class="p-col-12 p-md-4">
    3         <div class="p-inputgroup">
    4             <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    5             <input type="text" pInputText placeholder="Full name">         
     1
     2    <div class="p-grid p-fluid">
     3        <div class="p-col-12 p-md-4">
     4            <div class="p-inputgroup">
     5                <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
     6                <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
     7            >         
     8            </div>
    69        </div>
    7     </div>
    8 
    9     <div class="p-col-12 p-md-4">
    10         <div class="p-inputgroup">
    11             <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    12             <input type="text" pInputText placeholder="Ema address (Username)">         
     10   
     11        <div class="p-col-12 p-md-4">
     12            <div class="p-inputgroup">
     13                <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
     14                <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username" name="username"
     15              >         
     16            </div>
    1317        </div>
    14     </div>
    15     <div class="p-col-12 p-md-4">
    16         <div class="p-inputgroup">
    17             <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
    18             <input type="text" pInputText placeholder="Password">         
     18        <div class="p-col-12 p-md-4">
     19            <div class="p-inputgroup">
     20                <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
     21                <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password"
     22                >         
     23            </div>
    1924        </div>
    20     </div>
    21     <div class="p-col-12 p-md-4">
    22         <div class="p-inputgroup">
    23             <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
    24             <input type="text" pInputText placeholder="Repeat password">         
     25        <div class="p-col-12 p-md-4">
     26            <div class="p-inputgroup">
     27                <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
     28                <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword" name="confirmPassword"
     29                >         
     30            </div>
    2531        </div>
    26     </div>
    27 
    28     <div class="p-col-12 p-md-4">
    29         <button pButton pRipple type="button" label="Submit" class="p-button-secondary"></button>
    30     </div>
    31 </div>
     32   
     33        <div class="p-col-12 p-md-4">
     34            <button pButton pRipple label="Submit" class="p-button-secondary" type="submit" (click)="onFormSubmitSignUp(user)"></button>
     35        </div>
     36    </div> 

  • trip-planner-front/src/app/homepage/register/register.component.ts

    r1ad8e64 r84d0fbb  
    11import { Component, OnInit } from '@angular/core';
     2import { DynamicDialogRef } from 'primeng/dynamicdialog';
     3import { UserDto } from 'src/app/_models/dto/userDto';
    24
    35@Component({
    … …  
    810export class RegisterComponent implements OnInit {
    911
    10   constructor() { }
     12  user : UserDto;
     13
     14  constructor(private ref: DynamicDialogRef) {
     15    this.user = new UserDto();
     16   }
    1117
    1218  ngOnInit(): void {
    1319  }
    14 
     20 
     21  onFormSubmitSignUp(user){
     22    this.ref.close(user);
     23    //window.location.reload();
     24  }
    1525}

  • trip-planner-front/src/app/planner/planner.component.ts

    r1ad8e64 r84d0fbb  
    77import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
    88import { MessageService, PrimeNGConfig } from 'primeng/api';
     9import { UserDto } from '../_models/dto/userDto';
     10import { UserService } from '../_services/user.service';
    911
    1012
    … …  
    2022  plannerDto: PlannerDto;
    2123  ref: DynamicDialogRef;
    22 
     24  user: UserDto;
    2325
    2426  constructor(private plannerService: PlannerService, private router: Router,
    25     private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService) {
     27    private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService,
     28    private userService : UserService) {
    2629    this.planners = [];
    2730    this.plannerDto = new PlannerDto();
    2831    this.ref = new DynamicDialogRef;
     32    this.user = new UserDto();
    2933  }
    3034
    … …  
    3640      data => {
    3741        this.planners = data;
     42        localStorage.getItem("token");
    3843      }
    39     );
     44    ); 
    4045  }
    4146
Note: See TracChangeset for help on using the changeset viewer.