fix: grpc request sanitization logic and generation

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Dec 15, 2024 · a6024cf · a6024cf
1 parent 1be6a34
commit a6024cf
Show file tree

Hide file tree

Showing 185 changed files with 15,047 additions and 2,420 deletions.
diff --git a/app/components/calendar/entry/EntryCreateOrUpdateModal.vue b/app/components/calendar/entry/EntryCreateOrUpdateModal.vue
@@ -7,7 +7,7 @@ import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import DataNoDataBlock from '~/components/partials/data/DataNoDataBlock.vue';
 import DataPendingBlock from '~/components/partials/data/DataPendingBlock.vue';
 import DatePickerPopoverClient from '~/components/partials/DatePickerPopover.client.vue';
-import DocEditor from '~/components/partials/DocEditor.vue';
+import TiptapEditor from '~/components/partials/TiptapEditor.vue';
 import { useCalendarStore } from '~/store/calendar';
 import { useCompletorStore } from '~/store/completor';
 import { AccessLevel } from '~~/gen/ts/resources/calendar/access';
@@ -74,7 +74,9 @@ async function createOrUpdateCalendarEntry(values: Schema): Promise<CreateOrUpda
                 title: values.title,
                 startTime: toTimestamp(values.startTime),
                 endTime: toTimestamp(values.endTime),
-                content: values.content,
+                content: {
+                    rawContent: values.content,
+                },
                 closed: values.closed,
                 rsvpOpen: values.rsvpOpen,
                 creatorJob: '',
@@ -104,7 +106,7 @@ function setFromProps(): void {
     state.title = entry.title;
     state.startTime = toDate(entry.startTime);
     state.endTime = toDate(entry.endTime);
-    state.content = entry.content;
+    state.content = entry.content?.rawContent ?? '';
     state.closed = entry.closed;
     state.rsvpOpen = entry.rsvpOpen !== undefined;
 }
@@ -252,7 +254,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
 
                         <UFormGroup name="content" :label="$t('common.content')" class="flex-1" required>
                             <ClientOnly>
-                                <DocEditor v-model="state.content" :min-height="250" />
+                                <TiptapEditor v-model="state.content" />
                             </ClientOnly>
                         </UFormGroup>
 

diff --git a/app/components/calendar/entry/EntryViewSlideover.vue b/app/components/calendar/entry/EntryViewSlideover.vue
@@ -5,6 +5,7 @@ import EntryCreateOrUpdateModal from '~/components/calendar/entry/EntryCreateOrU
 import { checkCalendarAccess } from '~/components/calendar/helpers';
 import CitizenInfoPopover from '~/components/partials/citizens/CitizenInfoPopover.vue';
 import ConfirmModal from '~/components/partials/ConfirmModal.vue';
+import HTMLContentRenderer from '~/components/partials/content/HTMLContentRenderer.vue';
 import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import DataNoDataBlock from '~/components/partials/data/DataNoDataBlock.vue';
 import DataPendingBlock from '~/components/partials/data/DataPendingBlock.vue';
@@ -205,8 +206,9 @@ const canDo = computed(() => ({
                     </template>
 
                     <div class="contentView mx-auto max-w-screen-xl break-words rounded-lg bg-base-900">
-                        <!-- eslint-disable vue/no-v-html -->
-                        <div class="prose dark:prose-invert min-w-full px-4 py-2" v-html="entry.content"></div>
+                        <div v-if="entry.content?.content" class="prose dark:prose-invert min-w-full px-4 py-2">
+                            <HTMLContentRenderer :value="entry.content.content" />
+                        </div>
                     </div>
                 </template>
             </div>

diff --git a/app/components/documents/DocumentCommentEntry.vue b/app/components/documents/DocumentCommentEntry.vue
@@ -7,6 +7,8 @@ import GenericTime from '~/components/partials/elements/GenericTime.vue';
 import { useNotificatorStore } from '~/store/notificator';
 import type { Comment } from '~~/gen/ts/resources/documents/comment';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
+import HTMLContentRenderer from '../partials/content/HTMLContentRenderer.vue';
+import TiptapEditor from '../partials/TiptapEditor.vue';
 
 const props = defineProps<{
     modelValue?: Comment;
@@ -43,11 +45,19 @@ async function editComment(documentId: string, commentId: string, values: Schema
             comment: {
                 id: commentId,
                 documentId,
-                comment: values.comment,
+                content: {
+                    rawContent: values.comment,
+                },
                 creatorJob: '',
             },
         });
 
+        notifications.add({
+            title: { key: 'notifications.action_successfull.title', parameters: {} },
+            description: { key: 'notifications.action_successfull.content', parameters: {} },
+            type: NotificationType.SUCCESS,
+        });
+
         editing.value = false;
         resetForm();
 
@@ -86,7 +96,7 @@ function resetForm(): void {
         return;
     }
 
-    state.comment = comment.value.comment;
+    state.comment = comment.value.content?.rawContent ?? '';
 }
 
 onMounted(() => resetForm());
@@ -145,33 +155,30 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                     </div>
                 </div>
 
-                <p class="whitespace-pre-line break-words text-sm">
-                    {{ comment.comment }}
-                </p>
+                <div class="whitespace-pre-line break-words text-sm">
+                    <div v-if="comment.content?.content" class="prose dark:prose-invert min-w-full px-4 py-2">
+                        <HTMLContentRenderer :value="comment.content.content" />
+                    </div>
+                </div>
             </div>
         </div>
 
-        <template v-else>
-            <div v-if="can('DocStoreService.PostComment').value" class="flex items-start space-x-4">
-                <div class="min-w-0 flex-1">
-                    <UForm :schema="schema" :state="state" class="relative" @submit="onSubmitThrottle">
-                        <UFormGroup name="comment">
-                            <UTextarea
-                                ref="commentInput"
-                                v-model="state.comment"
-                                :rows="5"
-                                :placeholder="$t('components.documents.document_comments.add_comment')"
-                            />
-                        </UFormGroup>
-
-                        <div class="mt-2 shrink-0">
-                            <UButton type="submit" :disabled="!canSubmit" :loading="!canSubmit">
-                                {{ $t('common.edit') }}
-                            </UButton>
-                        </div>
-                    </UForm>
-                </div>
+        <div v-else-if="can('DocStoreService.PostComment').value" class="flex items-start space-x-4">
+            <div class="min-w-0 flex-1">
+                <UForm :schema="schema" :state="state" class="relative" @submit="onSubmitThrottle">
+                    <UFormGroup name="comment">
+                        <ClientOnly>
+                            <TiptapEditor v-model="state.comment" wrapper-class="min-h-44" />
+                        </ClientOnly>
+                    </UFormGroup>
+
+                    <div class="mt-2 shrink-0">
+                        <UButton type="submit" :disabled="!canSubmit" :loading="!canSubmit">
+                            {{ $t('common.edit') }}
+                        </UButton>
+                    </div>
+                </UForm>
             </div>
-        </template>
+        </div>
     </li>
 </template>
diff --git a/app/components/documents/DocumentComments.vue b/app/components/documents/DocumentComments.vue
@@ -6,8 +6,11 @@ import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import DataNoDataBlock from '~/components/partials/data/DataNoDataBlock.vue';
 import DataPendingBlock from '~/components/partials/data/DataPendingBlock.vue';
 import Pagination from '~/components/partials/Pagination.vue';
+import { useNotificatorStore } from '~/store/notificator';
 import type { Comment } from '~~/gen/ts/resources/documents/comment';
+import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
 import type { GetCommentsResponse } from '~~/gen/ts/services/docstore/docstore';
+import TiptapEditor from '../partials/TiptapEditor.vue';
 
 const props = withDefaults(
     defineProps<{
@@ -29,6 +32,8 @@ const emit = defineEmits<{
 
 const { can } = useAuth();
 
+const notifications = useNotificatorStore();
+
 const page = useRouteQuery('page', '1', { transform: Number });
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
@@ -81,14 +86,22 @@ async function addComment(documentId: string, values: Schema): Promise<void> {
     const comment: Comment = {
         id: '0',
         documentId,
-        comment: values.comment,
+        content: {
+            rawContent: values.comment,
+        },
         creatorJob: '',
     };
 
     try {
         const call = getGRPCDocStoreClient().postComment({ comment });
         const { response } = await call;
 
+        notifications.add({
+            title: { key: 'notifications.action_successfull.title', parameters: {} },
+            description: { key: 'notifications.action_successfull.content', parameters: {} },
+            type: NotificationType.SUCCESS,
+        });
+
         if (response.comment) {
             data.value?.comments.unshift(response.comment);
         }
@@ -140,11 +153,13 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                     <div class="min-w-0 flex-1">
                         <UForm :schema="schema" :state="state" class="relative" @submit="onSubmitThrottle">
                             <UFormGroup name="comment">
-                                <UTextarea
-                                    v-model="state.comment"
-                                    :rows="3"
-                                    :placeholder="$t('components.documents.document_comments.add_comment')"
-                                />
+                                <ClientOnly>
+                                    <TiptapEditor
+                                        v-model="state.comment"
+                                        :placeholder="$t('components.documents.document_comments.add_comment')"
+                                        wrapper-class="min-h-44"
+                                    />
+                                </ClientOnly>
                             </UFormGroup>
 
                             <div class="mt-2 shrink-0">

diff --git a/app/components/documents/DocumentEditor.vue b/app/components/documents/DocumentEditor.vue
@@ -142,7 +142,7 @@ onMounted(async () => {
             if (document) {
                 state.title = document.title;
                 state.state = document.state;
-                state.content = document.content;
+                state.content = document.content?.rawContent ?? '';
                 state.category = document.category ?? emptyCategory;
                 state.closed = document.closed;
                 state.public = document.public;
@@ -260,7 +260,9 @@ async function createDocument(values: Schema): Promise<void> {
     // Prepare request
     const req: CreateDocumentRequest = {
         title: values.title,
-        content: values.content,
+        content: {
+            rawContent: values.content,
+        },
         contentType: ContentType.HTML,
         closed: values.closed,
         state: values.state,
@@ -321,7 +323,9 @@ async function updateDocument(id: string, values: Schema): Promise<void> {
     const req: UpdateDocumentRequest = {
         documentId: id,
         title: values.title,
-        content: values.content,
+        content: {
+            rawContent: values.content,
+        },
         contentType: ContentType.HTML,
         closed: values.closed,
         state: values.state,

diff --git a/app/components/documents/DocumentView.vue b/app/components/documents/DocumentView.vue
@@ -25,6 +25,7 @@ import type { Timestamp } from '~~/gen/ts/resources/timestamp/timestamp';
 import type { ToggleDocumentPinResponse } from '~~/gen/ts/services/docstore/docstore';
 import BackButton from '../partials/BackButton.vue';
 import AccessBadges from '../partials/access/AccessBadges.vue';
+import HTMLContentRenderer from '../partials/content/HTMLContentRenderer.vue';
 import DocumentCategoryBadge from '../partials/documents/DocumentCategoryBadge.vue';
 import DocumentReminderModal from './DocumentReminderModal.vue';
 
@@ -147,21 +148,6 @@ function addToClipboard(): void {
     });
 }
 
-const contentRef = useTemplateRef('contentRef');
-function disableCheckboxes(): void {
-    if (contentRef.value === null) {
-        return;
-    }
-
-    const checkboxes: NodeListOf<HTMLInputElement> = contentRef.value.querySelectorAll('input[type=checkbox]');
-    checkboxes.forEach((el) => {
-        el.setAttribute('disabled', 'disabled');
-        el.classList.add('form-checkbox');
-    });
-}
-
-watchOnce(doc, () => useTimeoutFn(disableCheckboxes, 50));
-
 const hash = useRouteHash();
 if (hash.value !== undefined && hash.value !== null) {
     if (hash.value.replace(/^#/, '') === 'requests') {
@@ -532,8 +518,9 @@ defineShortcuts({
                     {{ $t('common.content') }}
                 </h2>
                 <div class="contentView mx-auto max-w-screen-xl break-words rounded-lg bg-base-900">
-                    <!-- eslint-disable vue/no-v-html -->
-                    <div ref="contentRef" class="prose dark:prose-invert min-w-full px-4 py-2" v-html="doc.content"></div>
+                    <div v-if="doc.content?.content" class="prose dark:prose-invert min-w-full px-4 py-2">
+                        <HTMLContentRenderer :value="doc.content.content" />
+                    </div>
                 </div>
             </div>
 
@@ -594,16 +581,3 @@ defineShortcuts({
         </UCard>
     </template>
 </template>
-
-<style scoped>
-.contentView:deep(.prose) {
-    * {
-        margin-top: 4px;
-        margin-bottom: 4px;
-    }
-
-    input[type='checkbox']:checked {
-        opacity: 1;
-    }
-}
-</style>
diff --git a/app/components/documents/activity/ActivityDocUpdatedDiff.vue b/app/components/documents/activity/ActivityDocUpdatedDiff.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import DiffBlock from '~/components/partials/DiffBlock.vue';
 import type { DocUpdated } from '~~/gen/ts/resources/documents/activity';
 
 defineProps<{
@@ -21,29 +22,32 @@ defineProps<{
             </div>
         </div>
 
-        <div v-if="update.contentDiff">
+        <div v-if="update.stateDiff">
             <p class="text-base font-semibold">
-                {{ $t('common.content') }} {{ $t('components.documents.activity_list.difference') }}:
+                {{ $t('common.state') }} {{ $t('components.documents.activity_list.difference') }}:
             </p>
             <div class="my-2 break-words rounded-lg">
-                <span v-if="update.contentDiff?.length === 0">
+                <span v-if="update.stateDiff?.length === 0">
                     {{ $t('common.na') }}
                 </span>
                 <!-- eslint-disable vue/no-v-html -->
-                <div v-else class="p-4" v-html="update.contentDiff"></div>
+                <div v-else class="p-4" v-html="update.stateDiff"></div>
             </div>
         </div>
 
-        <div v-if="update.stateDiff">
+        <div v-if="update.contentDiff">
             <p class="text-base font-semibold">
-                {{ $t('common.state') }} {{ $t('components.documents.activity_list.difference') }}:
+                {{ $t('common.content') }} {{ $t('components.documents.activity_list.difference') }}:
             </p>
             <div class="my-2 break-words rounded-lg">
-                <span v-if="update.stateDiff?.length === 0">
+                <span v-if="update.contentDiff?.length === 0">
                     {{ $t('common.na') }}
                 </span>
+                <div v-else-if="update.contentDiff.startsWith('---')" class="p-4">
+                    <DiffBlock :diff="update.contentDiff" />
+                </div>
                 <!-- eslint-disable vue/no-v-html -->
-                <div v-else class="p-4" v-html="update.stateDiff"></div>
+                <div v-else class="p-4" v-html="update.contentDiff"></div>
             </div>
         </div>
 

diff --git a/app/components/documents/templates/TemplateEditor.vue b/app/components/documents/templates/TemplateEditor.vue
@@ -6,8 +6,8 @@ import SingleHint from '~/components/SingleHint.vue';
 import TemplateSchemaEditor, { type SchemaEditorValue } from '~/components/documents/templates/TemplateSchemaEditor.vue';
 import { zWorkflow, type ObjectSpecsValue } from '~/components/documents/templates/types';
 import ColorPickerTW from '~/components/partials/ColorPickerTW.vue';
-import DocEditor from '~/components/partials/DocEditor.vue';
 import IconSelectMenu from '~/components/partials/IconSelectMenu.vue';
+import TiptapEditor from '~/components/partials/TiptapEditor.vue';
 import AccessManager from '~/components/partials/access/AccessManager.vue';
 import { enumToAccessLevelEnums, type AccessType } from '~/components/partials/access/helpers';
 import { useAuthStore } from '~/store/auth';
@@ -499,7 +499,7 @@ const categoriesLoading = ref(false);
 
                             <UFormGroup name="content" :label="`${$t('common.content')} ${$t('common.template')}`" required>
                                 <ClientOnly>
-                                    <DocEditor v-model="state.content" split-screen />
+                                    <TiptapEditor v-model="state.content" split-screen />
                                 </ClientOnly>
                             </UFormGroup>
                         </div>

diff --git a/app/components/documents/templates/TemplateView.vue b/app/components/documents/templates/TemplateView.vue
@@ -196,7 +196,8 @@ const contentAccessTypes: AccessType[] = [
                                     name="contentTitle"
                                     class="w-full whitespace-pre-wrap"
                                     disabled
-                                    :rows="4"
+                                    resize
+                                    :rows="3"
                                     :value="template.contentTitle"
                                 />
                             </div>
@@ -235,6 +236,7 @@ const contentAccessTypes: AccessType[] = [
                                     name="content"
                                     class="w-full whitespace-pre-wrap"
                                     disabled
+                                    resize
                                     :rows="4"
                                     :value="template.content"
                                 />