https://github.com/manusa/isotope-mail/network/dependencies

Shows a warning due to a vulnerability in url-parse dependency.

Requirements

• Webpack+Babel to transpile and generate distribution package
• React as the main JS framework
  • React to support hot-reloading
• Sass for stylesheets definition

AC

• Distribution package is generated in ./dist directory
• Live development application is served at port 9000
• An empty page with a "Hello world!" literal is show when loading the page in a browser

Add flex-wrap: wrap; property to container

Replace margin property from attachment item:
margin: 0 6px 6px 0;

https://docs.traefik.io/
Project architecture

Reverse proxy (Traefik) [80] <- Traefik Docker Image
├ FE (ReactJS) [9000] <- Nginx Docker Image <- Path `/`
└ BE (Spring Boot) [9010] <- Alpine Java Docker Image <- Path `/api`

Requirementes

• A visual indication should be displayed to the user when the Redux State cannot be persisted in the browser's storage (IndexedDB)

Requirements

• Message viewer to display basic information of an email message
  • Subject
  • From
  • Received date
  • To
  • Basic content renderer
• Provide a way to navigate back to the message list of the currently selected folder (back button)
• Opened messages should be marked as read

Requirements

• Background job to refresh folder list and inbox messages
  • New message counts + folder properties should be displayed without user interaction
  • Inbox messages should also be refreshed

AC

• Messages are marked unread/read, folders update counters accordingly displaying changes
• Messages are deleted or marked read/unread within the INBOX, message displays changes

Application state holds a reference to a folder under the seletedFolder field.

Whenever the list of folders is updated, the folder under this field no longer corresponds with the updated folder object within the folders.items field.

Application should only store the ID of the selected folder selectedFolderId

Apparently, although spec says differently, Microsoft Edge has no getAllKeys method for IDBIndex class.

TypeError: Object doesn't support property or method 'getAllKeys'

Requirements

• Delete button in top-bar when message-viewer is displayed
• Delete action to move message to trash folder and redirect user to selected folder message-list.
• Trash folder is the folder with the \Trash attribute or if none available, any folder named Trash (ignore case)

Requirementes

• User's should be "greeted" with a login dialog to enter mail credentials
• Credentials should be stored (encrypted) in the Front End

AC

• When loading the application, user is redirected to a login screen.
• User is required to enter mail server host, mail server port, user and password.
• User can submit the form and if credentials are valid is redirected to default application layout (folders+message list)
• User is not able to see or retrieve the credentials as they should be encrypted during the rest of the application lifecycle.

Requirements

• Folders should be displayed with traditional order (Inbox first) and with icons.
• Child folders should appear beneath parent folder as a nested list
• Folders with new messages should be bold
• Folders should display unread messages Folder name (999)

AC

• Application interface should display folders according to the requirements

Requirements

• An error icon should be displayed indicating connection is not protected by SSL encryption

Requirementes

• Top bar should display different content depending if message list or message viewer are displayed
• For message-list
  • If currently selected folder is INBOX, display name of the application
  • If currenty selected folder is different than INBOX, display "${nameOfFolder} - ${applicationTitle}"
• For message-viewer
  • No title should be display, only action buttons

Requirementes

• Redux state must be preserver when user refreshes the browser window

AC

• If a logged in user refreshes browser, current state is preserved and is not redirected to login page

Requirements

• Dockerfile for server using openjdk:8-jre-alpine
• Dockerfile should hint default application exposed port 9010
• Deployed container will load spring application in root path /
• Travis CI configuration should push image to docker hub marcnuri/isotope:client-server

Requirements

• Server to which API is allowed to connect can be limited through an environment variable.
  • If no variable is specified, API will connect to any server
  • Environment variable will support a comma separated list of mail hosts to which it can connect

Requirements

• Gradle as dependency management and build automation system
• Spring Boot 2.* as Java Framework
• Basic IMAP support
• Basic Web MVC support (REST endpoints)

AC

• Application is served at port 9010
• Exposed Folder resource to demonstrate Web MVC + IMAP support

Requirements

• Card with folder name beside subject headline should be clickable.
• When the user clicks the card, page shows message list for that particular folder.

In order to avoid performance problems when persisting states with folder message caches with thousands of messages, message cache should be persisted in its own store and only when new messages are retrieved from the server.

• Remove message cache persistence from store subscribe event
• Create new store for message cache
• Create function to persist folder message cache on demand
• When state is recovered cross join with message cache store to recover the complete state

Move current error/warning icons to the top of the side-bar

Project should be documented using available GitHub resources (Readme.md, wiki...)

Requirements

• Babel version to be upgraded from 7.0.0-beta* to 7.0.0

Description

Interface should be familiar to users of other mail clients (GMail, Outlook, Hotmail...) in order for them to easily recognize the features of the mail client and inherently know how it works based on prior experience.

Requirements

• Dockerfile for client using nginx
• Deployed container will load webapp in root path /
• nginx to be configured to load index.html whenever a sub-path is accessed (e.g. /login)
• Travis CI configuration should push image to docker hub marcnuri/isotope:client-latest

Requirements

• If newMessageCount of inbox folder is > 0, an HTML 5 notification should be sent to the user

Requirementes

• Side-bar toggle button should display in side-bar when visible
• When side-bar is visible, top-bar should not display toggle side-bar/menu button
• When side-bar is hidde, top-bar should display toggle side-bar/menu button

Requirements

• Mark unread button in top-bar when message-viewer is displayed
• Mark unread button must be to the right of delete button
• Mark unread button to flag button as unread and redirect user to selected folder message-list.

Create initial Redux store and move App state data variables to the store

Requirements

• Redux store to be used whenever storing data to be cached from the backend (folders, messages...)
• Store state to be used when displaying data in a component (mapStateToProps)
• Store dispatchers to be used when updating data in the store

AC

• Data is not stored in component state
• Data displayed in a component is not passed over through component properties, components to access data directly from application global state

Product name to be Isotope Mail Client

• Rename Java packages (com.marcnuri.isotope)
• Rename affected client source files

Requirements

• New reactive endpoint to be implemented
• Endpoint will return a ServerSentEvent stream of lists of messages
• Batches to be incremental, 20, 40, 80, 160, 320, 640 (Optimize IMAP retrieval for slow servers [MS Exchange])
• Last batch will have an ID of "1" -> FE will know SSE stream ended and persist messages to IndexedDB cache.
• BE
  • Implement using Spring Webflux (Project Reactor)
  • Server will detect if client disconnects and abort the operation
• FE
  • Messages are loaded as they are received
  • Once last message is received, a full message-list refresh is triggered (Removes deleted messages) and complete list of messages is persisted in IndexedDB folder's message cache

Each time a user selects a folder, a refresh of the folder's message cache is issued to the API server.

If user selects a different folder before the previous fetch completed, previous fetch should be aborted.

This issue may have been caused after #33 was implemented.

Requirements

• Build for:
  • Server (Java)
  • Client (JavaScript)

Requirements

• Attachments should be downloadable though an endpoint
• Endpoint will require folderId, messageId and attachmentFileName/contentId
• Endpoint will respond with a byte stream and the attachment's Content-Type and OK status

• Generate SHA-256 hash from serverHost-user to use as IndexedDB store key (userId)
• Generate SHA-256 hash from serverHost-user-password to use as password key (hash)
• Store userId and hash in sessionStorage -> Allows page refresh
• If userId+hash exists in sessionStorage (PageReload), retrieve state from IndexedDB using userID as object key and restore encrypted state using hash as password to decrypt it.
• When a new state is published/stored, if key/userId exists in sessionStorage, update IndexedDB entry.

Plain text Credentials are never stored in FE, not even in Encrypted IndexedDB -> Always use hashes

https://github.com/bitwiseshiftleft/sjcl/

Requirements

• All literals for FE must be internationalized
• A basic i18n infrastructure is required
  • Application literals must be available in different languages
  • Application languages must be managed through VCS
• User language to be detected from browser language
• All current application literals should be translated (en+es)
• All new application literals should be available in English and Spanish

Integrate react-i18next library for internationalization of client.

Requirements

• List of e-mail attachments to be displayed
• Attachments should be displayed on top of the message content
• Attachment container should scroll with message content
• Attachment container to contain a card for each attachment
• Attachment cards are clickable
• Attachment card click triggers download

Requirementes

In order to improve load times for slow servers or mail accounts with a large number of folders or messages, initial load logic should be as follows:

• Initial folder list is loaded using two requests, first request will load first level folders, second request will load complete hierarchy of folders.
• Whenever messages for a folder are loaded for the first time or are empty, load should happen in two phases. First phase will load first 30* messages, second phase should load the complete list of messages for the selected folder.

Requirements

• Special IMAP folders (Inbox, Drafts, Sent, Trash) should be identified and positioned accordingly.
• A special icon should also be visible for these type of folders.
• Identification (except for INBOX) of folders should be done exclusively using IMAP folder list attributes

Requirements

• Messages to be retrieved using server API
• Messages should be displayed in the message grid

AC

• On application load, INBOX messages are shown in message grid
• On folder click, messages are replaced by messages in that folder

https://github.com/manusa/isotope-mail/network/dependencies

Shows a warning due to a vulnerability in hoek dependency.

Requiremets

• All messages from a folder should be stored in Front End cache / store
• Inbox messages should be automatically loaded when application loads (after initial folder retrieval)
• Virtual pagination should be implemented in message list for performance
• When switching folders, if messages exist in cache, messages should be displayed immediately.
• Selecting a folder triggers a cache update, once the new messages are retrieved message-list should be updated.
• Selected folder should be highlighted in folder-list

Requirements

• Messages can be moved to another folder by dragging them from the Message List
• Spike implementation only requires to be able to move one message at a time
• Message disappears from originating folder as soon as it's dropped to the target folder
• Message should appear in target folder once the BE request has completed

• After the implementation of #34 the request to retrieve initial folder list or inbox are duplicate.

Requirements

• Message-Viewer must not add additional spacing between <p> tags when displaying HTML messages (in Chrome)

Currently chrome adds margins to <p> tags when no customized styles exist using the following default CSS:

-webkit-margin-before:0em;
-webkit-margin-after:0em;

Create an initial layout for the application FE showing a list of folders and messages.

Requirements

• Material design for styling
• Toggleable side bar showing folders
• Messages shown in a list
• Initial action buttons (Compose...) place holder to be implementes using FAB buttons
• Interface to be responsive

AC

• An initial layout is shown when accessing the application

Requirements

• Project should be analyzed with Sonar after every CI build
• Analysis should be performed automatically without any user supervision.

From travis-ci

Inspecting code with the SonarQube Scanner

Before inspecting your code, you need to:

1. Create a user authentication token for your account on SonarCloud.
2. Encrypt this token travis encrypt abcdef0123456789 or define SONAR_TOKEN in your Repository Settings
3. Find which SonarCloud.io organization you want to push your project on and get its key
4. Create a sonar-project.properties file for your project (see the documentation).

live example project

Current bundle.js file is > 700 KiB, should be splitted into separate files.

Requirements

Message grid should display the following fields:

• From
• Subject
• Date
• Size
• Flags->SEEN

AC

UI design of message-list should display the required fields in a responsive way.