devshawn / password.live Goto Github PK

It would be more convenient to have all controls/options accessible without needing to switch pages.

This file (settings.js) isn't used and is blank, so it can be removed from source/server.

Advanced page Password Settings panel is lacking in compatibility with screen-readers

Tested on macOS Using (Browser + Screenreader):

• Chrome + ChromeVox
• Chrome + macOS VoiceOver
• Safari + macOS VoiceOver
• iOS Safari + iOS VoiceOver
• FireFox + macOS VoiceOver

Examples of some issues:

• ChromeVox for Chrome does not provide an audible label on any Password Settings but they can be changed after hearing some audible feedback on whether or not a checkbox is checked. Regardless of the setting in focus, no label is read aloud by the screen reader for any setting.
• iOS VoiceOver on Safari speaks the current value (either the checkbox state, or the length number that is displayed, but not via selecting the slider). iOS Voiceover also speaks aloud the visual dividers between each setting.
• macOS VoiceOver in Safari can alter the checkboxes and speak the labels of all checkboxes, but does not speak the label for the Length setting in any capacity when tabbing through the page. macOS VoiceOver will speak certain page elements if they are explicitly clicked on in Safari.
• macOS VoiceOver in Chrome can alter the checkboxes and length slider, but no labels are spoken, even if explicitly clicked on.
• Firefox with macOS VoiceOver did not allow tabbing through even the first page element via the VoiceOver selector. Page elements were highlighted visually when tabbing, but the VoiceOver selector did not enter the page, so nothing was spoken aloud from the page content.

The toggle for any style of password/phrase is important due to of a lack of consistency in systems supporting spaces or no-spaces in their password requirements.

This will provide a significant increase in security

Increasing to length 16 increases "time to crack" by more than a factor of 300,000,000 (based on baselines from https://github.com/howsecureismypassword/hsimp).

So, let's change the default length to 16 within the server.

Having an option to create passphrases with spaces would be nice. Toggling spaces might be important since not all systems allow for space characters. Maybe allow for the delimiter to be an underscore or something? I’m probably overthinking this.

This test page / component is never used. It can be removed.

Doesn't seem to responsive on Mobile Safari.

Mobile Chrome behaves oddly in landscape and portrait, but does some interesting responsiveness things.

Since writing this a year ago, babel has been updated quite a bit and recommends using the env preset over es2015; we should upgrade this in both the client and the server.

I noticed on the live server that the settings were not being stored in the cookies after clicking the toggle.

I've added a fix to the issue also in my pr for the material-ui update #44

When a PR is merged to master, we should automatically deploy the latest docker image to a staging server. I'll work on getting this implemented.

Since I've moved this repository from GitLab to GitHub, the footer gitlab icon component needs to be renamed to footer.github.icon.js.

This may not be a super easy task, but since I wrote this a year ago, material UI v1 has been released. We should update the client to latest version of material ui.

This may require changing how styling works or which components are used since there is breaking changes; ideally, we'd keep the design as similar as possible to the current design.

It'd be nice to have a fade or transition animation when toggling advanced settings on and off.

Perhaps we could use ReactTransitionGroup or react-metro?

Decorative icons in the Nav Bar and Password Settings panes should include the aria-hidden="true" HTML attribute to allow for screen readers to pass over the element so as not to speak iconography out loud.

Currently, the client and the server both have very little tests. Any more added tests would be appreciated!

We utilize Jest for writing tests on both the server and the client. The README.md explains how to run the application, and "npm run test" or "lerna run test" will run the tests.