From 7dca45f99db58d9bb3423a3765aaee68c69bc9f2 Mon Sep 17 00:00:00 2001 From: Ms Kimsible <1877318+kimsible@users.noreply.github.com> Date: Thu, 26 Aug 2021 08:22:33 +0200 Subject: 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 --- CREDITS.md | 2 +- .../my-video-channels.component.html | 2 + .../my-video-playlists.component.html | 2 + .../+videos/+video-edit/video-add.component.html | 2 + client/src/app/app.component.html | 5 +- client/src/app/app.component.ts | 2 + client/src/app/app.module.ts | 2 + .../app/modal/account-setup-modal.component.html | 33 ++++++++++ .../app/modal/account-setup-modal.component.scss | 31 ++++++++++ .../src/app/modal/account-setup-modal.component.ts | 70 ++++++++++++++++++++++ .../shared/shared-icons/global-icon.component.ts | 1 + .../misc/channels-setup-message.component.html | 8 +++ .../misc/channels-setup-message.component.scss | 32 ++++++++++ .../misc/channels-setup-message.component.ts | 32 ++++++++++ client/src/app/shared/shared-main/misc/index.ts | 1 + .../app/shared/shared-main/shared-main.module.ts | 10 +++- client/src/assets/images/misc/tip.svg | 1 + 17 files changed, 232 insertions(+), 4 deletions(-) create mode 100644 client/src/app/modal/account-setup-modal.component.html create mode 100644 client/src/app/modal/account-setup-modal.component.scss create mode 100644 client/src/app/modal/account-setup-modal.component.ts create mode 100644 client/src/app/shared/shared-main/misc/channels-setup-message.component.html create mode 100644 client/src/app/shared/shared-main/misc/channels-setup-message.component.scss create mode 100644 client/src/app/shared/shared-main/misc/channels-setup-message.component.ts create mode 100644 client/src/assets/images/misc/tip.svg diff --git a/CREDITS.md b/CREDITS.md index 6cc369482..5de12d2cb 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -526,7 +526,7 @@ # Icons * [Feather Icons](https://feathericons.com) (MIT) - * `playlist add`, `history`, `subscriptions`, `miscellaneous-services.svg` by Material UI (Apache 2.0) + * `playlist add`, `history`, `subscriptions`, `miscellaneous-services.svg`, `tip` by Material UI (Apache 2.0) * `support` by Chocobozzz (CC-BY) * `language` by Aaron Jin (CC-BY) * `video-language` by Rigel Kent (CC-BY) diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html index 9f139b4f2..4c5b46d5b 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html @@ -4,6 +4,8 @@ {{ totalItems }} + +
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html index 7f5b8bbf4..25b742bff 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html @@ -3,6 +3,8 @@ My playlists {{ pagination.totalItems }} + +
diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html index b056c6e7a..62b42ae10 100644 --- a/client/src/app/+videos/+video-edit/video-add.component.html +++ b/client/src/app/+videos/+video-edit/video-add.component.html @@ -45,6 +45,8 @@ Upload {{ videoName }}
+ +
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 108b127be..da66e4ef0 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -60,9 +60,10 @@ - + + - + diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index dcc1f259f..4d5a9f75f 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -20,6 +20,7 @@ import { PluginService } from '@app/core/plugins/plugin.service' import { CustomModalComponent } from '@app/modal/custom-modal.component' import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component' import { WelcomeModalComponent } from '@app/modal/welcome-modal.component' +import { AccountSetupModalComponent } from '@app/modal/account-setup-modal.component' import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap' import { LoadingBarService } from '@ngx-loading-bar/core' import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' @@ -37,6 +38,7 @@ import { InstanceService } from './shared/shared-instance' export class AppComponent implements OnInit, AfterViewInit { private static BROADCAST_MESSAGE_KEY = 'app-broadcast-message-dismissed' + @ViewChild('accountSetupModal') accountSetupModal: AccountSetupModalComponent @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent @ViewChild('customModal') customModal: CustomModalComponent diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index dfdccbe69..8d9c39ad8 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -18,6 +18,7 @@ import { CustomModalComponent } from './modal/custom-modal.component' import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component' import { QuickSettingsModalComponent } from './modal/quick-settings-modal.component' import { WelcomeModalComponent } from './modal/welcome-modal.component' +import { AccountSetupModalComponent } from './modal/account-setup-modal.component' import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module' import { SharedFormModule } from './shared/shared-forms' import { SharedGlobalIconModule } from './shared/shared-icons' @@ -53,6 +54,7 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS SuggestionComponent, HighlightPipe, + AccountSetupModalComponent, CustomModalComponent, WelcomeModalComponent, InstanceConfigWarningModalComponent, 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 @@ + +
+

Welcome to {{ instanceName }}, dear user!

+ +
+ +
+ mascot + +
It's time to set up your account profile!
+ +

Help moderators and other users to know who you are by:

+ +
    +
  • Uploading an avatar
    • +
  • Writing a description
    • +
+
+ +
+ + + + Set up + +
+ + 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' + }) + } +} 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 @@ +
+ + +
+
Some of your channels are not fully set up. Make them welcoming and explicit about what you publish by adding a banner, an avatar and a description.
+ Set up my channels +
+
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, diff --git a/client/src/assets/images/misc/tip.svg b/client/src/assets/images/misc/tip.svg new file mode 100644 index 000000000..4b7d7543c --- /dev/null +++ b/client/src/assets/images/misc/tip.svg @@ -0,0 +1 @@ + -- cgit v1.2.3