CODEWITHSUNDEEP
angularjwt
Lara Ch
Lara Ch

Reputation: 165

Logging in using angular 4 and PHP-JWT tokens

I am creating my first web app after a long course in Angular 4. I am using wamp server as my back end database and the JWT instead of the sessions.

I started by creating the login form using Reactive forms:

<div class="row">
    <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
        <div class="card">
            <div class="card-header">
                Login
            </div>
            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                <div class="card-block">
                    <h4 class="card-title">Username</h4>
                    <input type="text" class="form-control" formControlName="username" name="username" id="username" ngModel required>
                    <h4 class="card-title">Password</h4>
                    <input type="password" class="form-control" formControlName="password" id="password" name="password" ngModel required>
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </form>
        </div>  
    </div>
</div>

And here the .ts script:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-component',
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.css']
})
export class LoginComponentComponent implements OnInit {

  //Creating a form group
  loginForm: FormGroup;


  constructor() { }

  ngOnInit() {
    this.initForm();
  }

  //Initializing the form
  private initForm()
  {
    let userName='';
    let passWord='';

    this.loginForm = new FormGroup({
        'username': new FormControl(userName, Validators.required),
        'password': new FormControl(passWord, Validators.required)
    });
  }

  //OnSubmit
  onSubmit(){

    //console.log(this.loginForm.value.username);
    let user = '';
    let pass = '';

    user = this.loginForm.value.username;
    pass = this.loginForm.value.password;
    console.log(user);

    //http service call
    //...
  }
}

Then I created a service to login into the database and check the credentials and if it is correct, I want to redirect to the /index component:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Injectable()
export class LoggingService {

  constructor(private http: Http) { }
  logIn(user: string, pass: string)
  {
    return this.http.post('localhost/iamp/login.php', JSON.stringify({user: user, pass: pass}))
        .map((response: Response)=> {
            //...
        });
  }
}

Actually I am stuck now at this step:

.map((response: Response)=> {
                //...
});

What to do here, I can't even remember if we took it in the course. And can't know how the login.php should be like.

Upvotes: 1

Views: 955

Answers (1)

Emerceen
Emerceen

Reputation: 2885

In service:

return this.http.post('localhost/iamp/login.php', JSON.stringify({user: user, pass: pass}))
    .map((response: Response)=> {
        response.json()
    });

In component:

import { Router, ActivatedRoute } from '@angular/router';

// ...
constructor(
  private loginService: LoginService
  private router: Router
) { }
// ...

authenticateUser(login: string, password: string): void {
this.loginService.logIn(login, password).subscribe(user => {
    localStorage.setItem('user', user);
    this.router.navigateByUrl('index');
  }
}

Upvotes: 2

Related Questions