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

3 files changed, 120 insertions, 0 deletions

diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
new file mode 100644
index 000000000..8ee83e7dc
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -0,0 +1,19 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Settings</h4>
+  </div>
+  
+  <div class="modal-body">
+    <div i18n class="mb-4 quick-settings-title">Display settings</div>
+
+    <my-account-video-settings *ngIf="!isUserLoggedIn()" [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true">
+      <ng-container ngProjectAs="inner-title">
+        <div i18n class="mb-4 mt-4 quick-settings-title">Video settings</div>
+      </ng-container>
+    </my-account-video-settings>
+
+    <div i18n class="mb-4 mt-4 quick-settings-title">Interface settings</div>
+
+    <my-account-interface-settings *ngIf="!isUserLoggedIn()" [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true"></my-account-interface-settings>
+  </div>
+</ng-template>
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
new file mode 100644
index 000000000..ef21542f3
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.scss
@@ -0,0 +1,39 @@
+@import '_mixins';
+
+.modal-button {
+  @include disable-default-a-behaviour;
+  transform: translateY(2px);
+
+  button {
+    @include peertube-button;
+    @include grey-button;
+    @include button-with-icon(18px, 4px, -1px);
+
+    my-global-icon {
+      @include apply-svg-color(#585858);
+    }
+  }
+
+  & + .modal-button {
+    margin-left: 1rem;
+  }
+}
+
+.icon {
+  @include disable-outline;
+  @include icon(22px);
+  opacity: 0.6;
+  margin-left: -1px;
+
+  &.icon-shortcuts  {
+    position: relative;
+    top: -1px;
+    margin-right: 4px;
+
+    background-image: url('../../assets/images/menu/keyboard.png');
+  }
+}
+
+.quick-settings-title {
+  @include in-content-small-title;
+}
\ No newline at end of file
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()
+  }
+}