Merge pull request #18 from BuildForSDG/feature-login

Feature login

src/app/app-routing.module.ts

@@ -6,9 +6,9 @@ import { OverviewComponent } from './components/dashboard/overview/overview.comp
 import { FundersComponent } from './components/funders/funders.component';
 import { SmesComponent } from './components/smes/smes.component';
 import { UserModule } from './components/user/user.module';
-import { SignInComponent } from './sign-in/sign-in.component';
+import { SignInComponent } from './components/sign-in/sign-in.component';
 import { SmesDashboardComponent } from './components/smes-dashboard/smes-dashboard.component';
-
+import { AuthGuardService as AuthGuard } from './services/auth-guard.service';
 
 const routes: Routes = [
   {
@@ -17,7 +17,8 @@ const routes: Routes = [
   },
   {
     path: 'smes-dashboard',
-    component: SmesDashboardComponent
+    component: SmesDashboardComponent,
+    canActivate: [AuthGuard]
   },
   { path: 'user', loadChildren: () => UserModule },
   {
@@ -26,9 +27,11 @@ const routes: Routes = [
 
       { path: 'Overview', component: OverviewComponent},
       { path: 'Funders', component: FundersComponent},
-      { path: 'Smes', component: SmesComponent,}]
+      { path: 'Smes', component: SmesComponent},
+    ]
     },
-    { path: 'sign-in', component: SignInComponent}
+    { path: 'sign-in', component: SignInComponent},
+    { path: '**', redirectTo: '/' }
   ];
 
 

src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { TokenInterceptor, ErrorInterceptor } from './services/token.interceptor';
+import { SideNavService } from './shared/services/side-nav.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -16,11 +18,18 @@ import { OverviewComponent } from './components/dashboard/overview/overview.comp
 import { FundersComponent } from './components/funders/funders.component';
 import { SmesComponent } from './components/smes/smes.component';
 import { FooterComponent } from './components/footer/footer.component';
-import { SignInComponent } from './sign-in/sign-in.component';
+import { SignInComponent } from './components/sign-in/sign-in.component';
+import { StoreModule } from '@ngrx/store';
+import { AuthService } from './services/auth.service';
+import { authReducers } from './store/state/user.state';
+import { EffectsModule } from '@ngrx/effects';
+import { AuthEffects } from './store/effects/auth.effects';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { environment } from '../environments/environment';
 import { SideNavTogglerComponent } from './shared/components/side-nav-toggler/side-nav-toggler.component';
 import { SmesDashboardComponent } from './components/smes-dashboard/smes-dashboard.component';
 import { NavbarComponent } from './shared/components/navbar/navbar.component';
-import { SideNavService } from './shared/services/side-nav.service';
 import { SideNavComponent } from './shared/components/side-nav/side-nav.component';
 
 
@@ -49,10 +58,26 @@ import { SideNavComponent } from './shared/components/side-nav/side-nav.componen
     MatSidenavModule,
     MatToolbarModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    HttpClientModule,
+    StoreModule.forRoot(authReducers, {}),
+    EffectsModule.forRoot([AuthEffects]),
+    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
   ],
 
-  providers: [SideNavService],
+  providers: [
+    AuthService, SideNavService,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: TokenInterceptor,
+      multi: true
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ErrorInterceptor,
+      multi: true
+    }
+  ],
   bootstrap: [AppComponent]
 })
 

src/app/components/home-page/home-page.component.html

@@ -1,35 +1,35 @@
 <div class="main">
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-        <a class="navbar-brand" href="#">U Business</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
-            aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">U Business</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
+      aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-        <div class="collapse navbar-collapse" id="navbarsExample04">
-            <ul class="navbar-nav mr-auto">
-                <li class="nav-item active">
-                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Sign In </a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Create Account</a>
-                </li>
+    <div class="collapse navbar-collapse" id="navbarsExample04">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" [routerLink]="['/sign-in']">Log in</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" [routerLink]="['/user/sign-up']">Sign up</a>
+        </li>
 
-            </ul>
-            <form class="form-inline my-2 my-md-0">
-                <input class="form-control" type="text" placeholder="Search">
-            </form>
-        </div>
-    </nav>
-
-    <div class="jumbotron img-fluid">
-        <div class="header">
-            U Business
-            <span>Connecting Businesses to Opportunity</span>
-        </div>
+      </ul>
+      <form class="form-inline my-2 my-md-0">
+        <input class="form-control" type="text" placeholder="Search">
+      </form>
+    </div>
+  </nav>
 
+  <div class="jumbotron img-fluid">
+    <div class="header">
+      U Business
+      <span>Connecting Businesses to Opportunity</span>
     </div>
+
+  </div>
 </div>

src/app/components/sign-in/sign-in.component.html

@@ -0,0 +1,56 @@
+<div class="main">
+<div id="left">
+	<div class="spacer"></div>
+	<div class="signin">
+		<div class="user">
+			<h1>SME Connect</h1>
+			<h2>Welcome User</h2>
+    </div>
+    <div *ngIf="errorMessage">
+      <div class="alert alert-danger" role="alert">
+        {{errorMessage}}
+      </div>
+    </div>
+		<form [formGroup]="loginForm" (ngSubmit)="onLogin()" >
+			<div class="form">
+				<label for="email">Email</label>
+        <input type="text" id="email" name="email" class="control" formControlName="email">
+        <div *ngIf="login && f.email.errors" class="invalid-feedback">
+          <div *ngIf="f.email.errors.required">Email is required</div>
+          <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
+      </div>
+			</div>
+			<div class="form">
+				<label for="Password">Password</label>
+        <input type="password" id="Password" class="control" formControlName="password">
+        <div *ngIf="login && f.password.errors" class="invalid-feedback">
+          <div *ngIf="f.password.errors.required">Password is required</div>
+      </div>
+			</div>
+			<button type="submit" id="login">Sign in</button>
+		</form>
+		<div>
+			<a href="#">Forgot password?</a>
+		</div>
+		<div>
+			<hr />
+		</div>
+		<a href="#">
+			<span class="card card-small">Create an account</span>
+		</a>
+	</div>
+	<footer id="footer">
+		Copyright &copy; 2020 SME Connect LLC. All rights reserved.
+		<div>
+			<a href="#">Terms of Use</a> |
+			<a href="#">Privacy Policy</a>
+	</div>
+</footer>
+
+</div>
+<div id="right">
+	<div class="banner"><h1>Inspiring change for the <strong>better.</strong></h1>
+		<h2>Your number one business partner. </h2></div>
+
+</div>
+</div>

src/app/components/sign-in/sign-in.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {Router} from '@angular/router';
+import { Store } from '@ngrx/store';
+import { UserState } from '../../store/state/user.state';
+import { selectAuthState } from './../../store/state/user.state';
+
+import { LogIn } from './../../store/actions/auth.actions';
+import { User } from './../user/user.model';
+import { Observable } from 'rxjs';
+
+
+@Component({
+  selector: 'app-sign-in',
+  templateUrl: './sign-in.component.html',
+  styleUrls: ['./sign-in.component.scss']
+})
+export class SignInComponent implements OnInit {
+  loginForm: FormGroup;
+  login = false;
+  getState: Observable<any>;
+  errorMessage: string | null;
+
+
+
+  constructor(
+    private router: Router,
+    private store: Store<UserState>,
+    private formBuilder: FormBuilder
+  ) {
+    this.getState = this.store.select(selectAuthState);
+  }
+
+  ngOnInit(): void {
+    this.loginForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', Validators.required]
+    });
+    this.getState.subscribe(state => {
+      this.errorMessage = state.errorMessage;
+    });
+  }
+
+  // convenient getter for easy access to form fields
+  get f() { return this.loginForm.controls; }
+
+  onLogin(): void {
+    this.login = true;
+
+    if (this.loginForm.invalid) { return; }
+    const rawLogin = this.loginForm.getRawValue();
+    const payload = {
+      email: rawLogin.email,
+      password: rawLogin.password
+    };
+    console.log('payload', payload);
+
+    this.store.dispatch(new LogIn(payload));
+  }
+
+}

src/app/components/smes-dashboard/smes-dashboard.component.html

@@ -1,4 +1,8 @@
 <app-navbar></app-navbar>
 <div class="wrapper">
-  <app-side-nav></app-side-nav>
+  <div *ngIf="isAuthenticated" >
+    <app-side-nav></app-side-nav>
+  </div>
 </div>
+
+

src/app/components/smes-dashboard/smes-dashboard.component.ts

@@ -1,4 +1,10 @@
+import { Router } from '@angular/router';
+import { selectAuthState } from './../../store/state/user.state';
+import { Observable } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
+import { Logout } from './../../store/actions/auth.actions';
+import { UserState } from './../../store/reducers/auth.reducers';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-smes-dashboard',
@@ -7,9 +13,26 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SmesDashboardComponent implements OnInit {
 
-  constructor() { }
+  getState: Observable<any>;
+  isAuthenticated: false;
+  user = null;
+  errorMessage = null;
+
+  constructor(private store: Store<UserState>, public router: Router) {
+    this.getState = this.store.select(selectAuthState);
+  }
 
   ngOnInit(): void {
+    this.getState.subscribe(state => {
+      this.isAuthenticated = state.isAuthenticated;
+      this.user = state.user;
+      this.errorMessage = state.errorMessage;
+    });
+  }
+
+  logout(): void {
+    this.store.dispatch(new Logout());
+    this.router.navigateByUrl('/');
   }
 
 }

src/app/components/user/user.model.ts

@@ -20,3 +20,21 @@ export interface IUser {
     username: string;
     fullname: string;
 }
+
+export class User {
+  token?: string;
+  fullName?: string;
+  physicalAddress?: string;
+  country?: string;
+  phone?: string;
+  email?: string;
+  businessName?: string;
+  businessNumber?: string;
+  dateOfReg?: Date;
+  regAddress?: string;
+  businessEmail?: string;
+  businessTel?: string;
+  website?: string;
+  businessNature?: string;
+  newPassword?: string;
+}

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

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

src/app/services/auth-guard.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuardService implements  CanActivate{
+
+  constructor(
+    public auth: AuthService,
+    public router: Router
+  ) { }
+
+  canActivate(): boolean {
+    if (!this.auth.getToken()) {
+      this.router.navigateByUrl('/sign-in');
+      return false;
+    }
+    return true;
+  }
+}