Add visitor settings, rework logged-in dropdown (#2514)

* Add visitor settings, rework logged-in dropdown

* Make user dropdown P2P switch functional

* Fix lint

* Fix unnecessary notification when user logs out

* Simplify visitor settings code and remove unnecessary icons

* Catch parsing errors and reindent menu styles

1 files changed, 62 insertions, 0 deletions

diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
new file mode 100644
index 000000000..41d6c9f47
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -0,0 +1,62 @@
+import { Component, ViewChild, OnInit } from '@angular/core'
+import { AuthService, AuthStatus } from '@app/core'
+import { FormReactive, FormValidatorService, UserService, User } from '@app/shared'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { ReplaySubject } from 'rxjs'
+import { LocalStorageService } from '@app/shared/misc/storage.service'
+import { filter } from 'rxjs/operators'
+
+@Component({
+  selector: 'my-quick-settings',
+  templateUrl: './quick-settings-modal.component.html',
+  styleUrls: [ './quick-settings-modal.component.scss' ]
+})
+export class QuickSettingsModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  user: User
+  userInformationLoaded = new ReplaySubject<boolean>(1)
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private userService: UserService,
+    private authService: AuthService,
+    private localStorageService: LocalStorageService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.user = this.userService.getAnonymousUser()
+    this.localStorageService.watch().subscribe(
+      () => this.user = this.userService.getAnonymousUser()
+    )
+    this.userInformationLoaded.next(true)
+
+    this.authService.loginChangedSource
+      .pipe(filter(status => status !== AuthStatus.LoggedIn))
+      .subscribe(
+        () => {
+          this.user = this.userService.getAnonymousUser()
+          this.userInformationLoaded.next(true)
+        }
+      )
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+  }
+
+  hide () {
+    this.openedModal.close()
+    this.form.reset()
+  }
+}