how to compare values using angular...

Question

Hello,

I create a mini login and register project

I will leave my script down

my problem is when the user creates an account and he redirects to login he can not log in I do not know why ??

if the user connects by the values entered in the service it is good but the opposite if he registers after he connects

PS: I use angular2

how to please and thank you in advance

 

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
          <!-- Fixed navbar -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">DevDose Blog</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a [routerLink]='["/"]'>login</a></li>

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

  <router-outlet></router-outlet>`,
})
export class AppComponent  {  }

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import {AuthenticationService} from './data.service'
import { AppComponent }  from './app.component';

import { HomeComponent }  from './home.component';
import { LoginComponent }  from './login.component';
import { RegisterComponent }  from './register.component';

import { RouterModule } from '@angular/router';
import { routing } from './app.routing';

@NgModule({
  imports:      [ BrowserModule, routing, HttpModule, FormsModule ],
  declarations: [ AppComponent, HomeComponent, LoginComponent,RegisterComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ AuthenticationService ],
})
export class AppModule { }

app.routing.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import { HomeComponent }  from './home.component';
import { LoginComponent }  from './login.component';
import { RegisterComponent }  from './register.component';

const appRoutes: Routes = [
    {
        path: '',
        component: LoginComponent
    },

    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'home',
        component: HomeComponent
    }
    ,
    {
        path: 'register',
        component: RegisterComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

data.service.ts

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';

export class User {
  constructor(
    public email: string,
    public password: string) { this.email=email;this.password=password}
}
@Injectable()
export class AuthenticationService {

 users :User[]= [
    new User('[email protected]','adm'),
    new User('[email protected]','a23')
  ];
  constructor(
    private _router: Router){}

  logout() {
    localStorage.removeItem("user");
    this._router.navigate(['Login']);
  }

  login(user :any){
    var authenticatedUser :any = this.users.find(u => u.email === user.email);
    if (authenticatedUser && authenticatedUser.password === user.password)
    {
      localStorage.setItem("user", authenticatedUser)
      this._router.navigate(['home']);
      return true;
    }
    return false;

  }

  add_user(user:any)
  {

    var authenticatedUser :any = this.users.push(new User(user.email,user.password));
    if(authenticatedUser)
    {
      console.log(this.users);
      console.log(localStorage.setItem("user",authenticatedUser))
      this._router.navigate(['login']);
      return true;
    }
    return false;

  }

   checkCredentials(){
    if (localStorage.getItem("user") === null){
        this._router.navigate(['login']);
    }
  }
}

login.component.ts

import { Component } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { Router } from '@angular/router';
import {AuthenticationService,User} from './data.service'

@Component({
  selector: 'my-login',
  providers: [AuthenticationService],
    template: `
        <div class="container" >
            <div class="title">
                Welcome
            div>
            <div class="panel-body">
                <div class="row">
                    <div class="input-field col s12">
                        <input [(ngModel)]="user.email" id="email"
                            type="email" class="validate">
                        <label for="email">Emaillabel>
                    div>
                div>

                <div class="row">
                    <div class="input-field col s12">
                        <input [(ngModel)]="user.password" id="password"
                            type="password" class="validate">
                        <label for="password">Passwordlabel>
                    div>
                div>

                <span>{{errorMsg}}span>
                <button (click)="login()"
                    class="btn waves-effect waves-light"
                    type="submit" name="action">Loginbutton>

                    <li class="active"><a [routerLink]='["/register"]'>Registera>li>
            div>
        div>
        `
})
export class LoginComponent
{
  public user = new User('','');
  public errorMsg = '';

constructor(
    private _service:AuthenticationService) {}

login() {
    if(!this._service.login(this.user)){
        this.errorMsg = 'Failed to login';
    }
}

}

register.component.ts

import { Component ,OnInit } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { Router } from '@angular/router';
import {AuthenticationService,User} from './data.service'


@Component({
  selector: 'my-register',
  providers: [AuthenticationService],
    template: `
        <div class="container" >
            <div class="title">
                Welcome

            <div class="panel-body">
                <div class="row"><label for="email">Emaillabel>
                    <div class="input-field col s12">
                        <input [(ngModel)]="user.email" id="email"
                            type="email" class="validate">

                    div>
                div>

                <div class="row"><label for="password">Passwordlabel>
                    <div class="input-field col s12">
                        <input [(ngModel)]="user.password" id="password"
                            type="password" class="validate">

                    div>
                div>

                <span>{{errorMsg}}span>
                <button
                    class="btn waves-effect waves-light" (click)="add_user()"
                    type="submit" name="action">Registerbutton>
            div>

        `
})
export class RegisterComponent  implements OnInit
{
    public user = new User('','');
    public errorMsg = '';

constructor(
  private _service:AuthenticationService) {}
  ngOnInit()
  {

  }

add_user() {
  if(!this._service.add_user(this.user)){
      this.errorMsg = 'Failed to register';
  }

}
}

home.component.ts

import { Component, OnInit } from '@angular/core';
import {AuthenticationService,User} from './data.service'

@Component({
  selector: 'my-home',
  providers: [AuthenticationService],
    template: `
            <div class="container" >
                <div class="content">
                    <span>Congratulations, you have successfully logged in!!span>
                    <br />
                    <a (click)="logout()" href="#">Click Here to logouta>
                div>
            div>
        `
})
export class HomeComponent  {

  constructor(
    private _service:AuthenticationService){}

ngOnInit(){
    this._service.checkCredentials();
}

logout() {
    this._service.logout();
}

 }