diff --git a/docs/docs/designer/debugging.md b/docs/docs/designer/debugging.md index b3c3fc473..6fadae172 100755 --- a/docs/docs/designer/debugging.md +++ b/docs/docs/designer/debugging.md @@ -24,5 +24,9 @@ There exists no interactive CSS editor like dev tools console in browsers. However, you can set background colors or borders on elements to see where they are positioned and how big they are, e.g. ``` -{background: rgba(150,150,150,0.1)} -``` \ No newline at end of file +
...
+ +#element-to-debug { + background-color: rgba(255, 0, 0, 0.2); +} +``` diff --git a/docs/docs/designer/field-types.md b/docs/docs/designer/field-types.md new file mode 100644 index 000000000..0bd90c3d2 --- /dev/null +++ b/docs/docs/designer/field-types.md @@ -0,0 +1,205 @@ +# Report Field Types + +This page describes field types available in SysReptor and how to use them in reports and findings. + +Report and finding definitions define what input fields are available in report sections and findings when writing report. +Fields are available as form input fields when writing reports in the web interface. +Field values are also available in Vue templates as variables. + + +## Common Options +All fields have the following common options: + +* ID: A unique identifier for the field. This ID is used to access the field in the HTML/Vue template. +* Data Type: The data type defines the structure of the field and its allowed values. See below for a list of available data types. +* Label: The label is shown in the input form when writing a report. It is a friendly name for users to understand what the field is for. +* Required: Mark the field as required (must be filled) or optional (can be empty). If a required field is not filled out, a warning message generated before publishing the report. +* Default Value: The default value is the initial value of the field when creating a new project. Some fields support TODOs in the default value to remind the user to fill out parts of the field. + + +## Markdown +Markdown fields are used to write text blocks with markdown formatting. +See [Markdown Syntax](/reporting/markdown-features.md) for more information on markdown formatting. + +![Markdown field](/images/fields_markdown.png) + +```html title="Usage in Vue templates" + +``` + +## String +String fields are used to write a short, single-line text. +Compared to markdown fields, only a single line is allowed and no text formatting is available. + +Options: + +* Spellcheck Supported: Enable or disable spellcheck for the field. Spellchecking is only useful for fields containing natural language text (e.g. a sentance, like for `short_description`). It is not useful for fields containing URLs, IDs, codes or other non-natural language text. +* Pattern: Regex pattern to validate the input. If the input does not match the pattern, a warning message is generated before publishing the report. + +![String field](/images/fields_string.png) + +```html title="Usage in Vue templates" +Text: {{ report.field_string }} +``` + + +## CVSS +CVSS fields are used to write a CVSS vector. A graphical CVSS vector editor is available in the input form. + +Options: + +* CVSS Version: Require a specific CVSS version (CVSS:3.1 or CVSS:4.0) or allow both versions. + +![CVSS field](/images/fields_cvss.png) + + +The field content is a CVSS vector string or "n/a" to indicate that no CVSS vector is applicable. +The CVSS score is calculated from the vector and shown in the input form and provided in Vue templates. + +```html title="Usage in Vue templates" +Vector: {{ report.field_cvss.vector }} +Score: {{ report.field_cvss.score }} +Level: {{ report.field_cvss.level }} +Level (numeric): {{ report.field_cvss.level_number }} +CVSS Version: {{ report.field_cvss.version }} +``` + + +## Enum +Enum fields are used to select a single value from a list of predefined options. + +Options: + +* Choices: A list of options to choose from. Each option has a value and a label. The value is used as the field value and the label is shown in the input form. + +![Enum field](/images/fields_enum.png) + +```html title="Usage in Vue templates" +Value: {{ report.field_enum.value }} +Label: {{ report.field_enum.label }} +``` + + +## Combobox +Combobox fields are a combination of an enum field and a string field. The user can select a predefined option or enter a custom value. + +Options: + +* Suggestions: A list of predefined texts to choose from. + +![Combobox field](/images/fields_combobox.png) + +```html title="Usage in Vue templates" +Text: {{ report.field_combobox }} +``` + + +## CWE +CWE fields are used to select a CWE (Common Weakness Enumeration). +This field is similar to an enum field, but provides more information about CWEs and enhanced search capabilities. + +![CWE field](/images/fields_cwe.png) + +```html title="Usage in Vue templates" +ID: {{ report.field_cwe.id }} +Value: {{ report.field_cwe.value }} +Name: {{ report.field_cwe.name }} +Description: {{ report.field_cwe.description }} +``` + +## Date +Date fields are used to select a date. A date picker is available in the input form. + +![Date field](/images/fields_date.png) + +Dates are stored in ISO 8601 format (YYYY-MM-DD). In Vue templates, the date can be formatted using the [`formatDate()` function](/designer/formatting-utils/#date-formatting). + +```html title="Usage in Vue templates" +ISO Date: {{ report.field_date }} +Formatted Date: {{ formatDate(report.field_date, 'long', 'en-US') }} +``` + + +## Number +Number fields are used to enter a numeric value. + +![Number field](/images/fields_number.png) + +```html title="Usage in Vue templates" +Value: {{ report.field_number }} +``` + + +## Boolean +Boolean fields are used to select a true or false value. This field is represented as a checkbox in the input form. + +![Boolean field](/images/fields_boolean.png) + +This field is useful enable/disable parts of the report rendering or change the behavior of the report template. +Booleans values are often combined with `v-if` and `v-else` directives in Vue templates to conditionally render parts of the report. + +```html title="Usage in Vue templates" +Value: {{ report.field_boolean }} +If:
...
...
+``` + + +## User +User fields are used to select a user from the list of project members. +In the Vue template the whole user object is available with the user's ID, name, email, phone number, etc. + +![User field definition](/images/fields_user.png) +![User field form](/images/fields_user2.png) + +```html title="Usage in Vue templates" +ID: {{ report.field_user.id }} +Name: {{ report.field_user.name }} +Email: {{ report.field_user.email }} +Full Data: 
{{ report.field_user }}
+``` + + +## Object +Object fields are used to group multiple fields together. This is useful to structure complex data in the report. + +Options: + +* Properties: A list of nested fields that are part of the object. Properties can have any data type. Note: Properties are ordered by their ID in the input form. + +![Object field](/images/fields_object.png) + +```html title="Usage in Vue templates" +Property value: {{ report.field_object.property1 }} +Property value: {{ report.field_object.property2 }} +``` + + +## List +List fields are used to dynamically add multiple values of a specific data type. + +Options: + +* Item Type: The data type of the list items. The item type can be any data type, including other lists or objects. + +![List field](/images/fields_list.png) + +```html title="Usage in Vue templates" +List length: {{ report.field_list.length }} +List item by index: {{ report.field_list[0] }} +Iterate over list items:
{{ item }}
+``` + diff --git a/docs/docs/images/fields_boolean.png b/docs/docs/images/fields_boolean.png new file mode 100644 index 000000000..f0666de9c Binary files /dev/null and b/docs/docs/images/fields_boolean.png differ diff --git a/docs/docs/images/fields_combobox.png b/docs/docs/images/fields_combobox.png new file mode 100644 index 000000000..242f5aff5 Binary files /dev/null and b/docs/docs/images/fields_combobox.png differ diff --git a/docs/docs/images/fields_cvss.png b/docs/docs/images/fields_cvss.png new file mode 100644 index 000000000..3f1c1c235 Binary files /dev/null and b/docs/docs/images/fields_cvss.png differ diff --git a/docs/docs/images/fields_cwe.png b/docs/docs/images/fields_cwe.png new file mode 100644 index 000000000..6348e401e Binary files /dev/null and b/docs/docs/images/fields_cwe.png differ diff --git a/docs/docs/images/fields_date.png b/docs/docs/images/fields_date.png new file mode 100644 index 000000000..91a5f8882 Binary files /dev/null and b/docs/docs/images/fields_date.png differ diff --git a/docs/docs/images/fields_enum.png b/docs/docs/images/fields_enum.png new file mode 100644 index 000000000..93d80ee93 Binary files /dev/null and b/docs/docs/images/fields_enum.png differ diff --git a/docs/docs/images/fields_list.png b/docs/docs/images/fields_list.png new file mode 100644 index 000000000..c74dd108d Binary files /dev/null and b/docs/docs/images/fields_list.png differ diff --git a/docs/docs/images/fields_markdown.png b/docs/docs/images/fields_markdown.png new file mode 100644 index 000000000..62c068935 Binary files /dev/null and b/docs/docs/images/fields_markdown.png differ diff --git a/docs/docs/images/fields_number.png b/docs/docs/images/fields_number.png new file mode 100644 index 000000000..e4d777fda Binary files /dev/null and b/docs/docs/images/fields_number.png differ diff --git a/docs/docs/images/fields_object.png b/docs/docs/images/fields_object.png new file mode 100644 index 000000000..70f4f01dd Binary files /dev/null and b/docs/docs/images/fields_object.png differ diff --git a/docs/docs/images/fields_string.png b/docs/docs/images/fields_string.png new file mode 100644 index 000000000..210c5e831 Binary files /dev/null and b/docs/docs/images/fields_string.png differ diff --git a/docs/docs/images/fields_user.png b/docs/docs/images/fields_user.png new file mode 100644 index 000000000..925cd9e27 Binary files /dev/null and b/docs/docs/images/fields_user.png differ diff --git a/docs/docs/images/fields_user2.png b/docs/docs/images/fields_user2.png new file mode 100644 index 000000000..cea7964f0 Binary files /dev/null and b/docs/docs/images/fields_user2.png differ diff --git a/docs/docs/reporting/references.md b/docs/docs/reporting/references.md index d1aebe6ad..e8786fe6f 100644 --- a/docs/docs/reporting/references.md +++ b/docs/docs/reporting/references.md @@ -49,7 +49,7 @@ You can reference headings if your [design supports it](/designer/headings-and-t ```md title="Markdown" # Findings {#findings .in-toc.numbered} -Find details in []"#findings" /> (rendered as "1 Findings"). +Find details in [](#findings) (rendered as "1 Findings"). ``` ```html title="HTML" diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 2f4f049bc..098c346f5 100755 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -20,6 +20,7 @@ nav: - Locked Sections: reporting/locking.md - Designing Reports: - Designer: designer/designer.md + - Field Types: designer/field-types.md - Page Layout: designer/page-layout.md - Headings and ToC: designer/headings-and-table-of-contents.md - Tables: designer/tables.md diff --git a/frontend/src/components/Design/InputFieldDefinition.vue b/frontend/src/components/Design/InputFieldDefinition.vue index 410c09987..1f828e510 100644 --- a/frontend/src/components/Design/InputFieldDefinition.vue +++ b/frontend/src/components/Design/InputFieldDefinition.vue @@ -60,7 +60,7 @@ @update:model-value="updateProperty('required', $event)" :readonly="props.readonly" label="Required" - hint="Determines whether this field is required must be filled or optional" + hint="Determines whether this field is required (must be filled) or optional (can be empty)" /> diff --git a/frontend/src/components/DynamicInputField.vue b/frontend/src/components/DynamicInputField.vue index ddfef8f88..9318b51be 100644 --- a/frontend/src/components/DynamicInputField.vue +++ b/frontend/src/components/DynamicInputField.vue @@ -43,6 +43,7 @@ item-title="label" item-value="value" :clearable="!props.readonly" + spellcheck="false" v-bind="fieldAttrs" />