Changeset b738035 for trip-planner-front/src/app/homepage/login

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/login

Files:

• login.component.html (modified) (1 diff)
• login.component.ts (modified) (2 diffs)

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

@@ -1 @@
-<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>

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

@@ -1 +1 @@
 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 +15 @@
 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;
+  
+    };
+
   }
 }