-
Notifications
You must be signed in to change notification settings - Fork 27
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.
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
Added number validation on interval input field (#7411) #7445
Conversation
ClementBouvierN
commented
Oct 24, 2024
- In release notes :
- In chapter : Bugs
- Text : It should not be possible to set string in "Interval between sound" in settings #7411 It should not be possible to set string in "Interval between sound" in settings
📝 WalkthroughWalkthroughThe changes in the pull request focus on the In the corresponding TypeScript file, Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
ui/main/src/app/modules/settings/components/settings/settings.component.html (1)
69-70
: LGTM! Consider adding accessibility attributes.The implementation correctly prevents non-numerical input through multiple approaches (type="number", inputmode="numeric"). Consider adding an aria-label for better accessibility:
<input id="opfab-setting-input-replayInterval" #replayIntervalValue type="number" min="0" formControlName="replayInterval" inputmode="numeric" - (input)="numericalInputChecker(replayIntervalValue)"> + (input)="numericalInputChecker(replayIntervalValue)" + aria-label="Replay interval in seconds">
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- ui/main/src/app/modules/settings/components/settings/settings.component.html (1 hunks)
- ui/main/src/app/modules/settings/components/settings/settings.component.ts (1 hunks)
🧰 Additional context used
🪛 Biome
ui/main/src/app/modules/settings/components/settings/settings.component.ts
[error] 145-145: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
private numericalInputChecker(inputElement: HTMLInputElement) { | ||
const numericValue = parseFloat(inputElement.value); | ||
if (isNaN(numericValue) || numericValue < 0) { | ||
inputElement.value = ''; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Security and UX improvements needed in numerical validation.
The current implementation has several areas for improvement:
- Uses unsafe
isNaN
which attempts type coercion - Silently clears invalid input without user feedback
- Missing validation for edge cases
Consider this enhanced implementation:
- private numericalInputChecker(inputElement: HTMLInputElement) {
- const numericValue = parseFloat(inputElement.value);
- if (isNaN(numericValue) || numericValue < 0) {
- inputElement.value = '';
- }
- }
+ private numericalInputChecker(inputElement: HTMLInputElement) {
+ const value = inputElement.value.trim();
+ if (value === '') return;
+
+ const numericValue = parseFloat(value);
+ if (Number.isNaN(numericValue) || numericValue < 0) {
+ inputElement.value = '';
+ AlertMessageService.sendAlertMessage({
+ message: '',
+ i18n: {key: 'settings.input.errors.invalidNumber'},
+ level: MessageLevel.ERROR
+ });
+ }
+ }
Also, consider adding these translations to your i18n files:
{
"settings.input.errors.invalidNumber": "Please enter a valid positive number"
}
🧰 Tools
🪛 Biome
[error] 145-145: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
💡 Codebase verification
Based on the gathered information, I can now provide the final response:
The numerical validation approach needs improvement
The current implementation shows that:
- The form is using Angular's Reactive Forms (
FormGroup
andFormControl
) - The
replayInterval
field is using a direct DOM manipulation approach for validation vianumericalInputChecker
- While the input has
formControlName="replayInterval"
, it's missing proper form validators
To improve this:
- Remove the
numericalInputChecker
method and(input)
event handler - Add proper form validators to the
replayInterval
control during form initialization:
replayInterval: new FormControl('', [
Validators.required,
Validators.min(0),
Validators.pattern(/^\d+$/)
])
🔗 Analysis chain
Verify integration with form validation.
The numerical validation should be integrated with Angular's form validation system for consistency.
Let's check the form validation setup:
Consider enhancing the validation by:
- Adding a custom validator to the form control
- Using reactive form validation instead of DOM event handling
- Implementing proper form state management
Example implementation:
private createNumberValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const value = control.value;
if (value === null || value === '') return null;
const numeric = parseFloat(value);
return Number.isNaN(numeric) || numeric < 0 ? {invalidNumber: true} : null;
};
}
Let me gather more information about the specific component to understand how the numerical validation is currently implemented.
Let me check how this numerical input checker is being used in the component.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for form validation patterns in the codebase
rg -A 5 "Validators\." "ui/main/src/app/modules/"
Length of output: 12423
Script:
#!/bin/bash
# Search for the form setup and validation in the settings component
rg -A 10 "settingsForm" "ui/main/src/app/modules/settings/components/settings/settings.component.ts"
# Search for any numerical input handling in the settings component
rg -B 5 -A 10 "numericalInputChecker" "ui/main/src/app/modules/settings/components/settings/settings.component.ts"
Length of output: 2529
Script:
#!/bin/bash
# Search for usage of numericalInputChecker in the template or component
rg -B 5 -A 5 "numericalInputChecker" "ui/main/src/app/modules/settings/components/settings/settings.component.html"
# Search for numeric-related form controls in the settings component
rg -B 2 -A 2 "type=\"number\"" "ui/main/src/app/modules/settings/components/settings/settings.component.html"
Length of output: 1125
🧰 Tools
🪛 Biome
[error] 145-145: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
ui/main/src/app/modules/settings/components/settings/settings.component.html
Outdated
Show resolved
Hide resolved
02d0c42
to
b4a713c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- ui/main/src/app/modules/settings/components/settings/settings.component.html (1 hunks)
- ui/main/src/app/modules/settings/components/settings/settings.component.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- ui/main/src/app/modules/settings/components/settings/settings.component.html
🧰 Additional context used
🪛 Biome
ui/main/src/app/modules/settings/components/settings/settings.component.ts
[error] 145-145: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
private numericalInputChecker(inputElement: HTMLInputElement) { | ||
const numericValue = parseFloat(inputElement.value); | ||
if (isNaN(numericValue) || numericValue < 0) { | ||
inputElement.value = ''; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Additional concerns with the numerical validation implementation.
While previous reviews covered the main validation issues, there are additional concerns:
- Direct DOM manipulation via
inputElement.value = ''
breaks Angular's change detection and form state management - The validation is not integrated with the existing form validation setup in
initForm()
- The empty string values from cleared inputs may affect the form value changes subscription in
listenToFormChanges()
Consider integrating the validation with the existing form setup:
private initForm() {
// ... existing code ...
const formGroupConfig = {};
settings.forEach((setting) => {
if (setting === 'email') {
formGroupConfig[setting] = new FormControl(this.settingsView.getSetting(setting), Validators.email);
} else if (setting === 'replayInterval') {
formGroupConfig[setting] = new FormControl(
this.settingsView.getSetting(setting),
[
Validators.required,
Validators.min(0),
Validators.pattern(/^\d*\.?\d*$/)
]
);
} else {
formGroupConfig[setting] = new FormControl(this.settingsView.getSetting(setting));
}
});
}
This approach:
- Properly integrates with Angular's form validation
- Maintains form state for error handling
- Preserves change detection
🧰 Tools
🪛 Biome
[error] 145-145: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
Signed-off-by: ClementBouvierN <[email protected]>
b4a713c
to
67193d4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- ui/main/src/app/modules/settings/components/settings/settings.component.html (1 hunks)
- ui/main/src/app/modules/settings/components/settings/settings.component.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- ui/main/src/app/modules/settings/components/settings/settings.component.html
ui/main/src/app/modules/settings/components/settings/settings.component.ts
Show resolved
Hide resolved
Quality Gate passedIssues Measures |