Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
0
Reply
how to compare values using angular...
Dev Maroua
Jan 24 2018 2:27 PM
171
Reply
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"
>
Email
label
>
div
>
div
>
<
div
class
=
"row"
>
<
div
class
=
"input-field col s12"
>
<
input
[(ngModel)]="user.password"
id
=
"password"
type
=
"password"
class
=
"validate"
>
<
label
for
=
"password"
>
Password
label
>
div
>
div
>
<
span
>
{{errorMsg}}
span
>
<
button
(click)="login()"
class
=
"btn waves-effect waves-light"
type
=
"submit"
name
=
"action"
>
Login
button
>
<
li
class
=
"active"
>
<
a
[routerLink]='["/register"]'
>
Register
a
>
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"
>
Email
label
>
<
div
class
=
"input-field col s12"
>
<
input
[(ngModel)]="user.email"
id
=
"email"
type
=
"email"
class
=
"validate"
>
div
>
div
>
<
div
class
=
"row"
>
<
label
for
=
"password"
>
Password
label
>
<
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"
>
Register
button
>
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 logout
a
>
div
>
div
>
`
})
export class HomeComponent {
constructor(
private _service:AuthenticationService){}
ngOnInit(){
this._service.checkCredentials();
}
logout() {
this._service.logout();
}
}
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
0
)
Next Recommended Forum
how to add item from array to class using angular2
how to verify if user is authenticated using angular2