1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
Bitmask Javascript UI
=================================================================
Here lies the user interface for Bitmask, written in Javascript.
quick start:
sudo apt install nodejs npm nodejs-legacy
npm install # installs development dependencies in "node_modules"
npm run watch # continually rebuilds source .js into "pydist"
build for deployment:
npm install
npm run build:production
After 'build', 'build:production', or 'watch' is run, everything needed for
Bitmask JS is contained in the 'pydist' directory. No additional files are
needed. Open the pydist/bitmask_js/public/index.html file in a browser or web
widget.
However! Because of the single origin policy of browsers, you will need to
open public/index.html through the webserver included with bitmaskd (e.g.
http://localhost:7070)
In order for this JS app to be loaded by bitmask, it must be packaged as a
python package and installed in the virtualenv:
source path-to-virtualenv/bin/activate
make dev-install # builds and installs JS app as python package
pkill bitmaskd # make sure bitmaskd is not already running
bitmaskd # launch backend
npm run open # opens http://localhost:7070/ in a browser
npm run watch # rebuild JS whenever source file is changed.
In order to package for distribution:
make dist-build
NOTE: If you make changes to the asset files, like add or modify an image, you
will need to stop then rerun `npm run watch` for the changes to take
effect.
Development Dependencies
-----------------------------------------------------------------
This application has no "runtime" dependencies: all the javascript needed is
bundled and included. However, there are many development dependencies.
Run `npm ls` for a full list.
**npm**
Package management, controlled by the package.json file.
**webpack**
Asset bundling and transformation. It takes all your javascript and CSS and
bundles it into one (or more) files, handling support for 'require' and scope
separation.
loaders & plugins:
* babel-loader: use Babel with Webpack.
* style-loader/css-loader: standard css loader.
* less-loader: allows use the less stylesheet.
* copy-webpack-plugin: allows us to specify what files to copy using Webpack.
* extract-text-webpack-plugin: allows you to split js and css into separate
files.
**babel**
Babel is used to compile javascript into javascript, transforming along the
way. We have enabled these plugins:
* babel-presets-react: Adds support for React features, such as JSX (html
inlined in js files).
* babel-presets-es2015: Allows the use of modern ES6 javascript.
* babel-presets-stage-0: Allows the use of some ES7 proposals, even though
these are not standardized yet. Makes classes nicer.
* babel-polyfill: This is not part of the babel transpiling, but is distributed
by babel. This polyfill will give you a full ES2015 environment even if the
browser is missing some javascript features. We include this in the 'entry'
option of the webpack config. https://babeljs.io/docs/usage/polyfill/
**react**
React is an efficient way to generate HTML views with Javascript. It allows you
to create interactive UIs without ever modifying the DOM by using "one way"
data binding. This greatly simplifies the code and reduces errors.
**bootstrap**
The world's most popular CSS styles for UI elements. The npm package includes
both pre-compiled css and less stylesheets. Even though Semantic UI is better,
Bootstrap components for React are much more stable, I have found, and also are
easy to theme.
To integrate Bootstrap with React:
* react-bootstrap: React components that use Bootstrap styles. These component
include all the needed javascript and don't require JQuery, although they do
require that the bootstrap CSS is loaded independently.
**zxcvbn**
A password strength checker that doesn't suck, but which is big. This JS is
only loaded when we think we are about to need it.
Known Issues
-----------------------------------------------------------------
Wizard
* In the wizard, the username field gets deselected.
* User sign up does not work, getting an error from the backend:
No such subcommand: create
* This wizard is kind of ugly
The list of providers should have icons, be sortable, filterable.
The list of providers does not show seeded providers (backend is not returning them)
The provider details should show human readable output, not codes.
Main window
* UI doesn't subscribe to events yet, won't get updated if
user has logged out via the command line interface.
* The backend doesn't have a concept of multiple accounts that are
all authenticated yet.
* If you cancel the wizard, it does not select the appropriate account
in the main window.
* Removing accounts doesn't do anything
* Collapsing account list looks weird, and is state is not remembered
|
