[pkg] fix www (aka bitmask_js) when run in "development mode"

this change allows you to edit the js and have the changes reflected
immediately in the app.

14 files changed, 143 insertions, 258 deletions

diff --git a/.gitignore b/.gitignore
index 94c51d3..31d862b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,9 +36,8 @@ ENV/
 
 # Javascript, web-ui
 www/node_modules
-www/public
 www/npm-debug.log
-www/leap/bitmask_www/public/
+www/pydist/bitmask_js
 
 # vim
 *.swp
diff --git a/Makefile b/Makefile
index bcf4cf0..46a6ca8 100644
--- a/Makefile
+++ b/Makefile
@@ -4,7 +4,7 @@ clean:
 
 dev-mail:
 	pip install -e '.[mail]'
-	pip install -e www
+	make -C www dev-install-prebuilt
 
 dev-all:
 	pip install -e '.[all]'
diff --git a/README.rst b/README.rst
index 8125503..6f2f98d 100644
--- a/README.rst
+++ b/README.rst
@@ -1,5 +1,5 @@
 Bitmask
-===========
+=======================================
 
 *Your internet encryption toolkit*
 
@@ -28,37 +28,38 @@ application.
 .. _`GPL3`: http://www.gnu.org/licenses/gpl.txt
 
 Package under development!
---------------------------
+---------------------------------------
+
 This is a unified repo that has merged the following packages, previously isolated, under the leap namespace:
 
 bonafide, mail, keymanager, bitmask.
 
 The previous Qt client has been deprecated (bitmask version 0.8.2, still
-available at the http://github.com/leapcode/bitmask_client repo). 
+available at the http://github.com/leapcode/bitmask_client repo).
 
 Note that this repo still doesn't have support for VPN: its porting will
 follow soon.
 
 Read the Docs!
-------------------
+---------------------------------------
 
 The latest documentation about Bitmask is available at `LEAP`_.
 
 .. _`LEAP`: https://leap.se/en/docs/client
 
 Bugs
-====
+=======================================
 
 Please report any bugs `in our bug tracker`_.
 
-.. _`in our bug tracker`: https://leap.se/code/projects/report-issues 
+.. _`in our bug tracker`: https://leap.se/code/projects/report-issues
 
 
 Development
-==============
+=======================================
 
-Tests
------
+Running Tests
+---------------------------------------
 
 You need tox to run the tests. If you don't have it in your system yet::
 
@@ -70,33 +71,54 @@ And then run all the tests::
 
 
 Hacking
--------
+----------------------------------
+
+In order to run bitmask in a development environment, you must activate a
+virtualenv and install the various packages using 'pip install -e'. This
+installs python packages as links to the source code, so that your code
+changes are immediately reflected in the packages installed in the virtualenv.
 
-If you want to develop for the encrypted mail service, execute inside your virtualenv::
+All this is done for you with the Makefile. For example, if you want to
+develop for the encrypted mail service::
 
+  virtualenv venv
+  source venv/bin/activate
   make dev-mail
 
-If you want to develop for the gui client too, you have to have installed the
-python2 bindings for Qt5 in your system (in debian: ``apt install python-pyqt5 
-python-pyqt5.qtwebkit``). After ensuring this, you can do::
+If you want to develop for the gui client too, you have to have
+installed the python2 bindings for Qt5 in your system (in debian: ``apt
+install python-pyqt5  python-pyqt5.qtwebkit``). After ensuring this, you can
+do::
 
   make dev-all
 
-hacking on the webui
-++++++++++++++++++++
+Note: even though the UI is in javascript. Qt is used to create a webview
+window.
+
+hacking on the javascript UI
++++++++++++++++++++++++++++++++++++++++
+
+The above instructions will install a python package that contains a pre-
+bundled version of the javascript UI.
 
-The above instructions will install a python package that contains a
-pre-compiled version of all the html+js elements, which is updated
-periodically. If you want to hack on the
-web-ui, you should read the instructions on the ``www/README.rst``. If you want
-to test the integration of the web-ui and the webkit client, you can install a
-development version of the bitmask_www package. Inside your virtualenv::
+If you want to hack on the javascript UI, then it needs to be able to update the
+javascript bundle whenever a javascript or CSS source file changes.
 
+First, install the javascript prerequisites:
+
+  sudo apt install nodejs npm nodejs-legacy
+
+Next, run ``dev-install``:
+
+  source venv/bin/activate    # if not already activated
   cd www
-  make pydist-dev
+  make dev-install            # install JS user interface as a python package in "develop" mode.
+  node run watch              # continually rebuild javascript bundle when source files change.
+
+For more information, see ``www/README.md``.
 
 cross-testing
-+++++++++++++
++++++++++++++++++++++++++++++++++++++++
 
 If you are developing against a non-published branch of ``leap.common`` or
 ``leap.soledad``, run instead::
@@ -108,7 +130,7 @@ parent folder.
 
 
 License
-=======
+=======================================
 
 .. image:: https://raw.github.com/leapcode/bitmask_client/develop/docs/user/gpl.png
 
diff --git a/setup.py b/setup.py
index 62609d4..c480c3e 100644
--- a/setup.py
+++ b/setup.py
@@ -27,11 +27,11 @@ extras = {
     ],
     'gui': [
         'vext.pyqt5',
-        'leap.bitmask_www',
+        'bitmask_js',
     ],
     'all': [
         'vext.pyqt5',
-        'leap.bitmask_www',
+        'bitmask_js',
         'leap.soledad.client',
         'gnupg',
     ]
diff --git a/src/leap/bitmask/core/_web.py b/src/leap/bitmask/core/_web.py
index ae22325..344e26e 100644
--- a/src/leap/bitmask/core/_web.py
+++ b/src/leap/bitmask/core/_web.py
@@ -34,7 +34,7 @@ from twisted.python import log
 from leap.bitmask.core.dispatcher import CommandDispatcher
 
 try:
-    import leap.bitmask_www
+    import bitmask_js
     HAS_WEB_UI = True
 except ImportError:
     HAS_WEB_UI = False
@@ -54,9 +54,9 @@ class HTTPDispatcherService(service.Service):
     def startService(self):
         if HAS_WEB_UI:
             webdir = os.path.abspath(
-                pkg_resources.resource_filename('leap.bitmask_www', 'public'))
+                pkg_resources.resource_filename('bitmask_js', 'public'))
         else:
-            log.msg('leap.bitmask_www not found, serving bitmask.core web ui')
+            log.msg('bitmask_js not found, serving bitmask.core ui')
             webdir = os.path.abspath(
                 pkg_resources.resource_filename('leap.bitmask.core', 'web'))
         root = File(webdir)
diff --git a/www/MANIFEST.in b/www/MANIFEST.in
deleted file mode 100644
index 7d5f58b..0000000
--- a/www/MANIFEST.in
+++ /dev/null
@@ -1 +0,0 @@
-include notes-python.txt
diff --git a/www/Makefile b/www/Makefile
index 18a7107..d67a02b 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -1,34 +1,47 @@
-build:
+#
+# builds for development mode
+#
+
+dev-build: build-clean
 	npm install
-	npm run build:production
+	npm run build
+	touch pydist/bitmask_js/__init__.py
 
-build-dev:
-	npm run watch 
+dev-install: dev-build
+	pip install -e pydist
 
-clean:
-	rm -rf public
-	rm -rf node_modules
+#
+# installs python package, but does not rebuild the js.
+# for usage when you don't want to install nodejs
+#
+dev-install-prebuilt:
+	pip install -e pydist
 
-py-pkg:
-	touch leap/bitmask_www/__init__.py
-	cp -r public/ leap/bitmask_www
 
-pydist: pydist-clean build py-pkg
-	python setup.py bdist_wheel
+#
+# distribution builds
+#
 
-pydist-dev: pydist-clean build py-pkg
-	pip install -e .
+dist-build: build-clean
+	npm install
+	npm run build:production
+	touch pydist/bitmask_js/__init__.py
+	cd pydist && python setup.py bdist_wheel
 
-pydist-install: pydist
-	pip install dist/*.whl
+dist-install: dist-build
+	pip install pydist/dist/*.whl
 
-pydist-clean:
-	rm -rf build dist
-	rm -rf leap/bitmask_www/*
+#
+# cleaning up
+#
 
-uninstall:
-	pip uninstall leap.bitmask_www
+build-clean:
+	rm -rf pydist/bitmask_js
+	rm -rf pydist/dist
+	rm -rf pydist/build
 
-all: clean build pydist
+clean: build-clean
+	rm -rf node_modules
 
-.PHONY: clean build install all
+uninstall:
+	pip uninstall bitmask_js
diff --git a/www/README.md b/www/README.md
index 17c5042..3f276c0 100644
--- a/www/README.md
+++ b/www/README.md
@@ -5,10 +5,9 @@ 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 "public"
-    bitmaskd          # launch backend
-    npm run open      # opens http://localhost:7070/ in a browser
+    npm run watch     # continually rebuilds source .js into "pydist"
 
 build for deployment:
 
@@ -16,10 +15,31 @@ build for deployment:
     npm run build:production
 
 After 'build', 'build:production', or 'watch' is run, everything needed for
-Bitmask JS is contained in the 'public' directory. No additional files are
-needed. Open the public/index.html file in a browser or web widget. 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)
+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
 -----------------------------------------------------------------
diff --git a/www/leap/bitmask_www/__init__.py b/www/leap/bitmask_www/__init__.py
deleted file mode 100644
index e69de29..0000000
--- a/www/leap/bitmask_www/__init__.py
+++ /dev/null
diff --git a/www/notes-python.txt b/www/notes-python.txt
deleted file mode 100644
index 90621f8..0000000
--- a/www/notes-python.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-leap.bitmask_www
------------------ 
-this package contains the already compiled static element for
-the web-ui of bitmask.
-
-If you want to develop for this UI, please checkout the bitmask-dev [0] repo and follow the instructions in the www/README.md file.
-
-[0] https://github.com/leapcode/bitmask-dev
diff --git a/www/notes.txt b/www/notes.txt
deleted file mode 100644
index 39d60ed..0000000
--- a/www/notes.txt
+++ /dev/null
@@ -1,173 +0,0 @@
-
-
-# BITMASK API
-
-https://0xacab.org/leap/leap_pycommon/blob/develop/src/leap/common/events/catalog.py
-
-
-
-
-https://github.com/rofrischmann/react-layout-components/blob/develop/modules/components/Box.jsx
-https://github.com/tastejs/todomvc/tree/master/examples
-
-ES6
-
-  https://github.com/DrkSephy/es6-cheatsheet
-  http://egorsmirnov.me/2015/06/14/react-and-es6-part2.html
-
-React component examples
-
-  https://github.com/Khan/perseus/tree/master/src/components
-  https://react.parts/web
-
-Props versus States
-
-  https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
-
-
-Localization
-
-  https://github.com/martinandert/counterpart
-  http://www.localeplanet.com/
-
-Flexbox
-
-  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
-
-Style
-
-  Flat/Low Saturation visual language: https://www.youtube.com/watch?v=jAhjPd4uNFY
-
-
-testing
------------------------------------------
-
-https://github.com/airbnb/enzyme
-
-
-webpack
-------------------------------------------
-
-https://github.com/webpack/docs/wiki/optimization
-
-https://github.com/rauschma/webpack-es6-demo
-
-https://github.com/shakacode/react-webpack-rails-tutorial
-
-https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack#27651720
-
-react ui components
---------------------------------------------
-
-material design
-
-  material-ui
-    http://www.material-ui.com
-  materialize
-    materialize looks to have the best css
-    https://react-materialize.github.io
-    http://materializecss.com
-  mui
-    https://www.muicss.com
-  react-material
-  react-polymer
-
-elemental
-  http://elemental-ui.com/
-  react-only toolkit
-
-foundation
-  used by pixelated user agent
-
-grommet.io
-
-topcoat
-  react-topui
-
-belle
-  "configurable react components with great UX"
-  use belle or bootstrap theme
-  nikgraf.github.com/belle
-
-react-islands
-  react implementation of yandex's islands design
-  github.com/narqo/react-islands
-
-Pivotol UI
-  react ui components styles for the Pivotal brand
-  http://styleguide.pivotal.io
-
-react
-------------------------
-
-react with es6 classes:
-
-https://facebook.github.io/react/docs/reusable-components.html#es6-classes
-
-
-redux
------------------
-
-http://redux.js.org/
-https://github.com/reactjs/redux
-  Redux is a predictable state container for JavaScript apps.
-  functional programming
-
-  oop with redux
-    https://github.com/newtoncodes/react-redux-oop
-    https://github.com/ddsol/redux-schema
-
-  boilerplates
-    https://github.com/markerikson/react-redux-links/blob/master/boilerplates-and-starter-kits.md
-    https://github.com/tsaiDavid/simple-redux-boilerplate
-
-ec6
-------------------
-
-  http://frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/
-  https://www.infoq.com/news/2015/03/react-es6-classes
-  https://github.com/google/traceur-compiler/wiki/Getting-Started
-  http://www.developerdrive.com/2011/08/top-10-must-follow-javascript-best-practices-2/
-
-
-react templates
----------------------------------
-
-https://wix.github.io/react-templates/
-
-
-Toolchain
--------------------
-
-processors
-  traceur
-  babel
-
-front-end package management
-  bower - https://bower.io/
-  component
-  npm + browserify
-    http://browserify.org/
-  and many others
-  https://github.com/wilmoore/frontend-packagers
-
-module builder
-  browserify
-  webpack
-
-testing framework
-  https://github.com/karma-runner/karma
-
-full frameworks
-------------------------
-
-http://aurelia.io/
-
-
-watcherify
-----------------------------
-
-
-#!/bin/bash
-watchify client/main.js -o public/bundle.js -dv &
-nodemon --exec npm run babel-node -- app.js
diff --git a/www/pydist/README.md b/www/pydist/README.md
new file mode 100644
index 0000000..6e2b11f
--- /dev/null
+++ b/www/pydist/README.md
@@ -0,0 +1,4 @@
+This directory holds the python package of the javascript app, called 'bitmask_js'.
+
+Why it it done this way? By creating a python package, it is easier for the
+javascript app to be distributed with the bitmask client.
diff --git a/www/setup.py b/www/pydist/setup.py
index d45dbbd..b5d3ffb 100644
--- a/www/setup.py
+++ b/www/pydist/setup.py
@@ -17,32 +17,34 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 """
-Setup file for leap.bitmask-www
+Setup file for bitmask_js
 """
 
 from setuptools import setup
-
 import datetime
 import time
 
+long_description = \
+'''bitmask_js
+----------------- 
+This package contains the already compiled javascript resources for the bitmask UI.
+
+If you want to develop for this UI, please checkout the bitmask-dev [0] repo and follow the instructions in the ui/README.md file.
 
-# TODO  add all the node steps in this setup too.
-# Right now it's expected that you run the node commands by hand
-# i.e., 'make build'
+[0] https://github.com/leapcode/bitmask-dev'''
 
-now = datetime.datetime.now()
+now       = datetime.datetime.now()
 timestamp = time.strftime('%Y%m%d%H%M', now.timetuple())
 
 setup(
-    name='leap.bitmask_www',
+    name='bitmask_js',
     version='0.1.%s' % timestamp,
-    description='Bitmask html/js UI',
-    long_description=open('notes-python.txt').read(),
+    description='Bitmask UI',
+    long_description=long_description,
     author='LEAP Encrypted Access Project',
     author_email='info@leap.se',
     url='http://leap.se',
-    namespace_packages=['leap'],
-    packages=['leap.bitmask_www'],
+    packages=['bitmask_js'],
     package_data={
         '': ['public/*',
              'public/css/*',
diff --git a/www/webpack.config.js b/www/webpack.config.js
index a29e575..c0f8d19 100644
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@@ -6,7 +6,7 @@ var config = {
   context: path.join(__dirname, 'app'),
   entry: ['babel-polyfill', './main.js'],
   output: {
-    path: path.join(__dirname, 'public'),
+    path: path.join(__dirname, 'pydist', 'bitmask_js', 'public'),
     filename: 'app.bundle.js'
   },
   resolve: {
@@ -41,7 +41,14 @@ var config = {
     // https://webpack.github.io/docs/code-splitting.html
     // new webpack.optimize.CommonChunkPlugin('common.js')
 
-    // https://github.com/kevlened/copy-webpack-plugin
+    //
+    // ASSETS
+    //
+    // If you make changes to the asset files, you will need to stop then rerun
+    // `npm run watch` for the changes to take effect.
+    //
+    // For more information: https://github.com/kevlened/copy-webpack-plugin
+    //
     new CopyWebpackPlugin([
       { from: 'css/*.css' },
       { from: 'img/*'},