Inform user to fill account profile and channels (#4352)

* Add account-setup modal when login

* Add channels-setup alert into my-channels, my-playlists and upload page

Co-authored-by: Ms Kimsible <kimsible@users.noreply.github.com>

1 files changed, 70 insertions, 0 deletions

diff --git a/client/src/app/modal/account-setup-modal.component.ts b/client/src/app/modal/account-setup-modal.component.ts
new file mode 100644
index 000000000..e5d36e006
--- /dev/null
+++ b/client/src/app/modal/account-setup-modal.component.ts
@@ -0,0 +1,70 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { AuthService, ServerService, User } from '@app/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { HTMLServerConfig } from '@shared/models'
+
+@Component({
+  selector: 'my-account-setup-modal',
+  templateUrl: './account-setup-modal.component.html',
+  styleUrls: [ './account-setup-modal.component.scss' ]
+})
+export class AccountSetupModalComponent implements OnInit {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  user: User = null
+  ref: NgbModalRef = null
+
+  private serverConfig: HTMLServerConfig
+
+  constructor (
+    private authService: AuthService,
+    private modalService: NgbModal,
+    private serverService: ServerService
+  ) { }
+
+  get userInformationLoaded () {
+    return this.authService.userInformationLoaded
+  }
+
+  get instanceName () {
+    return this.serverConfig.instance.name
+  }
+
+  get isUserRoot () {
+    return this.user.username === 'root'
+  }
+
+  get hasAccountAvatar () {
+    return !!this.user.account.avatar
+  }
+
+  get hasAccountDescription () {
+    return !!this.user.account.description
+  }
+
+  ngOnInit () {
+    this.serverConfig = this.serverService.getHTMLConfig()
+    this.user = this.authService.getUser()
+
+    this.authService.userInformationLoaded
+      .subscribe(
+        () => {
+          if (this.isUserRoot) return false
+          if (this.hasAccountAvatar && this.hasAccountDescription) return false
+
+          this.show()
+        }
+      )
+  }
+
+  show () {
+    if (this.ref) return false
+
+    this.ref = this.modalService.open(this.modal, {
+      centered: true,
+      backdrop: 'static',
+      keyboard: false,
+      size: 'md'
+    })
+  }
+}