Dev Teywa

Dev Teywa

  • 1.9k
  • 250
  • 30.6k

how to compare values using angular...

Jan 24 2018 2:27 PM
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
  1. import { Component } from '@angular/core';    
  2.     
  3. @Component({    
  4.   selector: 'my-app',    
  5.   template: `    
  6.           <!-- Fixed navbar -->    
  7.     <nav class="navbar navbar-default">    
  8.       <div class="container">    
  9.         <div class="navbar-header">    
  10.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">    
  11.             <span class="sr-only">Toggle navigation</span>    
  12.             <span class="icon-bar"></span>    
  13.             <span class="icon-bar"></span>    
  14.             <span class="icon-bar"></span>    
  15.           </button>    
  16.           <a class="navbar-brand" href="#">DevDose Blog</a>    
  17.         </div>    
  18.         <div id="navbar" class="navbar-collapse collapse">    
  19.           <ul class="nav navbar-nav">    
  20.             <li class="active"><a [routerLink]='["/"]'>login</a></li>    
  21.     
  22.           </ul>    
  23.         </div><!--/.nav-collapse -->    
  24.       </div>    
  25.     </nav>    
  26.         
  27.     <div class="container">    
  28.       
  29.   <router-outlet></router-outlet>`,    
  30. })    
  31. export class AppComponent  {  }   
app.module.ts
  1. import { NgModule }      from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { HttpModule } from '@angular/http';   
  4. import { FormsModule } from '@angular/forms';  
  5. import {AuthenticationService} from './data.service'  
  6. import { AppComponent }  from './app.component';  
  7.   
  8. import { HomeComponent }  from './home.component';  
  9. import { LoginComponent }  from './login.component';  
  10. import { RegisterComponent }  from './register.component';  
  11.   
  12. import { RouterModule } from '@angular/router';  
  13. import { routing } from './app.routing';  
  14.   
  15. @NgModule({  
  16.   imports:      [ BrowserModule, routing, HttpModule, FormsModule ],  
  17.   declarations: [ AppComponent, HomeComponent, LoginComponent,RegisterComponent ],  
  18.   bootstrap:    [ AppComponent ],  
  19.   providers: [ AuthenticationService ],  
  20. })  
  21. export class AppModule { }  
app.routing.ts
  1. import {ModuleWithProviders} from '@angular/core';  
  2. import {Routes, RouterModule} from '@angular/router';  
  3.   
  4. import { HomeComponent }  from './home.component';  
  5. import { LoginComponent }  from './login.component';  
  6. import { RegisterComponent }  from './register.component';  
  7.   
  8. const appRoutes: Routes = [  
  9.     {  
  10.         path: '',  
  11.         component: LoginComponent  
  12.     },  
  13.       
  14.     {  
  15.         path: 'login',  
  16.         component: LoginComponent  
  17.     },  
  18.     {  
  19.         path: 'home',  
  20.         component: HomeComponent  
  21.     }  
  22.     ,  
  23.     {  
  24.         path: 'register',  
  25.         component: RegisterComponent  
  26.     }  
  27. ];  
  28.   
  29. export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);  
data.service.ts
  1. import {Injectable} from '@angular/core';  
  2. import {Router} from '@angular/router';  
  3.    
  4. export class User {  
  5.   constructor(  
  6.     public email: string,  
  7.     public password: string) { this.email=email;this.password=password}  
  8. }  
  9. @Injectable()  
  10. export class AuthenticationService {  
  11.   
  12.  users :User[]= [  
  13.     new User('admin@admin.com','adm'),  
  14.     new User('user1@gmail.com','a23')  
  15.   ];  
  16.   constructor(  
  17.     private _router: Router){}  
  18.    
  19.   logout() {  
  20.     localStorage.removeItem("user");  
  21.     this._router.navigate(['Login']);  
  22.   }  
  23.    
  24.   login(user :any){  
  25.     var authenticatedUser :any = this.users.find(u => u.email === user.email);  
  26.     if (authenticatedUser && authenticatedUser.password === user.password)  
  27.     {  
  28.       localStorage.setItem("user", authenticatedUser)  
  29.       this._router.navigate(['home']);        
  30.       return true;  
  31.     }  
  32.     return false;  
  33.    
  34.   }  
  35.   
  36.   add_user(user:any)  
  37.   {   
  38.       
  39.     var authenticatedUser :any = this.users.push(new User(user.email,user.password));  
  40.     if(authenticatedUser)  
  41.     {  
  42.       console.log(this.users);  
  43.       console.log(localStorage.setItem("user",authenticatedUser))  
  44.       this._router.navigate(['login']);  
  45.       return true;  
  46.     }  
  47.     return false;  
  48.       
  49.   }  
  50.   
  51.    checkCredentials(){  
  52.     if (localStorage.getItem("user") === null){  
  53.         this._router.navigate(['login']);  
  54.     }  
  55.   }   
  56. }  
login.component.ts
  1. import { Component } from '@angular/core';  
  2. import {Routes, RouterModule} from '@angular/router';  
  3. import { Router } from '@angular/router';  
  4. import {AuthenticationService,User} from './data.service'  
  5.   
  6. @Component({  
  7.   selector: 'my-login',  
  8.   providers: [AuthenticationService],  
  9.     template: `  
  10.         <div class="container" >  
  11.             <div class="title">  
  12.                 Welcome  
  13.             div>  
  14.             <div class="panel-body">  
  15.                 <div class="row">  
  16.                     <div class="input-field col s12">  
  17.                         <input [(ngModel)]="user.email" id="email"   
  18.                             type="email" class="validate">  
  19.                         <label for="email">Emaillabel>  
  20.                     div>  
  21.                 div>  
  22.    
  23.                 <div class="row">  
  24.                     <div class="input-field col s12">  
  25.                         <input [(ngModel)]="user.password" id="password"   
  26.                             type="password" class="validate">  
  27.                         <label for="password">Passwordlabel>  
  28.                     div>  
  29.                 div>  
  30.    
  31.                 <span>{{errorMsg}}span>  
  32.                 <button (click)="login()"   
  33.                     class="btn waves-effect waves-light"   
  34.                     type="submit" name="action">Loginbutton>    
  35.   
  36.                     <li class="active"><a [routerLink]='["/register"]'>Registera>li>  
  37.             div>  
  38.         div>  
  39.         `  
  40. })  
  41. export class LoginComponent    
  42. {   
  43.   public user = new User('','');  
  44.   public errorMsg = '';  
  45.   
  46. constructor(  
  47.     private _service:AuthenticationService) {}  
  48.   
  49. login() {  
  50.     if(!this._service.login(this.user)){  
  51.         this.errorMsg = 'Failed to login';  
  52.     }  
  53. }  
  54.   
  55. }  
register.component.ts
  1. import { Component ,OnInit } from '@angular/core';  
  2. import {Routes, RouterModule} from '@angular/router';  
  3. import { Router } from '@angular/router';  
  4. import {AuthenticationService,User} from './data.service'  
  5.   
  6.   
  7. @Component({  
  8.   selector: 'my-register',  
  9.   providers: [AuthenticationService],  
  10.     template: `  
  11.         <div class="container" >  
  12.             <div class="title">  
  13.                 Welcome  
  14.   
  15.             <div class="panel-body">  
  16.                 <div class="row"><label for="email">Emaillabel>  
  17.                     <div class="input-field col s12">  
  18.                         <input [(ngModel)]="user.email" id="email"   
  19.                             type="email" class="validate">  
  20.                           
  21.                     div>  
  22.                 div>  
  23.    
  24.                 <div class="row"><label for="password">Passwordlabel>  
  25.                     <div class="input-field col s12">  
  26.                         <input [(ngModel)]="user.password" id="password"   
  27.                             type="password" class="validate">  
  28.                           
  29.                     div>  
  30.                 div>  
  31.    
  32.                 <span>{{errorMsg}}span>  
  33.                 <button    
  34.                     class="btn waves-effect waves-light" (click)="add_user()"  
  35.                     type="submit" name="action">Registerbutton>  
  36.             div>  
  37.   
  38.         `  
  39. })  
  40. export class RegisterComponent  implements OnInit  
  41. {   
  42.     public user = new User('','');  
  43.     public errorMsg = '';  
  44.   
  45. constructor(  
  46.   private _service:AuthenticationService) {}  
  47.   ngOnInit()  
  48.   {  
  49.   
  50.   }  
  51.   
  52. add_user() {  
  53.   if(!this._service.add_user(this.user)){  
  54.       this.errorMsg = 'Failed to register';  
  55.   }  
  56.   
  57. }  
  58. }  
home.component.ts
  1. import { Component, OnInit } from '@angular/core';  
  2. import {AuthenticationService,User} from './data.service'  
  3.   
  4. @Component({  
  5.   selector: 'my-home',  
  6.   providers: [AuthenticationService],  
  7.     template: `  
  8.             <div class="container" >  
  9.                 <div class="content">  
  10.                     <span>Congratulations, you have successfully logged in!!span>  
  11.                     <br />  
  12.                     <a (click)="logout()" href="#">Click Here to logouta>  
  13.                 div>  
  14.             div>  
  15.         `  
  16. })  
  17. export class HomeComponent  {  
  18.   
  19.   constructor(  
  20.     private _service:AuthenticationService){}  
  21.   
  22. ngOnInit(){  
  23.     this._service.checkCredentials();  
  24. }  
  25.   
  26. logout() {  
  27.     this._service.logout();  
  28. }  
  29.   
  30.  } 

Answers (8)