Implement temporary fix for constantly neeeding to log in

The cookies sent back from the server only seem to be persisted for the
length of the session, which means as soon as the browser is closed, the
session is lost. As a temporary workaround, I've re-implemented basic
auth with client-side refreshing of the cookie to keep it authenticated.
This is obviously not a good decision but it buys be time to investigate
backend solutions.

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, Inject } from '@angular/core';
 import { Location } from '@angular/common';
 import { User } from './users/user';
 import { TWIGS_SERVICE, TwigsService } from './shared/twigs.service';
+import { CookieService } from 'ngx-cookie-service';
 
 @Component({
   selector: 'app-root',
@@ -17,7 +18,11 @@ export class AppComponent {
   constructor(
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
     private location: Location,
+    private cookieService: CookieService
   ) {
+    if (!this.cookieService.check('Authorization')) {
+      return;
+    }
     this.twigsService.getProfile().subscribe(user => {
       this.user = user;
     });

src/app/app.module.ts

@@ -37,15 +37,17 @@ import { UserComponent } from './users/user.component';
 import { NewBudgetComponent } from './budgets/new-budget/new-budget.component';
 import { BudgetDetailsComponent } from './budgets/budget-details/budget-details.component';
 import { environment } from 'src/environments/environment';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { CurrencyMaskModule } from 'ng2-currency-mask';
 import { CurrencyMaskConfig, CURRENCY_MASK_CONFIG } from 'ng2-currency-mask/src/currency-mask.config';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { CategoryBreakdownComponent } from './categories/category-breakdown/category-breakdown.component';
 import { ChartsModule } from 'ng2-charts';
 import { TWIGS_SERVICE } from './shared/twigs.service';
+import { AuthInterceptor } from './shared/auth.interceptor';
 import { TwigsHttpService } from './shared/twigs.http.service';
 import { TwigsLocalService } from './shared/twigs.local.service';
+import { CookieService } from 'ngx-cookie-service';
 
 export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
   align: 'left',
@@ -103,8 +105,10 @@ export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
   ],
   providers: [
     { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig },
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: TWIGS_SERVICE, useClass: TwigsHttpService },
     // { provide: TWIGS_SERVICE, useClass: TwigsLocalService },
+    CookieService
   ],
   bootstrap: [AppComponent]
 })

src/app/shared/auth.interceptor.ts

@@ -0,0 +1,22 @@
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+
+    constructor(
+        private cookieService: CookieService
+    ) { }
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        if (!this.cookieService.check('Authorization')) {
+            return next.handle(req);
+        }
+        let headers = req.headers;
+        headers = headers.append('Authorization', `Basic ${this.cookieService.get('Authorization')}`);
+        this.cookieService.set('Authorization', this.cookieService.get('Authorization'), 14);
+        return next.handle(req.clone({headers: headers}));
+    }
+}

src/app/shared/twigs.http.service.ts

@@ -8,6 +8,7 @@ import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
 import { environment } from '../../environments/environment';
 import { map } from 'rxjs/operators';
+import { CookieService } from 'ngx-cookie-service';
 
 @Injectable({
   providedIn: 'root'
@@ -15,7 +16,8 @@ import { map } from 'rxjs/operators';
 export class TwigsHttpService implements TwigsService {
 
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
+    private cookieService: CookieService
   ) { }
 
   private options = {
@@ -26,11 +28,14 @@ export class TwigsHttpService implements TwigsService {
 
   // Auth
   login(email: string, password: string): Observable<User> {
-    const params = {
-      'username': email,
-      'password': password
-    };
-    return this.http.post<User>(this.apiUrl + '/users/login', params, this.options);
+    // const params = {
+    //   'username': email,
+    //   'password': password
+    // };
+    // return this.http.post<User>(this.apiUrl + '/users/login', params, this.options);
+    const credentials = btoa(`${email}:${password}`)
+    this.cookieService.set( 'Authorization', credentials, 14);
+    return this.getProfile();
   }
 
   register(username: string, email: string, password: string): Observable<User> {