fix(ticket): disallow empty message

Author: AugustinMauroy

api/src/api/errors.rs

@@ -245,6 +245,10 @@ errors!(
     status: NOT_FOUND,
     "The requested ticket was not found.",
   },
+  TicketMessageEmpty {
+    status: BAD_REQUEST,
+    "The ticket message is empty.",
+  },
   TicketMetaNotValid {
     status: BAD_REQUEST,
     "The metadata for the ticket is not in a valid format, should be a key-value of strings.",

api/src/api/tickets.rs

@@ -117,6 +117,10 @@ pub async fn post_message_handler(
     return Err(ApiError::TicketNotFound);
   }
 
+  if new_message.message.is_empty() {
+    return Err(ApiError::TicketMessageEmpty);
+  }
+
   let (message, message_author) = db
     .ticket_add_message(id, current_user.id, new_message)
     .await?;

frontend/islands/TicketMessageInput.tsx

@@ -1,5 +1,5 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { TbCheck, TbClock } from "tb-icons";
 import {
   AdminUpdateTicketRequest,
@@ -13,13 +13,29 @@ export function TicketMessageInput(
   { ticket, user }: { ticket: Ticket; user: FullUser },
 ) {
   const [message, setMessage] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      const timeout = setTimeout(() => {
+        setError(null);
+      }, 3000); // 3 seconds
+
+      return () => clearTimeout(timeout);
+    }
+  }, [error]);
 
   return (
     <form
       class="space-y-5"
       onSubmit={(e) => {
         e.preventDefault();
 
+        if (message.trim() === "") {
+          setError("Message cannot be empty");
+          return;
+        }
+
         api.post(
           path`/tickets/${ticket.id}`,
           {
@@ -42,7 +58,14 @@ export function TicketMessageInput(
         placeholder="Type your message here..."
         onChange={(e) => setMessage(e.currentTarget!.value)}
       />
-      <div class="flex justify-end gap-4">
+      <div class="flex justify-end gap-4 items-center">
+        {error && (
+          <div class="text-red-500 font-semibold">
+            <p>
+              {error}
+            </p>
+          </div>
+        )}
         <button type="submit" class="button-primary">Send message</button>
         {user.isStaff && (
           <button