add logIn component

db.json

@@ -29,6 +29,16 @@
       "province": "pe",
       "phone": "23453453454",
       "age": 18
+    },
+    {
+      "id": "1fl2",
+      "name": "Giulio",
+      "lastname": "Diomede",
+      "email": "flavio.bonta@gmail.com",
+      "fiscalcode": "tdyfuvyghuj",
+      "province": "pe",
+      "phone": "23453453454",
+      "age": 18
     }
   ]
 }

src/app/app-routing.module.ts

@@ -6,8 +6,8 @@ import { UserComponent } from './user/user.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { UserService } from './services/user.service';
 import { UserDataComponent } from './user-data/user-data.component';
+import { LoginComponent } from './login/login.component';
 
 
 const routes: Routes = [
@@ -26,6 +26,11 @@ const routes: Routes = [
     path: 'users/new',
     component: UserDetailComponent,
   },
+  {
+    path: 'users/login',
+    pathMatch:'full',
+    component: LoginComponent ,
+  },
   {
     path: 'users/:id/edit',
     component: UserDetailComponent,
@@ -35,6 +40,7 @@ const routes: Routes = [
     component: UserDataComponent,
   },
   
+  
 ];
 
 @NgModule({
@@ -42,6 +48,9 @@ const routes: Routes = [
     UsersComponent,
     UserComponent,
     UserDetailComponent,
+    LoginComponent,
+    UserDataComponent,
+
   ],
   imports: [RouterModule.forRoot(routes),
     FormsModule,

src/app/app.module.ts

@@ -3,7 +3,6 @@ import { BrowserModule, provideClientHydration } from '@angular/platform-browser
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavComponent } from './nav/nav.component';
-import { UserDataComponent } from './user-data/user-data.component';
 import { HttpClientModule } from '@angular/common/http';
 
 
@@ -11,7 +10,7 @@ import { HttpClientModule } from '@angular/common/http';
   declarations: [
     AppComponent,
     NavComponent,
-    UserDataComponent,
+    
     
   ],
   imports: [

src/app/classes/templog.ts

@@ -0,0 +1,12 @@
+import { TempLogInterface } from "../interfaces/templog";
+
+export class TempLog implements TempLogInterface{
+    name: string;
+    lastname: string;
+
+    constructor(){
+        this.name = '';
+        this.lastname = '';
+    }
+
+} 

src/app/interfaces/templog.ts

@@ -0,0 +1,6 @@
+export interface TempLogInterface {
+    
+    name: string;
+    lastname: string;
+    
+  }

src/app/login/login.component.html

@@ -0,0 +1,17 @@
+<form  class="userForm" #f="ngForm">
+      <div class="form-group">
+          <label for="firstname">First name</label>
+        <input class="form-control" [(ngModel)]="templog.name" name="firstname" id="firstname">  
+      </div>
+      <div class="form-group">
+          <label for="lastname">Last name</label>
+        <input class="form-control" [(ngModel)]="templog.lastname" name="lastname" id="lastname">  
+       
+      </div>
+      <div class="form-group form-footer">
+          <button class="btn btn-outline-secondary" (click)="makeLogIn()"  >LOG IN</button>  
+          <button class="btn btn-success" (click)="emptyIn()">CANCEL</button>  
+  
+      </div>
+      
+  </form>

src/app/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LoginComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { User } from '../classes/user';
+import { TempLog } from '../classes/templog';
+import { UserService } from '../services/user.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+
+})
+export class LoginComponent implements OnInit {
+  @Input() templog = new TempLog ;
+  users: User[] = [];
+
+
+  constructor(private userService: UserService, private router: Router){
+
+  }
+  ngOnInit(): void {
+    this.userService.getUsers()
+        .subscribe(user => this.users = user);
+      
+  }
+  makeLogIn(){
+    for (const user of this.users) {
+
+      if((user.name == this.templog.name) && (user.lastname == this.templog.lastname)){
+        this.router.navigateByUrl('/users/' + user.id )
+      }
+    }
+    
+  }
+  emptyIn(){
+    this.templog.name='';
+    this.templog.lastname='';
+    return this.templog
+
+  }
+
+}

src/app/nav/nav.component.html

@@ -9,6 +9,9 @@
         <li class="nav-item active">
           <a class="nav-link" href="#" routerLink="/">Home <span class="sr-only">(current)</span></a>
         </li>
+        <li class="nav-item active">
+          <a href="#" class="nav-link" routerLink="users/login">LogIn</a>
+        </li>
         
         <li class="nav-item active">
           <a  href="#"  class="nav-link" routerLink="users/new" >New User</a>

src/app/user-detail/user-detail.component.ts

@@ -1,8 +1,6 @@
-import { FormsModule } from '@angular/forms';
 import { Component, Input, OnInit } from '@angular/core';
 import { User } from '../classes/user';
 import { UserService } from '../services/user.service';
-import { createSecureServer } from 'node:http2';
 import { ActivatedRoute } from '@angular/router';
 import { Router } from '@angular/router';