Fixed up logic, now on login, we restore if you're already logged in and we redirect you to libraries page.

package-lock.json

@@ -7657,6 +7657,11 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ngx-bootstrap": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-6.2.0.tgz",
+      "integrity": "sha512-5WKHo6/ltkenw4UyXZwED8rODCgp2RGbWurzYzZsF/gH1JO5SN7TJ+AL6kXYk6XM42sDA2WhN9Db+ZPNjiyHnA=="
+    },
     "ngx-toastr": {
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-13.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "bootstrap": "^4.5.0",
     "font-awesome": "^4.7.0",
+    "ngx-bootstrap": "^6.2.0",
     "ngx-toastr": "^13.2.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

src/app/_services/account.service.ts

@@ -16,7 +16,8 @@ export class AccountService {
   private currentUserSource = new ReplaySubject<User>(1);
   currentUser$ = this.currentUserSource.asObservable(); // $ at end is because this is observable
 
-  constructor(private httpClient: HttpClient) { }
+  constructor(private httpClient: HttpClient) { 
+  }
 
   login(model: any): Observable<any> {
     return this.httpClient.post<User>(this.baseUrl + 'account/login', model).pipe(

src/app/app.component.ts

@@ -1,10 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { User } from './_models/user';
+import { AccountService } from './_services/account.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
-  title = 'kavita-webui';
+
+  constructor(private accountService: AccountService) {  }
+
+  ngOnInit(): void {
+    this.setCurrentUser();
+  }
+
+
+  setCurrentUser() {
+    const userString = localStorage.getItem('user');
+    if (userString !== '' || localStorage.getItem('user') !== undefined) {
+      const user: User = JSON.parse(userString + '');
+      this.accountService.setCurrentUser(user);
+    }
+  }
 }

src/app/home/home.component.html

@@ -4,6 +4,14 @@
     <ng-container *ngIf="firstTimeFlow">
         <!-- NOTE: We don't need a first time user flow. We just need a simple component to register a new admin. Once registered, we can put them on admin/ route -->
         <p>Please create an admin account for yourself to start your reading journey.</p>
+        <div class="text-warning">
+            <p>Error:</p>
+            <ul>
+                <!-- <li *ngFor="let error of errors">
+                    {{error}}
+                </li> -->
+            </ul>
+        </div>
         <form [formGroup]="registerForm" (ngSubmit)="register()">
             <div class="form-group">
                 <label>Username</label>

src/app/home/home.component.ts

@@ -26,10 +26,18 @@ export class HomeComponent implements OnInit {
 
   ngOnInit(): void {
 
+    // TODO: Clean up this logic
+    this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
+      if (user) {
+        // User is logged in, redirect to libraries
+        this.router.navigateByUrl('/library');
+      } else {
         this.memberService.getMembers().subscribe(members => {
           this.firstTimeFlow = members.filter(m => m.isAdmin).length === 0;
           console.log('First time user flow: ', this.firstTimeFlow);
         });
+      }
+    });
 
   }
 
@@ -41,6 +49,7 @@ export class HomeComponent implements OnInit {
       this.router.navigateByUrl('/library');
     }, err => {
       console.log('validation errors from interceptor', err);
+      //this.errors = err;
     });
   }
 

src/app/nav-header/nav-header.component.html

@@ -13,9 +13,10 @@
 
       <!-- TODO: Put SignalR notification button dropdown here. -->
 
-      <div class="dropdown" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
+      <div class=" nav-item dropdown" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
         <a dropdownToggle class="dropdown-toggle text-light ml-2">{{user.username | titlecase}}</a>
         <div class="dropdown-menu mt-3" *dropdownMenu>
+          <a *ngIf="user.isAdmin" class="dropdown-item" routerLink="/admin/users">Logout</a>
           <a (click)="logout()" class="dropdown-item">Logout</a>
         </div>
       </div>

src/app/user-login/user-login.component.html

@@ -14,7 +14,6 @@
                 </div>
                 
                 <div class="pull-right">
-                    <button class="btn btn-secondary mr-3" type="button" (click)="cancel()">Cancel</button>
                     <button class="btn btn-primary" type="submit">Login</button>
                 </div>
                 

src/app/user-login/user-login.component.ts

@@ -31,10 +31,4 @@ export class UserLoginComponent implements OnInit {
     });
   }
 
-  cancel() {
-    this.loginForm.reset();
-    // Goes back to previous router state (using back in history)
-    //this.router.p
-  }
-
 }