protonmail / proton-mail-settings Goto Github PK
View Code? Open in Web Editor NEWReact web application to manage ProtonMail settings
React web application to manage ProtonMail settings
Here are a few suggestions for the report bug button:
Force the users to enter the username (must fill this field). Also, point to them that this is a ProtonMail username. Maybe we can write it “ProtonMail username”.
They must select the problem from the support for which they are contacting us.
In other words, provide categories with a drop-down menu.
For example, force them to choose between:
Check if they are providing a valid contact email address (For example, they are writing violeta
they are not writing the whole address)
While they are typing recognize the words and provide suggestions from the KnowledgeBase.
In other words, if they start typing “I have a login problem, show them a text in the text box “You may want to look at our most common login problems article” and include a link from it.
I know that this may take a lot of work but it will be great if it can be implemented. The suggestion can be also shown when they are selecting options from the drop-down menu.
Description
When I zoom in, the column names 'Notification' and 'Labels' in 'Folders/labels' overlap.
Steps to reproduce the behavior:
Expected behavior
The column names don't overlap
Screenshots
Steps to reproduce
Expected behavior
The complete list of authentication logs should be downloaded.
Current behavior
Only the data from the current page is downloaded.
Add keys page
In 'Folders'labels' if you change the position of one of the created folders or labels, during the move the folders/label's name disappears.
#: node_modules/react-components/containers/addresses/AddressActions.js:81
msgctxt "Address action"
msgid "Generate missing keus"
msgstr ""
'keus' --> 'keys'
Related component: SearchSection
Since adbocker is blocking new tab from blob url, we could preview the PDF in a modal with native PDF support.
If you try to disable/enable the email subscriptions in /account
, there is no notification shown whether the action was successful or not.
Video:
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.
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.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.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.This page partially expanded the previous overview corner in the v3 Dashboard. Design here.
There are several issues in this page:
OverviewContainer.js
before defining buildSections
so that eslint is happy.This page used to be under the Dashboard in v3. It is partially worked out, missing the items:
ObserverSections
is not enabled.The "Payment methods" and "Invoices" sections are there, but with some broken functionality.
"Payment methods" section:
EditCardModal
has a card prop for that, but that prop is never passed from the parent PaymentMethodsSection
.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.Alert
component saying that "You have no saved payment methods"?"Invoices" section"
Alert
component saying that "Your account or organization currently has an overdue invoice. Please pay all unpaid invoices"?This page contains roughly half of what was in 'Accounts' in v3. It is partially worked out, missing the items:
The "Username", "Recovery & notification" and "Email subscriptions" are there. I see the following issues:
Alert
component.AskPasswordModal
. In the 2FA code you have to enter each digit twice for it to be recognized by the input field.DeleteSection
component.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:
Complete "Name" section. Actually it needs to be done almost from scratch. Design here.
Create "Password & key" section.
Create "Logs" section.
Create "Related settings" section.
app crashes when accessing from a non-paid account.
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.
The search bar is too big compared to the Zeplin design.
The information icons look too close to ROLE and PRIVATE (compare with v3).
Columns 2, 3 and 4 have been shuffled.
When clicking on the address dropdown, the button "Manage" appears underlined, but in the Zeplin design it's not.
The "Edit" button is not a dropdown.
Missing "x/X Users used" text under the table.
The section "Related Settings" has been changed with respect to the design. Therefore no subsidebar for this page.
app crashes when accessing from a non-paid account.
Several TODOs in AddMemberButton
, useMemberModal
, and MemberActions
.
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:
"Catch-all Email" section must be done. Notice the different
name with respect to the design.
"Related Settings" section:
app crashes when accessing from a non-paid account.
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.
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:
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.
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.
"Layouts" section:
"Toolbars" section seems to be a work in progress.
The text in the radio-cards (used in "Layouts" and "Themes") is not aligned with the radio-buttons.
This page should be equivalent to the previous "Filters" page in v3. Zeplin desing here
Equivalent to previous "Folders / Labels" in v3. This is the corresponding Zeplin design.
This page is fully operative. Just some minor comments.
Equivalent to the previous "Auto-reply" page from v3. The Zeplin design can be found here.
This page is almost fully operative. Comments:
This page is in correspondance with the previous "Keys" page in v3. Zeplin desing here
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:
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:
Checking for TODO code in react-components
yields places that have been discussed above. There's only one case which does not:
ProtonMailClients
(react-components/containers/products/ProtonMailApps.js) seems to be never used. It has probably been superseded by ProtonMailAppsSection
.In the Plans section of the page
In the Subscription section of the page
Also, please verify the following conditions:
https://mail.protonmail.com/autoresponder
https://zpl.io/agzRln0
https://zpl.io/2ZL6lk1
Delete
action display a confirm modal.Create
and Edit
display the AutoReplyModal
.Create
should be not present if an auto-reply config exist.Logic informing the user when a new version is available and asking the user to refresh his tab.
The external PGP settings
panel in /settings/security
does not fire any kind of notifications when you toggle the switches or change the default PGP scheme in the dropdown.
Video:
Lj6voKIw7F.zip
Description
When I try to enable daily email notifications, I receive 'Invalid input' error.
Steps to reproduce the behavior:
Expected behavior
The 'Daily email notifications' are enabled.
Video
Steps to reproduce
Expected behavior
Email recovery without recovery address is impossible. The same applies to daily email notifications. I expected these options to be turned off. The user should see a warning before these options are turned off.
Current behavior
I can have daily email notifications & password recovery without recovery email.
When enabled, clicking on the folder notification toggle will make the toggle get to the middle of the switch, then return it back to enabled, before finally goes to the disabled position.
Video:
UDubiGnirN.zip
Contains ProtonVPN settings.
Originally posted by @nikolanol in https://github.com/ProtonMail/Angular/pull/8922#issuecomment-510852981
Edit:
Settings App is wrong cf my plans
{
"Code": 1000,
"Subscription": {
"ID": "28yfeU10iuUrclaiXQ5QeBi61dO9xH6CFDtt4Opvu7uxxtdt7Do6SpMLUJsq1ad73jAHODg8b9KM2KGyUGkLbw==",
"InvoiceID": "ttcwIOKaY5vMxke4bGXQ7L42jT-D8DQ3meXTcifsrdFfXfTp7VNZyLlnzQ6P6qkBd2ShYGsWXkFo_P0UPOI_QQ==",
"Cycle": 12,
"PeriodStart": 1551266821,
"PeriodEnd": 1582802821,
"Currency": "EUR",
"Amount": 19680,
"Plans": [
{
"ID": "1H8EGg3J1QpSDL6K8hGsTvwmHXdtQvnxplUMePE7Hruen5JsRXvaQ75-sXptu03f0TCO-he3ymk0uhrHx6nnGQ==",
"Type": 0,
"Name": "1member",
"Title": "+1 User",
"MaxDomains": 0,
"MaxAddresses": 5,
"MaxSpace": 5368709120,
"MaxMembers": 1,
"MaxVPN": 0,
"Services": 1,
"Features": 0,
"Cycle": 12,
"Currency": "EUR",
"Amount": 7500,
"Quantity": 1
},
{
"ID": "S6oNe_lxq3GNMIMFQdAwOOk5wNYpZwGjBHFr5mTNp9aoMUaCRNsefrQt35mIg55iefE3fTq8BnyM4znqoVrAyA==",
"Type": 1,
"Name": "vpnplus",
"Title": "ProtonVPN Plus",
"MaxDomains": 0,
"MaxAddresses": 0,
"MaxSpace": 0,
"MaxMembers": 0,
"MaxVPN": 5,
"Services": 4,
"Features": 0,
"Cycle": 12,
"Currency": "EUR",
"Amount": 9600,
"Quantity": 1
},
{
"ID": "j_hMLdlh76xys5eR2S3OM9vlAgYylGQBiEzDeXLw1H-huHy2jwjwVqcKAPcdd6z2cXoklLuQTegkr3gnJXCB9w==",
"Type": 1,
"Name": "professional",
"Title": "ProtonMail Professional",
"MaxDomains": 2,
"MaxAddresses": 10,
"MaxSpace": 5368709120,
"MaxMembers": 1,
"MaxVPN": 0,
"Services": 1,
"Features": 1,
"Cycle": 12,
"Currency": "EUR",
"Amount": 7500,
"Quantity": 1
}
]
}
}
User must edit signature only after key generation process. So we need to remove the signature panel when the user create a new address and create a new member.
Steps to reproduce
Expected behavior
The app should jump to delete account section.
Current behavior
Nothing happens.
Clicking 'learn more' does not lead to the correct page regarding the issue, but it opens the sign in page of Protonmail - https://v4.protonmail.blue/login, or to the main page - https://protonmail.com/
Steps to reproduce:
'Settings'-> 'Folders/labels'->learn more (sign in page)
'Settings'-> 'Subscription'-> 'Payment methods'-> learn more (sign in page)
'Settings'-> 'Subscription'-> 'Invoices' -> learn more (sign in page)
'Settings'-> 'Organization'-> learn more (sign in page)
'Settings'-> 'Filters'-> 'Custom Filters' -> learn more (main PM page)
'Settings'-> 'Spam filters'-> learn more (main PM page)
'Settings'-> 'Keys'-> 'Email encryption keys'-> 'Learn more' (sign in page)
'Settings'-> 'Custom domains'-> 'Catch all'-> 'Learn more' (sign in page)
'Settings'-> 'Users'-> 'Learn more' (sign in page)
Video
Load the library on demand because it's usually big.
Use it for invoice.
Add it in a modal.
Let the current user re-order his addresses.
Component: <AddressesWithUser />
In settings, we need to handle:
?
to open the hotkeys modal.ESC
to cancel a modal.Description
When I zoom in the values in the 'Pricing' boxes are shown with partially, the text is cut.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The selected values are shown without being cut.
Video
In 'Security' is not possible to revoke all active sessions at the same time by clicking 'Revoke all other sessons'
Video:
Organization section defined here:
https://github.com/ProtonMail/react-components/
Pending on @mmso PR for keys page to add password + key logic.
Description:
When you try to preview an invoice, the preview never works on the first open.
You have to close the preview and re-open the invoice for a second time in order to see the preview.
Video:
invocie preview.mov.zip
Additionally, the submit
button doesn't work and outputs an error in the console.
Tested on Chrome 74, macOS 10.14
This is a suggestion from several users who use debit cards in order to pay for their ProtonMail/ProtonVPN subscriptions.
The current wording of the Payment Method is 'Credit Card' only, and that can be misleading to some users who want to pay with a Debit Cards. Since we already accept Debit Card Payments too, it would be more useful to mention that we accept debit cards as well in the Payment Sections.
The wording could be changed to 'Credit/Debit Card', 'Credit / Debit Card', 'Credit or Debit Card' or 'Payment Card (Credit/Debit)'.
I believe this would add better clarification and it would improve the user experience.
Screenshot:
Actual result:
Dropdown option is "pay with credit card"
Expected result:
Dropdown should say "pay with credit/debit card" or similar alternative (@jovanjovanovski can add a suggestion).
Sidebar
Header
Mobile view
I need to wait useNotifications
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.