[EPIC] Preparing UI for beta

[zyronix]

Description

Functionality

Urgent

• [ ] #925
• [ ] #940
• [x] When session timed out not redirected to auth page
• [ ] Loading of hashes page causes memory error, implement proper pagination
• [ ] Start page (the index, dashboard page) causes memory error, implement proper pagination
• [x] #977
• [ ] When changing "Crack errors" in the agent detail page, it get the error: Only accepts true or false but its multiple options, i reported this.
• [x] 👍 When the backend cannot be reached after login, errors are thrown into the console, but nothing is displayed to the user. Show the user an error that the API cannot be reached. Added 2 different error statuses to catch these kind of error. (ac01a2e) Error is bit generic, but will do.
• [ ] ❌ If login is failing because the backend cannot be reached, show the user an error box that the api cannot be reached. Found difficult to know if connection was timeout or connection refused as error only returns status 0. That means that error is more generic but at least is catching the error.(ac01a2e) Still not getting error, even though I see that it is a 401 as a response

Minor

• [x] 👍 URL of agent still points to localhost, make agent url configureable Change to use getEndpoint function (3dff0b6)
• [x] When a bulk action even if no row is selected you get the "Done" message
• [ ] Add datestamp to file exported
• [x] Cleanup DEFAULT_CONFIG, there are now two main.ts files. src/config/default/app/main.ts and src/default/app/main.ts. Which one is used? Also remove agentApiPort from the config; as this one is not used anymore.

Design

All pages

• [ ] When there is a Asterisk to mark mandetory data, explain what the asterisk means. PDF attached below
• [x] 👍 All overview pages, the column view or show rules. It is transparent the backgroup (datatables) Background fixed (c8db859)
• [x] 👍 When there are not enough entries in tables, the DataTable menu are not usable: you have to scroll inside the table. It is a funny thing about overflow button as its a datatables bug about overflow that affects the headers so had to be fixed force width on the tables (c8db859)
• [x] 👍 How are the file sizes calculated? We have seen for example 0.05GB should be displayed as 50MB Just changed the scale, it should display in the requested way (a705132)
• [x] 👍 When you hover over something, the font is increased. Please disable this, only changing the hover colour if fine:
• [ ] ❌ Remove the loading "..." animation, it is too anoying. This is an interceptor that catches all the http requests, can be replaced but not removed. Otherwise you'll never know if its loading. An indicator is ok that loading is still going on. But it should not use the black overlay, this will make the screen flash. Maybe make it smaller and more like a notification box in the top right? Like the config success screen? When data is being loaded, the loader should be close to the data (where the data should be). In case of a full table, add a spinner to the table. For specific fields, add a spinnern to the field (only show the spinner if the user clicks on it and the data is not loaded yet). Was there an error? Inform the user about this. There is no need to implement somekind of delay on the spinner, as the spinner should not 'bother' the user in anyway and can be there without bothering the user.
• [x] 👍 Change the logo back from a MP4 to the original logo
• [x] 👍 Change table headers to cammel casing and not to all uppercase. For example the task page header, convert NAME to Name
• [x] 👍 Change the titel of the header of Hashtopolis to display Hashtopolis first. So Edit Agent - Hashtopolis should become Hashtopolis - Edit Agent. I changed this as requested but in my opinion, that way gives less information about the view as Hashtopolis is first. When you have 100 tabs open when cracking passwords, it was hard to find back Hashtopolis.
• [x] ❌ Show XX rows should have "250 rows" added and "All rows" Can you provide an additional explanation? The current table only show a max of 100 rows, so extend 10, 25,50,100 with 100. And also add an option to display ALL available entries. For example if i have a system with 1000 tasks; I want to be able to view them all on a single page.
• [x] 👍 Change default rows from 10 to 25 rows
• [x] ❌ Change the header of WordList to Wordlist (aswell as in the menu) and make it Plural Wordlists (MENU). The page it self is still displayed as "WordLists" convert this to Wordlists:
• [x] 👍 When you hover over the git version, the text shifts left:
• [x] ❌ For the done splash screen on all pages, remove "black overlay" and convert the done to a small box. Just like the config page: Black overlay, I think that is a subjective change can be change, regarding about the size box and location I agree. Not implemented yet .
• [x] ❌ When bulk action is complete, it just display "Done" now, but it is not clear what has been done. Please report what is done. If its an error, the http handler will catch the error. What do you need to be reported back? A table or a success notifciation for each item? Yeah, or atleast a summary: Deleted 5 tasks Activated 25 Agents
• [x] When deleting something, the splash screen should display what will be deleted
• [ ] ❌ Make sure text all has the same font size (also in buttons) Are you talking about tables? Or same size for headers, titles, subtitles, buttons, paragraphs, etc.. The black buttons, I think that datatable button have a small fontsize then the rest of the tables. I would say, the datatable button font seems to be the perfect font for everything.
• [x] 👍 Marging of the search box is different from the black button (like "Show 10 rows") It's like this in Datables but I overwrited this value.
• [ ] Add a red cancel page add every create page that get's you back the the overview page for the stuff you were trying to add. (Creating a task? press cancel on the create-task page and get redirect to the task overview page.)
• [ ] All the create pages have such different styles. The design of the create Task page is like very much. Because it is the same width as the task overview page. Example multi column design for the hashlist create page. This should be implemented for: Create supertask, Create hashlist, add wordlsit (already implemented), hashtype, new binaries (angent, preprocessor, cracker), health check, create user
• [x] Test all breadcrums, the breadcrum for hashlist is broken when creating hashlist, New User, New Task, New Agent, Config Settings (only works on Agent tab, if you switch to eg general it is broken), Config Engine (eg if you switch from agent binaries to crackers) This one was a little bit tricky because when you were clicking on the main button that was taken position of parent and then ones one the tab as childs, we could make the change on the routes but that means change all the routes in the app and test. Alternative, I added a custom directive that handles all the child routes.
• [x] Remove the text Showing 1 to 10 of 11 entries, you can see the total amount of page and you can see the rows selected. It is another task reporting sth about this. Also it feels useful. Probably to be reviewed?
• [ ] ❌ Remove Previous page when you are on the first page, remove next when you are on the last page. Makes sense, just disable the option but not sure, I think that looks too square. Indeed, it now looks to round. When the buttons are not there can you round the number?
• [x] 👍 Username is capitalized, just display it as it is: eg the user is admin not Admin
• [x] On overview page the hover color is yellow, while in the menu or dropdowns the hover colour is grey. Change the table hover colour to the same grey colour. Changed to the same hover color used in Darkmode rgb(117, 117, 114)
• [x] On all pages, don't captitalize names: EG: don't captizalize agent name, taskname, hashlist name etc. If task name is testtask don't show it as Testtask
• [x] On all pages where there is a Note field, it should be a text field and not a string field. Eg: you should be able to add multiple lines to those.
• [x] ❌ The new actions Dropdown Button looks confusing, the three dots and the arrow together. Remove the arrow, just only keep the 3 dots. To review; personally i dont like the caret but its seems that is user friendly as caret means dropdown but "..." doesnt mean anything. I have received much feedback on this, it was clear for everyone that the 3 dots would open a menu. So please implement this.
• [x] On all create pages, New Hashlist, New User, New Access Group, New Binaries, etc use the same with as the new Wordlist page. versus
• [x] Reduce the size of the fields on the create pages, it is good to use the space. But Associated Access Group uses too much space. Maybe make it half the size by default if the space is available? To be review
• [ ] Datatable buttons, change the color of them to al lighter color. Group them together, move the archive button next to the search button.
• [x] After any creation, it should always take you to the overview page. Task create -> Task overview
• [x] When deleting/bulk actions, add progress bar. Showing the progress (no 1 out of 350), but a bar is easily viewable.

Minor

• [ ] Select which kind of file you want to upload, for example you click wordlist but rember o not a wordlist, easily change it to rule type.

Agent Status

• [x] Remove the eye icon and make the name clickable
• [x] 👍 Ip is bolt, make it normal

Agent overview page

• [x] 👍 The id of the agent binary is printed, remove this id (the 1 in the xample)

Agent detail page

• [ ] The active buton should be on top.

Add agent page

• [x] The instructions is a good data table, don't place the data in something you can close. Just always display it.
• [x] ❌ Why is there a big empty header above the generate voucher box? changed for a 0.5rem padding Still doesn't loook greate. Maybe merge the generate voucher and the voucher tables? Or add a header to the genreate voucher box? Joined voucher and table together
• [x] For the copy text button on the new agent page, remove the black drop down, remove the border when you select it, make the cursor a clickable hand.
• [x] Make the new agent page a normal table, implement the style that is used for all other tables on this page.

Task Overview page

• [x] 👍 Setting priority is not working, might be API related? API working but priority was replaced by taskwrapper priority, also isachived was affected for this. Fixed. (3a27c17)
• [x] Task status is completed even if it is completed, when it is 100% dispatched? It is completed when the Keyspace Progress >= that the keyspace and keyspace Progress is greater than zero. Im not using 100% dispatched as I found some error with it, just cannot recall which ones. I did some changes in commit 3a27c17 but in my current environment new tasks are not showing as completed.
• [x] Sorting of the table is different from the current UI. Make sorting based on priority. Currently, im sorting by priority and i can see in the array that is sorted but we are using state save, to save changes on tables, so if you click in order by column that will overwrite the sorting.
• [x] 👍 Also, when a task is finished the priority should be displayed as 0, might be an API bug. It was a bug, i was replacing taskwrapper priority for task priority. (3a27c17)
• [ ] Disable the showing of "PREPROCESSOR" by default, you should be able to still enable it if you really like it
• [ ] You should be able to manually select the missing once CPU only and isSmall
• [x] Speed shows "0 B H/s" if no agent it working on it. Should just be empty when no agent it working on it. And what does the B mean? It is Bytes
• [ ] Combine status and Info to one column calles 'Status' (which display the CLI icon aswell)

Task create page

• [x] File ID can be removed from behind the file name (it is confusing). That shouldn't be there, just removed (fba37d6)
• [x] File info box should be wrapped. Full name should be on a line, line count sohuld be on a line and size should be on a line. (maybe make the box even wider) Line break is not allowed with tooltip, so change it to template, applied change to create tasks,pretasks and import supertasks (58448a1)
• [x] The binary type version is currently ordered based on ID, should be order by version. Eg 6.2.6 should come before 0.1.0 even if 6.2.6 has ID 1 and 0.1.0 has ID2.
• [ ] when clicking on create, something red shows up on the attack cmd field, but it still does work. Given that we are using angular directive to hide some elements sometimes a brief flicker shows when a component initially loads

Pretask overview page

• [x] The pretask overview page acts differently with colour then the normal task page. If the colour is set to ffffff it will display whiteboxes around the ID. But for task page it does not. Implement pretask the same as task page. Thus if colour is ffffff display it without colour boxes
• [x] Add bulk actions to delete pretasks

Hashlist create page

• [x] Hashtype to small, fore xample veracrypt hash type are not very readable. changed text font. Please review again.
• [ ] When selecting Paste: the page because bigger: versus
• [x] Hashlist detector not working Just pasted a md5 and works. Can you provide more information?
• [x] 👍 On hashlsit detector screen Hashcat ID should be called 'Hashtype'
• [x] hashlist format, salted hash separator are not filled automatically on hashtype selection. Check script, when selecting some hashtypes this will change automatically the format.
• [x] default separator is set to semicolon instead of colon

Hashlist detail page

• [ ] #992
• [x] ❌ On the hashlist detail page, there is the cracker info. Remove EYE and clickable name, also font of version/name is not the same size. Almost, currently the name is clickable; even though it takes your directly to a version. Maybe combine the name with the version? So instead of using two seperate lines convert it to one line like: Hashcat - 6.2.6 and make that whole name clickable?

Hashlist

• [x] Hashlist uploading with large file does not work (20MB): error: required file does not exists. I did some changes in the file upload service, i did try to upload files up to 35mb and work. I did try hashlish over 100mb and file is uploaded but crashes after about line count.
• [x] Still the upload continued, after uploading completed it finished but the error was still displayed.
• [ ] Import (404) and export (does nothing) hashlist not implemented. Waiting for API helpers

Search hash

• [x] Create button should be search buton

Cracks page

• [x] Idea: When a very large hash is cracked, the field in the end cannot be viewed (they get push to the back). Instead of showing the full hash, just put in a link to display all hashes of the hashlist (url to: http://127.0.0.1:4200/#/hashlists/hashes/hashlists/4) Added a component to truncate long text and a button to show more/less

File upload page

• [x] File size for example 3.8 GB is miss alligned (217deb3) it was going under, fixed (217deb3)
• [x] "Do not refresh the page while uploading" change text Text updated (217deb3)
• [x] Use more space, file names cannot be read. Design the page just like Task page (make style consistent). Starting adding full width (217deb3) Note: We can talk about this
• [x] When you click the upload or download button, it is not clear what the page does. Add hover on those button explaining what the difference is.

Files overview page

• [x] Line count should have a thousand seperate between them: eg 10000000 should be displayd as 10.000.000 Other countries use comma as separator. Maybe a config setting?
• [ ] Add a download file button in the file detail page where you can directly download the file. Waiting to Download API Call.

Config

• [ ] #996
• [x] #997
• [ ] Is there a possible way to quickly go from the Settings drop down to for example the General settings?
• [ ] Page should not auto save, but please add a save button. To review; A button for each item or global? It is hidden option, like enable hashcat that will require to change the form, also we have some sections that are not writting to the datatabase instead to the local storage. Add a global save button at the bottom of the page
• [x] Style should be consistent for settings and engines (tabs are displayed at the left or at the right). I think dispalying them on the left is nicer.
• [x] Missing refresh data button on Agent Binaries page.

Hashtype

• [x] Not being able to selected multiplke hashtypes
• [x] Add blulk action to delete hashtypes

Users overview

• [x] Add bulk action for deleting users
• [x] Make name clickable to the user detail screen

User detaul screen

• [x] Make full width page (it is very small now)
• [x] Change the description from user right group to: GlobalPermissionGroup
• [x] When updating setting and you did not set the password you get the error:

Global permission group overview

• [x] Add bulk action for deleting global permission groups
• [x] Make name clickable to global permission group detail page

Global group permission detail page

• [x] Design should be approved to match style of other pages. Border are missing? Some whitespacing issues.
• [x] Display name should be: Global Permission Group not Permission Group
• [x] It shows cracked instead of username in the table on the left?

Access group overview

• [x] Make bulk action to delete access group
• [x] Make name click able to go to accessgroup detail page

Darkmode

• [x] The table header does match dark theme, convert to something dark
• [x] Menu top (like, agent, ahshlist, tasks...) doesn't match dark theme, convert to something dark
• [x] the blue links are very hard to read. Maybe try white underlined? Too bright?
• [x] Showing 1 of 1 items is not readable

To discuss:

• [x] Vote: Icons (hover over with description)? Or Dropdown with Icons and text? Done, went for just the dropdown with text
• [x] What do we think of the tiny "ugly" thingies on the New Agent page?
• [x] On the new agent page, do we need to refresh the data button there? Is that possbile?
• [x] After editing a detail of task, hashlist; you press save: where are you redirected to.
• [x] preprocessor command should NOT be a textarea, what should it be then? No, all command input should be multiple line. In the end maybe implement line wrapping when editing strings if the text is too long.
• [x] Make the colour schema of Export, Bulk, etc a lighter colour (like like the menu), not black colour but more grey colours To be review; change button to this color was approved in last hackathon. This color will affect all buttons in the app, so visually is a big a change. Probably vote for a gray tone color.
• [x] Same goes for the colour of the drop downs in this table, don't use black colour but use the same colour schema as the menu (grey colours) Same as above, to be reviewed.
• [x] Change the order buttons of the datatable (black buttons) There is no black button. Can you elaborate?

[xbenyx]

Regarding All pages, asterix;

Asterix.pdf