Politeia redesign missing items

[fernandoabolafio]

This issue is to better track the missing items for the Politeia redesign as the master issue has grown long enough to be hard to follow what is going on.

The design items we noticed as missing, so far, are:

• [x] User Account
  • [x] Manage Identity
  • [x] Preferences tab
• [x] Proposal
  • [x] Proposal action buttons (approve, censor, authorize vote to start, revoke vote authorization, start a vote, abandon)
    • [x] Where to click to edit a proposal
    • [x] Proposal version picker
• [x] Proposal form
  • [x] Attached images display (Perhaps use an image wall and allow users to preview the images using a modal?)
  • [x] Attached images validation errors
  • [x] Attached images policy info (max size, max images, etc)
• [ ] Loading of content: how the loading should be displayed in the different contexts of the website.
• [x] Admin pages: list proposals and search users (and also where to click to reach the admin page)
• [x] Errors:
  • [x] Global errors (ex failed fetching proposals list)
  • [x] Non-main context errors (ex failed fetching treasure balance). This is the kind of error that needs to be signalized but should not affect the overall UX.

Update 3/07:

• [x] Placeholder for empty proposals lists

Update 23/07:

• [x] Login modal

Update 06/07:

• [x] Comments Censor

Update 26/08:

• [x] Highlight new comments since last visit
• [ ] Indicate pi is running on testnet with a different header or something like that. Original issue: https://github.com/decred/politeiagui/issues/1072/
• [ ] A "splash screen" to be displayed while the politeia is executing it's initial loading. Something like the logo centralized in the middle of the page.

[tiagoalvesdulce]

In the User Account, would be nice if we had an example of a success message to show that a rescan was successful, the number of credits added, etc

[MariaPleshkova]

What is Proposal version picker?

[fernandoabolafio]

@MariaPleshkova, when a proposal has multiple versions, in the proposal detail page, is possible to visualize the old version as well the text diff between two subsequent versions. Like this:

[MariaPleshkova]

@fernandoabolafio got it, thanks

[ta-lind]

Commenting here to hold off the work on account and credit purchase flows implementation.

I've realised there's some simple but significant UX improvements needed there. Essentially around grouping and bringing them into subpages rather than relying on modals this much. Provided Maria with drafts which will be addressed as visual design.

Also few questions/requests:

• Forget password: can the process of this be explained a bit. There's presently the reset password token which can be manually expired by the user. Will another one be generated right when this is expired and is there even a good reason expire this? Could this instead happen the same way when logged in or not logged in (eg. github example) that the reset pw token/link is only sent to the email and not displayed in the UI.

• Regarding Past Public Keys, can this list include the date when they were generated as well a small description of why these are stored + what can they be used for?

• User ID: also needs a small description/input how exactly this differs from the Public Key.

[fernandoabolafio]

@linnutee

Forget password: can the process of this be explained a bit. There's presently the reset password token which can be manually expired by the user. Will another one be generated right when this is expired and is there even a good reason expire this? Could this instead happen the same way when logged in or not logged in (eg. GitHub example) that the reset pw token/link is only sent to the email and not displayed in the UI.

The password "reset password token" can only be expired by the admin, not the user. This is also only displayed to the admin. This is an admin tool to handle some edge cases where a user can be stuck with an invalid token. Once a token is expired by the admin, the user will be able to request a new one. So to make more clear to you what actions are available for the admin and for the user:

• User: change password, change username, manage identity.
• Admin: expire tokens (for the verification email and password reset), deactivate the account and rescan proposal credits.

Regarding Past Public Keys, can this list include the date when they were generated as well a small description of why these are stored + what can they be used for?

IIRC this list of past identities is being shown only to the logged in user even though the information is public in the API. In any case, I think a help description would be enough here.

User ID: also needs a small description/input how exactly this differs from the Public Key.

Agreed. Perhaps we can have an "i" icon in front of the id.

And btw the account general tab is already implemented, it is missing only a few items as described in the PR: https://github.com/decred/politeiagui/pull/1295.

[tiagoalvesdulce]

@linnutee @MariaPleshkova any update on the proposal credits purchase flow and the account UX improvements?

[MariaPleshkova]

@tiagoalvesdulce working on them. Will provide you with the designs soon

[MariaPleshkova]

@fernandoabolafio Attaching designs with the latest updates.

-User account modifications Realized the way grouping is presently done has issues, as there are a lot of not related items mashed together. So we decided to make 4 high level groups as subpages and populating those with the relevant items (Identity, Account, Credits, Preferences). + added missing relevant pages.

-Manage identity modifications Reduced one action, so now both buttons (Create new identity and Import identity) could be accessed here already, and there will be no need to double click (first opening modal “Manage identity”, then the action).

-Added pages from My proposals’ tab

-Added Attach new file to the proposal flow

-Back to cyan color for an active tab underlining (#2ED8A)

-Added Manage Identity modals

-Added proposal actions (censor, approve,etc.) (see the artboard with all proposal cards’ examples)

-Improved tabs visualization for smaller screens (2 separate dropdowns for 2 filters)

-Added not found page

-Added notifications examples

-Added an Edit icon to the proposal page (if it’s “my” proposal only, of course)

P.S. It's still Proposal version picker left. Regarding admin pages, I thought that admin view is the same page with all proposals, but an admin can see additional buttons on them, like "start vote"/"abandon". And that's it. And to reach the admin view you should just login as an admin. Or am I wrong?

Preview: https://xd.adobe.com/view/0b627b46-3064-4294-76df-116df7bf1a7a-7d53/ Specs: https://xd.adobe.com/spec/2f0ecbf8-6367-48ea-6b71-1e56191dcd06-593f/

[fernandoabolafio]

@MariaPleshkova I am taking a look at the new specs, everything looking good so far. The account page is looking much better indeed.

Now, answering your question:

Regarding admin pages, I thought that admin view is the same page with all proposals, but an admin can see additional buttons on them, like "start vote"/"abandon". And that's it. And to reach the admin view you should just login as an admin. Or am I wrong? Those are two different things:

• The admin can see some special buttons in the public list, this is correct.
• The admin has another page which lists non-public proposals (or "unvetted proposals"), see below: Notice that this page has also a "Search Users" button on the right, which takes to a different page as well. Do you have access as an admin on https://test-proposals.decred.org? From there you can go to every path and see how currently works.

[MariaPleshkova]

Attaching Pi XD file as you asked @fernandoabolafio

Politeia_17.07.2019.zip

[fernandoabolafio]

@MariaPleshkova just added one more item to the list: Login modal. We need to display that when the user session has expired, so they don't loose context by being redirected to the login (in case they are in a protected route). Or at least this is how we dealt with this situation in the old GUI. Do you have any thoughts on how to improve this UX?

[MariaPleshkova]

@fernandoabolafio but we already have this one in the updated xd above:

[MariaPleshkova]

@fernandoabolafio @tiagoalvesdulce attaching the links to admin pages + xd file for your convenience preview: https://xd.adobe.com/view/90a9155f-0071-4e1b-78d1-e56b363473e1-e698/ spec: https://xd.adobe.com/spec/4e7eb732-a445-46b0-4f7e-4152097a10c8-384f/

XD file: Politeia_admin_02.08.2019.zip

"Search for users" can be reached from the dropdown

[fernandoabolafio]

@MariaPleshkova about the admin specs, I have one question: how the admin can reach the unvetted proposals route? I am supposing it is through the link "Proposals" in the username dropdown. However, the admin is also a regular user so the dropdown should also show "My Proposals". So one option would be show "My Proposals" and "Unvetted Proposals" for example.

[fernandoabolafio]

Just added one more thing: Comments censor specs. This is how it looks like currently:

[MariaPleshkova]

@fernandoabolafio

So one option would be show "My Proposals" and "Unvetted Proposals"

Yes. Totally agree!

[ta-lind]

Hey @fernandoabolafio wondering if there's still any relevant items here amongst the couple open points or can the issue be closed?