Validate new spot description length

js/src/constants.js

@@ -1 +1,2 @@
 const SPOTFIX_VERSION = "1.1.13";
+const SPOTFIX_MIN_DESCRIPTION_LENGTH = 10;

js/src/handlers.js

@@ -108,12 +108,14 @@ async function handleCreateTask(sessionId, taskDetails) {
         if (result && result.taskId && (taskDetails.taskDescription || taskDetails.has_files)) {
             const sign = `<br><br><br><em>The spot has been posted at the following URL <a href="${window.location.href}"><span class="task-link task-link--done">${window.location.href}</span></a></em>`;
 
-            const commentResponse = await addTaskComment({
-                projectToken: taskDetails.projectToken,
-                accountId: taskDetails.accountId,
-            }, result.taskId, (taskDetails.taskDescription ?? '') + sign);
-
-            result.initialComment = commentResponse;
+            try {
+                result.initialComment = await addTaskComment({
+                    projectToken: taskDetails.projectToken,
+                    accountId: taskDetails.accountId,
+                }, result.taskId, (taskDetails.taskDescription ?? '') + sign);
+            } catch (commentErr) {
+                console.error(commentErr);
+            }
         }
         return result;
     } catch (err) {

js/src/iframe/DescriptionEditorIframe.js

@@ -33,6 +33,7 @@ class DescriptionEditorIframe {
     handleIframeMessage(event) {
         const data = event.data;
         if (!data || !data.type || data.source !== 'spotfix-description-editor-iframe') return;
+        if (!this.iframe || event.source !== this.iframe.contentWindow) return;
 
         switch (data.type) {
             case 'spotfix:tinymce-ready':
@@ -135,7 +136,8 @@ class DescriptionEditorIframe {
 
             const messageHandler = function (event) {
                 if (event.data && event.data.type === 'spotfix:tinymce-ready' &&
-                    event.data.source === 'spotfix-description-editor-iframe') {
+                    event.data.source === 'spotfix-description-editor-iframe' &&
+                    self.iframe && event.source === self.iframe.contentWindow) {
                     clearTimeout(timeout);
                     window.removeEventListener('message', messageHandler);
                     resolve(self.iframe);
@@ -215,14 +217,17 @@ class DescriptionEditorIframe {
                 toolbar_location: "bottom",
                 height: 200,
                 width: "100%",
+                placeholder: "Describe the issue using at least 10 characters.",
+                content_style: \`.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+                    color: #A9B1B8 !important;}\`,
                 toolbar: "attachmentButton screenshotButton emoticons bullist numlist bold italic strikethrough underline blockquote",
                 file_picker_types: "file image media",
                 setup: function(editor) {
                 editor.ui.registry.addButton("attachmentButton", { icon: "paperclip", tooltip: "Add file", onAction: function() { window.parent.postMessage({ type: "spotfix:tinymce-action", source: "spotfix-description-editor-iframe", action: "attachment", eventData: { type: "attachment" } }, "*"); } });
                 editor.ui.registry.addButton("screenshotButton", { icon: "screenshot", tooltip: "Screenshot", onAction: function() { window.parent.postMessage({ type: "spotfix:tinymce-action", source: "spotfix-description-editor-iframe", action: "screenshot", eventData: { type: "screenshot" } }, "*"); } });
                 editor.on("init", function() { if (savedContent && savedContent.trim() !== "") { editor.setContent(savedContent, { format: "html" }); editor.save(); } window.parent.postMessage({ type: "spotfix:tinymce-ready", source: "spotfix-description-editor-iframe" }, "*"); });
                 editor.on("change", function() { const content = editor.getContent(); window.parent.postMessage({ type: "spotfix:tinymce-change", source: "spotfix-description-editor-iframe", content: content }, "*"); });
-                editor.on("input", function() { const content = editor.getContent(); window.parent.postMessage({ type: "spotfix:tinymce-input", source: "spotfix-description-editor-iframe", content: content }, "*"); });
+                editor.on("input undo redo", function() { const content = editor.getContent(); window.parent.postMessage({ type: "spotfix:tinymce-input", source: "spotfix-description-editor-iframe", content: content }, "*"); });
                 }
                 }).catch(function(error) { window.parent.postMessage({ type: "spotfix:tinymce-error", source: "spotfix-description-editor-iframe", error: error.message }, "*"); });
                 }

js/src/loaders/SpotFixTemplatesLoader.js

@@ -168,7 +168,7 @@ class SpotFixTemplatesLoader {
         </div>
 
         <div id="doboard_task_widget-description-container" class="doboard_task_widget-input-container doboard_task_widget-input-container-textarea" style="flex-grow: 1; min-height: 200px">
-            <textarea id="doboard_task_widget-description" class="doboard_task_widget-field" name="description" placeholder=" " required></textarea>
+            <textarea id="doboard_task_widget-description" class="doboard_task_widget-field" name="description" placeholder="Describe the issue using at least 10 characters." required></textarea>
             <label for="doboard_task_widget-description" style="top:1px" class="doboard_task_widget-field-textarea-label" >Description</label>
         </div>
 

js/src/widget.js

@@ -177,6 +177,10 @@ class CleanTalkWidgetDoboard {
 
         if (submitButton) {
             submitButton.addEventListener('click', async () => {
+                if (this.isSubmittingTask) {
+                    return;
+                }
+
                 // Check required fields: Report about and Description
                 const taskTitleElement = document.getElementById('doboard_task_widget-title');
                 const taskTitle = taskTitleElement.value;
@@ -191,7 +195,12 @@ class CleanTalkWidgetDoboard {
                     return;
                 }
                 const taskDescriptionElement = document.getElementById('doboard_task_widget-description')
-                const taskDescription = taskDescriptionElement.value || data.descriptionText;
+                const taskDescription = this.getCreateTaskDescription(
+                    taskDescriptionElement.value || data.descriptionText);
+
+                if ( ! this.updateCreateTaskSubmitState(taskDescription) ) {
+                    return;
+                }
 
                 // if ( ! taskDescription ) {
                 //     taskDescriptionElement.style.borderColor = 'red';
@@ -264,91 +273,131 @@ class CleanTalkWidgetDoboard {
 
                 // Make the submit button disable with spinner
                 const submitButton = document.getElementById('doboard_task_widget-submit_button');
+                const submitButtonText = submitButton.innerText;
+                this.isSubmittingTask = true;
                 submitButton.disabled = true;
                 submitButton.innerText = ksesFilter('Creating spot...');
 
-                let taskDetails = {
-                    taskTitle: taskTitle,
-                    taskDescription: taskDescription,
-                    //typeSend: typeSend,
-                    selectedData: this.selectedData,
-                    projectToken: this.params.projectToken,
-                    projectId: this.params.projectId,
-                    accountId: this.params.accountId,
-                    has_files: this.fileUploader.hasFiles(),
-                    task_type: this.new_task_type,
-                    taskMeta: JSON.stringify(this.selectedData ? this.selectedData : { pageURL: window.location.href }),
-                };
-
-                if ( userEmail ) {
-                    taskDetails.userEmail = userEmail
-                }
-                if ( userName ) {
-                    taskDetails.userName = userName
-                }
-                if ( userPassword ) {
-                    taskDetails.userPassword = userPassword
-                } else {
-                    taskDetails.userPassword = document?.getElementById('doboard_task_widget-user_password')?.value
-                }
+                try {
+                    let taskDetails = {
+                        taskTitle: taskTitle,
+                        taskDescription: taskDescription,
+                        //typeSend: typeSend,
+                        selectedData: this.selectedData,
+                        projectToken: this.params.projectToken,
+                        projectId: this.params.projectId,
+                        accountId: this.params.accountId,
+                        has_files: this.fileUploader.hasFiles(),
+                        task_type: this.new_task_type,
+                        taskMeta: JSON.stringify(
+                            this.selectedData ? this.selectedData : { pageURL: window.location.href }),
+                    };
 
-                // Save pending task in LS
-                localStorage.setItem('spotfix_pending_task', JSON.stringify({
-                    ...this.selectedData,
-                    description: taskDescription
-                }));
+                    if ( userEmail ) {
+                        taskDetails.userEmail = userEmail
+                    }
+                    if ( userName ) {
+                        taskDetails.userName = userName
+                    }
+                    if ( userPassword ) {
+                        taskDetails.userPassword = userPassword
+                    } else {
+                        taskDetails.userPassword = document?.getElementById('doboard_task_widget-user_password')?.value
+                    }
 
-                let submitTaskResult;
-                try {
-                    submitTaskResult = await this.submitTask(taskDetails);
-                } catch (error) {
-                    this.registrationShowMessage(error.message);
-                    return;
-                }
+                    // Save pending task in LS
+                    localStorage.setItem('spotfix_pending_task', JSON.stringify({
+                        ...this.selectedData,
+                        description: taskDescription
+                    }));
 
-                if (this.fileUploader?.hasFiles() && submitTaskResult?.initialComment?.commentId) {
-                    const sessionId = localStorage.getItem('spotfix_session_id');
+                    let submitTaskResult;
                     try {
-                        const attachmentsSendResult = await this.fileUploader.sendAttachmentsForComment(
-                            this.params,
-                            sessionId,
-                            submitTaskResult.initialComment.commentId
-                        );
-
-                        if (!attachmentsSendResult.success) {
-                            console.error(attachmentsSendResult);
-                        }
-                    } catch (uploadErr) {
-                        console.error(uploadErr);
+                        submitTaskResult = await this.submitTask(taskDetails);
+                    } catch (error) {
+                        submitButton.innerText = submitButtonText;
+                        this.registrationShowMessage(error.message);
+                        return;
                     }
-                }
 
-                // Return the submit button normal state
-                submitButton.disabled = false;
-                submitButton.style.cursor = 'pointer';
+                    if (this.fileUploader?.hasFiles() && submitTaskResult?.initialComment?.commentId) {
+                        const sessionId = localStorage.getItem('spotfix_session_id');
+                        try {
+                            const attachmentsSendResult = await this.fileUploader.sendAttachmentsForComment(
+                                this.params,
+                                sessionId,
+                                submitTaskResult.initialComment.commentId
+                            );
+
+                            if (!attachmentsSendResult.success) {
+                                console.error(attachmentsSendResult);
+                            }
+                        } catch (uploadErr) {
+                            console.error(uploadErr);
+                        }
+                    }
 
-                if ( submitTaskResult.needToLogin ) {
-                    // @ToDo Do not know what to de here: throw an error or pass log message?
-                    return;
-                }
+                    if ( submitTaskResult.needToLogin ) {
+                        // @ToDo Do not know what to de here: throw an error or pass log message?
+                        return;
+                    }
 
-                if ( submitTaskResult.isPublic !== undefined ) {
-                    this.selectedData.isPublic = submitTaskResult.isPublic
-                }
+                    if ( submitTaskResult.isPublic !== undefined ) {
+                        this.selectedData.isPublic = submitTaskResult.isPublic
+                    }
 
-                // refersh tasks list after creation
-                this.allTasksData = await getAllTasks(this.params, this.nonRequesting);
-                // save updates
-                storageSaveTasksUpdateData(this.allTasksData);
+                    try {
+                        // refersh tasks list after creation
+                        this.allTasksData = await getAllTasks(this.params, this.nonRequesting);
+                        // save updates
+                        storageSaveTasksUpdateData(this.allTasksData);
+                    } catch (tasksErr) {
+                        console.error(tasksErr);
+                    }
 
-                this.selectedData = {};
-                await this.createWidgetElement('all_issues');
-                storageSetWidgetIsClosed(false);
-                hideContainersSpinner(false);
+                    this.selectedData = {};
+                    await this.createWidgetElement('all_issues');
+                    storageSetWidgetIsClosed(false);
+                    hideContainersSpinner(false);
+                } catch (error) {
+                    submitButton.innerText = submitButtonText;
+                    throw error;
+                } finally {
+                    this.isSubmittingTask = false;
+                    submitButton.style.cursor = 'pointer';
+                    this.updateCreateTaskSubmitState(this.getCreateTaskDescription(taskDescription));
+                }
             });
         }
     }
 
+    getCreateTaskDescription(fallback) {
+        const editor = window.DescriptionEditorIframe;
+        if (editor?.iframe && editor.editorReady) {
+            return editor.getContent();
+        }
+        return fallback || '';
+    }
+
+
+    updateCreateTaskSubmitState(description) {
+        const submitButton = document.getElementById('doboard_task_widget-submit_button');
+        const tmp = document.createElement('template');
+        tmp.innerHTML = description || '';
+        const isValid = (tmp.content.textContent || '').trim().length >= SPOTFIX_MIN_DESCRIPTION_LENGTH;
+
+        if (submitButton) {
+            submitButton.disabled = !isValid || !!this.isSubmittingTask;
+            submitButton.classList.toggle('doboard_task_widget-submit_button-invalid', !isValid);
+            if (isValid) {
+                submitButton.removeAttribute('title');
+            } else {
+                submitButton.title = 'Please provide at least a few words describing the issue.';
+            }
+        }
+
+        return isValid;
+    }
 
     resetLoginForm() {
         const loginContainer = document.querySelector('.doboard_task_widget-input-container-login');
@@ -963,6 +1012,9 @@ class CleanTalkWidgetDoboard {
 
                 const savedDescription = localStorage.getItem('spotfix-description-ls') || '';
                 const fileUploaderDesc = this.fileUploader;
+                const updateSubmitState = (content) => this.updateCreateTaskSubmitState(content);
+
+                updateSubmitState(savedDescription);
 
 
                 if (window.DescriptionEditorIframe.iframe && !this.nonRequesting) {
@@ -975,7 +1027,9 @@ class CleanTalkWidgetDoboard {
                         savedContent: savedDescription,
                         onChange: function(content) {
                             localStorage.setItem('spotfix-description-ls', content);
+                            updateSubmitState(content);
                         },
+                        onInput: updateSubmitState,
                         handlers: {
                             onAttachmentClick: function() {
                                 fileUploaderDesc?.fileInput?.click();

styles/doboard-widget.css

@@ -506,6 +506,11 @@
     cursor: wait;
 }
 
+.doboard_task_widget-submit_button.doboard_task_widget-submit_button-invalid:disabled {
+    background: #BBC7D1;
+    cursor: not-allowed;
+}
+
 .doboard_task_widget-login-buttons-wrapper {
     display: flex;
     gap: 10px;