diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | README.rst | 72 | ||||
| -rw-r--r-- | setup.py | 4 | ||||
| -rw-r--r-- | src/leap/bitmask/core/_web.py | 6 | ||||
| -rw-r--r-- | www/MANIFEST.in | 1 | ||||
| -rw-r--r-- | www/Makefile | 59 | ||||
| -rw-r--r-- | www/README.md | 34 | ||||
| -rw-r--r-- | www/leap/bitmask_www/__init__.py | 0 | ||||
| -rw-r--r-- | www/notes-python.txt | 8 | ||||
| -rw-r--r-- | www/notes.txt | 173 | ||||
| -rw-r--r-- | www/pydist/README.md | 4 | ||||
| -rw-r--r-- | www/pydist/setup.py (renamed from www/setup.py) | 24 | ||||
| -rw-r--r-- | www/webpack.config.js | 11 |
14 files changed, 143 insertions, 258 deletions
@@ -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 @@ -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]' @@ -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 @@ -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 ae223258..344e26eb 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 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/*'}, |