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>

3 files changed, 134 insertions, 0 deletions

diff --git a/client/src/app/modal/account-setup-modal.component.html b/client/src/app/modal/account-setup-modal.component.html
new file mode 100644
index 000000000..55bae78bf
--- /dev/null
+++ b/client/src/app/modal/account-setup-modal.component.html
@@ -0,0 +1,33 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Welcome to {{ instanceName }}, dear user!</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <img class="mascot" src="/client/assets/images/mascot/happy.svg" alt="mascot">
+
+    <div i18n class="subtitle">It's time to set up your account profile!</div>
+
+    <p i18n>Help moderators and other users to know <strong>who you are</strong> by:</p>
+
+    <ul>
+      <li *ngIf="!hasAccountAvatar" i18n>Uploading an <strong>avatar</strong></li>
+      <li *ngIf="!hasAccountDescription" i18n>Writing a <strong>description</strong></li>
+    </ul>
+  </div>
+
+  <div class="modal-footer inputs">
+    <input
+      type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
+      (click)="hide()" (key.enter)="hide()"
+    >
+
+    <a i18n (click)="hide()" (key.enter)="hide()"
+       class="peertube-button-link orange-button" routerLink="/my-account"
+       rel="noopener noreferrer" ngbAutofocus>
+      Set up
+    </a>
+  </div>
+
+</ng-template>
diff --git a/client/src/app/modal/account-setup-modal.component.scss b/client/src/app/modal/account-setup-modal.component.scss
new file mode 100644
index 000000000..405f29d65
--- /dev/null
+++ b/client/src/app/modal/account-setup-modal.component.scss
@@ -0,0 +1,31 @@
+@use '_mixins' as *;
+@use '_variables' as *;
+
+.modal-body {
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.mascot-fw {
+  width: 170px;
+}
+
+.mascot {
+  @include margin-right(2rem);
+
+  display: block;
+  min-width: 170px;
+}
+
+.subtitle {
+  font-weight: $font-semibold;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+li {
+  margin-bottom: 10px;
+}
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'
+    })
+  }
+}