Login and logout menu display madolities

front/app/src/app/app.component.html

@@ -4,8 +4,6 @@
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark" style="max-width: 200px;">
-        <login></login>
-        <logout></logout>
         <sidenav class="sticky-top"></sidenav>
       </div>
       <div class="col py-3">

front/app/src/app/layout/auth/auth.component.ts

@@ -7,7 +7,10 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 @Component({
   selector: 'login',
   template: `
-      <button class="btn btn-lg btn-outline-primary" (click)="openLoginModal()">Login</button>
+      <button *ngIf="!isAuthenticated" 
+              class="nav-link px-3 w-100" 
+              (click)="openLoginModal()"
+      ><i-bs name="key-fill"/><span class="ms-1 d-none d-sm-inline">Login</span></button>
       <ng-template #loginModal let-modal>
           <div class="modal-header">
               <h4 class="modal-title" id="modal-basic-title">Login</h4>
@@ -20,19 +23,25 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
                     <legend>Login</legend>
                     <div class="form-field">
                         <label>Username:</label>
-                        <input name="username" formControlName="username">
+                        <input class="form-control" name="username" formControlName="username">
                     </div>
                     <div class="form-field">
                         <label>Password:</label>
-                        <input name="password" formControlName="password" 
+                        <input class="form-control" name="password" formControlName="password" 
                                type="password">
                     </div>
                 </fieldset>
+            </form>
+          </div>
+          <div class="modal-footer">
                 <div class="form-buttons">
-                    <button class="button button-primary" 
+                    <button class="btn btn-primary" 
                             (click)="this.login()">Login</button>
                 </div>
-            </form>
+                <div class="form-buttons">
+                    <button class="btn btn-danger" 
+                            (click)="modal.dismiss('Cancel click')">Cancel</button>
+                </div>
           </div>
       </ng-template>
     `
@@ -45,6 +54,8 @@ export class LoginComponent {
 
     form: FormGroup;
 
+    isAuthenticated: boolean = false
+
     constructor(private fb:FormBuilder,
                  private authService: AuthService,
                 private modalService: NgbModal
@@ -57,9 +68,13 @@ export class LoginComponent {
 
         this.authService.onAuthenticationRequired$.subscribe((required: boolean) => {
             if (required) {
-                this.openLoginModal()
+                this.openLoginModal();
             }
         })
+        this.isAuthenticated = this.authService.is_authenticated;
+        this.authService.onIsAuthenticated$.subscribe((isAuthenticated: boolean) => {
+            this.isAuthenticated = isAuthenticated;
+        })
     }
 
     openLoginModal() {
@@ -84,13 +99,21 @@ export class LoginComponent {
 @Component({
   selector: 'logout',
   template: `
-        <button class="btn btn-lg btn-outline-primary" (click)="logout()">Logout</button>
+        <button *ngIf="isAuthenticated" 
+                class="nav-link px-3 w-100" 
+                (click)="logout()"
+        ><i-bs name="door-open-fill"/><span class="ms-1 d-none d-sm-inline">Logout</span></button>
     `
 })
 export class LogoutComponent {
     @Output() logoutSuccess = new EventEmitter()
+    isAuthenticated: boolean = false
 
     constructor(private authService: AuthService) {
+        this.isAuthenticated = this.authService.is_authenticated;
+        this.authService.onIsAuthenticated$.subscribe((isAuthenticated: boolean) => {
+            this.isAuthenticated = isAuthenticated
+        })
     }
 
     logout() {

front/app/src/app/layout/auth/auth.service.ts

@@ -18,9 +18,15 @@ export class AuthService {
     private authenticationRequired = new Subject<boolean>();
     onAuthenticationRequired$ = this.authenticationRequired.asObservable();
 
+    is_authenticated = false;
+    private isAuthenticated = new Subject<boolean>();
+    onIsAuthenticated$ = this.isAuthenticated.asObservable();
+
     constructor(private http: HttpClient,
                 private flashMessage: FlashmessagesService) {
         this.access_token = localStorage.getItem('authtoken')
+        this.is_authenticated = Boolean(this.access_token)
+        this.isAuthenticated.next(this.is_authenticated)
     }
 
     login(username:string, password:string ) {
@@ -36,6 +42,8 @@ export class AuthService {
                 localStorage.setItem('authtoken', v.access_token);
                 this.access_token = v.access_token
                 this.flashMessage.success('Login successful. Welcome ' + username);
+                this.is_authenticated = true;
+                this.isAuthenticated.next(this.is_authenticated)
                 return username
             } ));
     }
@@ -48,6 +56,8 @@ export class AuthService {
                 localStorage.removeItem('authtoken');
                 this.access_token = null;
                 this.flashMessage.success('Logout successful. Goodbye');
+                this.is_authenticated = false;
+                this.isAuthenticated.next(this.is_authenticated)
             } ));
     }
 
@@ -59,5 +69,7 @@ export class AuthService {
         localStorage.removeItem('authtoken');
         this.access_token = null;
         this.authenticationRequired.next(true);
+        this.is_authenticated = false;
+        this.isAuthenticated.next(this.is_authenticated)
     }
 }

front/app/src/app/layout/sidenav/sidenav.component.html

@@ -3,10 +3,14 @@
         <img class="fs-5 d-none d-sm-inline w-100" src="/assets/logo.png" alt="Cooper, Hillman & Toshi LLP">
     </a>
     <ul class="nav nav-pills flex-column align-items-sm-start mb-sm-auto mb-0 w-100" id="menu">
-        <li *ngFor="let item of Menu" class="nav-item w-100">
+        <li><login></login></li>
-            <a class="nav-link px-3 w-100" routerLink="{{item.link}}" [class.active]="is_current_page(item)">
+        <ng-container  *ngIf="isAuthenticated">
-                <i-bs [name]="item.icon"></i-bs><span class="ms-1 d-none d-sm-inline" [innerHTML]="item.title"></span>
+            <li *ngFor="let item of Menu" class="nav-item w-100">
-            </a>
+                <a class="nav-link px-3 w-100" routerLink="{{item.link}}" [class.active]="is_current_page(item)">
-        </li>
+                    <i-bs [name]="item.icon"></i-bs><span class="ms-1 d-none d-sm-inline" [innerHTML]="item.title"></span>
+                </a>
+            </li>
+        </ng-container>
+        <li><logout></logout></li>
     </ul>
 </div>

front/app/src/app/layout/sidenav/sidenav.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { Router } from '@angular/router';
 import { IconNamesEnum } from "ngx-bootstrap-icons";
+import { AuthService } from "../auth/auth.service";
 
 @Component({
     selector: "sidenav",
@@ -41,7 +42,17 @@ export class SidenavComponent {
         },
     ]
 
-    constructor(private router: Router) {}
+    isAuthenticated: boolean = false
+
+    constructor(
+        private router: Router,
+        private authService: AuthService,) {
+
+        this.isAuthenticated = this.authService.is_authenticated;
+        this.authService.onIsAuthenticated$.subscribe((isAuthenticated: boolean) => {
+            this.isAuthenticated = isAuthenticated;
+        })
+    }
 
     is_current_page(menu_item: any) {
         return this.router.url.indexOf(menu_item.link) > -1;