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, 33 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>