diff --git a/django_email_learning/templates/platform/organizations.html b/django_email_learning/templates/platform/organizations.html index 18615130..fcc4eebb 100644 --- a/django_email_learning/templates/platform/organizations.html +++ b/django_email_learning/templates/platform/organizations.html @@ -9,6 +9,9 @@ "actions": "{% translate 'Actions' %}", "name": "{% translate 'Name' %}", "description": "{% translate 'Description' %}", + "name_required": "{% translate 'Name is required.' %}", + "description_required": "{% translate 'Description is required.' %}", + "error_try_again": "{% translate 'An error occurred. Please try again.' %}", "logo": "{% translate 'Logo' %}", "create_organization": "{% translate 'Create Organization' %}", "cancel": "{% translate 'Cancel' %}", diff --git a/frontend/platform/organizations/components/OrganizationForm.jsx b/frontend/platform/organizations/components/OrganizationForm.jsx index f41da260..64bc7e5c 100644 --- a/frontend/platform/organizations/components/OrganizationForm.jsx +++ b/frontend/platform/organizations/components/OrganizationForm.jsx @@ -13,6 +13,7 @@ function OrganizationForm({ successCallback, failureCallback, cancelCallback, cr const [logoFile, setLogoFile] = useState(null); const [logoUrl, setLogoUrl] = useState(initialLogoUrl || null); const [logoServerPath, setLogoServerPath] = useState(null); + const [errorMessages, setErrorMessages] = useState({}); const apiBaseUrl = localStorage.getItem('apiBaseUrl'); @@ -22,8 +23,30 @@ function OrganizationForm({ successCallback, failureCallback, cancelCallback, cr setLogoFile(null); } + const validateForm = () => { + let valid = true; + if (!name.trim()) { + setNameHelperText(localeMessages["name_required"]); + valid = false; + } else { + setNameHelperText(""); + } + + if (!description.trim()) { + setDescriptionHelperText(localeMessages["description_required"]); + valid = false; + } else { + setDescriptionHelperText(""); + } + + return valid; + } + const handleUpdate = () => (event) => { event.preventDefault(); + if (!validateForm()) { + return; + } let payload = { name: name, @@ -58,12 +81,16 @@ function OrganizationForm({ successCallback, failureCallback, cancelCallback, cr successCallback(data); }) .catch(error => { - failureCallback(error); + setErrorMessages(localeMessages["error_try_again"]); }); } const handleCreate = () => (event) => { event.preventDefault(); + if (!validateForm()) { + return; + } + fetch(`${apiBaseUrl}/organizations/`, { method: 'POST', headers: { @@ -88,7 +115,7 @@ function OrganizationForm({ successCallback, failureCallback, cancelCallback, cr successCallback(data); }) .catch(error => { - failureCallback(error); + setErrorMessages(localeMessages["error_try_again"]); }); }