Login / Registration working OK

frontend/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port 8000",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

frontend/src/app/app.component.html

@@ -1,4 +1,34 @@
-<div *ngIf="!isLoggedIn()">
-    Please Log In to continue
+<div *ngIf="!isLoggedIn()" class="container" style="margin-top:50px">
+  <h1 style="text-align: center">CSBD Invoice App</h1>
+  <hr>
+  <br>
+  <form class="form-horizontal">
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Username</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" placeholder="Username" #username>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label">Password</label>
+      <div class="col-sm-10">
+        <input type="password" class="form-control" placeholder="Password" #password>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
+        <div class="checkbox">
+          <label>
+            <input type="checkbox"> Remember me
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
+        <button type="button" class="btn btn-default" (click)="login(username.value,password.value)">Log in</button>
+      </div>
+    </div>
+  </form>
 </div>
-<app-dashboard *ngIf="isLoggedIn()"></app-dashboard>
+<app-dashboard *ngIf="isLoggedIn()"></app-dashboard>

frontend/src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { AuthService } from './auth.service';
+import {Component, OnInit} from '@angular/core';
+import {AuthService} from './auth.service';
+import {Router} from '@angular/router';
 
 
 @Component({
@@ -8,13 +9,29 @@ import { AuthService } from './auth.service';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-
-      constructor(private authService:AuthService){}
 
-      ngOnInit(){}
+  constructor(private authService: AuthService, private router: Router) {
+  }
+
+  ngOnInit() {
+  }
+
+  isLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
+  login(username, password) {
+    if (username == 'admin' && password == 'admin') {
+      this.authService.setLogin(true);
+      localStorage.setItem('csbd-username', 'admin');
+      localStorage.setItem('csbd-password', 'admin');
+      location.reload()
+    } else {
+      this.authService.setLogin(false);
+      localStorage.setItem('csbd-username', '');
+      localStorage.setItem('csbd-password', '');
+    }
+  }
 
-      isLoggedIn(){
-        return this.authService.isLoggedIn();
-      }
 
 }

frontend/src/app/auth.service.ts

@@ -1,13 +1,22 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 
 @Injectable()
 export class AuthService {
-  private loggedIn:boolean = true;
+  private loggedIn: boolean = false;
 
-  constructor() { }
+  constructor() {
+  }
+
+  isLoggedIn() {
+    if (localStorage.getItem('csbd-username') == 'admin' && localStorage.getItem('csbd-password') == 'admin') {
+      return true;
+    } else {
+      return false;
+    }
+  }
 
-  isLoggedIn(){
-      return this.loggedIn;
+  setLogin(status: boolean) {
+    this.loggedIn = status;
   }
 
 

frontend/src/app/general/navbar/navbar.component.html

@@ -17,8 +17,8 @@
         <!-- Navbar Right Menu -->
         <div class="navbar-custom-menu">
             <ul class="nav navbar-nav">
-
+              <button class="btn btn-lg btn-danger" style="padding-bottom: 14px;" (click)="logout()">  Logout</button>
             </ul>
         </div>
     </nav>
-</header>
+</header>

frontend/src/app/general/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-navbar',
@@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavbarComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) {
+  }
 
   ngOnInit() {
   }
 
+  logout() {
+    localStorage.setItem('csbd-username', '');
+    localStorage.setItem('csbd-password', '');
+    this.router.navigate(['/']);
+  }
 }

frontend/src/app/home/home-body/home-body.component.html

@@ -13,7 +13,7 @@ <h1>
   <section class="content">
     <!--  Page Content Here -->
     <div class="col-xs-12">
-      <h3>Payment Date vs. Paid Times </h3>
+      <h3>Payment Date vs. Paid Amount </h3>
       <app-pay-date-chart></app-pay-date-chart>
     </div>
     <br>

frontend/src/app/invoice/invoice-edit/invoice-edit.component.ts

@@ -1,4 +1,4 @@
-import {DatePipe} from '@angular/common/src/pipes/date_pipe';
+import {DatePipe} from '@angular/common';
 import {Component, OnInit, ElementRef, ViewChild} from '@angular/core';
 import {InvoiceService} from '../invoice.service';
 import {ActivatedRoute} from '@angular/router';

frontend/src/app/invoice/invoice-html/invoice-html.component.ts

@@ -7,8 +7,7 @@ import {Invoice} from '../invoice';
 import {CustomerService} from '../../customer/customer.service';
 import {ProductService} from '../../product/product.service';
 import * as _ from 'underscore';
-import {DatePipe} from '@angular/common/src/pipes/date_pipe';
-
+import {DatePipe} from '@angular/common';
 
 declare let jsPDF;
 declare let html2canvas;

frontend/src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
   //need to place production server api here
-  api_server: "http://localhost:5000/api/"
+  api_server: "http://103.83.15.130:5000/api/"
 };

node-api/app/server.ts

@@ -10,7 +10,7 @@ const port: number = process.env.PORT || 5000;
 
 // Add headers
 app.use(function (req, res, next) {
-    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
+    res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
     res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
     res.setHeader('Access-Control-Allow-Credentials', true);