improving frame

src/frontend/app/model/network/authentication.service.ts

@@ -22,7 +22,7 @@ export class AuthenticationService {
   constructor(private _userService: UserService,
               private _networkService: NetworkService,
               private shareService: ShareService) {
-    this.user = new BehaviorSubject(JSON.parse(localStorage.getItem('currentUser')));
+    this.user = new BehaviorSubject(null);
 
     // picking up session..
     if (this.isAuthenticated() === false && Cookie.get(CookieNames.session) != null) {
@@ -52,11 +52,6 @@ export class AuthenticationService {
     window.setTimeout(() => {
       this.user.subscribe((u) => {
         this.shareService.onNewUser(u);
-        if (u !== null) {
-          localStorage.setItem('currentUser', JSON.stringify(u));
-        } else {
-          localStorage.removeItem('currentUser');
-        }
       });
     }, 0);
   }

src/frontend/app/ui/frame/frame.component.css

@@ -70,16 +70,16 @@ app-language {
 }
 
 
-a.dropdown-item {
+a.dropdown-item, button.dropdown-item {
   padding: 0.3rem 1.0rem 0.3rem 0.8rem;
 }
 
-a.dropdown-item span {
+a.dropdown-item span, button.dropdown-item span  {
   padding-right: 0.8rem;
 }
 
 
-a.dropdown-item span.badge {
+a.dropdown-item span.badge, button.dropdown-item span.badge {
   padding: 0.25em 0.4em 0.25rem 0;
   margin-left: -0.8rem;
 }

src/frontend/app/ui/frame/frame.component.html

@@ -1,4 +1,4 @@
-<ng2-slim-loading-bar [color]="'#337ab7'" [height]="'3px'"></ng2-slim-loading-bar>
+<ng2-slim-loading-bar color="#337ab7" height="3px"></ng2-slim-loading-bar>
 <nav class="navbar  navbar-dark bg-dark  navbar-expand-md">
   <a class="navbar-brand" [routerLink]="['/gallery','/']"
      [queryParams]="queryService.getParams()">
@@ -6,7 +6,7 @@
     <strong>{{title}}</strong>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
-          aria-expanded="false" aria-label="Toggle navigation" (click)="toggleState()">
+          aria-expanded="false" aria-label="Toggle navigation" (click)="collapsed = !collapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
 
@@ -32,7 +32,7 @@
       <li class="nav-item ml-2">
         <app-language class="navbar-btn" isDark="true"></app-language>
       </li>
-      <div class="btn-group" dropdown  placement="bottom"
+      <div class="btn-group" dropdown placement="bottom"
            *ngIf="isAdmin() || authenticationRequired">
         <button id="button-alignment" dropdownToggle
                 type="button" class="btn btn-dark dropdown-toggle"
@@ -46,13 +46,13 @@
             role="menu" aria-labelledby="button-alignment">
           <ng-content select="[navbar-menu]"></ng-content>
           <li role="menuitem" *ngIf="isAdmin()">
-            <a class="dropdown-item" href="#" [routerLink]="['/duplicates']">
+            <a class="dropdown-item"  [routerLink]="['/duplicates']">
               <span class="oi oi-layers"></span>
               <ng-container i18n>duplicates</ng-container>
             </a>
           </li>
           <li role="menuitem" *ngIf="isAdmin()">
-            <a class="dropdown-item" href="#" [routerLink]="['/admin']">
+            <a class="dropdown-item" [routerLink]="['/admin']">
               <span class="oi oi-wrench"></span>
               <span *ngIf="notificationService.notifications.length>0"
                     class="badge">{{notificationService.notifications.length}}</span>
@@ -60,10 +60,10 @@
             </a>
           </li>
           <li role="menuitem" *ngIf="authenticationRequired">
-            <a class="dropdown-item"  (click)="logout()">
+            <button class="dropdown-item btn btn-link" (click)="logout()">
               <span class="oi oi-account-logout"></span>
               <ng-container i18n>Logout</ng-container>
-            </a>
+            </button>
           </li>
         </ul>
       </div>

src/frontend/app/ui/frame/frame.component.ts

@@ -17,8 +17,8 @@ import {QueryService} from '../../model/query.service';
 export class FrameComponent {
 
   user: BehaviorSubject<UserDTO>;
-  authenticationRequired = false;
-  public title: string;
+  public readonly authenticationRequired = Config.Client.authenticationRequired;
+  public readonly title = Config.Client.applicationTitle;
   collapsed = true;
   facesEnabled = Config.Client.Faces.enabled;
 
@@ -26,13 +26,8 @@ export class FrameComponent {
               public notificationService: NotificationService,
               public queryService: QueryService) {
     this.user = this._authService.user;
-    this.authenticationRequired = Config.Client.authenticationRequired;
-    this.title = Config.Client.applicationTitle;
   }
 
-  toggleState() { // click handler
-    this.collapsed = !this.collapsed;
-  }
 
   isAdmin() {
     return this.user.value && this.user.value.role >= UserRoles.Admin;

src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.css

@@ -11,17 +11,17 @@
   padding-bottom: 1px;
 }
 
-a.disabled {
+button.disabled {
   /* Make the disabled links grayish*/
   color: gray;
   /* And disable the pointer events */
   pointer-events: none;
 }
 
-a.dropdown-item {
+button.dropdown-item {
   padding:0.3rem 1.0rem 0.3rem 0.8rem;
 }
 
-a.dropdown-item span{
+button.dropdown-item span{
   padding-right: 0.8rem;
 }

src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.html

@@ -1,7 +1,7 @@
-<a class="dropdown-item {{enabled? '' : 'disabled'}}" href="#" (click)="openModal(randomModal)">
+<button class="dropdown-item {{enabled? '' : 'disabled'}}" (click)="openModal(randomModal)">
   <span class="oi oi-random"></span>
   <ng-container i18n>Random link</ng-container>
-</a>
+</button>
 
 <ng-template #randomModal>
   <!-- sharing Modal-->