Auth service integration

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { SettingsComponent } from './dashboard/settings/settings.component';
 import { PartnerProfileService } from './services/partner-profile.service';
 import { PartnerDetailsComponent } from './dashboard/partner-details/partner-details.component';
 import { FormsModule } from '@angular/forms';
+import { AuthService } from './services/auth.service';
 
 @NgModule({
     declarations: [
@@ -40,6 +41,7 @@ import { FormsModule } from '@angular/forms';
     ],
     providers: [
         PartnerProfileService,
+        AuthService
     ],
     bootstrap: [AppComponent]
 })

src/app/dashboard/table/table.component.ts

@@ -19,6 +19,7 @@ export class TableComponent implements OnInit {
     ngOnInit(): void {
         this.partnerProfileService.getPartnersData().then((data: any) => {
             this.userData = data;
+            console.log(data);
         }, (e) => console.log(e));
     }
 

src/app/login/login.component.html

@@ -10,19 +10,19 @@
             <h5> Log In </h5>
 
             <div class="input-holder">
-                <input type="text">
+                <input type="text" [(ngModel)]="credentails.username">
                 <label> Username </label>
             </div>
     
             <div class="input-holder">
-                <input type="password">
+                <input type="password" [(ngModel)]="credentails.password">
                 <label> Password </label>
             </div>
     
             <div class="action-buttons">
                 <a href="#"> Forgot Password? </a>
                     
-                <button class="button" (click)="authenticateUser()">
+                <button class="button" (click)="login()">
                     Login
                 </button>
             </div>

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,16 +8,27 @@ import { Router } from '@angular/router';
     styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
+    credentails: {
+        username: string,
+        password: string,
+    } = {
+        username: 'admin@catalysts.org',
+        password: '1234'
+    };
 
     constructor(
-        private router: Router
+        private router: Router,
+        private authService: AuthService
     ) { }
 
     ngOnInit(): void {
     }
 
-    authenticateUser() {
-        this.router.navigate(['/dashboard/analytics']);
+    login() {
+        this.authService.authenticateUser(this.credentails).then((data: any) => {
+            localStorage.setItem('token', data.token);
+            this.router.navigate(['/dashboard/analytics']);
+        }, (e) => console.log(e));
     }
 
 }

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

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

src/app/services/auth.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { lastValueFrom } from 'rxjs';
+import { BASE_URL } from './partner-profile.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthService {
+
+    constructor(
+        private http: HttpClient
+    ) { }
+
+    async authenticateUser(credentials: {
+        username: string,
+        password: string,
+    }) {
+        const body = `&username=${encodeURIComponent(credentials.username)}&password=${encodeURIComponent(credentials.password)}`;
+        const headers = new HttpHeaders({
+            Accept: 'text/html, application/xhtml+xml, */*',
+            'Content-Type': 'application/x-www-form-urlencoded',
+        });
+        const httpOptions = {
+            headers,
+            responseType: 'text' as 'json',
+        };
+        return lastValueFrom(this.http.post(BASE_URL + '/api-auth/', body, httpOptions));
+    }
+}

src/app/services/partner-profile.service.ts

@@ -2,6 +2,10 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 
+export const BASE_URL = 'http://localhost:8001';
+// http://localhost:8001
+// http://143.110.247.94
+
 @Injectable({
     providedIn: 'root'
 })
@@ -12,7 +16,7 @@ export class PartnerProfileService {
     ) { }
 
     async getPartnersData() {
-        return lastValueFrom(this.http.get('http://143.110.247.94/user-data/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2MjAyY2I3YmQwMWMxMzRhYjdjZmViOGUiLCJleHAiOjE2NDk0NjI0MDAsImlhdCI6MTY0NDM1MTEwMH0.MghrYB51zg5Qk2fk1yx9NO1nPLpdhwMK69XIuFrmrAY'));
+        return lastValueFrom(this.http.get(BASE_URL + '/user-data/?token=' + localStorage.getItem('token')));
     }
 
 }