pixelated/pixelated-user-agent

User facing components of Pixelated: a JavaScript single page app and a RESTful service.

Pixelated User Agent

The Pixelated User Agent is the email client of the Pixelated ecosystem. It is composed of two parts, a web interface written in JavaScript (FlightJS and React) and a Python API that interacts with a LEAP Provider, the email platform that Pixelated is built on.

Here's a podcast that explains the project.

Pixelated is still in early development state!

Installing Pixelated as a Service

To run your own instance of Pixelated, follow these instructions: https://github.com/pixelated/puppet-pixelated#manual-installation

Installing Pixelated for Development

If you want to run and test it locally, then before you have to install the following dependencies:

• Vagrant, a tool that automates the setup of a virtual machine with the development environment;
• A vagrant compatible provider, e.g. Virtual Box;
• If you don't want to use vagrant, check the Developer-Setup-on-native-OS page.

Option 1: Run Pixelated User Agent against an existing LEAP provider

1. If you don't have access to an existing LEAP provider, you can create an account at Bitmask mail demo provider.

2. Clone the Pixelated User Agent repo and start the virtual machine (downloads 600MB, you may want get a coffee or tea in the meantime):

   $ git clone https://github.com/pixelated/pixelated-user-agent.git
   $ cd pixelated-user-agent
   $ vagrant up
   

3. Log into the VM:

   • You can access the guest OS shell via the command vagrant ssh run within the pixelated-user-agent folder in the host OS.
   • /vagrant in the guest OS is mapped to the pixelated-user-agent folder in the host OS. File changes on either side will reflect in the other.

   $ vagrant ssh
   $ cd /vagrant
   

4. Start the pixelated user agent:

   $ pixelated-user-agent --host 0.0.0.0 --multi-user --provider=mail.bitmask.net
   

   You also have other ways to start the user agent. Check the "Single User Mode vs Multi User Mode" page.

5. Go to localhost:3333 on your browser. You should see the login screen, where you can put your username and password created on step 1. Once you login, you'll see your inbox.

   First time email sync could be slow, please be patient. This could be the case if you have a lot of emails and it is the first time you setup the user agent on your machine.

Option 2: Run Pixelated User Agent against a local LEAP provider

We suggest you to use the following instructions:

• Install Pixelated User Agent using Developer-Setup-on-native-OS page;
• Install a local LEAP provider using the LEAP Platform installation with vagrant instructions.
• Running user agent against a local LEAP provider

Contributing

You are most welcome to contribute to the Pixelated User Agent code base. Please have a look at the contributions guide.

If you want to contribute as a designer or XD, see the issues labeled 'Needs Prototype' for some ideas of where to start!

Useful links

• Starting Development
• Running tests
• User Agent with Debian packages
• Translating Pixelated

And much more in our wiki pages

pixelated-user-agent's Issues

Add one tag to an e-mail

Store sent emails

First Access Guide

Make encrypted/signed information on sent mail coherent

May have to change text to describe that message encryption/signing reflect an option of the user that is seeing it

Pagination strategy

Have a showcase/test environment

So we can make sure we can do it and share progress with community

Add keyboard shortcuts

Shortcuts

• Previous mail on the list/move up: Up or "k"
• Next mail on the list/move down: Down or "j"
• Check current email's checkbox: x
• Close open email: Esc
• Send: Command/Control + Enter
• Compose: c
• Focus on search input: / or "s"
• Tag email (open "new tag" input): t
• Open keyboard shortcuts map: ?
• Reply: r
• Reply to all: a
• Forward: f
• Delete: #

Note: all shortcuts but "Close open email" are disabled when composing emails.

Shortcuts map window

Open by pressing "?" or by choosing "view keyboard shortcuts" on the User Settings window:

Background color: #3E3A37 (opacity 90%)

Fonts:

• Open sans regular for the header (Color: #FFFFFF)
• Open sans light for the shortcuts (#FF9C00 for the actions, #FFFFFF for the keys)
• Font awesome for the icons (Color: #FFFFFF - Check their cheatsheet for more details)
  • Keyboard: fa-keyboard-o
  • Close: fa-close

Ability to Turn Features On and Off

Back and forward buttons not trustworthy

some actions are called twice, thus adding two URLs to history

Correctly handle and show multipart emails

Make keys available on LEAP server

• Update pipy packages

Create a test mail set fit for public consumption

Fix on Leap Mail - Adding tags to a single mail instead of through collection

Add keyboard shortcut for jumping to tag

We should have a keyboard shortcut that when pressed brings up a modal dialog/lightbox where you can type in the name of a tag (or a search) and you will be taken there.

Simplify user agent instalation for "activist setup"

Create a .deb package. Suggestion: Use FPM (https://github.com/jordansissel/fpm)

Pin the message header when the user scrolls down

Notice how the logo at https://twitter.com/pixelatedteam collapses on scroll down (using chrome). We want a similar effect for the mail pane header. End states are shown below:

The solution should work in Chrome, Firefox and IE. Some examples that do work across borwsers here: http://byassociationonly.com/ and http://kaitbos.com/. A how-to here: https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

Send one or more attachments

Sender side: select a file using regular "browse" button
Recipient side: Displaying attachment icon on the received email

Must have additional story for whitelists, etc.

Keep the cursor location for the message body textarea

WHEN I am writing a message AND I move to another field in the form AND I come back to the message textarea, THEN the cursor should be in the exact spot where it was when I moved to the other field.

Add keyboard shortcut for "moving" an email

Moving an email entails taking away the tag that is currently selected from the current email and adding another tag. We should also jump to the tag chosen.

Make it easy to provide installs for Pixelated in any architecture (Win, OSX, etc)

Allow to have Pyton Eggs install the application while keeping compatibility with debian

Delete all tags modal - broken layout when I zoom it

Allow creation of multipart emails

Bulk mark as unread

Delete buttons should have different text when viewing trash

We should probably make the delete buttons say something along the lines of "Delete permanently" when showing emails and mail lists from Trash.

Display signing/encryption information in mail list

some indication of encryption like we have tags, etc on list of messages

Accessibility checklist

Must run a checklist and create stories/bugs to fix issues identified

Tag shortcut behaviour when adding tag to mail

When adding a new customized tag to an open e-mail the shortcuts on the side pannel are duplicated. They should not.

Add help

It should be possible to get help on the system. Help will show the keyboard shortcuts but also explain how to do some things.

Allow user to undo main actions

Must specifiy actions, break into stories

Receive incoming emails

Style guide 1.0

Basic style guide layout, structure and information; sections will (likely) be:

• Colors
• Typography
• Components
• Icons
• Guidelines
• Grid

This issue is being called "1.0" because the style guide will be continually updated and changed according to upcoming changes in the product's identity.

Will be static and reside in githubpages.

Acceptance criteria:

• basic information of at least the four first items.

Handle formatted recipients

"Lourenço P. Soares" [email protected]

Change "You are not authorized to see this message" to add more information about what happened

@bwgpro: most of the time you receive a message that you can't decrypt it is because:

• You are not the intended recipient of the message or
• The message was encrypted with an old key you don't use anymore

In this case, if we are going the user friendly way, I think the message could contain possible causes for the error instead of 'this error happened'

@olabini: actually the first one is not very common at all. The two cases that are likely is encryption to an old/deprecated key of some kind or the case when the decryption failed because the message was tampered with/got corrupted in transit.

Recieve emails in an existing inbox

Add breadcrumbs

Possibility to not sign outgoing messages

One should be able to choose if they want to sign a mail when sending (plausible deniability)

Save search to left pane

"Your saved searches" - Ad hoc tagging

@olabini: Unclear about where we save information about saved searches and other configuration information for a specific person. Maybe this belongs in the persona management on the server side.

Saved search should probably show up below the Default folders but above the tag-folders. Thoughts from UX on this?
We might also consider being able to expand the list of saved searches if there are many of them, like GMail allows you to do with Folders.

Search filter by tag

Spam filter

Must define strategy, may need many stories

Send emails

Display more information about encrypted message status

There's a spreadsheet with messages. Ask @lqust

Search results should appear on tag "All"

Observed: If you have a tag selected when you perform a search, tag remains selected
Expected: "All" is selected before displaying results

Allow user to register on the LEAP server

Option to see threaded messages

@albogabriel has the potential designs. Depends on feature toggles

Bulk selection doesn't work after paging

When I click to Mark all messages of a tag and go to the next page, the system doesn't allow me to mark all messages of the other pages by clicking mark all

Clear issues for staging environment

Action for encrypted message that could not be decrypted

Could be:
Prompt for credentials
View scrambled/original message
Read more info
Contact sender
something else

Allow bulk tagging for existing tags

In order to avoid selecting and tagging messages one by one, it should be possible to assign the same existing tag to multiple messages at once.

@albogabriel @sahrosa to provide UX info.

Given that many messages are selected, when the user chooses to assign an existing tag to them, all messages become tagged.

Out of scope:
Removing messages from the inbox
Removing an assigned tag from a set of messages
Assigning a new tag (non-existing yet) to multiple messages

Design encryption experience

When I click to mark all messages of a tag and go to the next page, the system doesn't allow me to mark all messages of the other pages, clicking in mark all.