Restrict Chat message length in client

Restricts Chat Messages in client to enforce a maximum length of 512
characters
enhance chat form validation
show chat message length and characters left if close to the limit of
512
This commit is contained in:
Sean 2021-05-21 13:14:03 +02:00
parent 4d4a3bb0db
commit 861726fb9c
3 changed files with 37 additions and 23 deletions

View File

@ -25,7 +25,14 @@
<!-- send chat -->
<form [formGroup]="newMessageForm" (ngSubmit)="send()" *ngIf="chatGroupsExist && canSendInSelectedChat" [@collapse]>
<mat-form-field appearance="outline" class="chat-form-field">
<input class="chat-input" type="text" matInput formControlName="text" />
<input #chatinput autocomplete="off" type="text" matInput formControlName="text" />
<mat-hint align="end" *ngIf="chatinput.value?.length >= chatMessageMaxLength - 100">
<span> {{ chatinput.value?.length || 0 }}/{{ chatMessageMaxLength }} </span>
<span class="warn" *ngIf="chatinput.value?.length > chatMessageMaxLength">
({{ chatMessageMaxLength - chatinput.value?.length }})
</span>
</mat-hint>
<mat-label>{{ 'Message' | translate }}</mat-label>
<button
mat-icon-button
@ -33,7 +40,7 @@
type="submit"
color="accent"
matTooltip=" {{ 'Send' | translate }}"
[disabled]="isChatMessageEmpty()"
[disabled]="!chatinput.value?.trim()?.length || newMessageForm.invalid"
>
<mat-icon>send</mat-icon>
</button>

View File

@ -1,7 +1,3 @@
.chat-form-field {
width: 100%;
}
.chat-input {
// todo
}

View File

@ -1,11 +1,12 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { auditTime, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { OperatorService } from 'app/core/core-services/operator.service';
import { ChatGroupRepositoryService } from 'app/core/repositories/chat/chat-group-repository.service';
@ -15,7 +16,6 @@ import { ChatMessage } from 'app/shared/models/chat/chat-message';
import { BaseViewComponentDirective } from 'app/site/base/base-view';
import { ChatNotificationService, NotificationAmount } from '../../services/chat-notification.service';
import { ViewChatGroup } from '../../models/view-chat-group';
@Component({
selector: 'os-chat-tabs',
templateUrl: './chat-tabs.component.html',
@ -26,6 +26,8 @@ import { ViewChatGroup } from '../../models/view-chat-group';
export class ChatTabsComponent extends BaseViewComponentDirective implements OnInit {
public chatGroupSubject: BehaviorSubject<ViewChatGroup[]>;
public newMessageForm: FormGroup;
private messageControl: AbstractControl;
public chatMessageMaxLength = 512;
private selectedTabIndex = 0;
private notifications: NotificationAmount;
@ -58,8 +60,18 @@ export class ChatTabsComponent extends BaseViewComponentDirective implements OnI
super(titleService, translate, matSnackBar);
this.newMessageForm = formBuilder.group({
text: ['']
text: ['', [Validators.required, Validators.maxLength(this.chatMessageMaxLength)]]
});
this.messageControl = this.newMessageForm.get('text');
this.subscriptions.push(
this.messageControl.valueChanges.subscribe(text => {
if (!text) {
this.newMessageForm.markAsUntouched();
this.messageControl.setErrors(null);
}
})
);
}
public ngOnInit(): void {
@ -78,21 +90,20 @@ export class ChatTabsComponent extends BaseViewComponentDirective implements OnI
return this.notifications?.[chatId] ?? 0;
}
public isChatMessageEmpty(): boolean {
return !this.newMessageForm?.value?.text?.trim();
}
public send(): void {
const payload = {
text: this.newMessageForm.value.text,
chatgroup_id: this.chatGroupFromIndex.id
};
this.chatMessageRepo
.create(payload as ChatMessage)
.then(() => {
this.clearTextInput();
})
.catch(this.raiseError);
const message = this.messageControl.value?.trim();
if (message) {
const payload = {
text: message,
chatgroup_id: this.chatGroupFromIndex.id
};
this.chatMessageRepo
.create(payload as ChatMessage)
.then(() => {
this.clearTextInput();
})
.catch(this.raiseError);
}
}
private clearTextInput(): void {