Added number validation on interval input field (#7411) #7445
Conversation
ClementBouvierN
commented
Oct 24, 2024
ClementBouvierN
commented
- 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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
Security and UX improvements needed in numerical validation.
The current implementation has several areas for improvement:
- Uses unsafe
isNaNwhich 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 (
FormGroupandFormControl) - The
replayIntervalfield 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
numericalInputCheckermethod and(input)event handler - Add proper form validators to the
replayIntervalcontrol 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
ClementBouvierN
force-pushed
the
FE-7411-stringInIntervalBetweenSound
branch
from
02d0c42
to
b4a713c
Compare
There was a problem hiding this comment.
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.
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]>
ClementBouvierN
force-pushed
the
FE-7411-stringInIntervalBetweenSound
branch
from
b4a713c
to
67193d4
Compare
There was a problem hiding this comment.
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
|
