Fix user ban modal grammar to account for multiple users (#4722)

* Fix user ban modal grammar to account for multiple users

* Address variable sugggestion

* Address property syntax suggestion

* Address localization suggestion

* More concise `isSingleUser` declaration

2 files changed, 5 insertions, 1 deletions

diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.html b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
index 7129b00ca..b41ae230d 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
@@ -27,7 +27,7 @@
           (click)="hide()" (key.enter)="hide()"
         >
 
-        <input type="submit" i18n-value value="Ban this user" class="peertube-button orange-button" [disabled]="!form.valid" />
+        <input type="submit" i18n-value [value]="modalMessage" class="peertube-button orange-button" [disabled]="!form.valid" />
       </div>
     </form>
   </div>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index a03bd7286..b2ce019c5 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -17,6 +17,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
 
   private usersToBan: User | User[]
   private openedModal: NgbModalRef
+  modalMessage = ''
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -36,6 +37,9 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
   openModal (user: User | User[]) {
     this.usersToBan = user
     this.openedModal = this.modalService.open(this.modal, { centered: true })
+
+    const isSingleUser = !(Array.isArray(this.usersToBan) && this.usersToBan.length > 1)
+    this.modalMessage = isSingleUser ? $localize`Ban this user` : $localize`Ban these users`
   }
 
   hide () {