signup and login done,dashboard work remain

Author: mangeshpotdar1999

src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AppComponent } from './app.component';
+import { AuthGuardGuard } from './auth-guard.guard';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './login/login.component';
@@ -10,7 +11,7 @@ import { RegisterComponent } from './register/register.component';
 const routes: Routes = [
  { path: "login", component: LoginComponent, pathMatch: "full" },
  { path: "register", component: RegisterComponent, pathMatch: "full" },
- { path: "dashboard", component: DashboardComponent, pathMatch: "full" },
+ { path: "dashboard", component: DashboardComponent, pathMatch: "full", canActivate: [AuthGuardGuard] },
  { path: "", component: HomeComponent, pathMatch: "full" },
  { path: "app", component: AppComponent, pathMatch: "full" }
 ];

src/app/app.component.ts

@@ -7,5 +7,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
  title = 'Demo';
- displayDashboard = "true";
+ displayDashboard = "false";
 }

src/app/auth-guard.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardGuard } from './auth-guard.guard';
+
+describe('AuthGuardGuard', () => {
+ let guard: AuthGuardGuard;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ guard = TestBed.inject(AuthGuardGuard);
+ });
+
+ it('should be created', () => {
+ expect(guard).toBeTruthy();
+ });
+});

src/app/auth-guard.guard.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { LoginServiceService } from './login-service.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthGuardGuard implements CanActivate {
+ constructor(private loginService: LoginServiceService, private router: Router) { }
+ canActivate(
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+ if (this.loginService.isLogin()) {
+ return true;
+ }
+ this.router.navigate(['/login']);
+ return false;
+ }
+
+}

src/app/dashboard/dashboard.component.css

@@ -1,3 +1 @@
-.spacer {
- flex: 1 1 auto;
-}
+

src/app/dashboard/dashboard.component.html

@@ -1,11 +1,3 @@
-<!-- <mat-toolbar style="background-color: brown;">
- <span><a style="text-decoration: none; color: rgb(253, 253, 251);"routerLink="/">Global Bank</a></span>
- <div class="spacer"> </div>
- <!-- <a mat-button routerLink="/">Home</a>&nbsp; -->
- <!-- <a mat-raised-button color="yellow" routerLink="mycard">Mycard</a>&nbsp; -->
- <!-- <a mat-raised-button color="yellow" routerLink="login">Logout</a>&nbsp; -->
- <!-- <a mat-raised-button color="accent" routerLink="register">Register</a> -->
-<!-- </mat-toolbar> --> 
-
-
-<p>Dashbord Works</p>
+<div class="container">
+ <p>Dashbord Works</p>
+</div>

src/app/login-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginServiceService } from './login-service.service';
+
+describe('LoginServiceService', () => {
+ let service: LoginServiceService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(LoginServiceService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});

src/app/login-service.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { User1 } from './user1';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LoginServiceService {
+
+ constructor(private _http: HttpClient) { }
+
+ public doLogin(user: User1): Observable<any> {
+ return this._http.post<any>("https://global-rest-api.herokuapp.com/userAuth/login", user);
+ }
+
+ isLogin() {
+ return true;
+ }
+
+}
+
+

src/app/login/login.component.html

@@ -4,13 +4,15 @@
  <mat-tab-group mat-stretch-tabs class="example-stretched-tabs">
  <mat-tab label="Login">
  <mat-card-content>
- <form>
+ <form (ngSubmit)="loginNow()">
+ <small class="text-success ml-5">{{msg}}</small>
  <mat-form-field>
  <input
  matInput
  placeholder="Email"
  required
  name="email"
+ [(ngModel)]="user1.email"
  ngModel
  #email="ngModel">
  <mat-error *ngIf="email.invalid">Email is required</mat-error>
@@ -24,34 +26,35 @@
  required
  minlength="6"
  name="password"
+ [(ngModel)]="user1.password"
  ngModel
  #password="ngModel">
  <mat-error
  *ngIf="password.errors && password.errors.required">
  Password is required
  </mat-error>
- <mat-error
+ <!-- <mat-error
  *ngIf="password.errors && password.errors.minlength">
  Password must be of length 6
- </mat-error>
+ </mat-error> -->
  <!-- <mat-icon matSuffix>lock</mat-icon> -->
  </mat-form-field>
  <!-- <mat-checkbox>Remember Me!</mat-checkbox> -->
  <button
  mat-raised-button
  color="primary"
  class="login-button"
- routerLink="/dashboard">
+ type="submit">
  Login
  </button>
 
- <button
+ <!-- <button
  mat-raised-button
  color="accent"
  class="login-button">
  Login with Google
- </button>
- <p class="login-button">Do not have account ! please <a routerLink="register" >Register</a></p>
+ </button> -->
+ <p class="login-button">Do not have account ! please <a routerLink="/register" >Register</a></p>
  </form>
  </mat-card-content>
  </mat-tab>

src/app/register/register.component.html

@@ -5,6 +5,7 @@
  <mat-tab label="Sign Up">
  <mat-card-content>
  <form (ngSubmit)="registerNow()">
+ <small class="text-success ml-5" >{{msg}}</small>
  <mat-form-field>
  <input
  matInput
@@ -64,6 +65,7 @@
  required
  minlength="6"
  name="repassword"
+ ngModel="user.repassword"
  ngModel
  #repassword="ngModel">
  <mat-error