summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.rst23
-rw-r--r--ui/README.md2
-rw-r--r--ui/app/components/debug_panel.js4
-rw-r--r--ui/app/components/greeter_panel.js2
-rw-r--r--ui/app/components/main_panel/user_section.js2
-rw-r--r--ui/app/lib/bitmask.js12
-rw-r--r--ui/package.json2
7 files changed, 28 insertions, 19 deletions
diff --git a/README.rst b/README.rst
index 66184df9..126bedc5 100644
--- a/README.rst
+++ b/README.rst
@@ -143,7 +143,10 @@ The above instructions will install a python package that contains a pre-
bundled version of the javascript UI.
If you want to modify the javascript UI, then you need to be able to update the
-javascript bundle whenever a javascript or CSS source file changes.
+javascript bundle whenever a javascript or CSS source file changes. To support
+this, we build a python package of the javascript UI and install it in
+"development mode" so that changes to the contents of the package are reflected
+in bitmaskd immediately.
Prerequisites::
@@ -152,22 +155,27 @@ Prerequisites::
Next, run ``dev-install``::
cd ui
- make dev-install # install JS code as a python package in "develop" mode.
+ make dev-install
Now you should be able to run the user interface with debugging tools::
bitmaskd
- chromium-browser http://localhost:7070
+ cd ui
+ npm run ui
+
+This command is the same as running:
+
+ chromium-browser "http://localhost:7070/#$(cat ~/.config/leap/authtoken)"
Firefox does not work as well, because the UI is only tested with webkit-based
browsers.
-Chromium is not the best for this, however, because it uses a newer webkit.
-Instead, try qupzilla::
+Chromium is not the most ideal, however, because it uses a newer webkit than is
+available in Qt. Instead, try qupzilla::
sudo apt install qupzilla
bitmaskd
- qupzilla -ow http://localhost:7070
+ qupzilla -ow "http://localhost:7070/#$(cat ~/.config/leap/authtoken)"
If you make a change to any of the CSS or JS source files, you need to rebuild
the javascript bundle. You can do this continually as files change like so::
@@ -175,6 +183,9 @@ the javascript bundle. You can do this continually as files change like so::
cd ui
node run watch
+The new javascript bundle will be used when you refresh the page so long as
+``make dev-install`` was previously run.
+
For more information, see ``ui/README.md``.
License
diff --git a/ui/README.md b/ui/README.md
index 5e4f288d..08181615 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -30,7 +30,7 @@ python package and installed in the virtualenv:
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 ui # opens http://localhost:7070/#authtoken in a browser
npm run watch # rebuild JS whenever source file is changed.
In order to package for distribution:
diff --git a/ui/app/components/debug_panel.js b/ui/app/components/debug_panel.js
index 7515ba84..5ffd4051 100644
--- a/ui/app/components/debug_panel.js
+++ b/ui/app/components/debug_panel.js
@@ -10,11 +10,11 @@ class DebugPanel extends React.Component {
}
componentDidMount() {
- this.click(window.location.hash.replace('#', ''))
+ //this.click(window.location.hash.replace('#', ''))
}
click(panel_name) {
- window.location.hash = panel_name
+ //window.location.hash = panel_name
App.show(panel_name)
}
diff --git a/ui/app/components/greeter_panel.js b/ui/app/components/greeter_panel.js
index acaf0d57..31403573 100644
--- a/ui/app/components/greeter_panel.js
+++ b/ui/app/components/greeter_panel.js
@@ -31,7 +31,7 @@ export default class GreeterPanel extends React.Component {
<Area position="bottom" type="dark" className="greeter">
<Glyphicon glyph="user" />
&nbsp;
- <a href="#" onClick={this.newAccount.bind(this)}>Create a new account...</a>
+ <a href="javascript:void(0)" onClick={this.newAccount.bind(this)}>Create a new account...</a>
</Area>
</Center>
</div>
diff --git a/ui/app/components/main_panel/user_section.js b/ui/app/components/main_panel/user_section.js
index b792bb43..17e492d7 100644
--- a/ui/app/components/main_panel/user_section.js
+++ b/ui/app/components/main_panel/user_section.js
@@ -97,7 +97,7 @@ export default class UserSection extends React.Component {
/>
<br />
<Glyphicon glyph="user" />&nbsp;
- <a href="#" onClick={App.show.bind(App, 'wizard')}>Create a new account...</a>
+ <a href="javascript:void(0)" onClick={App.show.bind(App, 'wizard')}>Create a new account...</a>
</div>
)
return (
diff --git a/ui/app/lib/bitmask.js b/ui/app/lib/bitmask.js
index 94912acc..0a628ee3 100644
--- a/ui/app/lib/bitmask.js
+++ b/ui/app/lib/bitmask.js
@@ -44,21 +44,20 @@ var bitmask = function(){
if (window.location.protocol === "file:") {
api_url = 'http://localhost:7070/API/';
}
+ if (window.location.hash) {
+ api_token = window.location.hash.replace('#', '')
+ }
function call(command) {
var url = api_url + command.slice(0, 3).join('/');
var data = JSON.stringify(command.slice(3));
- var auth_header = null
- if (api_token) {
- auth_header = "Token " + btoa(last_uid + ":" + api_token)
- }
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('POST', url);
- if (auth_header) {
- req.setRequestHeader("Authorization", auth_header)
+ if (api_token) {
+ req.setRequestHeader("X-Bitmask-Auth", api_token)
}
req.onload = function() {
@@ -168,7 +167,6 @@ var bitmask = function(){
autoconf = false;
}
return call(['bonafide', 'user', 'authenticate', uid, password, autoconf]).then(function(response) {
- api_token = response.lcl_token
last_uuid = response.uuid
last_uid = uid
return response;
diff --git a/ui/package.json b/ui/package.json
index c6bdd88d..39d7f175 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,7 +27,7 @@
"zxcvbn": "^4.4.0"
},
"scripts": {
- "open": "gnome-open http://localhost:7070",
+ "ui": "chromium-browser \"http://localhost:7070/#$(cat ~/.config/leap/authtoken)\"",
"watch": "NODE_ENV=development webpack --watch",
"build": "NODE_ENV=development webpack",
"build:production": "NODE_ENV=production webpack"