diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue index eac1413..cbbc47f 100644 --- a/components/calendar/CalendarEventDetails.vue +++ b/components/calendar/CalendarEventDetails.vue @@ -75,7 +75,7 @@ function deployDeleteModal() { >
-
+
{{ event.title }}
@@ -100,18 +100,26 @@ function deployDeleteModal() {
-

- {{ dateDifference }} -

+
+
+ +
+

{{ dateDifference }}

+
@@ -134,7 +142,7 @@ function deployDeleteModal() { diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue index 3a63e4f..65003ee 100644 --- a/components/calendar/form/CreateEvent.vue +++ b/components/calendar/form/CreateEvent.vue @@ -5,6 +5,9 @@ import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar()) const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar() const popoverOpen = ref(false) + +const { t } = useI18n() + const isLoading = ref(false) const formErrors = reactive<{ message: string | null }>({ @@ -88,7 +91,7 @@ function handleCancel() { :collision-padding="60" :disable-outside-pointer-events="true" :trap-focus="true" - class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950" + class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950" @escape-key-down="handleClosing" @focus-outside="handleClosing" @interact-outside="handleClosing" @@ -104,8 +107,14 @@ function handleCancel() { name="new-event-title" required :placeholder="$t('entity.calendar.event.title')" - class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600" + :maxlength="120" + pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}" + class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500" > + +
+ {{ t('entity.calendar.event.patterns.title') }} +
@@ -113,8 +122,13 @@ function handleCancel() { id="new-event-description" v-model="eventSkeleton.description" name="new-event-description" - :placeholder="$t('entity.addDescription')" class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600" + :placeholder="$t('entity.addDescription')" + :maxlength="1200" + class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500" /> +
+ {{ t('entity.calendar.event.patterns.description') }} +
@@ -142,7 +156,10 @@ function handleCancel() {
- +
@@ -158,13 +175,21 @@ function handleCancel() {
- +
+ +
+ {{ t('entity.calendar.event.patterns.location') }} +
+
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue index a814efd..3bf6975 100644 --- a/components/calendar/form/UpdateEvent.vue +++ b/components/calendar/form/UpdateEvent.vue @@ -1,9 +1,14 @@ diff --git a/i18n.config.ts b/i18n.config.ts index d59fc6e..c4ff153 100644 --- a/i18n.config.ts +++ b/i18n.config.ts @@ -136,10 +136,21 @@ export default defineI18nConfig(() => ({ addLocation: "Add a place", prevPage: "Previous page with events", nextPage: "Next page with events", + patterns: { + title: "Between 3 and 120 caracters, without special symbols, except & - ~ ()", + description: "1200 caracters max.", + location: "Between 3 and 160 caracters, without special symbols, except & - ~ ()", + }, editDialog: { title: "Edit event", subtitle: "Update event data", }, + editErrors: { + toastTitle: "Event wasn't updated.", + title_too_big: "Title should be less than 120 characters long.", + description_too_big: "Description should be less than 1200 characters long.", + location_too_big: "Location should be less than 160 characters long.", + }, deleteDialog: { title: "Delete this event", subtitle: "Data associated with this event will be lost and you won't be able to retrieve it !", @@ -344,10 +355,21 @@ export default defineI18nConfig(() => ({ addLocation: "Ajouter un endroit", prevPage: "Précédente page à évènements", nextPage: "Prochaine page à évènements", + patterns: { + title: "Entre 3 et 120 charactères, sans symboles spéciaux, sauf & - ~ ()", + description: "Maximum 1200 charactères.", + location: "Entre 3 et 160 charactères, sans symboles spéciaux, sauf & - ~ ()", + }, editDialog: { title: "Modifier l'évènement", subtitle: "Mettre à jour les données de l'évènement", }, + editErrors: { + toastTitle: "L'évènement n'a pas été modifié", + title_too_big: "Le titre doit être inférieur à 120 caractères.", + description_too_big: "La description doit être inférieure à 1200 caractères.", + location_too_big: "La localisation doit être inférieure à 160 caractères.", + }, deleteDialog: { title: "Supprimer l'évènement", subtitle: "Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !", diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts index 042b43d..65562fa 100644 --- a/models/CalendarEvent.ts +++ b/models/CalendarEvent.ts @@ -20,9 +20,9 @@ export interface CalendarEvent { */ export const postEventBodySchema = z.object({ event: z.object({ - title: z.string(), - description: z.string().optional().nullable(), - location: z.string().optional().nullable(), + title: z.string().max(120), + description: z.string().max(1200).optional().nullable(), + location: z.string().max(160).optional().nullable(), startDate: dateSchema.required(), endDate: dateSchema.optional().nullable(), hidden: z.boolean().optional().nullable(), diff --git a/models/Errors.ts b/models/Errors.ts new file mode 100644 index 0000000..16b6e8d --- /dev/null +++ b/models/Errors.ts @@ -0,0 +1,14 @@ +export interface ValidationError { + path: (string | number)[] + message: string + code: string +} + +export interface APIError { + statusCode: number + statusMessage: string + message: string + data: { + errors: ValidationError[] + } +} diff --git a/nuxt.config.ts b/nuxt.config.ts index 0dadd11..3db37db 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,6 +1,6 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ - devtools: { enabled: true }, + devtools: { enabled: false }, modules: [ "@nuxtjs/supabase", @@ -16,12 +16,21 @@ export default defineNuxtConfig({ i18n: { vueI18n: "./i18n.config.ts", + strategy: "no_prefix", detectBrowserLanguage: { useCookie: true, cookieKey: "tttools_lang", - redirectOn: "all", - alwaysRedirect: true, - } + }, + locales: [ + { + code: "en", + name: "English" + }, + { + code: "fr", + name: "Français" + } + ] }, supabase: { diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts index f0ab3d9..ca0aa9a 100644 --- a/server/api/calendars/events/[id].patch.ts +++ b/server/api/calendars/events/[id].patch.ts @@ -22,12 +22,22 @@ export default defineEventHandler(async (event) => { } if (bodyError) { - throw createError({ + const error = createError({ cause: "Utilisateur", fatal: false, - message: "Le schéma de la requête n'est pas complet ou mal renseigné.", - status: 401, + statusCode: 401, + statusMessage: "Validation Error", + message: "Erreur de validation du schéma, probablement dûe à une erreur utilisateur.", + data: { + errors: bodyError.issues.map(issue => ({ + path: issue.path, + message: issue.message, + code: issue.code + })) + } }) + + throw error } try { diff --git a/server/api/calendars/events/create.post.ts b/server/api/calendars/events/create.post.ts index 780aa46..c0fe7f0 100644 --- a/server/api/calendars/events/create.post.ts +++ b/server/api/calendars/events/create.post.ts @@ -7,12 +7,22 @@ export default defineEventHandler(async (event) => { const { data: bodyData, error: schemaError } = await readValidatedBody(event, body => postEventBodySchema.safeParse(body)) if (schemaError) { - throw createError({ + const error = createError({ cause: "Utilisateur", fatal: false, - message: "Le schéma de la requête n'est pas complet ou mal renseigné.", - status: 401, + statusCode: 401, + statusMessage: "Validation Error", + message: "Erreur de validation du schéma, probablement dûe à une erreur utilisateur.", + data: { + errors: schemaError.issues.map(issue => ({ + path: issue.path, + message: issue.message, + code: issue.code + })) + } }) + + throw error } try { diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts index 35acc89..cdbe5f2 100644 --- a/stores/CalendarStore.ts +++ b/stores/CalendarStore.ts @@ -869,8 +869,8 @@ export const useCalendar = defineStore("calendar", () => { const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id) baseEvents.value[eventIndex] = res - } catch (err) { - console.log(err) + + return res } finally { abortController = null isUpdatingEvent.value = false diff --git a/stores/EventStore.ts b/stores/EventStore.ts index 3eecbac..935c59c 100644 --- a/stores/EventStore.ts +++ b/stores/EventStore.ts @@ -247,17 +247,13 @@ export const useCalendarEvents = defineStore("calendar-events", () => { abortController = new AbortController() isUpdatingEvent.value = true - try { - const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "PATCH", body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal }) + const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "PATCH", body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal }) - const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id) - baseEvents.value[eventIndex] = res - } catch (err) { - console.log(err) - } finally { - abortController = null - isUpdatingEvent.value = false - } + const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id) + baseEvents.value[eventIndex] = res + + abortController = null + isUpdatingEvent.value = false } async function deleteEventFromSkeleton() { diff --git a/supabase/migrations/202401_init.sql b/supabase/migrations/202401_init.sql index 5d34e3a..7916e7c 100644 --- a/supabase/migrations/202401_init.sql +++ b/supabase/migrations/202401_init.sql @@ -88,6 +88,15 @@ create table public.calendar_events ( ); comment on table public.calendar_events is 'Events linked to a world'; +-- Calendar Events restrictions +alter table public.calendar_events + add constraint calendar_events_maxlen_check + check ( + char_length(title) <= 120 AND + (description IS NULL OR char_length(description) <= 1200) AND + (location IS NULL OR char_length(location) <= 160) + ); + -- Link table for events - categories create table public.calendar_event_categories_links ( calendar_event_id bigint references public.calendar_events on delete cascade,