Set form fields readonly instead of disabled

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Next
 * Diff-view for version history
+* Set form fields readonly instead of disabled
 
 
 ## v2024.3 - 2024-01-09

api/src/reportcreator_api/pentests/permissions.py

@@ -39,9 +39,12 @@ def has_object_permission(self, request, view, obj):
         elif obj.scope == ProjectTypeScope.PROJECT:
             if request.user not in set(map(lambda m: m.user, obj.linked_project.members.all())):
                 return False
-            return request.method in permissions.SAFE_METHODS or view.action in self.public_actions or \
-                (view.action in self.private_actions and obj.source == SourceEnum.CUSTOMIZED) or \
-                (request.user.is_designer and obj.source == SourceEnum.CUSTOMIZED)
+            if request.method in permissions.SAFE_METHODS or view.action in self.public_actions:
+                return True
+            if obj.linked_project.readonly:
+                return False
+            return (view.action in self.private_actions and obj.source == SourceEnum.CUSTOMIZED) or \
+                   (request.user.is_designer and obj.source == SourceEnum.CUSTOMIZED)
         return False
 
 

frontend/src/components/Design/CodeEditor.vue

@@ -34,10 +34,10 @@ monaco.languages.html.htmlDefaults.setOptions({
 const props = withDefaults(defineProps<{
   modelValue: string,
   language?: string,
-  disabled?: boolean,
+  readonly?: boolean,
 }>(), {
   language: 'plaintext',
-  disabled: false,
+  readonly: false,
 });
 const emits = defineEmits< {
   (e: 'update:modelValue', modelValue: string): void
@@ -52,7 +52,7 @@ onMounted(() => {
   editor = monaco.editor.create(editorElement.value!, {
     value: props.modelValue,
     language: props.language,
-    readOnly: props.disabled,
+    readOnly: props.readonly,
     theme: theme.current.value.dark ? 'vs-dark' : 'vs',
     minimap: {
       enabled: false,
@@ -80,7 +80,7 @@ watch(() => props.modelValue, (val) => {
     editor.setValue(val);
   }
 });
-watch(() => props.disabled, (val) => {
+watch(() => props.readonly, (val) => {
   if (editor) {
     editor.updateOptions({ readOnly: val });
   }

frontend/src/components/Design/FindingOrderingDefinition.vue

@@ -11,15 +11,15 @@
           :model-value="props.modelValue"
           @update:model-value="emit('update:modelValue', $event)"
           item-key="field"
-          :disabled="props.disabled"
+          :disabled="props.readonly"
           handle=".draggable-handle"
         >
           <template #item="{element: orderConfig, index: idx}">
             <v-list-item>
               <template #prepend>
                 <span v-if="idx === 0">Sort by</span>
                 <span v-else>then by</span>
-                <v-icon size="x-large" class="draggable-handle ml-6" :disabled="props.disabled" icon="mdi-drag-horizontal" />
+                <v-icon size="x-large" class="draggable-handle ml-6" :disabled="props.readonly" icon="mdi-drag-horizontal" />
               </template>
               <template #default>
                 <v-row dense>
@@ -31,7 +31,7 @@
                       :items="[{id: orderConfig.field}].concat(availableFindingFields)"
                       item-title="id"
                       item-value="id"
-                      :disabled="props.disabled"
+                      :readonly="props.readonly"
                       class="mt-2"
                     />
                   </v-col>
@@ -41,7 +41,7 @@
                       @update:model-value="updateOrder(idx, orderConfig, $event)"
                       label="Order"
                       :items="[SortOrder.ASC, SortOrder.DESC]"
-                      :disabled="props.disabled"
+                      :readonly="props.readonly"
                       class="mt-2"
                     />
                   </v-col>
@@ -52,7 +52,7 @@
                 <btn-delete
                   :delete="() => deleteOrderConfig(orderConfig)"
                   :confirm="false"
-                  :disabled="props.disabled"
+                  :disabled="props.readonly"
                   button-variant="icon"
                 />
               </template>
@@ -63,7 +63,7 @@
         <v-list-item>
           <s-btn-secondary
             @click="addField"
-            :disabled="props.disabled || availableFindingFields.length === 0"
+            :disabled="props.readonly || availableFindingFields.length === 0"
             prepend-icon="mdi-plus"
             text="Add"
           />
@@ -80,7 +80,7 @@ import { SortOrder } from '~/utils/types';
 const props = defineProps<{
   modelValue: FindingOrderingDefinition[];
   projectType: ProjectType;
-  disabled?: boolean;
+  readonly?: boolean;
 }>();
 const emit = defineEmits<{
   'update:modelValue': [FindingOrderingDefinition[]];

frontend/src/components/Design/InputFieldDefinition.vue

@@ -8,7 +8,8 @@
             @update:model-value="!props.isObjectProperty ? updateProperty('id', $event) : null"
             @change="updateProperty('id', $event.target.value)"
             :rules="rules.id"
-            :disabled="props.disabled || !props.canChangeStructure"
+            :disabled="!props.canChangeStructure"
+            :readonly="props.readonly"
             label="ID"
             hint="Used to access this field in report templates"
             required
@@ -20,7 +21,8 @@
             :model-value="props.modelValue.type"
             @update:model-value="updateType($event)"
             :items="Object.values(FieldDataType)"
-            :disabled="props.disabled || !props.canChangeStructure"
+            :disabled="!props.canChangeStructure"
+            :readonly="props.readonly"
             label="Data Type"
             hint="Data type of this field. Controls the allowed values and input form."
             required
@@ -31,7 +33,7 @@
           <s-text-field
             :model-value="props.modelValue.label"
             @update:model-value="updateProperty('label', $event)"
-            :disabled="props.disabled"
+            :readonly="props.readonly"
             label="Label"
             hint="Friendly name used in input forms for this field"
             required
@@ -44,7 +46,8 @@
         :model-value="props.modelValue.type"
         @update:model-value="updateProperty('type', $event)"
         :items="Object.values(FieldDataType)"
-        :disabled="props.disabled || !props.canChangeStructure"
+        :disabled="!props.canChangeStructure"
+        :readonly="props.readonly"
         label="Data Type"
         hint="Data type of this field. Controls the allowed values and input form."
         required
@@ -55,7 +58,7 @@
           <s-checkbox
             :model-value="props.modelValue.required || false"
             @update:model-value="updateProperty('required', $event)"
-            :disabled="props.disabled"
+            :readonly="props.readonly"
             label="Required"
             hint="Determines whether this field is required must be filled or optional"
           />
@@ -67,7 +70,7 @@
             <s-checkbox
               :model-value="props.modelValue.spellcheck || false"
               @update:model-value="updateProperty('spellcheck', $event)"
-              :disabled="props.disabled"
+              :readonly="props.readonly"
               label="Spellcheck Supported"
               hint="Support spellchecking for this fields text content."
             />
@@ -78,10 +81,10 @@
               :model-value="props.modelValue.pattern"
               @update:model-value="updateProperty('pattern', $event)"
               :items="predefinedRegexPatterns.map(p => p.value)"
-              :disabled="props.disabled"
+              :readonly="props.readonly"
               label="Pattern"
               hint="RegEx pattern to validate the input against."
-              clearable
+              :clearable="!props.readonly"
               :rules="rules.pattern"
               spellcheck="false"
             >
@@ -103,7 +106,7 @@
               :model-value="props.modelValue.cvss_version || null"
               @update:model-value="updateProperty('cvss_version', $event)"
               :items="[{ title: 'Any', value: null }, CvssVersion.CVSS40, CvssVersion.CVSS31]"
-              :disabled="props.disabled"
+              :readonly="props.readonly"
               label="CVSS Version"
               hint="Require a specific CVSS version"
               class="mt-2"
@@ -119,7 +122,7 @@
           :model-value="props.modelValue.choices || []"
           @update:model-value="updateEnumChoice('sort', 0, $event)"
           :item-key="(item: EnumFieldChoiceDefinition) => (props.modelValue.choices || []).indexOf(item)"
-          :disabled="props.disabled || !props.canChangeStructure"
+          :disabled="props.readonly || !props.canChangeStructure"
           handle=".draggable-handle"
         >
           <template #item="{ element: choice, index: choiceIdx }">
@@ -129,7 +132,7 @@
                   <v-icon
                     size="x-large"
                     class="draggable-handle"
-                    :disabled="props.disabled || !props.canChangeStructure"
+                    :disabled="props.readonly || !props.canChangeStructure"
                     icon="mdi-drag-horizontal"
                   />
                 </template>
@@ -139,7 +142,8 @@
                       <s-text-field
                         :model-value="choice.value"
                         @update:model-value="updateEnumChoice('updateValue', choiceIdx, $event)"
-                        :disabled="props.disabled || !props.canChangeStructure"
+                        :disabled="!props.canChangeStructure"
+                        :readonly="props.readonly"
                         :rules="rules.choice"
                         label="Value"
                         required
@@ -151,7 +155,7 @@
                       <s-text-field
                         :model-value="choice.label"
                         @update:model-value="updateEnumChoice('updateLabel', choiceIdx, $event)"
-                        :disabled="props.disabled"
+                        :readonly="props.readonly"
                         label="Label"
                         required
                         spellcheck="false"
@@ -164,7 +168,7 @@
                   <btn-delete
                     :delete="() => updateEnumChoice('delete', choiceIdx)"
                     :confirm="false"
-                    :disabled="props.disabled || !props.canChangeStructure"
+                    :disabled="props.readonly || !props.canChangeStructure"
                     button-variant="icon"
                   />
                 </template>
@@ -175,7 +179,7 @@
         <v-list-item>
           <s-btn-secondary
             @click="updateEnumChoice('add', 0)"
-            :disabled="props.disabled || !props.canChangeStructure"
+            :disabled="props.readonly || !props.canChangeStructure"
             prepend-icon="mdi-plus"
             text="Add Value"
           />
@@ -189,7 +193,8 @@
             <s-text-field
               :model-value="suggestion"
               @update:model-value="updateComboboxSuggestion('update', suggestionIdx, $event)"
-              :disabled="props.disabled || !props.canChangeStructure"
+              :disabled="!props.canChangeStructure"
+              :readonly="props.readonly"
               label="Value"
               required
               spellcheck="false"
@@ -200,15 +205,15 @@
             <btn-delete
               :delete="() => updateComboboxSuggestion('delete', suggestionIdx)"
               :confirm="false"
-              :disabled="props.disabled || !props.canChangeStructure"
+              :disabled="props.readonly || !props.canChangeStructure"
               button-variant="icon"
             />
           </template>
         </v-list-item>
         <v-list-item>
           <s-btn-secondary
             @click="updateComboboxSuggestion('add', 0)"
-            :disabled="props.disabled || !props.canChangeStructure"
+            :disabled="props.readonly || !props.canChangeStructure"
             prepend-icon="mdi-plus"
             text="Add Value"
           />
@@ -219,23 +224,23 @@
         v-if="![FieldDataType.OBJECT, FieldDataType.LIST, FieldDataType.USER].includes(props.modelValue.type as any)"
         :model-value="props.modelValue.default"
         @update:model-value="updateProperty('default', $event)"
-        :definition="{...props.modelValue, label: 'Default Value', required: false, pattern: null} as FieldDefinition"
+        :definition="({...props.modelValue, label: 'Default Value', required: false, pattern: null} as FieldDefinition)"
         :lang="props.lang"
         v-model:spellcheck-enabled="localSettings.designSpellcheckEnabled"
         v-model:markdown-editor-mode="localSettings.designMarkdownEditorMode"
-        :disabled="props.disabled"
+        :readonly="props.readonly"
         :disable-validation="true"
       />
 
       <!-- List Item -->
       <design-input-field-definition
         v-else-if="props.modelValue.type === FieldDataType.LIST"
-        :model-value="props.modelValue.items! as FieldDefinitionWithId"
+        :model-value="(props.modelValue.items! as FieldDefinitionWithId)"
         @update:model-value="updateProperty('items', $event)"
         :is-list-item="true"
         :can-change-structure="props.canChangeStructure"
         :lang="props.lang"
-        :disabled="props.disabled"
+        :readonly="props.readonly"
       />
       <!-- Object -->
       <v-list v-else-if="props.modelValue.type === FieldDataType.OBJECT">
@@ -247,13 +252,13 @@
               :is-object-property="true"
               :can-change-structure="props.canChangeStructure"
               :lang="props.lang"
-              :disabled="props.disabled"
+              :readonly="props.readonly"
             />
           </template>
           <template #append>
             <btn-delete
               :delete="() => updateObject('delete', f.id)"
-              :disabled="props.disabled || !props.canChangeStructure"
+              :disabled="props.readonly || !props.canChangeStructure"
               button-variant="icon"
             />
           </template>
@@ -263,7 +268,7 @@
         <v-list-item>
           <s-btn-secondary
             @click="updateObject('add')"
-            :disabled="props.disabled || !props.canChangeStructure"
+            :disabled="props.readonly || !props.canChangeStructure"
             prepend-icon="mdi-plus"
             text="Add property"
           />
@@ -284,7 +289,7 @@ const props = defineProps<{
   canChangeStructure?: boolean;
   isListItem?: boolean;
   isObjectProperty?: boolean;
-  disabled?: boolean;
+  readonly?: boolean;
   lang?: string|null;
 }>();
 const emit = defineEmits<{

frontend/src/components/Design/PreviewDataForm.vue

@@ -17,7 +17,7 @@
           v-model="findings"
           item-key="id"
           handle=".draggable-handle"
-          :disabled="disabled || projectType.finding_ordering.length !== 0"
+          :disabled="props.readonly || projectType.finding_ordering.length !== 0"
         >
           <template #item="{element: finding}">
             <v-list-item
@@ -28,7 +28,7 @@
             >
               <template #prepend>
                 <div v-if="projectType.finding_ordering.length === 0" class="draggable-handle mr-2">
-                  <v-icon :disabled="disabled" icon="mdi-drag-horizontal" />
+                  <v-icon :disabled="props.readonly" icon="mdi-drag-horizontal" />
                 </div>
               </template>
               <template #default>
@@ -37,7 +37,7 @@
               <template #append>
                 <btn-delete
                   :delete="() => deleteFinding(finding)"
-                  :disabled="props.disabled"
+                  :disabled="props.readonly"
                   button-variant="icon"
                   size="small"
                   density="comfortable"
@@ -50,7 +50,7 @@
         <v-list-item>
           <s-btn-secondary
             @click="createFinding"
-            :disabled="props.disabled"
+            :disabled="props.readonly"
             size="x-small"
             block
             prepend-icon="mdi-plus"
@@ -96,7 +96,7 @@ import { scoreFromVector, levelNumberFromLevelName, levelNumberFromScore } from
 const props = defineProps<{
   modelValue: any;
   projectType: ProjectType;
-  disabled?: boolean;
+  readonly?: boolean;
   uploadFile?: (file: File) => Promise<string>;
   rewriteFileUrl?: (fileSrc: string) => string;
 }>();
@@ -212,7 +212,7 @@ const fieldAttrs = computed(() => ({
   rewriteFileUrl: props.rewriteFileUrl,
   selectableUsers: [auth.user.value],
   lang: props.projectType.language,
-  disabled: props.disabled,
+  readonly: props.readonly,
   spellcheckEnabled: localSettings.designSpellcheckEnabled,
   'onUpdate:spellcheckEnabled': (val: boolean) => { localSettings.designSpellcheckEnabled = val },
   markdownEditorMode: localSettings.designMarkdownEditorMode,