Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: null message on input help #343

Merged
merged 2 commits into from
Mar 12, 2024
Merged

fix: null message on input help #343

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f46efdb
fix: null message on input help
madassdev Mar 12, 2024
1248c15
fix null message
madassdev Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion client/components/forms/components/InputHelp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="flex mb-1 input-help">
<small :class="theme.default.help" class="grow flex">
<slot name="help"><span class="field-help" v-html="help" /></slot>
<slot name="help"><span class="field-help" v-html="helpValue" /></slot>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using v-html to dynamically render HTML can introduce security risks, particularly XSS vulnerabilities. Ensure that the content bound to v-html is sanitized or trusted, especially if it could be influenced by user input. Consider alternatives like v-text if HTML formatting is not required, or ensure proper sanitization of the content.

</small>
<slot name="after-help">
<small class="flex-grow" />
Expand All @@ -16,6 +16,12 @@ export default {
props: {
theme: { type: Object, required: true },
help: { type: String, required: false }
},

computed: {
helpValue(){
return (this.help === null || this.help === undefined) ? '' : this.help
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The helpValue computed property effectively addresses the issue of null or undefined help messages by ensuring that an empty string is returned in such cases. This is a good use of computed properties for data handling in Vue. For improved readability, consider using a more concise syntax with optional chaining and the nullish coalescing operator:

- return (this.help === null || this.help === undefined) ? '' : this.help
+ return this.help ?? ''
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
computed: {
helpValue(){
return (this.help === null || this.help === undefined) ? '' : this.help
}
computed: {
helpValue(){
return this.help ?? ''
}

}
}
</script>
Loading