JiatengTao
commented
2 months ago @michaeljpigott Hi Michael, I will merge this PR, this dirb tool will be a draft demo for some tools to add more parameters. @chandelshubham63 Hi Shubham, please keep polish this feature next trimester (eg. Restructure the form value to use React onchange hook and improve some inbox length and merge them in the same row), and work closely with Michael to make sure it meet the project benefit.
This PR resolve the issue #696 and aims to merge the improved Dirb tool interface into the main DDT project, serving as a template for enhancing the usability and organization of other complex tools in the toolkit. Description- I have implemented an enhanced UI layout for the Dirb tool component to improve its usability and organization of parameters. The new layout incorporates parameter grouping, allowing users to easily navigate and configure the Dirb tool's settings according to their specific requirements. Reasons for Changing the UI for Complex Tools-
Improved Usability- Complex tools often have numerous parameters and options, which can be overwhelming for users. By grouping related parameters together and providing a structured layout, we can enhance the usability of the tool and make it more intuitive for users to configure. Better Organization- With a large number of parameters, it becomes challenging to present them in a clear and organized manner. By grouping parameters into logical sections, such as Basic Options, Advanced Options, Authentication Options, and Additional Options, we can provide a more structured and understandable interface for users. Enhanced User Experience- By implementing an enhanced UI layout, we can improve the overall user experience when interacting with complex tools. Users can easily expand and collapse parameter groups based on their needs, reducing visual clutter and allowing them to focus on the relevant settings.
Key Features of the Enhanced Dirb Tool Interface-
Parameter Grouping-
Parameters are grouped into logical sections- Basic Options, Advanced Options, Authentication Options, and Additional Options. Each group can be expanded or collapsed using toggle buttons, providing a clean and focused interface.
Stepper-based Layout-
The interface is divided into multiple steps using the Mantine Stepper component. Users can navigate through the steps to provide input and configure the Dirb tool.
URL Input-
In the first step, users can enter the target URL they want to scan using Dirb.
Parameter Configuration-
The second step allows users to configure various parameters for the Dirb tool. Users can specify the path to a custom wordlist file and select the wordlist size. Basic options include case-insensitive search, printing the 'Location' header, ignoring specific HTTP codes, and specifying an output file. Advanced options include non-recursive mode, silent mode, user agent, and removing trailing sequences. Authentication options include cookie, certificate path, custom header, proxy settings, interactive recursion, and username/password. Additional options include showing non-existent pages, stopping on warnings, specifying extension files, and setting a delay between requests.
Execution and Results-
Users can initiate the Dirb tool scanning process by clicking the "Run Dirb" button. The output of the Dirb tool will be displayed in a console wrapper component within the interface. Users can save the output to a file using the provided "Save Output" functionality.
Applicability to Other Complex Tools- The enhanced UI layout with parameter grouping can be applied to other complex tools in the DDT project as well. By following a similar approach of grouping related parameters, providing toggle functionality, and using a stepper-based layout, we can improve the usability and organization of other complex tools. This will create a consistent and user-friendly experience across the DDT project.
Testing- The new layout is tested for it's functionality and is working smoothly, also the codebase follow the baseline format.
Screenshots-
