tumpaproject / tumpa Goto Github PK

One of the nice-to-have features would be to able to sync the keys generated with a public keyserver. I think the ability to do this should be in the Key Details screen

In some user-testing one of the questions that came up is "Why is authentication not selected by default?". For many who might not be aware of the usecases for each of the subkeys, making a decision by themselves which subkeys to select might be complicated and they might stick with the default. So we need to decide if we want to just pre-select all 3 subkeys.

• Select all 3 subkeys in the UI?
• Documentation regarding subkeys and their different types

We should have a proper logging system that can be used if the code is run in verbose mode for debugging purposes. The logs will be helpful to debug which interactions are working, and where the code is running into an error.

The user should be allowed to add a new user ID (email).

I think we need to decide on a key list sorting order. According to me, we should at least sort the list in descending order of creation date.

In the place to show the details of a key, we should be able to show all the subkeys for that given key.

Following are the design links for the new design mocks:

Available Keys: https://design.penpot.app/#/view/4f8eaf40-82b3-11eb-8f95-3363e266841f/7d5ac670-82b3-11eb-8ee5-6ba2e007e956?token=1IBT0bkuAce7UWeP7uRqHQ&index=0

Key Generation Form: https://design.penpot.app/#/view/4f8eaf40-82b3-11eb-8f95-3363e266841f/4cc42d80-82c7-11eb-8d47-5f1288a6bbce?token=xKbVsCDZEy1Fd391iqBcOw&index=0

Smart Card Options: https://design.penpot.app/#/view/4f8eaf40-82b3-11eb-8f95-3363e266841f/f286e2d0-8448-11eb-b38d-9b790b8d310b?index=0

There are many more elements/features needed to be added to the current design. We are currently working on implementing the above designs in the ui-revamp branch

You can find discussions and issues related to the new UI implementation in #30

If anyone is interested in helping us improve the designs, you will need to create an account in penpot.app and then I can give you access to the designs. If you have used figma before, penpot is very similar to figma and is also open source.

Right now, keyboard navigation works using "Tab" key. However, while navigating using "Tab" key, even though the focus moves correctly, the scroll view doesn't scroll. We need to find a way so that the scroll view scrolls to show the current focused item.

Many users asked for an option to see the details of the connected smartcard in UI.

We should allow the user to import any existing secret key.

Right now the smart card icon that we have looks more like a memory card, but what we would want is something looking more like an yubikey

We need to have better help texts in form inputs explaining what they are and how to use them. The other alternative could be to provide a "Learn more" link beside the label that points to the documentation explaining each of the form inputs and what they mean and how they are used.

Right now, a user doesn't get much indication whether an item is a button or other interactive element, apart from the design suggesting so. We need to provide hover state designs for the buttons, so that it's easier for users to identify the interactive items.

There are many different form elements throughout the tool. Let's make all the form elements along with the label, so that it's easily manageable and abstracted. We can then just pass the labelName to the form element, and not need to decide for each of them while adding them to the screen.

• Text Input
• Password Input
• Textarea Input
• Date Input
• Checkboxes
• Dropdown Input

Most of the designs for the form elements can be found here: https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=439%3A201&t=lh0AiZhZLatVedmA-4

PS: Test that all the input fields are reachable by keyboard focus. Also all inputs label names are announced by screenreaders.

Add an user experience to automatically back keys, etc to external drive, or even remote servers if internet.

In the key list that is shown in the first screen, there is a list of key items as shown in the screenshot with few different components. Use button components for the buttons/links at the bottom of the key items.

https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=546%3A507&t=qGNZ5gq65tdNdXen-4

The key can also have an expired state:

On clicking "Send Key to card" for an expired key, it should raise an error warning modal (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=606%3A480&t=vPLLcrcDMJxR3YF9-4)

Deliverables:

• Normal Key with a list of buttons
  - [ ] Clicking "Delete" button raises a warning modal (will be implemented after backend integration)
• Expired key if expiration date past the current date
  - [ ] Clicking "Send key to card" for as expired key raises an error modal. (will be implemented after backend integration)

apt install pcscd

or

$ sudo dnf install pcscd

and then

$ sudo systemctl restart pcscd

We need the pcscd service to be running for card upload/view.

Harlo found the trouble in Debian 11.

Hi everyone,

what about Windows OS support? Currently, it looks like only Linux and MacOS are supported since there are only package releases for those OS and the docs do not mention anything else, specifically.

Are there plans to add that, or is it technically not possible and therefore can't happen?

From some user-testing, one of the nice-to-have feature requests that came up was having a strength indicator for the password fields. I think it's definitely good to have to avoid users from using very small passwords, passwords with their name/email, or passwords from a list of commonly used and exposed passwords.

Right now the user might not know that the smartcard will have to be reset so that the keys can be sent to the smartcard. As a result, if they change informations in the smartcard before, all of them will be reset. So showing this message either in the modal, or in the forms itself somewhere, might be a good idea.

Since many of our target users might not be aware of what subkeys are, it would be better to hide that configuration by default in advanced. We will have the subkeys selected (encryption and signing by default). Anyone who wants to modify, can click on advanced settings to change that.

Suggestion: It would be good to have an options to give users the choice to select which subkeys they want to write on the smartcard

Note: In a way, we can give a similar option while generation as well if someone wants to skip creating certain subkey (authentication key for example)

Use the form components to create the different items. The back button should take to home view. The submit button should submit the data to backend. If submission is successful, then return to home view, else raise an error. For this particular issue, we can ignore (or mock?) the backend integration and focus on just changing of the view.

https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=439%3A201&t=vPLLcrcDMJxR3YF9-4

We should not allowing uploading Cv25519 key to Yubikey 4 or below. Only 5 or above will work.

Since admin pin change dialog uses the same Dialog class as upload to smart card, the validity check of upload to smart card applies which causes some unwanted errors.

As discussed in #51 (comment), in our next iteration we will want a date input with a better UX. The idea would be some for of a date picker that opens as a dropdown. For this issue, we have 2 requirements:

• Design for the dropdown
• Implementation of the design using QML

There are few different parts to the Key Info page:

• The key info details page (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=439%3A296&t=vPLLcrcDMJxR3YF9-4)
• Clicking "Add new user" takes to the new user id form (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=439%3A432&t=vPLLcrcDMJxR3YF9-4)
• Changing expiration date should open a datetime widget
• Revoke and remove user id
• The back button should take back to the Home view
• The "Send key to card" should ask backend to send this key to a card. If no card is detected, then we raise an error modal. If card is detected and sending is successful, we should show success modal and go back to Home view.

The blue box here ended fast.

smartcard ui

We need to find a way how to mark (maybe by a deep color) to show which button/action is currently active.
Also, we should select the first button as the default UI action.

https://www.nitrokey.com/about

https://www.nitrokey.com/#comparison

We should allow the user to click and change the expiration date of any given subkeys, or all the subkeys together.

There are different groups of buttons and link components that we will need for the redesign. The idea is to have the components separately created so we can abstract the component level designs while creating each of the windows and screens.

• Primary Button
  

• Secondary Button
  

• Tertiary button
  

• Text Button
  

Both primary buttons have a "danger" state which is the red color variant of the button. Also, let's make all the buttons with the ability to have (or not have) an icon.

All buttons should also have a hover state and be keyboard focusable (or focusable by tab)

Right now we only have the UI component ready, but not implemented in the backend. We need to implement the integration in the next release.

The user should be able to revoke any given user ID.

Once a user has finished editing the smartcard item, such as name or public URL, and successfully saves the changes, the view should go to smart card details view instead of KeyListView

There are two main states that the Home view can be in:

• There's no key (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=491%3A425&t=vPLLcrcDMJxR3YF9-4)
  

• A list of available keys (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=546%3A454&t=vPLLcrcDMJxR3YF9-4)
  

The list of available keys can also have expired keys (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=619%3A681&t=vPLLcrcDMJxR3YF9-4). The individual key components can be found from the issue: #53

We are going to use modal only for alert/error messages or for confirmation message (i.e. while deleting something). Let's make the component have following properties:

• Title (required)
• Message (required)
• State (default: danger): This will determine the color of the primary button as well as the icon shown
• Primary CTA (optional)
• Secondary CTA (required)

Currently we have only one state which is danger, but in case we need some success state, etc. will be good to have it flexible. For the CTA, use the button components

https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=440%3A8282&t=qGNZ5gq65tdNdXen-4

The sidebar is an important component that is shown in every screen. We will probably have it as a SplitView, but the contents inside the SplitView can be made into a separate component. If that doesn't seem ideal, we can consider this issue done, once the sidebar part of the SplitView is fully implemented.

Deliverables:

• Implement the above design
• The items on the sidebar should be clickable and focusable by keyboard
• They should have a hover state
• On clicking them, the other half of the splitview should update (not necessarily the full design)
• Keep the smart card section always expanded (no need of making it collapsible for now)
• The "card detected" status label should update accordingly depending on whether an yubikey is connected.

This is an on-going epic adding all the UI improvements suggested or coming up while we user test more and more.

• Show somewhere the information that the key is a Cv25519 key and might not work with only certain smartcards.
• The enable/disable flow of the upload to smart button need to be improved
• Hide subkey options in Advanced settings (#17)
• [ ]

Right now, there is no way to identify if a key is a RSA key or CV25519 key. It is important to know this since people using yubikey 4 won't be able to use CV25519 key, so displaying the type of the key avoids errors.

We should allow the user to change the password of a given key.

Release a Mac version without changing anything in the UI.

Right now if the user types wrong passphrase for the key while uploading the key to the card, it fails saying "Failed to upload to the card.". We should first verify if the passphrase is correct (or show proper error), and then try to upload to the card.

We can sign a small message to verify the passphrase.

This came up while initial testing by Harlo.

• Clicking on the "Smart card" option in side view should open a view with the current smart card details (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=440%3A1283&t=vPLLcrcDMJxR3YF9-4). There should be an option to eject the smart card, and to format the smart card.
• Edit Name (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=440%3A1336&t=vPLLcrcDMJxR3YF9-4)
• Edit Public URL (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=440%3A1389&t=vPLLcrcDMJxR3YF9-4)
• Change user pin (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=440%3A1442&t=vPLLcrcDMJxR3YF9-4)
• Change admin pin (https://www.figma.com/file/TxuhKDUzjxjfe7ug3qP4eD/Tumpa?node-id=440%3A1495&t=vPLLcrcDMJxR3YF9-4)

There might be reasons I'm not aware of to stay at PySide2, but with PySide6 Tumpa would run natively on newer MacBooks for example, which would save users the hassle using Rosetta for x86 emulation. After all there are quite a few people at SUNET and other organizations which are using MacBooks.

Here is a PR for updating to PySide6: #47

Suggestion: It would be great if there was an option like diceware to randomly generate key passphrase

Right now, we are using the same icons for both error and warning modals. However, the error modal is shown when some error happened in the code or some particular action can't be taken because smartcard not detected. While, the warning modals are for deletion, revokation, etc. Hence we need a separate icon for error modals.