Fixed bug that prevented migrations from succeeding

Added scaffolding required for jwt authentication for certain routes

Added logger to auth_api

Added necessary routing rules for multi-user mode

Registration is now possible

src/app/components/login/login.component.html

@@ -1,14 +1,14 @@
 <mat-card class="login-card">
-    <mat-tab-group>
+    <mat-tab-group [(selectedIndex)]="selectedTabIndex">
         <mat-tab label="Login">
             <div style="margin-top: 10px;">
                 <mat-form-field>
-                    <input [(ngModel)]="usernameInput" matInput placeholder="User name">
+                    <input [(ngModel)]="loginUsernameInput" matInput placeholder="User name">
                 </mat-form-field>
             </div>
             <div>
                 <mat-form-field>
-                    <input [(ngModel)]="passwordInput" type="password" matInput placeholder="Password">
+                    <input [(ngModel)]="loginPasswordInput" type="password" matInput placeholder="Password">
                 </mat-form-field>
             </div>
             <div style="margin-bottom: 10px; margin-top: 10px;">
@@ -16,7 +16,24 @@
             </div>
         </mat-tab>
         <mat-tab *ngIf="registrationEnabled" label="Register">
-
+            <div style="margin-top: 10px;">
+                <mat-form-field>
+                    <input [(ngModel)]="registrationUsernameInput" matInput placeholder="User name">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input [(ngModel)]="registrationPasswordInput" type="password" matInput placeholder="Password">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input [(ngModel)]="registrationPasswordConfirmationInput" type="password" matInput placeholder="Confirm Password">
+                </mat-form-field>
+            </div>
+            <div style="margin-bottom: 10px; margin-top: 10px;">
+                <button [disabled]="registering" color="primary" (click)="register()" mat-raised-button>Register</button>
+            </div>
         </mat-tab>
     </mat-tab-group>
 </mat-card>

src/app/components/login/login.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { PostsService } from 'app/posts.services';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
@@ -8,24 +10,82 @@ import { PostsService } from 'app/posts.services';
 })
 export class LoginComponent implements OnInit {
 
-  usernameInput = '';
-  passwordInput = '';
-  registrationEnabled = true;
+  selectedTabIndex = 0;
+
+  // login
+  loginUsernameInput = '';
+  loginPasswordInput = '';
   loggingIn = false;
 
-  constructor(private postsService: PostsService) { }
+  // registration
+  registrationEnabled = true;
+  registrationUsernameInput = '';
+  registrationPasswordInput = '';
+  registrationPasswordConfirmationInput = '';
+  registering = false;
+
+  constructor(private postsService: PostsService, private snackBar: MatSnackBar, private router: Router) { }
 
   ngOnInit(): void {
+    if (this.postsService.isLoggedIn) {
+      this.router.navigate(['/home']);
+    }
   }
 
   login() {
     this.loggingIn = true;
-    this.postsService.login(this.usernameInput, this.passwordInput).subscribe(res => {
+    this.postsService.login(this.loginUsernameInput, this.loginPasswordInput).subscribe(res => {
       this.loggingIn = false;
-      console.log(res);
     }, err => {
       this.loggingIn = false;
     });
   }
 
+  register() {
+    if (!this.registrationUsernameInput || this.registrationUsernameInput === '') {
+      this.openSnackBar('User name is required!');
+      return;
+    }
+
+    if (!this.registrationPasswordInput || this.registrationPasswordInput === '') {
+      this.openSnackBar('Password is required!');
+      return;
+    }
+
+    if (!this.registrationPasswordConfirmationInput || this.registrationPasswordConfirmationInput === '') {
+      this.openSnackBar('Password confirmation is required!');
+      return;
+    }
+
+    if (this.registrationPasswordInput !== this.registrationPasswordConfirmationInput) {
+      this.openSnackBar('Password confirmation is incorrect!');
+      return;
+    }
+
+    this.registering = true;
+    this.postsService.register(this.registrationUsernameInput, this.registrationPasswordInput).subscribe(res => {
+      this.registering = false;
+      if (res && res['user']) {
+        this.openSnackBar(`User ${res['user']['name']} successfully registered.`);
+        this.loginUsernameInput = res['user']['name'];
+        this.selectedTabIndex = 0;
+      } else {
+
+      }
+    }, err => {
+      this.registering = false;
+      if (err && err.error && typeof err.error === 'string') {
+        this.openSnackBar(err.error);
+      } else {
+        console.log(err);
+      }
+    });
+  }
+
+  public openSnackBar(message: string, action: string = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
 }

src/app/posts.services.ts

@@ -9,6 +9,7 @@ import { Router, CanActivate } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { BehaviorSubject } from 'rxjs';
 import { v4 as uuid } from 'uuid';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable()
 export class PostsService implements CanActivate {
@@ -25,13 +26,15 @@ export class PostsService implements CanActivate {
     session_id = null;
     httpOptions = null;
     http_params: string = null;
+    unauthorized = false;
 
     debugMode = false;
 
     isLoggedIn = false;
     token = null;
     user = null;
-    constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document) {
+    constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document,
+                public snackBar: MatSnackBar) {
         console.log('PostsService Initialized...');
         // this.startPath = window.location.href + '/api/';
         // this.startPathSSL = window.location.href + '/api/';
@@ -49,10 +52,24 @@ export class PostsService implements CanActivate {
               fromString: this.http_params
             }),
         };
+
+        // login stuff
+
+        if (localStorage.getItem('jwt_token')) {
+            this.token = localStorage.getItem('jwt_token');
+            this.httpOptions = {
+                params: new HttpParams({
+                  fromString: `apiKey=${this.auth_token}&jwt=${this.token}`
+                }),
+            };
+            this.jwtAuth();
+        }
     }
-    canActivate(route, state): boolean {
+    canActivate(route, state): Promise<boolean> {
+        return new Promise(resolve => {
+            resolve(true);
+        })
         console.log(route);
-        return true;
         throw new Error('Method not implemented.');
     }
 
@@ -271,11 +288,17 @@ export class PostsService implements CanActivate {
         this.user = user;
         this.token = token;
 
+        localStorage.setItem('jwt_token', this.token);
+
         this.httpOptions = {
             params: new HttpParams({
               fromString: `apiKey=${this.auth_token}&jwt=${this.token}`
             }),
         };
+
+        if (this.router.url === '/login') {
+            this.router.navigate(['/home']);
+        }
     }
 
     // user methods
@@ -289,4 +312,56 @@ export class PostsService implements CanActivate {
         return call;
     }
 
+    // user methods
+    jwtAuth() {
+        const call = this.http.post(this.path + 'auth/jwtAuth', {}, this.httpOptions);
+        call.subscribe(res => {
+            if (res['token']) {
+                this.afterLogin(res['user'], res['token']);
+            }
+        }, err => {
+            if (err.status === 401) {
+                this.sendToLogin();
+            }
+        });
+        return call;
+    }
+
+    logout() {
+        this.user = null;
+        this.isLoggedIn = false;
+        localStorage.setItem('jwt_token', null);
+    }
+
+    // user methods
+    register(username, password) {
+        const call = this.http.post(this.path + 'auth/register', {userid: username,
+                                                                username: username,
+                                                                password: password}, this.httpOptions);
+        /*call.subscribe(res => {
+            console.log(res['user']);
+            if (res['user']) {
+                // this.afterRegistration(res['user']);
+            }
+        });*/
+        return call;
+    }
+
+    sendToLogin() {
+        if (this.router.url === '/login') {
+            return;
+        }
+
+        this.router.navigate(['/login']);
+
+        // send login notification
+        this.openSnackBar('You must log in to access this page!');
+    }
+
+    public openSnackBar(message: string, action: string = '') {
+        this.snackBar.open(message, action, {
+          duration: 2000,
+        });
+    }
+
 }