➕ Frontend validation for schedule creation/modification

frontend/src/components/ScheduleCreation.vue

@@ -12,7 +12,7 @@ import {
 import { Dayjs } from 'dayjs';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
-import { dayjsKey, callKey, isoWeekdaysKey } from '@/keys';
+import { dayjsKey, callKey, isoWeekdaysKey, hasProfanityKey } from '@/keys';
 
 import AppointmentCreatedModal from '@/components/AppointmentCreatedModal.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
@@ -46,6 +46,7 @@ const { t } = useI18n();
 const dj = inject(dayjsKey);
 const call = inject(callKey);
 const isoWeekdays = inject(isoWeekdaysKey);
+const hasProfanity = inject(hasProfanityKey);
 const dateFormat = DateFormatStrings.QalendarFullDay;
 const firstStep = ScheduleCreationState.Availability;
 
@@ -253,6 +254,20 @@ const revertForm = (resetData = true) => {
   }
 };
 
+// Form validation
+const scheduleValidationError = (schedule: Schedule): string|null => {
+  // Schedule name is empty
+  if (schedule.name === '') {
+    return t('validation.fieldIsRequired', { field: t('ftue.scheduleName') });
+  }
+  // Schedule name contains profanity
+  if (hasProfanity(schedule.name)) {
+    return t('validation.fieldContainsProfanity', { field: t('ftue.scheduleName') });
+  }
+  // All good
+  return null;
+};
+
 // handle actual schedule creation/update
 const savingInProgress = ref(false);
 const saveSchedule = async (withConfirmation = true) => {
@@ -275,6 +290,15 @@ const saveSchedule = async (withConfirmation = true) => {
   delete obj.time_updated;
   delete obj.id;
 
+  // validate schedule data
+  const validationError = scheduleValidationError(obj);
+  if (validationError) {
+    scheduleCreationError.value = validationError;
+    savingInProgress.value = false;
+    window.scrollTo(0, 0);
+    return;
+  }
+
   // save schedule data
   const response = props.schedule
     ? await scheduleStore.updateSchedule(call, props.schedule.id, obj)

frontend/src/locales/de.json

@@ -455,6 +455,10 @@
     "minutes": "{value} Minuten",
     "none": "{value}"
   },
+  "validation": {
+    "fieldContainsProfanity": "Bitte verwende keine beleidigenden Ausdrücke (entdeckt in {field}).",
+    "fieldIsRequired": "{field} darf nicht leer sein."
+  },
   "waitingList": {
     "adminInviteNotice": "Hinweis: Der Senden-Button wird bereits akzeptierte Personen nicht erneut einladen, sie können aber dennoch ausgewählt werden. Verwende die Filter für eine bessere Übersicht!",
     "confirmHeading": "Du bist auf der Warteliste",

frontend/src/locales/en.json

@@ -456,6 +456,10 @@
     "minutes": "{value} minutes",
     "none": "{value}"
   },
+  "validation": {
+    "fieldContainsProfanity": "Please don't use offensive language (detected in {field}).",
+    "fieldIsRequired": "{field} cannot be empty."
+  },
   "waitingList": {
     "adminInviteNotice": "Notice: The Send button will not re-invite people already accepted, but you can still select them. Use the filters for clarity!",
     "confirmHeading": "You’re on the waitlist",