Ignore:
Timestamp:
01/24/22 21:08:32 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
76712b2
Parents:
bdd6491
Message:

signup/login server errors on front and remove location from planner

Location:
trip-planner-front/src/app/homepage
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    rbdd6491 rb738035  
    1010
    1111<body>
    12 
     12  <p-toast></p-toast>
    1313  <header>
    1414    <nav class="navbar navbar-expand-sm bg-light">

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

    rbdd6491 rb738035  
    11import { HttpErrorResponse } from '@angular/common/http';
     2import { identifierModuleUrl } from '@angular/compiler';
    23import { Component, OnInit } from '@angular/core';
    34import { Router } from '@angular/router';
     5import { MessageService } from 'primeng/api';
    46import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
    57import { LoginRequest } from '../_models/dto/loginRequest';
    … …  
    2022
    2123   imageURI = 'https://i.pinimg.com/736x/a1/1a/57/a11a572a1ec4e07039bbd04661a3b035.jpg';
    22    myLogo = 'http://www.logo-designer.co/wp-content/uploads/2020/02/2020-tripadvisor-new-logo-design-by-mother-design-4.png';
    2324   responsiveOptions;
    2425   locations: Location[];
    … …  
    2728
    2829   constructor(private locationService: LocationService, private dialogService: DialogService, private userService: UserService,
    29       private router: Router) {
     30      private router: Router, private messageService: MessageService) {
    3031      this.responsiveOptions = [
    3132         {
    … …  
    6162         }
    6263      );
    63 
    6464   }
    6565
    … …  
    8282      },
    8383         err => {
    84 
     84            console.log("oops");
    8585         });
    8686   }

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

    rbdd6491 rb738035  
    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">
     1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
     2    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     3
     4
     5
     6<div class="readersack">
     7    <div class="container">
     8        <div class="row">
     9            <div class="col-md-6 offset-md-3">
     10                <form [formGroup]="form" #myform="ngForm" (ngSubmit)="onFormLogIn(loginRequest)">
     11                    <div class="form-group">
     12
     13                        <label>Username (email)</label>
     14                        <input formControlName="username" id="username" type="text" class="form-control"
     15                            [(ngModel)]="loginRequest.username"
     16                            [ngClass]="{ 'is-invalid': myform.submitted && (form.get('username')?.errors?.['required']
     17                        || form.get('username')?.errors?.['validateUser'])}" />
     18                        <div *ngIf="form.get('username')?.hasError('required') && myform.submitted"
     19                            class="invalid-feedback">
     20                            Username is required
     21                        </div>
     22                        <div *ngIf="form.get('username')?.hasError('validateUser') && myform.submitted"
     23                            class="invalid-feedback">
     24                            Invalid username
     25                        </div>
     26
     27                        <label>Password</label>
     28                        <input formControlName="password" id="password" type="password" class="form-control"
     29                            [(ngModel)]="loginRequest.password" [ngClass]="{ 'is-invalid': myform.submitted && form.get('password')?.errors?.['required']}" />
     30                        <div *ngIf="form.get('password')?.hasError('required') && myform.submitted"
     31                            class="invalid-feedback">
     32                            Password is required</div>
     33                       
     34
     35                        <div class="p-col-12 p-md-4">
     36                            <button type="submit" pButton pRipple class="p-button-secondary">Submit</button>
     37                        </div>
     38                    </div>
     39                </form>
     40            </div>
     41        </div>
    642    </div>
    743</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

    rbdd6491 rb738035  
    11import { Component, OnInit } from '@angular/core';
    2 import { Router } from '@angular/router';
     2import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    33import { DynamicDialogRef } from 'primeng/dynamicdialog';
    44import { LoginRequest } from 'src/app/_models/dto/loginRequest';
     5import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
     6import { UserDto } from 'src/app/_models/dto/userDto';
     7import { UsernameDto } from 'src/app/_models/dto/usernameDto';
    58import { UserService } from 'src/app/_services/user.service';
    69
    … …  
    1215export class LoginComponent implements OnInit {
    1316
     17  form: FormGroup;
     18  loginRequest: LoginRequest;
     19  usernames: string[];
    1420
    15   loginRequest : LoginRequest;
     21  constructor(private ref: DynamicDialogRef, private userService: UserService, formBuilder: FormBuilder) {
     22    this.loginRequest = new LoginRequest();
     23    this.usernames = [];
    1624
    17   constructor(private ref: DynamicDialogRef, private router: Router, private userService : UserService) {
    18     this.loginRequest = new LoginRequest();
    19    
     25    this.form = formBuilder.group({
     26      username: new FormControl('', [Validators.required]),
     27      password: new FormControl('', [Validators.required, Validators.minLength(6)]),
     28    },
     29      {
     30        validators: [
     31          this.validateUser('username')
     32        ]
     33      }
     34    );
    2035  }
    2136
    2237  ngOnInit(): void {
     38
    2339  }
    2440
    25   onFormLogIn(loginRequest){
    26     this.ref.close(loginRequest);
    27    
     41  onFormLogIn(loginRequest) {
     42    const { valid } = this.form;
     43    if (valid) {
     44      this.ref.close(loginRequest);
     45    }
     46  }
     47
     48  validateUser(username: string) {
     49    return (formGroup: FormGroup) => {
     50      const control = formGroup.controls[username];
     51
     52      if (control.errors && !control.errors.validateUser) {
     53        return;
     54      }
     55
     56      this.userService.getAllUsernames().subscribe(
     57        data => {
     58          this.usernames = data;
     59          for (let i = 0; i < this.usernames.length; i++) {
     60            if (control.value === this.usernames[i]) {
     61              control.setErrors(null);
     62             
     63              break;
     64            } else {
     65              control.setErrors({ validateUser: true });
     66            }
     67
     68          }
     69        }
     70      );
     71      return null;
     72 
     73    };
     74
    2875  }
    2976}

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

    rbdd6491 rb738035  
    22    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    33
    4 <div class="p-grid p-fluid">
    5     <div class="p-col-12 p-md-4">
    6         <div class="p-inputgroup">
    7             <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    8             <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
    9                 class="form-control">
    104
     5<div class="readersack">
     6    <div class="container">
     7        <div class="row">
     8            <div class="col-md-6 offset-md-3">
     9                <form [formGroup]="form" #myform="ngForm" (ngSubmit)="onFormSubmitSignUp(user)">
     10                    <div class="form-group">
     11                        <label>Full name</label>
     12                        <input formControlName="fullName" id="fullName" type="text" class="form-control"
     13                            [(ngModel)]="user.fullName"
     14                            [ngClass]="{ 'is-invalid': myform.submitted && form.get('fullName')?.errors?.['required']}" />
     15                        <div *ngIf="myform.submitted && form.get('fullName')?.errors" class="invalid-feedback">
     16                            <div *ngIf="form.get('fullName')?.hasError('required') && myform.submitted">
     17                                Full Name is required
     18                            </div>
     19                        </div>
     20
     21                        <label>Username (email)</label>
     22                        <input formControlName="username" id="username" type="text" class="form-control"
     23                            [(ngModel)]="user.username"
     24                            [ngClass]="{ 'is-invalid': myform.submitted && (form.get('username')?.errors?.['required'] ||
     25                            form.get('username')?.errors?.['email'] || form.get('username')?.hasError('validateUsername'))}" />
     26                        <div *ngIf="form.get('username')?.hasError('required') && myform.submitted"
     27                            class="invalid-feedback">
     28                            Username is required</div>
     29                        <div *ngIf="form.get('username')?.hasError('email') && myform.submitted"
     30                            class="invalid-feedback">
     31                            Please enter valid email.</div>
     32                        <div *ngIf="form.get('username')?.hasError('validateUsername') && myform.submitted"
     33                            class="invalid-feedback">
     34                            Username already exists</div>
     35
     36
     37
     38                        <label>Password</label>
     39                        <input formControlName="password" id="password" type="password" class="form-control"
     40                            [(ngModel)]="user.password" [ngClass]="{ 'is-invalid': myform.submitted && (form.get('password')?.errors?.['required'] ||
     41                            form.get('password')?.errors?.['minlength'])}" />
     42                        <div *ngIf="form.get('password')?.hasError('required') && myform.submitted"
     43                            class="invalid-feedback">
     44                            Password is required</div>
     45                        <div *ngIf="form.get('password')?.errors?.['minlength'] && myform.submitted"
     46                            class="invalid-feedback">
     47                            Password must be at least 6 characters long.
     48                        </div>
     49
     50                        <label>Confirm password</label>
     51                        <input formControlName="confirmPassword" id="confirmPassword" type="password"
     52                            class="form-control" [(ngModel)]="user.confirmPassword"
     53                            [ngClass]="{ 'is-invalid': myform.submitted && (form.get('confirmPassword')?.errors?.['required'] ||
     54                            form.get('confirmPassword')?.errors?.['minlength'] || form.get('confirmPassword')?.errors?.['mustMatch'])}" />
     55                        <div *ngIf="form.get('confirmPassword')?.hasError('required') && myform.submitted"
     56                            class="invalid-feedback">
     57                            Confirm Password is required</div>
     58                        <div *ngIf="form.get('confirmPassword')?.errors?.['minlength'] && myform.submitted"
     59                            class="invalid-feedback">
     60                            Confirm Password must be at least 6 characters long.
     61                        </div>
     62                        <div *ngIf="form.get('confirmPassword')?.errors?.['mustMatch'] && myform.submitted"
     63                            class="invalid-feedback">Password and confirm password must match
     64                        </div>
     65
     66                        <div class="p-col-12 p-md-4">
     67                            <button type="submit" pButton pRipple class="p-button-secondary">Submit</button>
     68                        </div>
     69                    </div>
     70                </form>
     71            </div>
    1172        </div>
    1273    </div>
    13 
    14     <div class="p-col-12 p-md-4">
    15         <div class="p-inputgroup">
    16             <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    17             <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username"
    18                 name="username">
    19         </div>
    20     </div>
    21 
    22     <div class="p-col-12 p-md-4">
    23         <div class="p-inputgroup">
    24             <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
    25             <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password">
    26         </div>
    27     </div>
    28 
    29     <div class="p-col-12 p-md-4">
    30         <div class="p-inputgroup">
    31             <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
    32             <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword"
    33                 name="confirmPassword">
    34         </div>
    35     </div>
    36 
    37     <div class="p-col-12 p-md-4">
    38         <button pButton pRipple label="Submit" class="p-button-secondary" type="button"
    39             (click)="onFormSubmitSignUp(user)"></button>
    40     </div>
    4174</div>
    42 
    43 

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

    rbdd6491 rb738035  
    11import { Component, OnInit } from '@angular/core';
    2 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
     2import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    33import { DynamicDialogRef } from 'primeng/dynamicdialog';
     4import { CustomValidators } from 'src/app/providers/CustomValidators';
    45import { UserDto } from 'src/app/_models/dto/userDto';
     6import { UserService } from 'src/app/_services/user.service';
    57
    68@Component({
    … …  
    1214
    1315  user: UserDto;
    14   myForm: FormGroup;
     16  form: FormGroup;
     17  usernames: string[];
    1518
    16   constructor(private ref: DynamicDialogRef, private fb: FormBuilder) {
     19
     20  constructor(private ref: DynamicDialogRef,
     21    formBuilder: FormBuilder, private userService: UserService) {
    1722    this.user = new UserDto();
    18     this.myForm = fb.group({
    19       title: fb.control('initial value', Validators.required)
     23    this.usernames = [];
     24
     25    this.form = formBuilder.group({
     26      fullName: new FormControl('', [Validators.required, Validators.minLength(3)]),
     27      username: new FormControl('', [Validators.required, Validators.email]),
     28      password: new FormControl('', [Validators.required, Validators.minLength(6)]),
     29      confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)])
     30    }, {
     31      validators: [
     32        CustomValidators.mustMatch('password', 'confirmPassword'),
     33        this.validateUsername('username')
     34      ]
    2035    });
    2136  }
    2237
    2338  ngOnInit(): void {
    24     this.myForm = this.fb.group({
    25       fullName: this.fb.control('', Validators.required),
    26       username: this.fb.control('', Validators.required),
    27       password: this.fb.control('', Validators.required),
    28       confirmPassword: this.fb.control('', Validators.required)
    29     });
    3039  }
    3140
    3241  onFormSubmitSignUp(user) {
    33     this.ref.close(user);
    34     //window.location.reload();
     42    const { valid } = this.form;
     43    if (valid) {
     44      this.ref.close(user);
     45    }
     46  }
     47
     48  validateUsername(username: string) {
     49    return (formGroup: FormGroup) => {
     50      const control = formGroup.controls[username];
     51
     52      if (control.errors && !control.errors.validateUsername) {
     53        return;
     54      }
     55
     56      this.userService.getAllUsernames().subscribe(
     57        data => {
     58          this.usernames = data;
     59          for (let i = 0; i < this.usernames.length; i++) {
     60            if (control.value === this.usernames[i]) {
     61              control.setErrors({ validateUsername: true });
     62              break;
     63            } else {
     64              control.setErrors(null);
     65            }
     66          }
     67        }
     68      );
     69      return null;
     70    };
    3571
    3672  }
Note: See TracChangeset for help on using the changeset viewer.