●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Two-column settings page with sections: General, Advanced, Content Filtering and Device Rules.
- Form controls: select (DNS filtering mode), InputText for DNS fields, InputNumber for retention, InputTextArea for black/white lists.
- Checkbox toggles and switches for category blocking and DNS-over-HTTPS.
- Device rules rendered in a responsive table with inline edit button.
- Bottom action row with a domain resolve input and a SAVE button.
- Client-side validation via DataAnnotationsValidator and validation attributes on the view model.
## Key components
- EditForm and DataAnnotationsValidator
- InputSelect, InputText, InputTextArea, InputCheckbox, InputNumber
- @bind-Value bindings and OnValidSubmit -> HandleValidSubmit
- foreach rendering of DeviceRuleModel rows into a table
- View model types: SettingsViewModel, BlockedCategoriesModel, DeviceRuleModel
## How it works
- The page initializes mock data in OnInitialized and binds fields using @bind-Value to SettingsViewModel properties.
- EditForm triggers DataAnnotationsValidator; validation attributes include [Required], [RegularExpression] for IPs, and [Range] for retention.
- Submitting a valid form calls HandleValidSubmit (currently logs to console). The Resolve button is present but has no handler.
- Device rules are displayed by iterating settingsModel.DeviceRules and rendering table rows with an edit button per row.
## Styling
- Uses Bootstrap grid and utility classes (container, row, col-lg-6, form-control, form-select, form-check, table-dark, btn-primary) for layout and responsiveness.
- Adds a custom dark theme in app.css (.form-control-dark, .form-select-dark, .input-group-text-dark) and custom button colors.
- Responsive behavior relies on Bootstrap columns; table uses .table-responsive for narrow screens.
## Reuse steps
1. Add Bootstrap CSS to the host page (index.html/_Host) and include the provided app.css.
2. Copy the .razor and view model (.cs) files into a Blazor project and import System.ComponentModel.DataAnnotations.
3. Ensure EditForm/DataAnnotationsValidator are available (no extra NuGet required for core Blazor).
4. Replace mock data and implement persistence: inject a settings service and call it from HandleValidSubmit.
5. Hook up the Resolve button (add an async method or JS interop) and implement device edit behavior (dialog or navigation).
## Limitations & next steps
- This is a single UI page generated by Instruct UI; backend services, persistence, and authentication are not included.
- Resolve button has no implementation; device edit buttons are placeholders without dialogs or routing.
- IP address RegularExpression on the model may need refinement for broader address formats or IPv6.
- Consider adding server-side validation, API endpoints for settings, and unit tests for model validation and services.