Missing parts

[EpokK]

Front-end Settings pages in v4

About this document

This is a general assesment about how the v4 front-end is looking at the moment. Find here comments on how far the different v4 front-end settings pages are developed, whether they are missing some code or elements present in v3.

I'm using the protonmail-settings environment with both free and Visionary accounts to test the v4, and https://app.zeplin.io/project/5bb1deae290afc111d140a3f/ for general reference of its design.

Sidebar

• [x] Icons are generally either missing or they are different from the ones in the Zeplin design.
• [x] Items have been rearranged with respect to the Zeplin design, but actually that design seems outdated since the items in the sidebar do not correspond to the items in the overview container.

Header

• [ ] Logout button not appearing.
• [ ] Support icon different from the Zeplin design.

General comments

• [x] Most of the time the text inside Alert components end with a dot. But not always. See for instance alerts in the Appearance page or the "ProtonMail Beta" in the Apps page. We should be consistent.
• [x] There's also a consistency issue with capitalization when there is more than one word in titles. E.g.: should it be "Session Management" or "Session management". Both of the conventions are used in v4, while v3 stuck to the first one, I believe.
• [ ] For many (but not all) of the buttons/forms/input fields that send/receive information to the API, their effect is not reflected immediately in the browser but rather one has to reload the page. I don't know if this should be expected or not. Below, in each of the pages, there are examples of this behavior.
• [x] There's no standard use of the Info component (which adds an encircled I as information sign), and therefore it displays differently every time it's used. Some cases have been commented in the different pages below.
• [x] Also, the Tooltip component that goes inside Info must be improved (its CSS probably), as it has faulty display behavior (overlapped by other elements in the page, cutted when appearing at the end of the page). See below for examples.

Pages

• [x] For each of the following pages, in the Zeplin design the content of the pages seems to be inside a container with a header with the title of the page. This header is missing.
• [x] In the Zeplin design there's a page for message templates. I see that this has dissapeared, but I guess there may be some behind-the-scenes agreement for that.

Overview (/settings)

This page partially expanded the previous overview corner in the v3 Dashboard. Design here.

There are several issues in this page:

• [x] Overview container:
  • [x] The boxes with personal and Upgrade information appearing in the Zeplin design are not in here yet.
  • [x] The display is a bit ugly, with a potentially confusing arrangement of rows and columns. The Zeplin design is less dense.
  • [x] In each of the page sections, there is a link to the page that shouldn't be there. Only links to settings/page#something should be there according to the Zeplin design.
  • [x] Links do not appear underlined in the Zeplin design.
  • [x] The functionality for having locks in the features that can only be unlocked by upgrading (like 'Custom domains') hasn't been designed yet.
  • [x] Maybe include an // eslint-disable-next-line react/prop-types in OverviewContainer.js before defining buildSections so that eslint is happy.

Subscription (/settings/subscription)

This page used to be under the Dashboard in v3. It is partially worked out, missing the items:

• [x] Missing "Plans" section. See design.
• [x] Missing "Subscription" panel. See design.
• [x] Missing "Billing details" panel. See design.
• [x] The intersection observer ObserverSections is not enabled.

The "Payment methods" and "Invoices" sections are there, but with some broken functionality.

• [x] "Payment methods" section:

  • [x] Description text and learnmore text have not been specified yet nor here nor in the Zeplin design.
  • [x] When clicking "Add payment method", the modal "Add credit card" is not saving any card in the frontend. Also, I'm not sure that "Add credit card" may be confusing for users if they want to add a different type of card (debit, pre-paid, etc).
  • [x] In the "Add credit card" modal, there are some default numbers appering in the month and year that I don't see where they are defined. In principle the component EditCardModal has a card prop for that, but that prop is never passed from the parent PaymentMethodsSection.
  • [x] I didn't check how the card-validator npm package validates postal codes, but from my experience as user these validators sometimes are annoying and don't respect postal codes from "non-standard" countries.
  • [x] Maybe we would like a different color for the Alert component saying that "You have no saved payment methods"?

• [x] "Invoices" section"

  • [x] Description text and learnmore text have not been specified yet nor here nor in the Zeplin design.
  • [x] Maybe we would like a different color for the Alert component saying that "Your account or organization currently has an overdue invoice. Please pay all unpaid invoices"?
  • [x] The pagination dropdown doesn't look good. Too big and with different sizes for the buttons.
  • [x] In the dropdowns for "Pay" or "View", the dropdown arrow looks to big and not centered.
  • [x] The Bitcoin payment modal looks unfinished, with the QR code not centered and too close to the text. That is different from a similar Zeplin design.

Account (/settings/account)

This page contains roughly half of what was in 'Accounts' in v3. It is partially worked out, missing the items:

• [x] Missing "Passwords" section. See design.
• [x] Missing "Two-factor authentication" panel. See design

The "Username", "Recovery & notification" and "Email subscriptions" are there. I see the following issues:

• [x] "Username" section:
  • [x] "Username" section looks different than in the design. The username should be inside a form, it appears, and the text should go into an Alert component.
• [x] "Recovery & notification" section:
  • [x] The "Edit" button should be aligned right according to the Zeplin design.
  • [x] When editting the recovery email, no notification is triggered and the edit button is rendered unusable.
  • [x] There is a BUG in AskPasswordModal. In the 2FA code you have to enter each digit twice for it to be recognized by the input field.
  • [x] "Allow password reset" and "Daily email notifications" do not seem to send data to the API. Therefore one cannot enable (disable) the features when they are disabled (enabled).
• [x] "Email subscriptions":
  • [x] Communication with the API when any of the subscription options are clicked only happens upon page reload. No notifications are received.
  • [x] There is no warning text for the "Delete your account" button. It seems there's an ongoing discussion on Zeplin regarding how this should be done. The div with the text describing email subscriptions could maybe be wider. And there's a TODO in the DeleteSection component.

Organization (/settings/organization)

This page was previously inside the "Addresses/Users" page. The Zeplin design is a bit unclear regarding what sections should be in here, but it seems they're "Name", "Password & key", "Logs" and "Related settings". Only the first is partially done. So tasks to do:

• [x] Complete "Name" section. Actually it needs to be done almost from scratch. Design here.

• [x] Create "Password & key" section.

• [x] Create "Logs" section.

• [x] Create "Related settings" section.

• [x] app crashes when accessing from a non-paid account.

Users (/settings/members)

This page was previously inside the "Addresses/Users" page. Comparing to the Zeplin design I see the following differences (or things to do):

• [ ] Text for describing the section is missing both here and in the Zeplin design.

• [x] The search bar is too big compared to the Zeplin design.

• [x] The information icons look too close to ROLE and PRIVATE (compare with v3).

• [x] Columns 2, 3 and 4 have been shuffled.

• [x] When clicking on the address dropdown, the button "Manage" appears underlined, but in the Zeplin design it's not.

• [x] The "Edit" button is not a dropdown.

• [x] Missing "x/X Users used" text under the table.

• [x] The section "Related Settings" has been changed with respect to the design. Therefore no subsidebar for this page.

• [x] app crashes when accessing from a non-paid account.

• [ ] Several TODOs in AddMemberButton, useMemberModal, and MemberActions.

Custom domains (/settings/domains)

This page contains the "Domains" section of the "Domains" page in v3. It is partially worked out. I cannot test properly the "Custom domains" section without an account with registered domains. I can see the following issues comparing to the corresponding Zeplin design:

• "Custom domains" section:

  • [x] The title for this section in the design is "Custom domains" instead of "Manage custom domains".
  • [x] The text in the description does not belong to this section.
  • [x] Clicking "Finish" inside the "Add domain" modal throws an error.
  • [x] The "Edit" dropdown for the domains does not look good (too big, arrow not centered). And the dropdown options are slightly different from the ones in the design.
  • [x] Clicking on "Edit" throws an error.
  • [x] Clicking on "Delete" inside the "Edit" dropdown does not pop a notification.
  • [x] "x/X domains used" text is not shadowed.

• [x] "Catch-all Email" section must be done. Notice the different name with respect to the design.

• "Related Settings" section:

  • [x] Incomplete.
  • [x] This section does not appear in the right subsidebar.

• [x] app crashes when accessing from a non-paid account.

Addresses (/settings/addresses)

Not working. App crashes with an error on the component AddressesSections.

This page should manage what in v3 was split between the "Addresses/Users" and "Domains" pages in their respective "Addresses" sections.

Identity (/settings/identity)

The contents of this page used to be in the "Accounts" and "pm.me" page in v3. This page looks complete in v4 with respect to the expected design, but there are some issues:

• [x] "Display name & signature" section:
  • [x] Different section title with respect to the Zeplin design.
  • [x] Displayed name not centered with "Display name".
  • [x] The editAddress modal contains a field for editing the signature, which doesn't have sense to have given that there's a particular input field for it below.
  • [x] Signature field should be bordered.
  • [x] ProtonMail signature spans two lines instead of one.
  • [x] API-collected information only updated upon reload.
• [x] "Short domain" section:
  • [x] Called short address in v4, short domain in Zeplin.
  • [x] Information text is different from Zeplin.

General (/settings/general)

Several sections that were under the "Account" page in v3 have been moved here in v4. This page has all the ingredients listed in the Zeplin design, but there is some broken functionality and it doesn't look great.

• [x] "Language" section: expected functionality not implemented.
• [ ] "Desktop Notification":
  • [x] Not sure whether notification should not be capitalized.
  • [x] Bad alignment.
  • [ ] Expected functionality not implemented.
• [x] "Messages" section:
  • [x] Slight misalignment of the sliders.
  • [x] Sliders too close.
  • [x] Information icons probably not doing what is expected (which is unclear from the Zeplin design).
  • [x] Autoload embedded images not updating API.
  • [x] Unknown purpose of "Request link confirmation"
• [x] "Contacts" section:
  • [x] Slight misalignment of the sliders.
  • [x] Sliders too close.
  • [x] API-collected information only updated upon reload.
• [ ] A "Search" section appears in Zeplin. Not in v4 at present.
• [x] "Shortcuts" section:
  • [x] Slight misalignment of the sliders.
  • [x] Sliders too close.
  • [x] API-collected information only updated upon reload.
  • [x] Button misaligned and not blue as expected in the design.
  • [x] Inside the view keyboard modal, "Contact" section should probably be "Contacts" as in v3.

Appearance (/settings/appearance)

This page basically revamps the "Appearance" page of old v3. Zeplin design here, although a new design is available elsewhere for certain things like themes.

Most of the functionality is working here except for one section, and the looks could be improved.

• [x] "Layouts" section:

  • [x] Description text missing here and in Zeplin.
  • [x] Radio cards should be aligned horizontally when there's browser space available.
  • [x] Information pop-ups are "perforated" by radio-buttons.
  • [x] In v3 notifications were fired when changing the options in here.

• [x] "Toolbars" section seems to be a work in progress.

• [x] The text in the radio-cards (used in "Layouts" and "Themes") is not aligned with the radio-buttons.

Filters (/settings/filters)

This page should be equivalent to the previous "Filters" page in v3. Zeplin desing here

• [x] Page not done yet.

Folders/Labels (/settings/labels)

Equivalent to previous "Folders / Labels" in v3. This is the corresponding Zeplin design.

This page is fully operative. Just some minor comments.

• [x] Learn more is not linking to the right place.
• [ ] It's not indicated what notification does, contrary to v3.
• [x] Icon to the left of NAME is not the right one
• [x] No capability of rearranging items (folders and labels) as in v3.
• [x] The sliders in the NOTIFICATION column are not centered in the y-axis (vertically).

Auto-reply (/settings/auto-reply)

Equivalent to the previous "Auto-reply" page from v3. The Zeplin design can be found here.

This page is almost fully operative. Comments:

• [x] In v3 and Zeplin it's Auto-Reply. Here it's Auto-reply. Different capitalization.
• [x] When setting the auto-reply, the user is asked for a password, but no 2FA. I don't know if this is the expected behavior.
• [x] The edit modal needs to be worked on, both on the visuals and its functionality.
• [x] In v3 we get a warning when the auto-reply is on but there's an empty message.

Keys (/settings/keys)

This page is in correspondance with the previous "Keys" page in v3. Zeplin desing here

• [x] Page not done yet.

Security (/settings/security)

This page is mostly in correspondance to what was there in the old v3 "Security" page. Zeplin design here.

This page is almost fully operative. Some differences wit the design and some things not working are the following:

• [x] "Session Management" section:
  • [x] Revoke buttons not working at the moment.
  • [x] Table format (columns and titles) have been changed with respect to the Zeplin design.
• [x] "Authentication Logs" section:
  • [x] Should it be 'Proton credentials' or 'ProtonMail credential' in the description text?
  • [x] The pagination dropdown should probably have a scroll as in v3. Otherwise it can be pretty big.
  • [x] There seems to be a bug when going to the last page of the authentication logs, it shows "No logs yet", and the real last page looks like the next-to-last one.
  • [x] Disabling the logs should warn the user that all the logs will be cleared.
  • [x] I played a bit with the logs and it seems after disabling (and erasing) them, the new logs do not show up. It seems as if there were no update of API info. Reloading doesn't help.
• [x] "Address Verification" section:
  • [x] Information icon too far from the text.
  • [x] Information pop-up is not fully displayed, overlapped by the sliders and other elements.
  • [x] Slider not functional at the moment (no communication with the API).
• [x] "External PGP Settings" section:
  • [x] Information icon too far from the text.
  • [x] Information pop-up is not fully displayed, overlapped by the sliders and other elements. Also it appears cut when the page end is reached.
  • [x] Bug in the modal for "Automatically attach public key". If "sign external messages" is not activated, when clicking in "Automatically attach public key", a modal suggests to activate "sign external messages". Clicking on 'yes' activates it, but it doesn't close the modal.
  • [x] Bug in the "Default PGP Scheme" Select component. When changing the option, it does not reflect the it (although it sends it to the API).

Apps (/settings/apps)

This page extends the old "IMAP/SMTP" page in v3. The Zeplin design can be found here.

This page is almost complete. Just a few minor things:

• [x] Fix the button for "ProtonMail Bridge", so that it shows "Upgrade" for non-paid users. For paid users, the "activate" functionality is not implemented yet.
• [x] "Download page" and "ProtonVPN login" are buttons in the Zeplin design.
• [x] I don't think it's 'OopenVPN', but rather 'OpenVPN'.

TODO code

Checking for TODO code in react-components yields places that have been discussed above. There's only one case which does not:

• [x] The component ProtonMailClients (react-components/containers/products/ProtonMailApps.js) seems to be never used. It has probably been superseded by ProtonMailAppsSection.

[matstaz]

Header

Support icon different from the Zeplin design

MS: support is no longer in the header but in the drop down. But icon needs to be updated to the one designed by irina (if it exists)

Payment methods section

Description text and learnmore text have not been specified yet nor here nor in the Zeplin design.

MS: description text provided by Ben as a comment on zeplin: "If you wish to pay by credit card, you can add your card below. Learn about other payment options." MS: learn more link points to: https://protonmail.com/support/knowledge-base/payment

Invoices section

Description text and learnmore text have not been specified yet nor here nor in the Zeplin design.

MS: description text provided by Ben as a comment on zeplin: "You can customize and download your invoices for accounting purposes." MS: No learn more link. Can be removed.

Users (/settings/members)

Text for describing the section is missing both here and in the Zeplin design.

MS: Still missing. I need to get something from Ben.

General (/settings/general)

A "Search" section appears in Zeplin. Not in v4 at present.

MS: Search section is needed at least to display "Do not require exact match" option and to prepare the ground for encrypted search related features

Appearance (/settings/appearance)

"Layouts" section: Description text missing here and in Zeplin.

MS: description text provided by Ben as a comment on zeplin: "Choose the look and feel of your mailbox." MS: No learn more link. Can be removed.

Folders/Labels (/settings/labels)

Learn more is not linking to the right place. MS: this should be the link: https://protonmail.com/support/knowledge-base/creating-folders/ It's not indicated what notification does, contrary to v3. MS: can we make the text appear on hover over the toggle? Alternatively, we may need to write something in the text under the header.