Mockups

Debug agent

• Clicking Debug button will open a new page in which the user will be able to test the script for an agent

Install agent

• Clicking in Install option will open a confirmation popup with a link to download Reconess docker file
  

Docker link: https://raw.githubusercontent.com/reconness/reconness-agents/master/Dockerfile

Note: If an agent is installed the Install link will change to Uninstall

Uninstall agent

• Clicking in uninstall will open a confirmation popup
  

• Once user confirm the unistall, the text in the Uninstall link will change to Install again.

Details agent in Marketplace

• Clicking Details option will open or close an small popup with more description about the agent in the marketplace
  

Workflow:

• User provides an email or phone number
• System sends a code to the provided email or an SMS to the provided phone number
• User types the code
• IF the code is correct, system allows the user to type a new password and its confirmation
• System will login the user automatically if the operation was successful

Mockups

Specifications

1. Clicking on Comments icon, in the header bar of a target details page, will expand a collapsible side bar
2. Comments sidebar will be closed only when user clicks anywhere else outside the bar
3. At the top of the sidebar there will be an editor to add new comments

• Send button will be enabled if text input has text
• Cancel button will clear the text in the text input but it won't collapse the comments bar.

4. Bellow the editor it will appear a list with all comments.

• The list will have "Comments List" as a title and the style will be the same as Target List in homepage
• Sort by will display a menu with options "Username" and "Created". Username will order the comments by username and Created will order the comments by creation date (DESC, newest comments will appear at the top of the list)
• The list will contain an scroll if neeaded. The default sort mode is by creation date, DESC (newest comments will appear at the top of the list)
• Every comment item will contain the whole comment text, the username of the user who created the comment, the creation date for the comment (date format: yyyy-MM-dd) and a Delete button

5. Clicking on Delete button will display a confirmation popup.
6. If user confirms the delete action, the comment will be deleted and the user will see a notification popup (if the action was successful or not)

Mockups

Dashboard section
General Data section

Statistics sections

1. Subdomians with more numbers of directories: Include all the subdomains included in every root domain of the target and the number of directories in the selected subdomain
   

2. Days with the most interactions in the last week
   

3. Latest new things found in the root domain
   

4. Number of subdomains by each open ports
   

5. All running targets
   

Specifications

• Target details page will contain a target header bar and a dashboard with general information about the target and some statistics charts
• The color in thedashboard section will be the same as the color of the target
• Targer header bar will contains the following options: Delete Target (described in #50 ), Export Target, Sort by, Comments (described in #51)
• Dashboard secton contians the following sections: Root domains section (described in #52), General Data section, different statistics sections
• Option Export Target in Target header bar, will generate an CSV file with all the information about the target, included the root domains and subdomains included in it (this might be resolved once we have the backend of the system)
• Option Sort by in Target header bar will sort the root domains list by name or creation date
• Section General Data section in Dashboard area, contains the general info of the seleted target: Bug bounty program URL, if it's a private program or not, In Scope and Out of scope information
• There will be different sections with statistics: Subdomians with more numbers of directories, Days with the most interactions in the last week, Latest new things found in the root domain, Number of subdomains by each open ports, All running targets.

• Target list section will list last 10 created targets or alphabetical by name of the "order by" option changed to "By Name"
• Clicking in a Target name, in section Target List in Home page, will redirect the user to the details page of the selected target

Specifications:

1. Add functionalities to Marketplace button

Mockup:

AdobeXD Link: https://xd.adobe.com/view/0d5c8218-e5b6-4b56-7dbb-ed1095c4b021-7b6d/

-- to be defined --

Mockups

Specifications

1. Clicking on the arrow button that appear in the last column of the subdomains list, will redirect the user to the subdomain details page.
2. In the Dashboard section:

• Value for IP field, will be generated automatically. It will come from the DB, only the agents can modify that. This field is not editable.
• Value for Agents field will be generated automatically. It is the list of different agents that we ran against the subdomain. This field is not editable.
• IP and Agents values are the same that appear in the subdomains list, in a Root Domains Details page. The only exception is that in the subdomain list, we will display a comma separated list with the name of the last 3 agents executed on the subdomain.

Mockups

Specifications

1. Clicking on "Delete" button, in subdomains list, will display a confirmation popup. User will need to type the name of the subdomain to be deleted. If the name is the same, then the delete action can be executed.
2. A notification popup will appear after this action, even if it was successful or not
3. A tooltip will be displayed when mouse hover over a Delete button and the color of the icon will be red. The text of the tooltip will be Delete.

In section Target List, in Home page, option Sort by will display a menu with the following options:

• Name
• Last added

Each option will have the sort functionality in place

Mockup

Triggers, More options

AdobeXD link: https://xd.adobe.com/view/0d5c8218-e5b6-4b56-7dbb-ed1095c4b021-7b6d/screen/3969fa32-5a63-4a04-afc4-ddd84b9bc48c

Mockups

Specifications

• User will provide his username and password in order to log into the system
• A Forgot my password link will be included in the page (defined in #42 )
• Both username and password are required. If any of those values is not correct the system will display the following error message: "Invalid credentials. Please try again"

Mockup

Triggers, More options

AdobeXD link: https://xd.adobe.com/view/0d5c8218-e5b6-4b56-7dbb-ed1095c4b021-7b6d/screen/3969fa32-5a63-4a04-afc4-ddd84b9bc48c

• Arrows appear near the Agent name in Edit Agent popup in monitors of 24'
  

Mockups

Specifications

• Only the target name, at least one root domain and the color are required. Done button will be enable just when all required elements have data
• Target name input will have same behavior than Agent name in the New/Edit Agent popup
• In input Bug Bounty Program URL, the system will also use an url validator
• Add a Delete button at the bottom left corner of the popup, same as in New/Edit Agent popup. All buttons will be aligned in the same row (#50 )
• A notification popup will appear after this action, even if it was successful or not

Mockups

Specifications

1. This section will list all root domains registered in the selected target during its creation process
2. Every root domain item will be a link to its Root Domain details page, described in #53
3. After the root domain name will appear an icon. This icon will be a link to its Root Domain details page, described in #53
4. "Import root domain" is a link button that will open a browser open dialog, to select the file from which the content will be imported
   This action will be simulated as the import operation will require some API endpoints

CSS Home - Target

Home - Target.zip

Mockups

Accessing a Root domain details page:

Header of a root domain details page:

Specifications

1. Clicking in a root domain name in any place from a Target element or Target details page, will open the details page of the selected root domain page. The available links to access a root domain details page are:

• Target element in Target list, mosaic mode
• Target element in Target list, list mode
• Root domain name in Root domains section, Target details page
• Root domain icon, next to root domain name in Root domains section, Target details page

2. The layout of a root domain page will be similar to what appear in the mockup section. The breadcrum will be updated:
   

The main color of the root domain details page will be the same main color of its Target parent

Specifications

1. Collapsible main menu
2. Sidebar with Target List
3. Section with cards in main content of the home page
4. References and resources section

Mockup

Adobe XD link: https://xd.adobe.com/view/9e2da44a-236e-4c70-5d6a-3d079c4c720d-e81c/

When user clicks on the 3 dots icon, a submenu will appear. Submenu will contain only one option: Delete. When client clicks option Delete, a confirmation popup will appear, and the user will need to write the name of the selected target as a confirmation

Step 1

Step 2

Step 3 - Confirmation popup (Delete button will have the same style than the others (with round corners), background color will be #FF4545 and font color will be white)

After entering the correct name for the target to be deleted, if user clicks Delete, in the confirmation popup, the target will be deleted from the target list in home and the confirmation popup will be closed.

If user clicks Cancel button in the confirmation popup, the popup will be closed

A notification popup will appear after this action, even if it was successful or not

• When user types a query in the general searcher and clicks enter, the webportal will display a page with the results.
• The searcher will return any Agent, Target or pipeline that match its name or part of the name with the query
• The result page will identify the type of the result: Agent, Target or Pipeline
• If the user clicks in the name of an Agent, it will open the details popup of the selected Agent
• If the user clicks in the name of a Target, it will open the details popup of the selected Target
• If the user clicks in the name of a Pipeline, it will open the details popup of the selected Pipeline

Mockup

Specifications

1. • The Filter by list will include following options: Label, Service, Port, Agent and Date. By default there will be no filter selected.
2. User types a query in Search input and selects an option from the Filter by list
3. The search action will be executed when the user hits Enter key or when the user selects an option from the Filter by dropdown list.
4. The process will be as follow:

• If there is no filter selected in Filter by dropdown list, then the query will be executed against the name of a subdomain. The query can match partially or completely.
• In Filter by dropdown list, if Label option is selected, then the query will be executed against the labels associated to a subdomain (the label checkbox will appear as checked). The query can match partially or completely. Every subdomain will contain a list of labels. The list can be empty
• In Filter by dropdown list, if Service option is selected, then the query will be executed against the name of the services associated to a subdomain. The query can match partially or completely. Every subdomain will contain a list of services. The list can be empty
• In Filter by dropdown list, if Port option is selected, then the query will be executed against the open ports associated to a subdomain. The query can match partially or completely. Every subdomain will contain a list of open port. The list can be empty
• In Filter by dropdown list, if Agent option is selected, then the query will be executed against the name of the agents associated to a subdomain. The query can match partially or completely. Every subdomain will contain a list of agents. The list can be empty.
• In Filter by dropdown list, if Date option is selected, then the query will be executed against the creation date of a subdomain

5. The list of subdomains will display the results of the search action.

Mockups

Specifications

• User clicks option Logs in User menu in general header bar
• Logs page will open. The page contains a combobox with the names of the logs files generated by Reconess
• If user selects an option from the combobox, then the content of the file will appear in the textarea with an scroll to read all its content
• If user clicks Clear button, a confirmation popup will appear. If user confirms to clear the logs file, all the content of the log file will be deleted and the file will be empty

In Create/Edit Agent popup, if user selects a logo for the Agent, in Agents list, instead of the default Agent icon, should appear the Agent's logo

Mockups

Specifications

• Clicking on Delete option or button will display a confirmation popup. User will need to type the name of the target to be deleted. If the name is the same, then the delete action can be executed.
• A notification popup will appear after this action, even if it was successful or not

Clicking on Details link in Agent list, will open a popup similar to Add/Edit Agent popup but with all the elements as readonly. the popup will contain buttons: Delete (it's explained in another ticket, #29 ), Edit and Cancel button.

Pick color section will be disable or in read-only mode as well

If user clics Edit button, all inputs will become editable (readonly or disable mode will be removed)

Delete button will have the same style than the others (with round corners), background color will be #FF4545 and font color will be white

Expected behavior

Current behavior

If list mode is selected, there is no highlighted item in the main menu

Review the background colors and make them aligned with the original design

Light Blue:
Smaller
background: transparent linear-gradient(135deg, #03DCED 0%, #0CB8E0 100%) 0% 0% no-repeat padding-box;

Bigger
background: transparent linear-gradient(160deg, #03DCED 0%, #0CB8E0 100%) 0% 0% no-repeat padding-box;

Light Red
Smaller
background: transparent linear-gradient(135deg, #F96767 0%, #FF4343 100%) 0% 0% no-repeat padding-box;

Bigger
background: transparent linear-gradient(160deg, #F96767 0%, #FF4343 100%) 0% 0% no-repeat padding-box;

Purple
background: transparent linear-gradient(160deg, #737BE5 0%, #7159D3 100%) 0% 0% no-repeat padding-box;

Green
background: transparent linear-gradient(135deg, #3ADB99 0%, #16C465 100%) 0% 0% no-repeat padding-box;

Orange
background: var(--solid-naranja) 0% 0% no-repeat padding-box;
background: #FF8650 0% 0% no-repeat padding-box;

Mockups

Specifications

1. In root domain details page, clicking on Agents tab will display a list with all existing agents with type RootDomain or Subdomain.
   

2. The agents list will contain the following columns:

• Name: Agent name
• Category: List of agent's categories
• Last Run: Date of last run. Date format: yyyy-MM-dd
• Actions: Action buttons to be executed on the selected agent. Buttons can be Run, Stop or Terminal (described in #89 )

3. The agent tab will display the number of agents as appear in the desing prototype
4. Every column of the list, except column Actions, will contain arrows to sort the data ascending or descending
5. The list will have a paginator, if needed

Mockups

Specifications

1. Clicking on Add Subdomain button will display a popup to add new subdomains
2. The main color of the Add Subdomain popup will be the same main color of its Target.
3. In the popup, the user will type the name of a subdomain. If the user wants to add another one, he will need to click on Add New button.
4. Clicking on Add New button, will add a new input row in the popup
5. The user will be able to update any subdomain name at any time, while the popup is open
6. Clicking on Remove button (red round button), will remove all the row from the popup.
7. Clicking on Add Subdomain button will insert all the subdomains
8. The following validation rule will be applied in the process: A root domain can't have 2 subdomains with the same name.

Mockup

Specifications

• Options:

1. Import target
2. Filters by color (Equals to agent)
3. Sort by Name and creation date (Equals to agent)
4. View mode: List view, Mosaic view (Equals to agent)

• Import target: The option will open a browser open dialog. User will be able to search for a .json file and import its content in the target section
  This action will be simulated as the import operation will require some API endpoints

• Increase the space between elements in mosaic view
  

• In Sort by element, rename Calendar by Created
  

Specifications:

1. UI for Agents List page
2. Add access in main menu

Mockup:

AdobeXD Link: https://xd.adobe.com/view/0d5c8218-e5b6-4b56-7dbb-ed1095c4b021-7b6d/

Mockups

Specifications

• Clicking on "Delete Root Domain" button will display a confirmation popup. User will need to type the name of the root domain to be deleted. If the name is the same, then the delete action can be executed.
• A notification popup will appear after this action, even if it was successful or not

Mockup

In target details page

In root domain details page

In subdomain details page

Specifications

• Last item of the breadcrumb is the only one without a link and its color will be the same as the main color of the parent target

In several places of the webportal there are icons that do not match with the proposal in the original design

Agents

Mockup

Specifications

• Only the target name, at least one root domain and the color are required. Done button will be enable just when all required elements have data
• Target name input will have same behavior than Agent name in the New/Edit Agent popup
• In input Bug Bounty Program URL, the system will also use an url validator
• Add a Delete button at the bottom left corner of the popup, same as in New/Edit Agent popup. All buttons will be aligned in the same row (#50 )
• A notification popup will appear after this action, even if it was successful or not

Mockup

Delete action

Specifications

• On mouse hover every element will slightly increase its size (as in Agents section)
• Every element in the list will display up to 4 domains contained in teh target. Not all the list will be visible. When user put the pointer of the mouse on the root domain list, all the contain of the list will appear as a marquee
• Clicking in the target name will open the Target Details page (described in another ticket)
• Clicking in the 3 dots element will display a submenu with options: Edit, Details and Delete.
• Option Edit will open the Edit Target popup
• Option Details will open the Details Target page
• Option Delete will display a confirmation popup. User will need to type the name of the target to be deleted. If the name is the same, then the delete action can be executed. (#50 )

• When a validator is displayed, if you close the popup and open it again (in insert or update mode) the validators are still visible

• In a required validator, even when you add value to the field, the validator is still in place. VAlidator should be hidden once the field has data

• Once user finish editing or creating an agent and clicks button Done, the popup should be close automatically

Mockups

Specifications

1. The intention of this ticket is to guarantee only the correct layout and elements of Subdomains tab in Root Domain details page. The functionalities will be included in tickets #56 #57 #58 #59, etc
2. If the list is empty, then:

• Export All Subdomains button will be disabled
• Delete All Subdomains button will be disabled
• Searcher will be disabled
• Filter by dropdown list will be disabled
• The subdomains list will be hidden, and in its place following text will appear: "There are no subdomains associated with this root domain. Please, click Add Subdomain button to insert some subdomains."

Mockups

Specifications

• On mouse hover every element will slithly increase its size (as in Agents section)
• Every element in the list will display upt to 4 domains contained in the target. In the footer section of the element will appear the following text Root domains: [number], where [number] is the amount of root domains contained in the selected target
• Clicking in the target name will open the Target Details page (described in #49 )
• Clicking in the name of a root domain will open the Root Domain Details page (described in another ticket)
• Clicking the Edit Target button will open the Edit Target popup (described in #48 )

Specifications:

1. Add functionalities to header bar buttons:

• Edit List
• Color filter
• Sort by
• View mode (list and mosaic)

Mockup:

AdobeXD Link: https://xd.adobe.com/view/0d5c8218-e5b6-4b56-7dbb-ed1095c4b021-7b6d/

• Menu separator is lighter in the original design

• Graphs section. Add more space between the graph containers, to get it more aligned with the original design
  

• UI in target list: Squares are smaller and add more round to corners:
  
  

top: 175px; left: 1555px; width: 56px; height: 56px; background: transparent linear-gradient(135deg, #03DCED 0%, #0CB8E0 100%) 0% 0% no-repeat padding-box; box-shadow: 3px 12px 23px #0C1F6A17; border-radius: 13px; opacity: 1;

• Add button should add a reference to the list using mock data (added data will not persist if user do a Refresh to the page)
• Add some items to the list under Reference and Resources
• Category list is a combobox in the original design but should be a textbox with category, similar to component vue-tags-input

• Each item in the list will include a Delete option. If user click Delete, a confirmation popup will appear

Similar to:

Mockups

Specifications

• Clicking in either username or user photo, will display a popup with the following options: My account, Sign out
• Option My account will open a page with title My Account. In this page the user will be able to change his name and lastname, email and photo. (described in #39 )
• Option Sign out will log out the user and close the current user session

• Add a Delete button in New/Edit Agent popup and in Details Agent popup
• Delete button will have the same style than the others (with round corners), background color will be #FF4545 and font color will be white

• When user clicks Delete button a confirmation popup will appear (Delete button will have the same style than the others (with round corners), background color will be #FF4545 and font color will be white)
  

After entering the correct name for the agent to be deleted, if user clicks Delete, in the confirmation popup, the agent will be soft deleted from the agent list and the confirmation popup will be closed.

If user clicks Cancel button in the confirmation popup, the popup will be closed

Mockups

Specifications

• The functionality of new Delete buttons will be the same as in #29 (Delete Agent)

Mockups

Specifications

• When user clicks in Edit List, link, the text of that button will be renamed to Delete Agents and a checkbox will appear in every agent in the list
• If user clicks Delete Agents button, after he select at least one element from Agents list, a confirmation popup will appear.
• The confirmation popup will include the name of all selected agents and an input. The user will need to type the word "Yes" to enable the Delete button
• If user clicks Delete button from the confirmation popup, all selected agents will be deleted.

Mockup

Specifications

• In the general header bar, clicking the notification icon will open an small popup with a list of the 5 most recently notifications and a link to view all Notifications
• Add a circle badge with a number at the top right corner of the icon. That will mean the number of unread notifications received by the user. If the number is greater than 10, the text inside the badge will be "+9". If the number is equals to 0, the red badge will disappear. Any time the user clicks on the notification icon, the number will be reseted to 0, so the badge will disappear.
• Clicking on link "View all notifications" will open the Notifications page
• Notifications page needs to be defined

• In the general header bar, Settings will be a link to the Setting page. Same link that appear in the main menu.
• In the main menu, when user clicks on Settings item, the element will be expanded and display Notifications and Logs as subitems