User auth service

package.json

@@ -27,7 +27,7 @@
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.21",
+    "@angular-devkit/build-angular": "^0.803.24",
     "@angular/cli": "~8.3.9",
     "@angular/compiler-cli": "~8.2.9",
     "@angular/language-service": "~8.2.9",
@@ -37,7 +37,7 @@
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
+    "karma": "^4.4.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 // Importing Routes
 import { AppRoutingModule } from './app-routing.module';
@@ -22,6 +23,9 @@ import { DragToSelectModule } from 'ngx-drag-to-select';
 import { SettingsComponent } from './settings/settings.component';
 import { MoreComponent } from './more/more.component';
 
+// Services
+import { AuthService } from './services/auth.service';
+
 @NgModule({
 	declarations: [
 		AppComponent,
@@ -41,9 +45,12 @@ import { MoreComponent } from './more/more.component';
 		BrowserModule,
 		AppRoutingModule,
 		FormsModule,
+        HttpClientModule,
 		DragToSelectModule.forRoot()
 	],
-	providers: [],
+	providers: [
+        AuthService
+    ],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/data/url.ts

@@ -0,0 +1 @@
+export const URL = 'http://159.65.153.233:8989/mall-aggregator';

src/app/login/login.component.html

@@ -1,3 +1,23 @@
 <div class="container">
-	<button class="rect-button" (click)="authenticateUser()"> Login </button>
+
+    <section class="form">
+
+        <header> Vendor App Login </header>
+
+        <div class="input-holder">
+            <label> Username </label>
+            <input type="text" placeholder="Enter username" [(ngModel)]="credentials.username">
+        </div>
+
+        <div class="input-holder">
+            <label> Password </label>
+            <input type="password" placeholder="Enter Password" [(ngModel)]="credentials.password">
+        </div>
+
+    	<button class="rect-button" (click)="requestAuthentication()"> Login </button>
+
+        <p *ngIf="errorMessage" class="error"> {{ errorMessage }} </p>
+
+    </section>
+
 </div>

src/app/login/login.component.scss

@@ -5,7 +5,56 @@
 	align-items: center;
 	justify-content: center;
 
+
+    .form {
+        width: 300px;
+        padding: 10px;
+        box-shadow: 0px 0px 5px var(--grey);
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+    header {
+        font-weight: 500;
+        color: var(--brand-blue);
+        font-size: 16px;
+        letter-spacing: 0.5px;
+        text-align: center;
+        margin: 10px auto 20px;
+    }
+
+    .input-holder {
+        margin: 0px auto 30px;
+
+        label {
+            display: block;
+            font-size: 14px;
+            color: var(--dark-grey);
+            font-weight: 500;
+            padding-left: 5px;
+        }
+
+        input {
+            height: 40px;
+            width: 100%;
+            display: block;
+            border: 0px;
+            border-bottom: 1px solid var(--grey);
+            font-size: 14px;
+            padding: 0 5px;
+        }
+    }
+
 	button {
-		width: 100px;
+        display: block;
+		width: 100%;
 	}
+
+    .error {
+        margin: 20px auto;
+        font-size: 14px;
+        font-weight: bold;
+        color: red;
+        letter-spacing: 0.5px;
+    }
 }

src/app/login/login.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
 
 @Component({
 	selector: 'app-login',
@@ -7,17 +8,31 @@ import { Router } from '@angular/router';
 	styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
+    credentials = {
+        username: '',
+        password: ''
+    };
+
+    errorMessage: string = '';
 
 	constructor(
-		public router: Router
+		public router: Router,
+        private authService: AuthService
 	) { }
 
 	ngOnInit() {
 	}
 
-	authenticateUser() {
-		localStorage.vendor_token = 'a';
-		this.router.navigate(['shop-details']);
+	requestAuthentication() {
+        this.authService.authenticateUser(this.credentials).then((data: any) => {
+            localStorage.vendor_token = data.accessToken;
+            this.router.navigate(['shop-details']);
+        }, (err: any) => {
+            this.errorMessage = err.error.message;
+            setTimeout(() => {
+                this.errorMessage = '';
+            }, 3000);
+        });
 	}
 
 }

src/app/services/auth.service.ts

@@ -1,9 +1,17 @@
 import { Injectable } from '@angular/core';
+import { URL } from '../data/url';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root'
 })
 export class AuthService {
 
-  constructor() { }
+    constructor(
+        private http: HttpClient
+    ) { }
+
+    authenticateUser(credentials: any) {
+        return this.http.post(URL + '/api/auth/signin', credentials).toPromise();
+    }
 }