how to compare values using angular...

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: `
<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 navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">DevDose Bloga>
div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]='["/"]'>logina>li>
ul>
div>
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']);
}
}
}

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';
}
}
}

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();
}
}

HI Dev,

I think your data is getting cleared each time you are navigating.

I have just changed some piece of your code and trying to fetch everything from local storage . Please change following code : -

login(user :any){
this.users = JSON.parse(localStorage.getItem('usersInfo')) || new Array();
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;
}

Again add_user in data.service

add_user(user:any)
{
this.users = JSON.parse(localStorage.getItem('usersInfo')) || new Array() ;
if(this.users.push(user))
{
localStorage.setItem('usersInfo', JSON.stringify(this.users));
this._router.navigate(['login']);
return true;
}
return false;
}

Changing above should allow your code to work. But remember the hardcoded users will not work.

Regards,

Mukesh Nayak

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mukesh Nayak8y ago
HI,

For me it is working with
this._service.checkCredentials();
Just let me know how your applicaion is behaving. I would like you to clear the local storage by clearing the cache and start from registering user. And then login with same credential. Then please let me know what is not working according to you.
Regards,
Mukesh Nayak
Dev Teywa8y ago
Mukesh Nayak

I put instead of login component is the index I changed by home component is the index
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:HomeComponent

    },

    {

        path: 'home',

        component: HomeComponent

    },

    {

        path: 'login',

        component: LoginComponent

    },



    {

        path: 'register',

        component: RegisterComponent

    }

];



export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Dev Teywa8y ago
Mukesh Nayak
I understood but I changed the index page is home so I have to check in the home page if the user connected or not otherwise I redirect to the login page
Mukesh Nayak8y ago
Hi Dev,

Lets talk about the flow :
Initially user will register , so once user register application is keeping list of register user in localstorage. After registration if the user uses valid credential , the application redirects user to home view.

So if you refresh the home view you will see home view only because on "onInit" application is checking if user is not authenticated redirect to login view.

Now lets clear history from browser and then refresh home view you will get redirected to login.

Regards,
Mukesh Nayak
Dev Teywa8y ago
Mukesh nayak i called checkcredentials in the component home but it does not work i did like that NgOnInit() { this._service. Checkcredentials (); }
Mukesh Nayak8y ago
Hi Dev,

I think you are already checking if the user is logged in or not in you home.component.ts by calling service function checkCredentials()
checkCredentials(){
   if (localStorage.getItem("user") === null){
       this._router.navigate(['login']);
   }
In your login you have
localStorage.setItem("user", authenticatedUser)
So once you are adding user to local storage when the user is login you can check the same storage to find if user is logged in or not. Same is happening in checkCredentials() you are the fetching the user from local storage to verify if user is logged in.
Regards,
Mukesh Nayak
Dev Teywa8y ago
Mukesh Nayak how to check whether the user login or not
Mukesh Nayak8y ago
HI Dev,

I think your data is getting cleared each time you are navigating.
I have just changed some piece of your code and trying to fetch everything from local storage . Please change following code : -

login in data.service.ts
login(user :any){
    this.users = JSON.parse(localStorage.getItem('usersInfo')) || new Array();
    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;

  }
Again add_user in data.service
add_user(user:any)
  {
    this.users = JSON.parse(localStorage.getItem('usersInfo')) || new Array()  ;
    if(this.users.push(user))
    {
      localStorage.setItem('usersInfo', JSON.stringify(this.users));
      this._router.navigate(['login']);
      return true;
    }
    return false;
  }
Changing above should allow your code to work. But remember the hardcoded users will not work.
Regards,
Mukesh Nayak