[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.

9 files changed, 89 insertions, 225 deletions

diff --git a/www/MANIFEST.in b/www/MANIFEST.in
deleted file mode 100644
index 7d5f58b5..00000000
--- a/www/MANIFEST.in
+++ /dev/null
@@ -1 +0,0 @@
-include notes-python.txt
diff --git a/www/Makefile b/www/Makefile
index 18a7107d..d67a02b3 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 17c50424..3f276c00 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 e69de29b..00000000
--- 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 90621f8f..00000000
--- 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 39d60ed2..00000000
--- 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 00000000..6e2b11f6
--- /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 d45dbbd8..b5d3ffb1 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 a29e5753..c0f8d191 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/*'},