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>

6 files changed, 83 insertions, 1 deletions

diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 70d672306..a4c62c234 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -16,6 +16,7 @@ const icons = {
   'playlist-add': require('!!raw-loader?!../../../assets/images/misc/playlist-add.svg').default, // material ui
   follower: require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
   following: require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
+  tip: require('!!raw-loader?!../../../assets/images/misc/tip.svg').default, // material ui
   flame: require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
   local: require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
 
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.html b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
new file mode 100644
index 000000000..3f94fa04c
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.html
@@ -0,0 +1,8 @@
+<div *ngIf="hasChannelNotConfigured" class="channels-setup-message alert alert-info">
+  <my-global-icon iconName="tip"></my-global-icon>
+
+  <div>  
+    <div i18n>Some of your channels are not fully set up. Make them welcoming and explicit about what you publish by adding a <strong>banner</strong>, an <strong>avatar</strong> and a <strong>description</strong>.</div>
+    <a *ngIf="!hideLink" class="channels-settings-link" routerLink="/my-library/video-channels" i18n>Set up my channels</a>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
new file mode 100644
index 000000000..7dcba2ca5
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -0,0 +1,32 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.channels-setup-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  my-global-icon {
+    width: 32px;
+    align-self: flex-start;
+
+    ::ng-deep {
+      svg {
+        fill: #0c5460;
+      }
+    }
+
+    + div {
+      margin-left: 10px;
+      text-align: center;
+
+      a.channels-settings-link {
+        @include peertube-button-link;
+        @include grey-button;
+
+        height: fit-content;
+        margin-top: 10px;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts b/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts
new file mode 100644
index 000000000..50b98841a
--- /dev/null
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.ts
@@ -0,0 +1,32 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService, User } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+
+@Component({
+  selector: 'my-channels-setup-message',
+  templateUrl: './channels-setup-message.component.html',
+  styleUrls: [ './channels-setup-message.component.scss' ]
+})
+export class ChannelsSetupMessageComponent implements OnInit {
+  @Input() hideLink = false
+
+  user: User = null
+
+  constructor (
+    private authService: AuthService
+  ) {}
+
+  get userInformationLoaded () {
+    return this.authService.userInformationLoaded
+  }
+
+  get hasChannelNotConfigured () {
+    return this.user.videoChannels
+      .filter((channel: VideoChannel) => (!channel.avatar || !channel.description))
+      .length > 0
+  }
+
+  ngOnInit () {
+    this.user = this.authService.getUser()
+  }
+}
diff --git a/client/src/app/shared/shared-main/misc/index.ts b/client/src/app/shared/shared-main/misc/index.ts
index dc8ef9754..24134d7cd 100644
--- a/client/src/app/shared/shared-main/misc/index.ts
+++ b/client/src/app/shared/shared-main/misc/index.ts
@@ -1,3 +1,4 @@
+export * from './channels-setup-message.component'
 export * from './help.component'
 export * from './list-overflow.component'
 export * from './top-menu-dropdown.component'
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index e5dfc59b2..80d0a84f3 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,13 @@ import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
-import { HelpComponent, ListOverflowComponent, SimpleSearchInputComponent, TopMenuDropdownComponent } from './misc'
+import {
+  ChannelsSetupMessageComponent,
+  HelpComponent,
+  ListOverflowComponent,
+  SimpleSearchInputComponent,
+  TopMenuDropdownComponent
+} from './misc'
 import { PluginPlaceholderComponent } from './plugins'
 import { ActorRedirectGuard } from './router'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
@@ -91,6 +97,7 @@ import { VideoChannelService } from './video-channel'
     LoaderComponent,
     SmallLoaderComponent,
 
+    ChannelsSetupMessageComponent,
     HelpComponent,
     ListOverflowComponent,
     TopMenuDropdownComponent,
@@ -146,6 +153,7 @@ import { VideoChannelService } from './video-channel'
     LoaderComponent,
     SmallLoaderComponent,
 
+    ChannelsSetupMessageComponent,
     HelpComponent,
     ListOverflowComponent,
     TopMenuDropdownComponent,