Fix opening/checking admin/account modal

client/src/app/app.component.html

@@ -54,9 +54,10 @@
 </p-toast>
 
 @defer (when isUserLoggedIn()) {
-  <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>
+  <my-account-setup-warning-modal #accountSetupWarningModal (created)="onModalCreated()"></my-account-setup-warning-modal>
+
+  <my-admin-welcome-modal #adminWelcomeModal (created)="onModalCreated()"></my-admin-welcome-modal>
+  <my-instance-config-warning-modal #instanceConfigWarningModal (created)="onModalCreated()"></my-instance-config-warning-modal>
 }
 
 <my-custom-modal #customModal></my-custom-modal>

client/src/app/app.component.ts

@@ -29,7 +29,7 @@ import { logger } from '@root-helpers/logger'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { SharedModule } from 'primeng/api'
 import { ToastModule } from 'primeng/toast'
-import { delay, forkJoin } from 'rxjs'
+import { forkJoin } from 'rxjs'
 import { filter, first, map } from 'rxjs/operators'
 import { MenuService } from './core/menu/menu.service'
 import { HeaderComponent } from './header/header.component'
@@ -38,8 +38,8 @@ import { HotkeysCheatSheetComponent } from './hotkeys/hotkeys-cheat-sheet.compon
 import { MenuComponent } from './menu/menu.component'
 import { ConfirmComponent } from './modal/confirm.component'
 import { GlobalIconComponent, GlobalIconName } from './shared/shared-icons/global-icon.component'
-import { InstanceService } from './shared/shared-main/instance/instance.service'
 import { ButtonComponent } from './shared/shared-main/buttons/button.component'
+import { InstanceService } from './shared/shared-main/instance/instance.service'
 
 @Component({
   selector: 'my-app',
@@ -144,7 +144,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     this.location.onPopState(() => this.modalService.dismissAll(POP_STATE_MODAL_DISMISS))
 
-    this.openModalsIfNeeded()
+    this.listenUserChangeForModals()
 
     this.document.documentElement.lang = getShortLocale(this.localeId)
     this.document.documentElement.dir = getLocaleDirection(this.localeId)
@@ -264,29 +264,35 @@ export class AppComponent implements OnInit, AfterViewInit {
     }
   }
 
-  private openModalsIfNeeded () {
-    const userSub = this.authService.userInformationLoaded
-        .pipe(
-          delay(0), // Wait for modals creations
-          map(() => this.authService.getUser())
-        )
+  private listenUserChangeForModals () {
+    this.authService.userInformationLoaded
+        .pipe(map(() => this.authService.getUser()))
+        .subscribe(user => this.openModalsIfNeeded(user))
+  }
 
-    // Admin modal
-    userSub.pipe(
-      filter(user => user.role.id === UserRole.ADMINISTRATOR)
-    ).subscribe(user => setTimeout(() => this.openAdminModalsIfNeeded(user))) // Wait deferred modal creation in the view
+  onModalCreated () {
+    const user = this.authService.getUser()
+    if (!user) return
 
-    // Account modal
-    userSub.pipe(
-      filter(user => user.role.id !== UserRole.ADMINISTRATOR)
-    ).subscribe(user => setTimeout(() => this.openAccountModalsIfNeeded(user))) // Wait deferred modal creation in the view
+    setTimeout(() => this.openModalsIfNeeded(user))
+  }
+
+  private openModalsIfNeeded (user: User) {
+    if (user.role.id === UserRole.ADMINISTRATOR) {
+      this.openAdminModalsIfNeeded(user)
+    } else {
+      this.openAccountModalsIfNeeded(user)
+    }
   }
 
   private openAdminModalsIfNeeded (user: User) {
+    if (!this.adminWelcomeModal) return
+
     if (this.adminWelcomeModal.shouldOpen(user)) {
       return this.adminWelcomeModal.show()
     }
 
+    if (!this.instanceConfigWarningModal) return
     if (!this.instanceConfigWarningModal.shouldOpenByUser(user)) return
 
     forkJoin([
@@ -300,6 +306,8 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   private openAccountModalsIfNeeded (user: User) {
+    if (!this.accountSetupWarningModal) return
+
     if (this.accountSetupWarningModal.shouldOpen(user)) {
       this.accountSetupWarningModal.show(user)
     }

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common'
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { RouterLink } from '@angular/router'
 import { Notifier, ServerService, User, UserService } from '@app/core'
@@ -16,9 +16,11 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
   standalone: true,
   imports: [ CommonModule, GlobalIconComponent, PeertubeCheckboxComponent, FormsModule, RouterLink ]
 })
-export class AccountSetupWarningModalComponent {
+export class AccountSetupWarningModalComponent implements OnInit {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
+  @Output() created = new EventEmitter<void>()
+
   stopDisplayModal = false
   ref: NgbModalRef
 
@@ -28,6 +30,10 @@ export class AccountSetupWarningModalComponent {
     NO_ACCOUNT_SETUP_WARNING_MODAL: 'no_account_setup_warning_modal'
   }
 
+  ngOnInit (): void {
+    this.created.emit()
+  }
+
   constructor (
     private userService: UserService,
     private modalService: NgbModal,
@@ -48,6 +54,7 @@ export class AccountSetupWarningModalComponent {
   }
 
   shouldOpen (user: User) {
+    if (this.modalService.hasOpenModals()) return false
     if (user.noAccountSetupWarningModal === true) return false
     if (peertubeLocalStorage.getItem(this.LS_KEYS.NO_ACCOUNT_SETUP_WARNING_MODAL) === 'true') return false
 

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
 import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -12,9 +12,11 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
   standalone: true,
   imports: [ GlobalIconComponent ]
 })
-export class AdminWelcomeModalComponent {
+export class AdminWelcomeModalComponent implements OnInit {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
+  @Output() created = new EventEmitter<void>()
+
   private LS_KEYS = {
     NO_WELCOME_MODAL: 'no_welcome_modal'
   }
@@ -25,7 +27,12 @@ export class AdminWelcomeModalComponent {
     private notifier: Notifier
   ) { }
 
+  ngOnInit () {
+    this.created.emit()
+  }
+
   shouldOpen (user: User) {
+    if (this.modalService.hasOpenModals()) return false
     if (user.noWelcomeModal === true) return false
     if (peertubeLocalStorage.getItem(this.LS_KEYS.NO_WELCOME_MODAL) === 'true') return false
 

client/src/app/modal/instance-config-warning-modal.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common'
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { Notifier, User, UserService } from '@app/core'
 import { PeertubeCheckboxComponent } from '@app/shared/shared-forms/peertube-checkbox.component'
@@ -16,9 +16,11 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
   standalone: true,
   imports: [ CommonModule, FormsModule, GlobalIconComponent, PeertubeCheckboxComponent ]
 })
-export class InstanceConfigWarningModalComponent {
+export class InstanceConfigWarningModalComponent implements OnInit {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
+  @Output() created = new EventEmitter<void>()
+
   stopDisplayModal = false
   about: About
 
@@ -33,7 +35,12 @@ export class InstanceConfigWarningModalComponent {
     private notifier: Notifier
   ) { }
 
+  ngOnInit (): void {
+    this.created.emit()
+  }
+
   shouldOpenByUser (user: User) {
+    if (this.modalService.hasOpenModals()) return false
     if (user.noInstanceConfigWarningModal === true) return false
     if (peertubeLocalStorage.getItem(this.LS_KEYS.NO_INSTANCE_CONFIG_WARNING_MODAL) === 'true') return false