Allow accounts to skip account setup modal

client/src/app/app.component.html

@@ -61,8 +61,8 @@ <h3>{{ message.summary }}</h3>
 </p-toast>
 
 <ng-container *ngIf="isUserLoggedIn()">
-  <my-account-setup-modal #accountSetupModal></my-account-setup-modal>
-  <my-welcome-modal #welcomeModal></my-welcome-modal>
+  <my-account-setup-warning-modal #accountSetupWarningModal></my-account-setup-warning-modal>
+  <my-admin-welcome-modal #adminWelcomeModal></my-admin-welcome-modal>
   <my-instance-config-warning-modal #instanceConfigWarningModal></my-instance-config-warning-modal>
 </ng-container>
 

client/src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { filter, map, switchMap } from 'rxjs/operators'
+import { forkJoin } from 'rxjs'
+import { filter, first, map } from 'rxjs/operators'
 import { DOCUMENT, getLocaleDirection, PlatformLocation } from '@angular/common'
 import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
@@ -17,15 +18,15 @@ import {
 } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PluginService } from '@app/core/plugins/plugin.service'
+import { AccountSetupWarningModalComponent } from '@app/modal/account-setup-warning-modal.component'
 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 { AdminWelcomeModalComponent } from '@app/modal/admin-welcome-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'
 import { getShortLocale } from '@shared/core-utils/i18n'
-import { BroadcastMessageLevel, HTMLServerConfig, ServerConfig, UserRole } from '@shared/models'
+import { BroadcastMessageLevel, HTMLServerConfig, UserRole } from '@shared/models'
 import { MenuService } from './core/menu/menu.service'
 import { POP_STATE_MODAL_DISMISS } from './helpers'
 import { InstanceService } from './shared/shared-instance'
@@ -38,8 +39,8 @@ 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('accountSetupWarningModal') accountSetupWarningModal: AccountSetupWarningModalComponent
+  @ViewChild('adminWelcomeModal') adminWelcomeModal: AdminWelcomeModalComponent
   @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent
   @ViewChild('customModal') customModal: CustomModalComponent
 
@@ -221,33 +222,41 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   private openModalsIfNeeded () {
-    this.authService.userInformationLoaded
-        .pipe(
-          map(() => this.authService.getUser()),
-          filter(user => user.role === UserRole.ADMINISTRATOR),
-          switchMap(user => {
-            return this.serverService.getConfig()
-              .pipe(map(serverConfig => ({ serverConfig, user })))
-          })
-        ).subscribe(({ serverConfig, user }) => this._openAdminModalsIfNeeded(serverConfig, user))
+    const userSub = this.authService.userInformationLoaded
+        .pipe(map(() => this.authService.getUser()))
+
+    // Admin modal
+    userSub.pipe(
+      filter(user => user.role === UserRole.ADMINISTRATOR)
+    ).subscribe(user => this.openAdminModalsIfNeeded(user))
+
+    // Account modal
+    userSub.pipe(
+      filter(user => user.role !== UserRole.ADMINISTRATOR)
+    ).subscribe(user => this.openAccountModalsIfNeeded(user))
   }
 
-  private _openAdminModalsIfNeeded (serverConfig: ServerConfig, user: User) {
-    if (user.noWelcomeModal !== true) return this.welcomeModal.show()
-
-    if (user.noInstanceConfigWarningModal === true || !serverConfig.signup.allowed) return
-
-    this.instanceService.getAbout()
-      .subscribe(about => {
-        if (
-          this.serverConfig.instance.name.toLowerCase() === 'peertube' ||
-          !about.instance.terms ||
-          !about.instance.administrator ||
-          !about.instance.maintenanceLifetime
-        ) {
-          this.instanceConfigWarningModal.show(about)
-        }
-      })
+  private openAdminModalsIfNeeded (user: User) {
+    if (this.adminWelcomeModal.shouldOpen(user)) {
+      return this.adminWelcomeModal.show()
+    }
+
+    if (!this.instanceConfigWarningModal.shouldOpenByUser(user)) return
+
+    forkJoin([
+      this.serverService.getConfig().pipe(first()),
+      this.instanceService.getAbout().pipe(first())
+    ]).subscribe(([ config, about ]) => {
+      if (this.instanceConfigWarningModal.shouldOpen(config, about)) {
+        this.instanceConfigWarningModal.show(about)
+      }
+    })
+  }
+
+  private openAccountModalsIfNeeded (user: User) {
+    if (this.accountSetupWarningModal.shouldOpen(user)) {
+      this.accountSetupWarningModal.show(user)
+    }
   }
 
   private initHotkeys () {

client/src/app/app.module.ts

@@ -17,8 +17,8 @@ import { ConfirmComponent } from './modal/confirm.component'
 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 { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
+import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-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'
@@ -54,9 +54,9 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS
     SuggestionComponent,
     HighlightPipe,
 
-    AccountSetupModalComponent,
+    AccountSetupWarningModalComponent,
     CustomModalComponent,
-    WelcomeModalComponent,
+    AdminWelcomeModalComponent,
     InstanceConfigWarningModalComponent,
     ConfirmComponent
   ],

client/src/app/core/users/user.model.ts

@@ -55,6 +55,7 @@ export class User implements UserServerModel {
 
   noInstanceConfigWarningModal: boolean
   noWelcomeModal: boolean
+  noAccountSetupWarningModal: boolean
 
   pluginAuth: string | null
 
@@ -98,6 +99,7 @@ export class User implements UserServerModel {
 
     this.noInstanceConfigWarningModal = hash.noInstanceConfigWarningModal
     this.noWelcomeModal = hash.noWelcomeModal
+    this.noAccountSetupWarningModal = hash.noAccountSetupWarningModal
 
     this.notificationSettings = hash.notificationSettings
 

client/src/app/modal/account-setup-modal.component.html → client/src/app/modal/account-setup-warning-modal.component.html

@@ -12,12 +12,18 @@ <h4 i18n class="modal-title">Welcome to {{ instanceName }}, dear user!</h4>
     <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>
+      <li *ngIf="!hasAccountAvatar(user)" i18n>Uploading an <strong>avatar</strong></li>
+      <li *ngIf="!hasAccountDescription(user)" i18n>Writing a <strong>description</strong></li>
     </ul>
   </div>
 
   <div class="modal-footer inputs">
+    <my-peertube-checkbox
+      inputName="stopDisplayModal" [(ngModel)]="stopDisplayModal"
+      i18n-labelText labelText="Don't show me this anymore"
+    >
+    </my-peertube-checkbox>
+
     <input
       type="button" role="button" i18n-value value="Remind me later" class="peertube-button grey-button"
       (click)="hide()" (key.enter)="hide()"

client/src/app/modal/account-setup-warning-modal.component.ts

@@ -0,0 +1,79 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Notifier, ServerService, User, UserService } from '@app/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
+
+@Component({
+  selector: 'my-account-setup-warning-modal',
+  templateUrl: './account-setup-warning-modal.component.html',
+  styleUrls: [ './account-setup-warning-modal.component.scss' ]
+})
+export class AccountSetupWarningModalComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  stopDisplayModal = false
+  ref: NgbModalRef
+
+  user: User
+
+  private LOCAL_STORAGE_KEYS = {
+    NO_ACCOUNT_SETUP_WARNING_MODAL: 'no_account_setup_warning_modal'
+  }
+
+  constructor (
+    private userService: UserService,
+    private modalService: NgbModal,
+    private notifier: Notifier,
+    private serverService: ServerService
+  ) { }
+
+  get instanceName () {
+    return this.serverService.getHTMLConfig().instance.name
+  }
+
+  hasAccountAvatar (user: User) {
+    return !!user.account.avatar
+  }
+
+  hasAccountDescription (user: User) {
+    return !!user.account.description
+  }
+
+  shouldOpen (user: User) {
+    if (user.noAccountSetupWarningModal === true) return false
+    if (peertubeLocalStorage.getItem(this.LOCAL_STORAGE_KEYS.NO_ACCOUNT_SETUP_WARNING_MODAL) === 'true') return false
+
+    if (this.hasAccountAvatar(user) && this.hasAccountDescription(user)) return false
+    if (this.userService.hasSignupInThisSession()) return false
+
+    return true
+  }
+
+  show (user: User) {
+    this.user = user
+
+    if (this.ref) return
+
+    this.ref = this.modalService.open(this.modal, {
+      centered: true,
+      backdrop: 'static',
+      keyboard: false,
+      size: 'md'
+    })
+
+    this.ref.result.finally(() => {
+      if (this.stopDisplayModal === true) this.doNotOpenAgain()
+    })
+  }
+
+  private doNotOpenAgain () {
+    peertubeLocalStorage.setItem(this.LOCAL_STORAGE_KEYS.NO_ACCOUNT_SETUP_WARNING_MODAL, 'true')
+
+    this.userService.updateMyProfile({ noAccountSetupWarningModal: true })
+        .subscribe({
+          next: () => console.log('We will not open the account setup modal again.'),
+
+          error: err => this.notifier.error(err.message)
+        })
+  }
+}

client/src/app/modal/welcome-modal.component.ts → client/src/app/modal/admin-welcome-modal.component.ts

@@ -1,14 +1,14 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
-import { Notifier, UserService } from '@app/core'
+import { Notifier, User, UserService } from '@app/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 
 @Component({
-  selector: 'my-welcome-modal',
-  templateUrl: './welcome-modal.component.html',
-  styleUrls: [ './welcome-modal.component.scss' ]
+  selector: 'my-admin-welcome-modal',
+  templateUrl: './admin-welcome-modal.component.html',
+  styleUrls: [ './admin-welcome-modal.component.scss' ]
 })
-export class WelcomeModalComponent {
+export class AdminWelcomeModalComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
   private LOCAL_STORAGE_KEYS = {
@@ -21,10 +21,14 @@ export class WelcomeModalComponent {
     private notifier: Notifier
   ) { }
 
-  show () {
-    const result = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_KEYS.NO_WELCOME_MODAL)
-    if (result === 'true') return
+  shouldOpen (user: User) {
+    if (user.noWelcomeModal === true) return false
+    if (peertubeLocalStorage.getItem(this.LOCAL_STORAGE_KEYS.NO_WELCOME_MODAL) === 'true') return false
+
+    return true
+  }
 
+  show () {
     this.modalService.open(this.modal, {
       centered: true,
       backdrop: 'static',