protonmail / proton-mail-settings Goto Github PK

View Code? Open in Web Editor NEW

54.0 28.0 13.0 59.95 MB

React web application to manage ProtonMail settings

JavaScript 1.03% HTML 1.53% Shell 3.10% TypeScript 92.74% SCSS 1.60%

proton-mail-settings's Introduction

ProtonMail-settings

You will need:

bash
node (mini latest LTS)
npm (latest too, it's better)

⚠ If you use Windows plz follow this document before anything else how to prepare Windows

How to dev 1

Clone this repository
Run $ npm i
$ npm start

It will give you the URL where it's available.

You can login via /login

How to dev 2

Clone the WebClient
Clone this repository
Clone fe-proxy
Run $ npm install in every repo
Create an env file with the key ROOT_DIR=/tmp (if you cloned everything inside /tmp )

⚠️ Clone them inside the same root dir.

Once it's done ./app dev 🎉

It will run first, WebClient, then settings and proxy. :warning: A bit static for now, it's quick&dirty so 8080, 8081 and 8040 need to be available.

App available on http://localhost:8040. Settings available on http://localhost:8040/settings/

Where should I should I clone them ?

Better to keep the default dir and inside the same dir. ex:

49 directories, 56 files 
[atlas]:~/dev/taf
$ pwd     
/home/dhoko/dev/taf
[atlas]:~/dev/taf
$ tree -l
.
├── Angular
├── protonmail-settings
└── fe-proxy

Here WebClient is inside the dir Angular, is it an issue ? Nope. We can configure it via the env.

ROOT_DIR=/home/dhoko/dev/taf
WEBCLIENT_APP=Angular

One key/env:

WEBCLIENT_APP: dirname where is the webclient
SETTINGS_APP: dirname where is protonmail-settings
PROXY_APP: dirname where is the fe-proxy

Default === dirname with the default git clone dir.

Sync translations [App to crowdin]

You can sync them via $ npm run i18n:upgrade, it will:

Extract translations
Push them to crowndin
Create a commit with them on the repo

How to deploy

$ npm run deploy -- --branch=<deploy-X> --api=<target> Deploy the app as /settings
$ npm run deploy:standalone -- --branch=<deploy-X> --api=<target> Deploy the app as deploy + /login

Based on proton-bundler

Deploy to prod

$ npm run deploy:prod

Build from master post git clone into /tmp. --no-remote build from local.

How to test

Set up tests
Start the app
Run npm run e2e for the CLI or npm run e2e-dev for the cypress test runner.
🎉🎉🎉

Sync translations [Crowdin to our App]

To get latest translations available on crowdin, you can run $ npm run i18n:getlatest. It will:

Get list of translations available (default same as proton-i18n crowdin --list --type --limit=95)
Upgrade our translations with ones from crowdin
Store a cache of translations available in the app
Export translations as JSON
Commit everything

⚠️ If you want to get only a custom list of translations, configure it inside po/i18n.txt and run $ npm run i18n:getlatest -- --custom

🚀 Create a new version (before deploy)

This command will:

Manage dependencies (detect and update the lock)
Take care of active npm links
run npm version

$ npx proton-version <patch|minor|major>

Default is patch

If you want to force the update of all dependencies add the flag --all;

By default it provides a prompt and ask you what you want to update etc.

If you have an active npm link it will remove it from your node_modules.

proton-mail-settings's People

Contributors

Stargazers

Watchers

Forkers

tarsbase sveinki archangel-irk marisusis luckymurari mbr001 yousafsyed rdpli msgpo cooperatievevennootschapcvbvbv 0800092000 philientaylor

proton-mail-settings's Issues

Subscription plan at the logo title changes when you navigate from Mailbox to Settings

Subscription plan at the logo title changes when you navigate from Mailbox to Settings
http://g.recordit.co/KaAMEaE1nd.gif

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
      }
    ]
  }
}

Column names overlapping when zooming in

Description

When I zoom in, the column names 'Notification' and 'Labels' in 'Folders/labels' overlap.

Steps to reproduce the behavior:

Open 'Settings'
Click on 'Folders/labels' in the nav bar
Zoom in
Observe 'Notification' and 'Action' column names overlap

Expected behavior

The column names don't overlap

Screenshots

Authentication logs are downloaded one page at a time

Steps to reproduce

Go to Security
Scroll down to authentication logs
Click download

Expected behavior
The complete list of authentication logs should be downloaded.

Current behavior
Only the data from the current page is downloaded.

Click on text triggers the switch

Steps to reproduce

Go to Appearance
Click on use sticky labels text.
Notice how the the switch changed the state.

Screenshot

Additional info
This is happening on all switch elements.

Modal window in 'Identity' is not shown accordingly

The modal window is not shown accordingly:

Open 'Settings'
Click on 'Identity' on the navigation bar
Click on 'Edit' next to 'Display name'
Click on 'Edit' next to 'Signature'

'Revoke all other sessions' does not revoke the active sessions

In 'Security' is not possible to revoke all active sessions at the same time by clicking 'Revoke all other sessons'

Video:

https://recordit.co/wT7GIt8ava

Handle app update

Logic informing the user when a new version is available and asking the user to refresh his tab.

Invoices always have a page 2 available

Both user and organization invoices always allow to open page 2 for invoices, despite no invoices being available on page 2:

Remove signature edition panel in address creation process

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.

Update Buttons in Subscription Settings

In the Plans section of the page

can you please update the SELECT button of the active plan to say UPDATE

In the Subscription section of the page

can you please update the MANAGE button next to the selected paid ProtonMail plan name to say UPDATE as well
can you please update the MANAGE button next to the selected paid ProtonVPN plan name to say UPDATE as well

Also, please verify the following conditions:

If the user is susbcribed to the FREE Mail Plan and presses on the UPDATE button, the user is notified that there is nothing that can be updated on FREE plan

Improve bug report modal

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:

Login Problem
Sign up problem
Bridge problem
Import/Export problem
Custom Domains problem
Payments problem
VPN problem (If they select VPN, to send the inquiry directly to protonvpn.zendesk.com instead of protonmai.zendesk.com)
Feature request
Other

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.

Missing notification when changing email subscriptions

If you try to disable/enable the email subscriptions in /account, there is no notification shown whether the action was successful or not.

Video:

bpVqnBd2CD.zip

Organization key section

During the move of a created folder/label, it's name briefly disappears

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.

https://recordit.co/PAmv0r7vyS

Trying to enable daily email notifications, results with an error

Description

When I try to enable daily email notifications, I receive 'Invalid input' error.

Steps to reproduce the behavior:

Open 'Settings'
Click on 'Account'
In the 'Recovery & notification' section click on the 'Daily email notifications' toggle
Enter the account's password
Click 'Submit'

Expected behavior

The 'Daily email notifications' are enabled.

Video

https://recordit.co/ntrcMpFXFM

Zooming in cuts the text in the 'Pricing' fields

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:

Open the 'Settings'
Click on 'Subscription' in the nav bar
Click in 'Show plans'
Zoom in
Observe the 'Pricing' boxes'

Expected behavior

The selected values are shown without being cut.

Video

https://recordit.co/da0FDvyvoG

Bug report

https://github.com/ProtonMail/react-components/pull/36

Add all API handlers

just the retry handler left
also public api handlers

Change credit card payment option name

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).

Missing anchor for delete account section

Steps to reproduce

Go to account
Click delete account on the right menu.

Expected behavior
The app should jump to delete account section.

Current behavior
Nothing happens.

Submit button on Keyboard shortcuts modal.

Steps to reproduce

Go to general
Enable keyboard shortcuts
Click view keyboard shortcuts

Screenshot

Invoice preview doesn't work on first try

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

Auto-response page

Existing feature

https://mail.protonmail.com/autoresponder

Mockups fro v4

https://zpl.io/agzRln0
https://zpl.io/2ZL6lk1

Wireframe for the modal

Note

Delete action display a confirm modal.
Create and Edit display the AutoReplyModal.
Create should be not present if an auto-reply config exist.
Create time component.
KB article

Handle hotkeys

In settings, we need to handle:

? to open the hotkeys modal.
ESC to cancel a modal.

Preview PDF invoice in modal

Since adbocker is blocking new tab from blob url, we could preview the PDF in a modal with native PDF support.

Note

Make sure print works well.

Clicking Settings button breaks the html/css

Clicking Settings button while already in Settings breaks the html/css

Password reset & daily email notifications will stay enabled without recovery email

Steps to reproduce

Set recovery email
Enable recovery
Enable daily email notifications
Delete the recovery email.

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.

Missing parts

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

Icons are generally either missing or they are different from the ones in the Zeplin design.
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

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.
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.
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.
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

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.
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:

Overview container:
- The boxes with personal and Upgrade information appearing in the Zeplin design are not in here yet.
- The display is a bit ugly, with a potentially confusing arrangement of rows and columns. The Zeplin design is less dense.
- 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.
- Links do not appear underlined in the Zeplin design.
- The functionality for having locks in the features that can only be unlocked by upgrading (like 'Custom domains') hasn't been designed yet.
- 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:

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

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

Account (/settings/account)

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

Missing "Passwords" section. See design.
Missing "Two-factor authentication" panel. See design

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

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:

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.

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):

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:

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:

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.

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.

"Layouts" section:
- Description text missing here and in Zeplin.
- Radio cards should be aligned horizontally when there's browser space available.
- Information pop-ups are "perforated" by radio-buttons.
- In v3 notifications were fired when changing the options in here.
"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.

Filters (/settings/filters)

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

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.

Learn more is not linking to the right place.
It's not indicated what notification does, contrary to v3.
Icon to the left of NAME is not the right one
No capability of rearranging items (folders and labels) as in v3.
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:

In v3 and Zeplin it's Auto-Reply. Here it's Auto-reply. Different capitalization.
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.
The edit modal needs to be worked on, both on the visuals and its functionality.
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

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:

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:

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.
"Download page" and "ProtonVPN login" are buttons in the Zeplin design.
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:

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

Add pdf viewer

Load the library on demand because it's usually big.
Use it for invoice.
Add it in a modal.

Autoreply message goes outside the box

Steps to reproduce

Go to Auto-reply
Set long message
Save.

Screenshot

Order addresses

Let the current user re-order his addresses.

Component: <AddressesWithUser />

Layout

Sidebar
Header
Mobile view

Add notifications for Labels/folders

I need to wait useNotifications

Folder notification toggles goes back and forth before changing status

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

Subscription page

plans
current subscription
subscribe process

Activate org section

Organization section defined here:

https://github.com/ProtonMail/react-components/

Pending on @mmso PR for keys page to add password + key logic.

Use config

ClientType
BugReportTitle
...

'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

http://recordit.co/coQ8ltFLUL

Add reset theme route

Missing notifications for external PGP settings

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

protonmail / proton-mail-settings Goto Github PK

proton-mail-settings's Introduction

ProtonMail-settings

How to dev 1

How to dev 2

Where should I should I clone them ?

Sync translations [App to crowdin]

How to deploy

Deploy to prod

How to test

Sync translations [Crowdin to our App]

🚀 Create a new version (before deploy)

proton-mail-settings's People

Contributors

Stargazers

Watchers

Forkers

proton-mail-settings's Issues

Existing feature

Mockups fro v4

Wireframe for the modal

Note

Note

Front-end Settings pages in v4

About this document

Sidebar

Header

General comments

Pages

Overview (/settings)

Subscription (/settings/subscription)

Account (/settings/account)

Organization (/settings/organization)

Users (/settings/members)

Custom domains (/settings/domains)

Addresses (/settings/addresses)

Identity (/settings/identity)

General (/settings/general)

Appearance (/settings/appearance)

Filters (/settings/filters)

Folders/Labels (/settings/labels)

Auto-reply (/settings/auto-reply)

Keys (/settings/keys)

Security (/settings/security)

Apps (/settings/apps)

TODO code

Recommend Projects

Recommend Topics

Recommend Org