Merge remote-tracking branch 'upstream/lcs2-dev-0918'

public/app.js

@@ -1,3 +1,4 @@
+import page from '/lib/page.mjs';
 import { Lang } from '/lib/polyglot/language.js';
 import { Helpers } from '/helpers.js';
 import { IndexApp } from '/web/index-app.js';

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 
     <title>Live Coding Space 0.2</title>
-    <script type="text/javascript" src="/lib/page.js"></script>
+    <!-- <script type="text/javascript" src="/lib/page.js"></script> -->
     <script type="text/javascript" src="/lib/yamljs/dist/yaml.js"></script>
 
     <script type="text/javascript" src="/lib/compatibilitycheck.js"></script>
@@ -116,7 +116,7 @@
         const iconEl = document.querySelector('#hideui');
         iconEl.addEventListener('MDCIconToggle:change', (e) => {
 
-            let ui = document.querySelector('.mdc-toolbar');
+            let ui = document.querySelector('.mdc-top-app-bar');
             if (ui) {
 
                 let chkAttr = e.detail.isOn;

public/lib/page.js

@@ -408,16 +408,6 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
 
   
 
-  /**
-   * Module exports.
-   */
-
-  var page_js = page;
-  page.default = page;
-  page.Context = Context;
-  page.Route = Route;
-  page.sameOrigin = sameOrigin;
-
   /**
    * Short-cuts for global-object checks
    */
@@ -440,116 +430,67 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
   var isLocation = hasWindow && !!(window.history.location || window.location);
 
   /**
-   * Perform initial dispatch.
-   */
-
-  var dispatch = true;
-
-
-  /**
-   * Decode URL components (query string, pathname, hash).
-   * Accommodates both regular percent encoding and x-www-form-urlencoded format.
-   */
-  var decodeURLComponents = true;
-
-  /**
-   * Base path.
-   */
-
-  var base = '';
-
-  /**
-   * Strict path matching.
-   */
-
-  var strict = false;
-
-  /**
-   * Running flag.
-   */
-
-  var running;
-
-  /**
-   * HashBang option
-   */
-
-  var hashbang = false;
-
-  /**
-   * Previous context, for capturing
-   * page exit events.
-   */
-
-  var prevContext;
-
-  /**
-   * The window for which this `page` is running
+   * The page instance
+   * @api private
    */
-  var pageWindow;
+  function Page(options) {
+    // public things
+    this.callbacks = [];
+    this.exits = [];
+    this.current = '';
+    this.len = 0;
+
+    // private things
+    this._dispatch = true;
+    this._decodeURLComponents = true;
+    this._base = '';
+    this._strict = false;
+    this._running = false;
+    this._hashbang = false;
+
+    // bound functions
+    this._onclick = this._onclick.bind(this);
+    this._onpopstate = this._onpopstate.bind(this);
+
+    this.configure(options);
+  }
 
   /**
-   * Register `path` with callback `fn()`,
-   * or route `path`, or redirection,
-   * or `page.start()`.
+   * Configure the instance of page. This can be called multiple times.
    *
-   *   page(fn);
-   *   page('*', fn);
-   *   page('/user/:id', load, user);
-   *   page('/user/' + user.id, { some: 'thing' });
-   *   page('/user/' + user.id);
-   *   page('/from', '/to')
-   *   page();
-   *
-   * @param {string|!Function|!Object} path
-   * @param {Function=} fn
+   * @param {Object} options
    * @api public
    */
 
-  function page(path, fn) {
-    // <callback>
-    if ('function' === typeof path) {
-      return page('*', path);
+  Page.prototype.configure = function(options) {
+    var opts = options || {};
+
+    this._window = opts.window || (hasWindow && window);
+    this._dispatch = opts.dispatch !== false;
+    this._decodeURLComponents = opts.decodeURLComponents !== false;
+    this._popstate = opts.popstate !== false && hasWindow;
+    this._click = opts.click !== false && hasDocument;
+    this._hashbang = !!opts.hashbang;
+
+    var _window = this._window;
+    if(this._popstate) {
+      _window.addEventListener('popstate', this._onpopstate, false);
+    } else if(hasWindow) {
+      _window.removeEventListener('popstate', this._onpopstate, false);
     }
 
-    // route <path> to <callback ...>
-    if ('function' === typeof fn) {
-      var route = new Route(/** @type {string} */ (path));
-      for (var i = 1; i < arguments.length; ++i) {
-        page.callbacks.push(route.middleware(arguments[i]));
-      }
-      // show <path> with [state]
-    } else if ('string' === typeof path) {
-      page['string' === typeof fn ? 'redirect' : 'show'](path, fn);
-      // start [options]
-    } else {
-      page.start(path);
+    if (this._click) {
+      _window.document.addEventListener(clickEvent, this._onclick, false);
+    } else if(hasDocument) {
+      _window.document.removeEventListener(clickEvent, this._onclick, false);
     }
-  }
-
-  /**
-   * Callback functions.
-   */
-
-  page.callbacks = [];
-  page.exits = [];
 
-  /**
-   * Current path being processed
-   * @type {string}
-   */
-  page.current = '';
-
-  /**
-   * Number of pages navigated to.
-   * @type {number}
-   *
-   *     page.len == 0;
-   *     page('/login');
-   *     page.len == 1;
-   */
-
-  page.len = 0;
+    if(this._hashbang && hasWindow && !hasHistory) {
+      _window.addEventListener('hashchange', this._onpopstate, false);
+    } else if(hasWindow) {
+      _window.removeEventListener('hashchange', this._onpopstate, false);
+    }
+  };
 
   /**
    * Get or set basepath to `path`.
@@ -558,9 +499,22 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  page.base = function(path) {
-    if (0 === arguments.length) return base;
-    base = path;
+  Page.prototype.base = function(path) {
+    if (0 === arguments.length) return this._base;
+    this._base = path;
+  };
+
+  /**
+   * Gets the `base`, which depends on whether we are using History or
+   * hashbang routing.
+
+   * @api private
+   */
+  Page.prototype._getBase = function() {
+    var base = this._base;
+    if(!!base) return base;
+    var loc = hasWindow && this._window && this._window.location;
+    return (hasWindow && this._hashbang && loc && loc.protocol === 'file:') ? loc.pathname : base;
   };
 
   /**
@@ -570,11 +524,12 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  page.strict = function(enable) {
-    if (0 === arguments.length) return strict;
-    strict = enable;
+  Page.prototype.strict = function(enable) {
+    if (0 === arguments.length) return this._strict;
+    this._strict = enable;
   };
 
+
   /**
    * Bind with the given `options`.
    *
@@ -588,37 +543,27 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  page.start = function(options) {
-    options = options || {};
-    if (running) return;
-    running = true;
-    pageWindow = options.window || (hasWindow && window);
-    if (false === options.dispatch) dispatch = false;
-    if (false === options.decodeURLComponents) decodeURLComponents = false;
-    if (false !== options.popstate && hasWindow) pageWindow.addEventListener('popstate', onpopstate, false);
-    if (false !== options.click && hasDocument) {
-      pageWindow.document.addEventListener(clickEvent, onclick, false);
-    }
-    hashbang = !!options.hashbang;
-    if(hashbang && hasWindow && !hasHistory) {
-      pageWindow.addEventListener('hashchange', onpopstate, false);
-    }
-    if (!dispatch) return;
+  Page.prototype.start = function(options) {
+    this.configure(options);
+
+    if (!this._dispatch) return;
+    this._running = true;
 
     var url;
     if(isLocation) {
-      var loc = pageWindow.location;
+      var window = this._window;
+      var loc = window.location;
 
-      if(hashbang && ~loc.hash.indexOf('#!')) {
+      if(this._hashbang && ~loc.hash.indexOf('#!')) {
         url = loc.hash.substr(2) + loc.search;
-      } else if (hashbang) {
+      } else if (this._hashbang) {
         url = loc.search + loc.hash;
       } else {
         url = loc.pathname + loc.search + loc.hash;
       }
     }
 
-    page.replace(url, null, true, dispatch);
+    this.replace(url, null, true, this._dispatch);
   };
 
   /**
@@ -627,14 +572,16 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  page.stop = function() {
-    if (!running) return;
-    page.current = '';
-    page.len = 0;
-    running = false;
-    hasDocument && pageWindow.document.removeEventListener(clickEvent, onclick, false);
-    hasWindow && pageWindow.removeEventListener('popstate', onpopstate, false);
-    hasWindow && pageWindow.removeEventListener('hashchange', onpopstate, false);
+  Page.prototype.stop = function() {
+    if (!this._running) return;
+    this.current = '';
+    this.len = 0;
+    this._running = false;
+
+    var window = this._window;
+    hasDocument && window.document.removeEventListener(clickEvent, this._onclick, false);
+    hasWindow && window.removeEventListener('popstate', this._onpopstate, false);
+    hasWindow && window.removeEventListener('hashchange', this._onpopstate, false);
   };
 
   /**
@@ -648,12 +595,12 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  page.show = function(path, state, dispatch, push) {
-    var ctx = new Context(path, state),
-      prev = prevContext;
-    prevContext = ctx;
-    page.current = ctx.path;
-    if (false !== dispatch) page.dispatch(ctx, prev);
+  Page.prototype.show = function(path, state, dispatch, push) {
+    var ctx = new Context(path, state, this),
+      prev = this.prevContext;
+    this.prevContext = ctx;
+    this.current = ctx.path;
+    if (this._dispatch) this.dispatch(ctx, prev);
     if (false !== ctx.handled && false !== push) ctx.pushState();
     return ctx;
   };
@@ -667,24 +614,25 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  page.back = function(path, state) {
-    if (page.len > 0) {
+  Page.prototype.back = function(path, state) {
+    var page = this;
+    if (this.len > 0) {
+      var window = this._window;
       // this may need more testing to see if all browsers
       // wait for the next tick to go back in history
-      hasHistory && pageWindow.history.back();
-      page.len--;
+      hasHistory && window.history.back();
+      this.len--;
     } else if (path) {
       setTimeout(function() {
         page.show(path, state);
       });
-    }else{
+    } else {
       setTimeout(function() {
-        page.show(getBase(), state);
+        page.show(page._getBase(), state);
       });
     }
   };
 
-
   /**
    * Register route to redirect from one path to other
    * or just redirect to another route
@@ -693,12 +641,14 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @param {string=} to
    * @api public
    */
-  page.redirect = function(from, to) {
+  Page.prototype.redirect = function(from, to) {
+    var inst = this;
+
     // Define route from a path to another
     if ('string' === typeof from && 'string' === typeof to) {
-      page(from, function(e) {
+      page.call(this, from, function(e) {
         setTimeout(function() {
-          page.replace(/** @type {!string} */ (to));
+          inst.replace(/** @type {!string} */ (to));
         }, 0);
       });
     }
@@ -706,7 +656,7 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
     // Wait for the push state and replace it with another
     if ('string' === typeof from && 'undefined' === typeof to) {
       setTimeout(function() {
-        page.replace(from);
+        inst.replace(from);
       }, 0);
     }
   };
@@ -723,14 +673,14 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    */
 
 
-  page.replace = function(path, state, init, dispatch) {
-    var ctx = new Context(path, state),
-      prev = prevContext;
-    prevContext = ctx;
-    page.current = ctx.path;
+  Page.prototype.replace = function(path, state, init, dispatch) {
+    var ctx = new Context(path, state, this),
+      prev = this.prevContext;
+    this.prevContext = ctx;
+    this.current = ctx.path;
     ctx.init = init;
     ctx.save(); // save before dispatching, which may redirect
-    if (false !== dispatch) page.dispatch(ctx, prev);
+    if (false !== dispatch) this.dispatch(ctx, prev);
     return ctx;
   };
 
@@ -741,9 +691,8 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api private
    */
 
-  page.dispatch = function(ctx, prev) {
-    var i = 0,
-      j = 0;
+  Page.prototype.dispatch = function(ctx, prev) {
+    var i = 0, j = 0, page = this;
 
     function nextExit() {
       var fn = page.exits[j++];
@@ -758,7 +707,7 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
         ctx.handled = false;
         return;
       }
-      if (!fn) return unhandled(ctx);
+      if (!fn) return unhandled.call(page, ctx);
       fn(ctx, nextEnter);
     }
 
@@ -770,44 +719,190 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
   };
 
   /**
-   * Unhandled `ctx`. When it's not the initial
-   * popstate then redirect. If you wish to handle
-   * 404s on your own use `page('*', callback)`.
-   *
-   * @param {Context} ctx
+   * Register an exit route on `path` with
+   * callback `fn()`, which will be called
+   * on the previous context when a new
+   * page is visited.
+   */
+  Page.prototype.exit = function(path, fn) {
+    if (typeof path === 'function') {
+      return this.exit('*', path);
+    }
+
+    var route = new Route(path, null, this);
+    for (var i = 1; i < arguments.length; ++i) {
+      this.exits.push(route.middleware(arguments[i]));
+    }
+  };
+
+  /**
+   * Handle "click" events.
+   */
+
+  /* jshint +W054 */
+  Page.prototype._onclick = function(e) {
+    if (1 !== this._which(e)) return;
+
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+    if (e.defaultPrevented) return;
+
+    // ensure link
+    // use shadow dom when available if not, fall back to composedPath()
+    // for browsers that only have shady
+    var el = e.target;
+    var eventPath = e.path || (e.composedPath ? e.composedPath() : null);
+
+    if(eventPath) {
+      for (var i = 0; i < eventPath.length; i++) {
+        if (!eventPath[i].nodeName) continue;
+        if (eventPath[i].nodeName.toUpperCase() !== 'A') continue;
+        if (!eventPath[i].href) continue;
+
+        el = eventPath[i];
+        break;
+      }
+    }
+
+    // continue ensure link
+    // el.nodeName for svg links are 'a' instead of 'A'
+    while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode;
+    if (!el || 'A' !== el.nodeName.toUpperCase()) return;
+
+    // check if link is inside an svg
+    // in this case, both href and target are always inside an object
+    var svg = (typeof el.href === 'object') && el.href.constructor.name === 'SVGAnimatedString';
+
+    // Ignore if tag has
+    // 1. "download" attribute
+    // 2. rel="external" attribute
+    if (el.hasAttribute('download') || el.getAttribute('rel') === 'external') return;
+
+    // ensure non-hash for the same path
+    var link = el.getAttribute('href');
+    if(!this._hashbang && this._samePath(el) && (el.hash || '#' === link)) return;
+
+    // Check for mailto: in the href
+    if (link && link.indexOf('mailto:') > -1) return;
+
+    // check target
+    // svg target is an object and its desired value is in .baseVal property
+    if (svg ? el.target.baseVal : el.target) return;
+
+    // x-origin
+    // note: svg links that are not relative don't call click events (and skip page.js)
+    // consequently, all svg links tested inside page.js are relative and in the same origin
+    if (!svg && !this.sameOrigin(el.href)) return;
+
+    // rebuild path
+    // There aren't .pathname and .search properties in svg links, so we use href
+    // Also, svg href is an object and its desired value is in .baseVal property
+    var path = svg ? el.href.baseVal : (el.pathname + el.search + (el.hash || ''));
+
+    path = path[0] !== '/' ? '/' + path : path;
+
+    // strip leading "/[drive letter]:" on NW.js on Windows
+    if (hasProcess && path.match(/^\/[a-zA-Z]:\//)) {
+      path = path.replace(/^\/[a-zA-Z]:\//, '/');
+    }
+
+    // same page
+    var orig = path;
+    var pageBase = this._getBase();
+
+    if (path.indexOf(pageBase) === 0) {
+      path = path.substr(pageBase.length);
+    }
+
+    if (this._hashbang) path = path.replace('#!', '');
+
+    if (pageBase && orig === path) return;
+
+    e.preventDefault();
+    this.show(orig);
+  };
+
+  /**
+   * Handle "populate" events.
    * @api private
    */
-  function unhandled(ctx) {
-    if (ctx.handled) return;
-    var current;
 
-    if (hashbang) {
-      current = isLocation && getBase() + pageWindow.location.hash.replace('#!', '');
+  Page.prototype._onpopstate = (function () {
+    var loaded = false;
+    if ( ! hasWindow ) {
+      return;
+    }
+    if (hasDocument && document.readyState === 'complete') {
+      loaded = true;
     } else {
-      current = isLocation && pageWindow.location.pathname + pageWindow.location.search;
+      window.addEventListener('load', function() {
+        setTimeout(function() {
+          loaded = true;
+        }, 0);
+      });
     }
+    return function onpopstate(e) {
+      if (!loaded) return;
+      var page = this;
+      if (e.state) {
+        var path = e.state.path;
+        page.replace(path, e.state);
+      } else if (isLocation) {
+        var loc = page._window.location;
+        page.show(loc.pathname + loc.search + loc.hash, undefined, undefined, false);
+      }
+    };
+  })();
 
-    if (current === ctx.canonicalPath) return;
-    page.stop();
-    ctx.handled = false;
-    isLocation && (pageWindow.location.href = ctx.canonicalPath);
-  }
+  /**
+   * Event button.
+   */
+  Page.prototype._which = function(e) {
+    e = e || (hasWindow && this._window.event);
+    return null == e.which ? e.button : e.which;
+  };
 
   /**
-   * Register an exit route on `path` with
-   * callback `fn()`, which will be called
-   * on the previous context when a new
-   * page is visited.
+   * Convert to a URL object
+   * @api private
    */
-  page.exit = function(path, fn) {
-    if (typeof path === 'function') {
-      return page.exit('*', path);
+  Page.prototype._toURL = function(href) {
+    var window = this._window;
+    if(typeof URL === 'function' && isLocation) {
+      return new URL(href, window.location.toString());
+    } else if (hasDocument) {
+      var anc = window.document.createElement('a');
+      anc.href = href;
+      return anc;
     }
+  };
 
-    var route = new Route(path);
-    for (var i = 1; i < arguments.length; ++i) {
-      page.exits.push(route.middleware(arguments[i]));
-    }
+  /**
+   * Check if `href` is the same origin.
+   * @param {string} href
+   * @api public
+   */
+
+  Page.prototype.sameOrigin = function(href) {
+    if(!href || !isLocation) return false;
+
+    var url = this._toURL(href);
+    var window = this._window;
+
+    var loc = window.location;
+    return loc.protocol === url.protocol &&
+      loc.hostname === url.hostname &&
+      loc.port === url.port;
+  };
+
+  /**
+   * @api private
+   */
+  Page.prototype._samePath = function(url) {
+    if(!isLocation) return false;
+    var window = this._window;
+    var loc = window.location;
+    return url.pathname === loc.pathname &&
+      url.search === loc.search;
   };
 
   /**
@@ -816,10 +911,129 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * and regular percent-encoded form.
    *
    * @param {string} val - URL component to decode
+   * @api private
    */
-  function decodeURLEncodedURIComponent(val) {
+  Page.prototype._decodeURLEncodedURIComponent = function(val) {
     if (typeof val !== 'string') { return val; }
-    return decodeURLComponents ? decodeURIComponent(val.replace(/\+/g, ' ')) : val;
+    return this._decodeURLComponents ? decodeURIComponent(val.replace(/\+/g, ' ')) : val;
+  };
+
+  /**
+   * Create a new `page` instance and function
+   */
+  function createPage(options) {
+    var pageInstance = new Page();
+
+    function pageFn(/* args */) {
+      return page.apply(pageInstance, arguments);
+    }
+
+    // Copy all of the things over. In 2.0 maybe we use setPrototypeOf
+    pageFn.callbacks = pageInstance.callbacks;
+    pageFn.exits = pageInstance.exits;
+    pageFn.base = pageInstance.base.bind(pageInstance);
+    pageFn.strict = pageInstance.strict.bind(pageInstance);
+    pageFn.start = pageInstance.start.bind(pageInstance);
+    pageFn.stop = pageInstance.stop.bind(pageInstance);
+    pageFn.show = pageInstance.show.bind(pageInstance);
+    pageFn.back = pageInstance.back.bind(pageInstance);
+    pageFn.redirect = pageInstance.redirect.bind(pageInstance);
+    pageFn.replace = pageInstance.replace.bind(pageInstance);
+    pageFn.dispatch = pageInstance.dispatch.bind(pageInstance);
+    pageFn.exit = pageInstance.exit.bind(pageInstance);
+    pageFn.configure = pageInstance.configure.bind(pageInstance);
+    pageFn.sameOrigin = pageInstance.sameOrigin.bind(pageInstance);
+
+    pageFn.create = createPage;
+
+    Object.defineProperty(pageFn, 'len', {
+      get: function(){
+        return pageInstance.len;
+      },
+      set: function(val) {
+        pageInstance.len = val;
+      }
+    });
+
+    Object.defineProperty(pageFn, 'current', {
+      get: function(){
+        return pageInstance.current;
+      },
+      set: function(val) {
+        pageInstance.current = val;
+      }
+    });
+
+    // In 2.0 these can be named exports
+    pageFn.Context = Context;
+    pageFn.Route = Route;
+
+    return pageFn;
+  }
+
+  /**
+   * Register `path` with callback `fn()`,
+   * or route `path`, or redirection,
+   * or `page.start()`.
+   *
+   *   page(fn);
+   *   page('*', fn);
+   *   page('/user/:id', load, user);
+   *   page('/user/' + user.id, { some: 'thing' });
+   *   page('/user/' + user.id);
+   *   page('/from', '/to')
+   *   page();
+   *
+   * @param {string|!Function|!Object} path
+   * @param {Function=} fn
+   * @api public
+   */
+
+  function page(path, fn) {
+    // <callback>
+    if ('function' === typeof path) {
+      return page.call(this, '*', path);
+    }
+
+    // route <path> to <callback ...>
+    if ('function' === typeof fn) {
+      var route = new Route(/** @type {string} */ (path), null, this);
+      for (var i = 1; i < arguments.length; ++i) {
+        this.callbacks.push(route.middleware(arguments[i]));
+      }
+      // show <path> with [state]
+    } else if ('string' === typeof path) {
+      this['string' === typeof fn ? 'redirect' : 'show'](path, fn);
+      // start [options]
+    } else {
+      this.start(path);
+    }
+  }
+
+  /**
+   * Unhandled `ctx`. When it's not the initial
+   * popstate then redirect. If you wish to handle
+   * 404s on your own use `page('*', callback)`.
+   *
+   * @param {Context} ctx
+   * @api private
+   */
+  function unhandled(ctx) {
+    if (ctx.handled) return;
+    var current;
+    var page = this;
+    var window = page._window;
+
+    if (page._hashbang) {
+      current = isLocation && this._getBase() + window.location.hash.replace('#!', '');
+    } else {
+      current = isLocation && window.location.pathname + window.location.search;
+    }
+
+    if (current === ctx.canonicalPath) return;
+    page.stop();
+    ctx.handled = false;
+    isLocation && (window.location.href = ctx.canonicalPath);
   }
 
   /**
@@ -832,8 +1046,12 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api public
    */
 
-  function Context(path, state) {
-    var pageBase = getBase();
+  function Context(path, state, pageInstance) {
+    var _page = this.page = pageInstance || page;
+    var window = _page._window;
+    var hashbang = _page.hashbang;
+
+    var pageBase = _page._getBase();
     if ('/' === path[0] && 0 !== path.indexOf(pageBase)) path = pageBase + (hashbang ? '#!' : '') + path;
     var i = path.indexOf('?');
 
@@ -841,11 +1059,11 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
     this.path = path.replace(pageBase, '') || '/';
     if (hashbang) this.path = this.path.replace('#!', '') || '/';
 
-    this.title = (hasDocument && pageWindow.document.title);
+    this.title = (hasDocument && window.document.title);
     this.state = state || {};
     this.state.path = path;
-    this.querystring = ~i ? decodeURLEncodedURIComponent(path.slice(i + 1)) : '';
-    this.pathname = decodeURLEncodedURIComponent(~i ? path.slice(0, i) : path);
+    this.querystring = ~i ? _page._decodeURLEncodedURIComponent(path.slice(i + 1)) : '';
+    this.pathname = _page._decodeURLEncodedURIComponent(~i ? path.slice(0, i) : path);
     this.params = {};
 
     // fragment
@@ -854,17 +1072,11 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
       if (!~this.path.indexOf('#')) return;
       var parts = this.path.split('#');
       this.path = this.pathname = parts[0];
-      this.hash = decodeURLEncodedURIComponent(parts[1]) || '';
+      this.hash = _page._decodeURLEncodedURIComponent(parts[1]) || '';
       this.querystring = this.querystring.split('#')[0];
     }
   }
 
-  /**
-   * Expose `Context`.
-   */
-
-  page.Context = Context;
-
   /**
    * Push state.
    *
@@ -872,9 +1084,13 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    */
 
   Context.prototype.pushState = function() {
+    var page = this.page;
+    var window = page._window;
+    var hashbang = page._hashbang;
+
     page.len++;
     if (hasHistory) {
-        pageWindow.history.pushState(this.state, this.title,
+        window.history.pushState(this.state, this.title,
           hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
     }
   };
@@ -886,9 +1102,10 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    */
 
   Context.prototype.save = function() {
-    if (hasHistory && pageWindow.location.protocol !== 'file:') {
-        pageWindow.history.replaceState(this.state, this.title,
-          hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
+    var page = this.page;
+    if (hasHistory && page._window.location.protocol !== 'file:') {
+        page._window.history.replaceState(this.state, this.title,
+          page._hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
     }
   };
 
@@ -907,22 +1124,15 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
    * @api private
    */
 
-  function Route(path, options) {
-    options = options || {};
-    options.strict = options.strict || strict;
+  function Route(path, options, page) {
+    var _page = this.page = page || globalPage;
+    var opts = options || {};
+    opts.strict = opts.strict || page._strict;
     this.path = (path === '*') ? '(.*)' : path;
     this.method = 'GET';
-    this.regexp = pathToRegexp_1(this.path,
-      this.keys = [],
-      options);
+    this.regexp = pathToRegexp_1(this.path, this.keys = [], opts);
   }
 
-  /**
-   * Expose `Route`.
-   */
-
-  page.Route = Route;
-
   /**
    * Return route middleware with
    * the given callback `fn()`.
@@ -960,7 +1170,7 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
 
     for (var i = 1, len = m.length; i < len; ++i) {
       var key = keys[i - 1];
-      var val = decodeURLEncodedURIComponent(m[i]);
+      var val = this.page._decodeURLEncodedURIComponent(m[i]);
       if (val !== undefined || !(hasOwnProperty.call(params, key.name))) {
         params[key.name] = val;
       }
@@ -971,172 +1181,12 @@ pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
 
 
   /**
-   * Handle "populate" events.
-   */
-
-  var onpopstate = (function () {
-    var loaded = false;
-    if ( ! hasWindow ) {
-      return;
-    }
-    if (hasDocument && document.readyState === 'complete') {
-      loaded = true;
-    } else {
-      window.addEventListener('load', function() {
-        setTimeout(function() {
-          loaded = true;
-        }, 0);
-      });
-    }
-    return function onpopstate(e) {
-      if (!loaded) return;
-      if (e.state) {
-        var path = e.state.path;
-        page.replace(path, e.state);
-      } else if (isLocation) {
-        var loc = pageWindow.location;
-        page.show(loc.pathname + loc.hash, undefined, undefined, false);
-      }
-    };
-  })();
-  /**
-   * Handle "click" events.
-   */
-
-  /* jshint +W054 */
-  function onclick(e) {
-    if (1 !== which(e)) return;
-
-    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
-    if (e.defaultPrevented) return;
-
-    // ensure link
-    // use shadow dom when available if not, fall back to composedPath() for browsers that only have shady
-    var el = e.target;
-    var eventPath = e.path || (e.composedPath ? e.composedPath() : null);
-
-    if(eventPath) {
-      for (var i = 0; i < eventPath.length; i++) {
-        if (!eventPath[i].nodeName) continue;
-        if (eventPath[i].nodeName.toUpperCase() !== 'A') continue;
-        if (!eventPath[i].href) continue;
-
-        el = eventPath[i];
-        break;
-      }
-    }
-    // continue ensure link
-    // el.nodeName for svg links are 'a' instead of 'A'
-    while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode;
-    if (!el || 'A' !== el.nodeName.toUpperCase()) return;
-
-    // check if link is inside an svg
-    // in this case, both href and target are always inside an object
-    var svg = (typeof el.href === 'object') && el.href.constructor.name === 'SVGAnimatedString';
-
-    // Ignore if tag has
-    // 1. "download" attribute
-    // 2. rel="external" attribute
-    if (el.hasAttribute('download') || el.getAttribute('rel') === 'external') return;
-
-    // ensure non-hash for the same path
-    var link = el.getAttribute('href');
-    if(!hashbang && samePath(el) && (el.hash || '#' === link)) return;
-
-    // Check for mailto: in the href
-    if (link && link.indexOf('mailto:') > -1) return;
-
-    // check target
-    // svg target is an object and its desired value is in .baseVal property
-    if (svg ? el.target.baseVal : el.target) return;
-
-    // x-origin
-    // note: svg links that are not relative don't call click events (and skip page.js)
-    // consequently, all svg links tested inside page.js are relative and in the same origin
-    if (!svg && !sameOrigin(el.href)) return;
-
-    // rebuild path
-    // There aren't .pathname and .search properties in svg links, so we use href
-    // Also, svg href is an object and its desired value is in .baseVal property
-    var path = svg ? el.href.baseVal : (el.pathname + el.search + (el.hash || ''));
-
-    path = path[0] !== '/' ? '/' + path : path;
-
-    // strip leading "/[drive letter]:" on NW.js on Windows
-    if (hasProcess && path.match(/^\/[a-zA-Z]:\//)) {
-      path = path.replace(/^\/[a-zA-Z]:\//, '/');
-    }
-
-    // same page
-    var orig = path;
-    var pageBase = getBase();
-
-    if (path.indexOf(pageBase) === 0) {
-      path = path.substr(base.length);
-    }
-
-    if (hashbang) path = path.replace('#!', '');
-
-    if (pageBase && orig === path) return;
-
-    e.preventDefault();
-    page.show(orig);
-  }
-
-  /**
-   * Event button.
-   */
-
-  function which(e) {
-    e = e || (hasWindow && window.event);
-    return null == e.which ? e.button : e.which;
-  }
-
-  /**
-   * Convert to a URL object
-   */
-  function toURL(href) {
-    if(typeof URL === 'function' && isLocation) {
-      return new URL(href, location.toString());
-    } else if (hasDocument) {
-      var anc = document.createElement('a');
-      anc.href = href;
-      return anc;
-    }
-  }
-
-  /**
-   * Check if `href` is the same origin.
-   */
-
-  function sameOrigin(href) {
-    if(!href || !isLocation) return false;
-    var url = toURL(href);
-
-    var loc = pageWindow.location;
-    return loc.protocol === url.protocol &&
-      loc.hostname === url.hostname &&
-      loc.port === url.port;
-  }
-
-  function samePath(url) {
-    if(!isLocation) return false;
-    var loc = pageWindow.location;
-    return url.pathname === loc.pathname &&
-      url.search === loc.search;
-  }
-
-  /**
-   * Gets the `base`, which depends on whether we are using History or
-   * hashbang routing.
+   * Module exports.
    */
-  function getBase() {
-    if(!!base) return base;
-    var loc = hasWindow && pageWindow && pageWindow.location;
-    return (hasWindow && hashbang && loc && loc.protocol === 'file:') ? loc.pathname : base;
-  }
 
-  page.sameOrigin = sameOrigin;
+  var globalPage = createPage();
+  var page_js = globalPage;
+  page.default = globalPage;
 
 return page_js;
 

public/lib/page.mjs

@@ -0,0 +1,1185 @@
+var isarray = Array.isArray || function (arr) {
+  return Object.prototype.toString.call(arr) == '[object Array]';
+};
+
+/**
+ * Expose `pathToRegexp`.
+ */
+var pathToRegexp_1 = pathToRegexp;
+var parse_1 = parse;
+var compile_1 = compile;
+var tokensToFunction_1 = tokensToFunction;
+var tokensToRegExp_1 = tokensToRegExp;
+
+/**
+ * The main path matching regexp utility.
+ *
+ * @type {RegExp}
+ */
+var PATH_REGEXP = new RegExp([
+  // Match escaped characters that would otherwise appear in future matches.
+  // This allows the user to escape special characters that won't transform.
+  '(\\\\.)',
+  // Match Express-style parameters and un-named parameters with a prefix
+  // and optional suffixes. Matches appear as:
+  //
+  // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?", undefined]
+  // "/route(\\d+)"  => [undefined, undefined, undefined, "\d+", undefined, undefined]
+  // "/*"            => ["/", undefined, undefined, undefined, undefined, "*"]
+  '([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^()])+)\\))?|\\(((?:\\\\.|[^()])+)\\))([+*?])?|(\\*))'
+].join('|'), 'g');
+
+/**
+ * Parse a string for the raw tokens.
+ *
+ * @param  {String} str
+ * @return {Array}
+ */
+function parse (str) {
+  var tokens = [];
+  var key = 0;
+  var index = 0;
+  var path = '';
+  var res;
+
+  while ((res = PATH_REGEXP.exec(str)) != null) {
+    var m = res[0];
+    var escaped = res[1];
+    var offset = res.index;
+    path += str.slice(index, offset);
+    index = offset + m.length;
+
+    // Ignore already escaped sequences.
+    if (escaped) {
+      path += escaped[1];
+      continue
+    }
+
+    // Push the current path onto the tokens.
+    if (path) {
+      tokens.push(path);
+      path = '';
+    }
+
+    var prefix = res[2];
+    var name = res[3];
+    var capture = res[4];
+    var group = res[5];
+    var suffix = res[6];
+    var asterisk = res[7];
+
+    var repeat = suffix === '+' || suffix === '*';
+    var optional = suffix === '?' || suffix === '*';
+    var delimiter = prefix || '/';
+    var pattern = capture || group || (asterisk ? '.*' : '[^' + delimiter + ']+?');
+
+    tokens.push({
+      name: name || key++,
+      prefix: prefix || '',
+      delimiter: delimiter,
+      optional: optional,
+      repeat: repeat,
+      pattern: escapeGroup(pattern)
+    });
+  }
+
+  // Match any characters still remaining.
+  if (index < str.length) {
+    path += str.substr(index);
+  }
+
+  // If the path exists, push it onto the end.
+  if (path) {
+    tokens.push(path);
+  }
+
+  return tokens
+}
+
+/**
+ * Compile a string to a template function for the path.
+ *
+ * @param  {String}   str
+ * @return {Function}
+ */
+function compile (str) {
+  return tokensToFunction(parse(str))
+}
+
+/**
+ * Expose a method for transforming tokens into the path function.
+ */
+function tokensToFunction (tokens) {
+  // Compile all the tokens into regexps.
+  var matches = new Array(tokens.length);
+
+  // Compile all the patterns before compilation.
+  for (var i = 0; i < tokens.length; i++) {
+    if (typeof tokens[i] === 'object') {
+      matches[i] = new RegExp('^' + tokens[i].pattern + '$');
+    }
+  }
+
+  return function (obj) {
+    var path = '';
+    var data = obj || {};
+
+    for (var i = 0; i < tokens.length; i++) {
+      var token = tokens[i];
+
+      if (typeof token === 'string') {
+        path += token;
+
+        continue
+      }
+
+      var value = data[token.name];
+      var segment;
+
+      if (value == null) {
+        if (token.optional) {
+          continue
+        } else {
+          throw new TypeError('Expected "' + token.name + '" to be defined')
+        }
+      }
+
+      if (isarray(value)) {
+        if (!token.repeat) {
+          throw new TypeError('Expected "' + token.name + '" to not repeat, but received "' + value + '"')
+        }
+
+        if (value.length === 0) {
+          if (token.optional) {
+            continue
+          } else {
+            throw new TypeError('Expected "' + token.name + '" to not be empty')
+          }
+        }
+
+        for (var j = 0; j < value.length; j++) {
+          segment = encodeURIComponent(value[j]);
+
+          if (!matches[i].test(segment)) {
+            throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"')
+          }
+
+          path += (j === 0 ? token.prefix : token.delimiter) + segment;
+        }
+
+        continue
+      }
+
+      segment = encodeURIComponent(value);
+
+      if (!matches[i].test(segment)) {
+        throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"')
+      }
+
+      path += token.prefix + segment;
+    }
+
+    return path
+  }
+}
+
+/**
+ * Escape a regular expression string.
+ *
+ * @param  {String} str
+ * @return {String}
+ */
+function escapeString (str) {
+  return str.replace(/([.+*?=^!:${}()[\]|\/])/g, '\\$1')
+}
+
+/**
+ * Escape the capturing group by escaping special characters and meaning.
+ *
+ * @param  {String} group
+ * @return {String}
+ */
+function escapeGroup (group) {
+  return group.replace(/([=!:$\/()])/g, '\\$1')
+}
+
+/**
+ * Attach the keys as a property of the regexp.
+ *
+ * @param  {RegExp} re
+ * @param  {Array}  keys
+ * @return {RegExp}
+ */
+function attachKeys (re, keys) {
+  re.keys = keys;
+  return re
+}
+
+/**
+ * Get the flags for a regexp from the options.
+ *
+ * @param  {Object} options
+ * @return {String}
+ */
+function flags (options) {
+  return options.sensitive ? '' : 'i'
+}
+
+/**
+ * Pull out keys from a regexp.
+ *
+ * @param  {RegExp} path
+ * @param  {Array}  keys
+ * @return {RegExp}
+ */
+function regexpToRegexp (path, keys) {
+  // Use a negative lookahead to match only capturing groups.
+  var groups = path.source.match(/\((?!\?)/g);
+
+  if (groups) {
+    for (var i = 0; i < groups.length; i++) {
+      keys.push({
+        name: i,
+        prefix: null,
+        delimiter: null,
+        optional: false,
+        repeat: false,
+        pattern: null
+      });
+    }
+  }
+
+  return attachKeys(path, keys)
+}
+
+/**
+ * Transform an array into a regexp.
+ *
+ * @param  {Array}  path
+ * @param  {Array}  keys
+ * @param  {Object} options
+ * @return {RegExp}
+ */
+function arrayToRegexp (path, keys, options) {
+  var parts = [];
+
+  for (var i = 0; i < path.length; i++) {
+    parts.push(pathToRegexp(path[i], keys, options).source);
+  }
+
+  var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options));
+
+  return attachKeys(regexp, keys)
+}
+
+/**
+ * Create a path regexp from string input.
+ *
+ * @param  {String} path
+ * @param  {Array}  keys
+ * @param  {Object} options
+ * @return {RegExp}
+ */
+function stringToRegexp (path, keys, options) {
+  var tokens = parse(path);
+  var re = tokensToRegExp(tokens, options);
+
+  // Attach keys back to the regexp.
+  for (var i = 0; i < tokens.length; i++) {
+    if (typeof tokens[i] !== 'string') {
+      keys.push(tokens[i]);
+    }
+  }
+
+  return attachKeys(re, keys)
+}
+
+/**
+ * Expose a function for taking tokens and returning a RegExp.
+ *
+ * @param  {Array}  tokens
+ * @param  {Array}  keys
+ * @param  {Object} options
+ * @return {RegExp}
+ */
+function tokensToRegExp (tokens, options) {
+  options = options || {};
+
+  var strict = options.strict;
+  var end = options.end !== false;
+  var route = '';
+  var lastToken = tokens[tokens.length - 1];
+  var endsWithSlash = typeof lastToken === 'string' && /\/$/.test(lastToken);
+
+  // Iterate over the tokens and create our regexp string.
+  for (var i = 0; i < tokens.length; i++) {
+    var token = tokens[i];
+
+    if (typeof token === 'string') {
+      route += escapeString(token);
+    } else {
+      var prefix = escapeString(token.prefix);
+      var capture = token.pattern;
+
+      if (token.repeat) {
+        capture += '(?:' + prefix + capture + ')*';
+      }
+
+      if (token.optional) {
+        if (prefix) {
+          capture = '(?:' + prefix + '(' + capture + '))?';
+        } else {
+          capture = '(' + capture + ')?';
+        }
+      } else {
+        capture = prefix + '(' + capture + ')';
+      }
+
+      route += capture;
+    }
+  }
+
+  // In non-strict mode we allow a slash at the end of match. If the path to
+  // match already ends with a slash, we remove it for consistency. The slash
+  // is valid at the end of a path match, not in the middle. This is important
+  // in non-ending mode, where "/test/" shouldn't match "/test//route".
+  if (!strict) {
+    route = (endsWithSlash ? route.slice(0, -2) : route) + '(?:\\/(?=$))?';
+  }
+
+  if (end) {
+    route += '$';
+  } else {
+    // In non-ending mode, we need the capturing groups to match as much as
+    // possible by using a positive lookahead to the end or next path segment.
+    route += strict && endsWithSlash ? '' : '(?=\\/|$)';
+  }
+
+  return new RegExp('^' + route, flags(options))
+}
+
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ *
+ * @param  {(String|RegExp|Array)} path
+ * @param  {Array}                 [keys]
+ * @param  {Object}                [options]
+ * @return {RegExp}
+ */
+function pathToRegexp (path, keys, options) {
+  keys = keys || [];
+
+  if (!isarray(keys)) {
+    options = keys;
+    keys = [];
+  } else if (!options) {
+    options = {};
+  }
+
+  if (path instanceof RegExp) {
+    return regexpToRegexp(path, keys, options)
+  }
+
+  if (isarray(path)) {
+    return arrayToRegexp(path, keys, options)
+  }
+
+  return stringToRegexp(path, keys, options)
+}
+
+pathToRegexp_1.parse = parse_1;
+pathToRegexp_1.compile = compile_1;
+pathToRegexp_1.tokensToFunction = tokensToFunction_1;
+pathToRegexp_1.tokensToRegExp = tokensToRegExp_1;
+
+/**
+   * Module dependencies.
+   */
+
+  
+
+  /**
+   * Short-cuts for global-object checks
+   */
+
+  var hasDocument = ('undefined' !== typeof document);
+  var hasWindow = ('undefined' !== typeof window);
+  var hasHistory = ('undefined' !== typeof history);
+  var hasProcess = typeof process !== 'undefined';
+
+  /**
+   * Detect click event
+   */
+  var clickEvent = hasDocument && document.ontouchstart ? 'touchstart' : 'click';
+
+  /**
+   * To work properly with the URL
+   * history.location generated polyfill in https://github.com/devote/HTML5-History-API
+   */
+
+  var isLocation = hasWindow && !!(window.history.location || window.location);
+
+  /**
+   * The page instance
+   * @api private
+   */
+  function Page(options) {
+    // public things
+    this.callbacks = [];
+    this.exits = [];
+    this.current = '';
+    this.len = 0;
+
+    // private things
+    this._dispatch = true;
+    this._decodeURLComponents = true;
+    this._base = '';
+    this._strict = false;
+    this._running = false;
+    this._hashbang = false;
+
+    // bound functions
+    this._onclick = this._onclick.bind(this);
+    this._onpopstate = this._onpopstate.bind(this);
+
+    this.configure(options);
+  }
+
+  /**
+   * Configure the instance of page. This can be called multiple times.
+   *
+   * @param {Object} options
+   * @api public
+   */
+
+  Page.prototype.configure = function(options) {
+    var opts = options || {};
+
+    this._window = opts.window || (hasWindow && window);
+    this._dispatch = opts.dispatch !== false;
+    this._decodeURLComponents = opts.decodeURLComponents !== false;
+    this._popstate = opts.popstate !== false && hasWindow;
+    this._click = opts.click !== false && hasDocument;
+    this._hashbang = !!opts.hashbang;
+
+    var _window = this._window;
+    if(this._popstate) {
+      _window.addEventListener('popstate', this._onpopstate, false);
+    } else if(hasWindow) {
+      _window.removeEventListener('popstate', this._onpopstate, false);
+    }
+
+    if (this._click) {
+      _window.document.addEventListener(clickEvent, this._onclick, false);
+    } else if(hasDocument) {
+      _window.document.removeEventListener(clickEvent, this._onclick, false);
+    }
+
+    if(this._hashbang && hasWindow && !hasHistory) {
+      _window.addEventListener('hashchange', this._onpopstate, false);
+    } else if(hasWindow) {
+      _window.removeEventListener('hashchange', this._onpopstate, false);
+    }
+  };
+
+  /**
+   * Get or set basepath to `path`.
+   *
+   * @param {string} path
+   * @api public
+   */
+
+  Page.prototype.base = function(path) {
+    if (0 === arguments.length) return this._base;
+    this._base = path;
+  };
+
+  /**
+   * Gets the `base`, which depends on whether we are using History or
+   * hashbang routing.
+
+   * @api private
+   */
+  Page.prototype._getBase = function() {
+    var base = this._base;
+    if(!!base) return base;
+    var loc = hasWindow && this._window && this._window.location;
+    return (hasWindow && this._hashbang && loc && loc.protocol === 'file:') ? loc.pathname : base;
+  };
+
+  /**
+   * Get or set strict path matching to `enable`
+   *
+   * @param {boolean} enable
+   * @api public
+   */
+
+  Page.prototype.strict = function(enable) {
+    if (0 === arguments.length) return this._strict;
+    this._strict = enable;
+  };
+
+
+  /**
+   * Bind with the given `options`.
+   *
+   * Options:
+   *
+   *    - `click` bind to click events [true]
+   *    - `popstate` bind to popstate [true]
+   *    - `dispatch` perform initial dispatch [true]
+   *
+   * @param {Object} options
+   * @api public
+   */
+
+  Page.prototype.start = function(options) {
+    this.configure(options);
+
+    if (!this._dispatch) return;
+    this._running = true;
+
+    var url;
+    if(isLocation) {
+      var window = this._window;
+      var loc = window.location;
+
+      if(this._hashbang && ~loc.hash.indexOf('#!')) {
+        url = loc.hash.substr(2) + loc.search;
+      } else if (this._hashbang) {
+        url = loc.search + loc.hash;
+      } else {
+        url = loc.pathname + loc.search + loc.hash;
+      }
+    }
+
+    this.replace(url, null, true, this._dispatch);
+  };
+
+  /**
+   * Unbind click and popstate event handlers.
+   *
+   * @api public
+   */
+
+  Page.prototype.stop = function() {
+    if (!this._running) return;
+    this.current = '';
+    this.len = 0;
+    this._running = false;
+
+    var window = this._window;
+    hasDocument && window.document.removeEventListener(clickEvent, this._onclick, false);
+    hasWindow && window.removeEventListener('popstate', this._onpopstate, false);
+    hasWindow && window.removeEventListener('hashchange', this._onpopstate, false);
+  };
+
+  /**
+   * Show `path` with optional `state` object.
+   *
+   * @param {string} path
+   * @param {Object=} state
+   * @param {boolean=} dispatch
+   * @param {boolean=} push
+   * @return {!Context}
+   * @api public
+   */
+
+  Page.prototype.show = function(path, state, dispatch, push) {
+    var ctx = new Context(path, state, this),
+      prev = this.prevContext;
+    this.prevContext = ctx;
+    this.current = ctx.path;
+    if (this._dispatch) this.dispatch(ctx, prev);
+    if (false !== ctx.handled && false !== push) ctx.pushState();
+    return ctx;
+  };
+
+  /**
+   * Goes back in the history
+   * Back should always let the current route push state and then go back.
+   *
+   * @param {string} path - fallback path to go back if no more history exists, if undefined defaults to page.base
+   * @param {Object=} state
+   * @api public
+   */
+
+  Page.prototype.back = function(path, state) {
+    var page = this;
+    if (this.len > 0) {
+      var window = this._window;
+      // this may need more testing to see if all browsers
+      // wait for the next tick to go back in history
+      hasHistory && window.history.back();
+      this.len--;
+    } else if (path) {
+      setTimeout(function() {
+        page.show(path, state);
+      });
+    } else {
+      setTimeout(function() {
+        page.show(page._getBase(), state);
+      });
+    }
+  };
+
+  /**
+   * Register route to redirect from one path to other
+   * or just redirect to another route
+   *
+   * @param {string} from - if param 'to' is undefined redirects to 'from'
+   * @param {string=} to
+   * @api public
+   */
+  Page.prototype.redirect = function(from, to) {
+    var inst = this;
+
+    // Define route from a path to another
+    if ('string' === typeof from && 'string' === typeof to) {
+      page.call(this, from, function(e) {
+        setTimeout(function() {
+          inst.replace(/** @type {!string} */ (to));
+        }, 0);
+      });
+    }
+
+    // Wait for the push state and replace it with another
+    if ('string' === typeof from && 'undefined' === typeof to) {
+      setTimeout(function() {
+        inst.replace(from);
+      }, 0);
+    }
+  };
+
+  /**
+   * Replace `path` with optional `state` object.
+   *
+   * @param {string} path
+   * @param {Object=} state
+   * @param {boolean=} init
+   * @param {boolean=} dispatch
+   * @return {!Context}
+   * @api public
+   */
+
+
+  Page.prototype.replace = function(path, state, init, dispatch) {
+    var ctx = new Context(path, state, this),
+      prev = this.prevContext;
+    this.prevContext = ctx;
+    this.current = ctx.path;
+    ctx.init = init;
+    ctx.save(); // save before dispatching, which may redirect
+    if (false !== dispatch) this.dispatch(ctx, prev);
+    return ctx;
+  };
+
+  /**
+   * Dispatch the given `ctx`.
+   *
+   * @param {Context} ctx
+   * @api private
+   */
+
+  Page.prototype.dispatch = function(ctx, prev) {
+    var i = 0, j = 0, page = this;
+
+    function nextExit() {
+      var fn = page.exits[j++];
+      if (!fn) return nextEnter();
+      fn(prev, nextExit);
+    }
+
+    function nextEnter() {
+      var fn = page.callbacks[i++];
+
+      if (ctx.path !== page.current) {
+        ctx.handled = false;
+        return;
+      }
+      if (!fn) return unhandled.call(page, ctx);
+      fn(ctx, nextEnter);
+    }
+
+    if (prev) {
+      nextExit();
+    } else {
+      nextEnter();
+    }
+  };
+
+  /**
+   * Register an exit route on `path` with
+   * callback `fn()`, which will be called
+   * on the previous context when a new
+   * page is visited.
+   */
+  Page.prototype.exit = function(path, fn) {
+    if (typeof path === 'function') {
+      return this.exit('*', path);
+    }
+
+    var route = new Route(path, null, this);
+    for (var i = 1; i < arguments.length; ++i) {
+      this.exits.push(route.middleware(arguments[i]));
+    }
+  };
+
+  /**
+   * Handle "click" events.
+   */
+
+  /* jshint +W054 */
+  Page.prototype._onclick = function(e) {
+    if (1 !== this._which(e)) return;
+
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+    if (e.defaultPrevented) return;
+
+    // ensure link
+    // use shadow dom when available if not, fall back to composedPath()
+    // for browsers that only have shady
+    var el = e.target;
+    var eventPath = e.path || (e.composedPath ? e.composedPath() : null);
+
+    if(eventPath) {
+      for (var i = 0; i < eventPath.length; i++) {
+        if (!eventPath[i].nodeName) continue;
+        if (eventPath[i].nodeName.toUpperCase() !== 'A') continue;
+        if (!eventPath[i].href) continue;
+
+        el = eventPath[i];
+        break;
+      }
+    }
+
+    // continue ensure link
+    // el.nodeName for svg links are 'a' instead of 'A'
+    while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode;
+    if (!el || 'A' !== el.nodeName.toUpperCase()) return;
+
+    // check if link is inside an svg
+    // in this case, both href and target are always inside an object
+    var svg = (typeof el.href === 'object') && el.href.constructor.name === 'SVGAnimatedString';
+
+    // Ignore if tag has
+    // 1. "download" attribute
+    // 2. rel="external" attribute
+    if (el.hasAttribute('download') || el.getAttribute('rel') === 'external') return;
+
+    // ensure non-hash for the same path
+    var link = el.getAttribute('href');
+    if(!this._hashbang && this._samePath(el) && (el.hash || '#' === link)) return;
+
+    // Check for mailto: in the href
+    if (link && link.indexOf('mailto:') > -1) return;
+
+    // check target
+    // svg target is an object and its desired value is in .baseVal property
+    if (svg ? el.target.baseVal : el.target) return;
+
+    // x-origin
+    // note: svg links that are not relative don't call click events (and skip page.js)
+    // consequently, all svg links tested inside page.js are relative and in the same origin
+    if (!svg && !this.sameOrigin(el.href)) return;
+
+    // rebuild path
+    // There aren't .pathname and .search properties in svg links, so we use href
+    // Also, svg href is an object and its desired value is in .baseVal property
+    var path = svg ? el.href.baseVal : (el.pathname + el.search + (el.hash || ''));
+
+    path = path[0] !== '/' ? '/' + path : path;
+
+    // strip leading "/[drive letter]:" on NW.js on Windows
+    if (hasProcess && path.match(/^\/[a-zA-Z]:\//)) {
+      path = path.replace(/^\/[a-zA-Z]:\//, '/');
+    }
+
+    // same page
+    var orig = path;
+    var pageBase = this._getBase();
+
+    if (path.indexOf(pageBase) === 0) {
+      path = path.substr(pageBase.length);
+    }
+
+    if (this._hashbang) path = path.replace('#!', '');
+
+    if (pageBase && orig === path) return;
+
+    e.preventDefault();
+    this.show(orig);
+  };
+
+  /**
+   * Handle "populate" events.
+   * @api private
+   */
+
+  Page.prototype._onpopstate = (function () {
+    var loaded = false;
+    if ( ! hasWindow ) {
+      return;
+    }
+    if (hasDocument && document.readyState === 'complete') {
+      loaded = true;
+    } else {
+      window.addEventListener('load', function() {
+        setTimeout(function() {
+          loaded = true;
+        }, 0);
+      });
+    }
+    return function onpopstate(e) {
+      if (!loaded) return;
+      var page = this;
+      if (e.state) {
+        var path = e.state.path;
+        page.replace(path, e.state);
+      } else if (isLocation) {
+        var loc = page._window.location;
+        page.show(loc.pathname + loc.search + loc.hash, undefined, undefined, false);
+      }
+    };
+  })();
+
+  /**
+   * Event button.
+   */
+  Page.prototype._which = function(e) {
+    e = e || (hasWindow && this._window.event);
+    return null == e.which ? e.button : e.which;
+  };
+
+  /**
+   * Convert to a URL object
+   * @api private
+   */
+  Page.prototype._toURL = function(href) {
+    var window = this._window;
+    if(typeof URL === 'function' && isLocation) {
+      return new URL(href, window.location.toString());
+    } else if (hasDocument) {
+      var anc = window.document.createElement('a');
+      anc.href = href;
+      return anc;
+    }
+  };
+
+  /**
+   * Check if `href` is the same origin.
+   * @param {string} href
+   * @api public
+   */
+
+  Page.prototype.sameOrigin = function(href) {
+    if(!href || !isLocation) return false;
+
+    var url = this._toURL(href);
+    var window = this._window;
+
+    var loc = window.location;
+    return loc.protocol === url.protocol &&
+      loc.hostname === url.hostname &&
+      loc.port === url.port;
+  };
+
+  /**
+   * @api private
+   */
+  Page.prototype._samePath = function(url) {
+    if(!isLocation) return false;
+    var window = this._window;
+    var loc = window.location;
+    return url.pathname === loc.pathname &&
+      url.search === loc.search;
+  };
+
+  /**
+   * Remove URL encoding from the given `str`.
+   * Accommodates whitespace in both x-www-form-urlencoded
+   * and regular percent-encoded form.
+   *
+   * @param {string} val - URL component to decode
+   * @api private
+   */
+  Page.prototype._decodeURLEncodedURIComponent = function(val) {
+    if (typeof val !== 'string') { return val; }
+    return this._decodeURLComponents ? decodeURIComponent(val.replace(/\+/g, ' ')) : val;
+  };
+
+  /**
+   * Create a new `page` instance and function
+   */
+  function createPage(options) {
+    var pageInstance = new Page();
+
+    function pageFn(/* args */) {
+      return page.apply(pageInstance, arguments);
+    }
+
+    // Copy all of the things over. In 2.0 maybe we use setPrototypeOf
+    pageFn.callbacks = pageInstance.callbacks;
+    pageFn.exits = pageInstance.exits;
+    pageFn.base = pageInstance.base.bind(pageInstance);
+    pageFn.strict = pageInstance.strict.bind(pageInstance);
+    pageFn.start = pageInstance.start.bind(pageInstance);
+    pageFn.stop = pageInstance.stop.bind(pageInstance);
+    pageFn.show = pageInstance.show.bind(pageInstance);
+    pageFn.back = pageInstance.back.bind(pageInstance);
+    pageFn.redirect = pageInstance.redirect.bind(pageInstance);
+    pageFn.replace = pageInstance.replace.bind(pageInstance);
+    pageFn.dispatch = pageInstance.dispatch.bind(pageInstance);
+    pageFn.exit = pageInstance.exit.bind(pageInstance);
+    pageFn.configure = pageInstance.configure.bind(pageInstance);
+    pageFn.sameOrigin = pageInstance.sameOrigin.bind(pageInstance);
+
+    pageFn.create = createPage;
+
+    Object.defineProperty(pageFn, 'len', {
+      get: function(){
+        return pageInstance.len;
+      },
+      set: function(val) {
+        pageInstance.len = val;
+      }
+    });
+
+    Object.defineProperty(pageFn, 'current', {
+      get: function(){
+        return pageInstance.current;
+      },
+      set: function(val) {
+        pageInstance.current = val;
+      }
+    });
+
+    // In 2.0 these can be named exports
+    pageFn.Context = Context;
+    pageFn.Route = Route;
+
+    return pageFn;
+  }
+
+  /**
+   * Register `path` with callback `fn()`,
+   * or route `path`, or redirection,
+   * or `page.start()`.
+   *
+   *   page(fn);
+   *   page('*', fn);
+   *   page('/user/:id', load, user);
+   *   page('/user/' + user.id, { some: 'thing' });
+   *   page('/user/' + user.id);
+   *   page('/from', '/to')
+   *   page();
+   *
+   * @param {string|!Function|!Object} path
+   * @param {Function=} fn
+   * @api public
+   */
+
+  function page(path, fn) {
+    // <callback>
+    if ('function' === typeof path) {
+      return page.call(this, '*', path);
+    }
+
+    // route <path> to <callback ...>
+    if ('function' === typeof fn) {
+      var route = new Route(/** @type {string} */ (path), null, this);
+      for (var i = 1; i < arguments.length; ++i) {
+        this.callbacks.push(route.middleware(arguments[i]));
+      }
+      // show <path> with [state]
+    } else if ('string' === typeof path) {
+      this['string' === typeof fn ? 'redirect' : 'show'](path, fn);
+      // start [options]
+    } else {
+      this.start(path);
+    }
+  }
+
+  /**
+   * Unhandled `ctx`. When it's not the initial
+   * popstate then redirect. If you wish to handle
+   * 404s on your own use `page('*', callback)`.
+   *
+   * @param {Context} ctx
+   * @api private
+   */
+  function unhandled(ctx) {
+    if (ctx.handled) return;
+    var current;
+    var page = this;
+    var window = page._window;
+
+    if (page._hashbang) {
+      current = isLocation && this._getBase() + window.location.hash.replace('#!', '');
+    } else {
+      current = isLocation && window.location.pathname + window.location.search;
+    }
+
+    if (current === ctx.canonicalPath) return;
+    page.stop();
+    ctx.handled = false;
+    isLocation && (window.location.href = ctx.canonicalPath);
+  }
+
+  /**
+   * Initialize a new "request" `Context`
+   * with the given `path` and optional initial `state`.
+   *
+   * @constructor
+   * @param {string} path
+   * @param {Object=} state
+   * @api public
+   */
+
+  function Context(path, state, pageInstance) {
+    var _page = this.page = pageInstance || page;
+    var window = _page._window;
+    var hashbang = _page.hashbang;
+
+    var pageBase = _page._getBase();
+    if ('/' === path[0] && 0 !== path.indexOf(pageBase)) path = pageBase + (hashbang ? '#!' : '') + path;
+    var i = path.indexOf('?');
+
+    this.canonicalPath = path;
+    this.path = path.replace(pageBase, '') || '/';
+    if (hashbang) this.path = this.path.replace('#!', '') || '/';
+
+    this.title = (hasDocument && window.document.title);
+    this.state = state || {};
+    this.state.path = path;
+    this.querystring = ~i ? _page._decodeURLEncodedURIComponent(path.slice(i + 1)) : '';
+    this.pathname = _page._decodeURLEncodedURIComponent(~i ? path.slice(0, i) : path);
+    this.params = {};
+
+    // fragment
+    this.hash = '';
+    if (!hashbang) {
+      if (!~this.path.indexOf('#')) return;
+      var parts = this.path.split('#');
+      this.path = this.pathname = parts[0];
+      this.hash = _page._decodeURLEncodedURIComponent(parts[1]) || '';
+      this.querystring = this.querystring.split('#')[0];
+    }
+  }
+
+  /**
+   * Push state.
+   *
+   * @api private
+   */
+
+  Context.prototype.pushState = function() {
+    var page = this.page;
+    var window = page._window;
+    var hashbang = page._hashbang;
+
+    page.len++;
+    if (hasHistory) {
+        window.history.pushState(this.state, this.title,
+          hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
+    }
+  };
+
+  /**
+   * Save the context state.
+   *
+   * @api public
+   */
+
+  Context.prototype.save = function() {
+    var page = this.page;
+    if (hasHistory && page._window.location.protocol !== 'file:') {
+        page._window.history.replaceState(this.state, this.title,
+          page._hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
+    }
+  };
+
+  /**
+   * Initialize `Route` with the given HTTP `path`,
+   * and an array of `callbacks` and `options`.
+   *
+   * Options:
+   *
+   *   - `sensitive`    enable case-sensitive routes
+   *   - `strict`       enable strict matching for trailing slashes
+   *
+   * @constructor
+   * @param {string} path
+   * @param {Object=} options
+   * @api private
+   */
+
+  function Route(path, options, page) {
+    var _page = this.page = page || globalPage;
+    var opts = options || {};
+    opts.strict = opts.strict || page._strict;
+    this.path = (path === '*') ? '(.*)' : path;
+    this.method = 'GET';
+    this.regexp = pathToRegexp_1(this.path, this.keys = [], opts);
+  }
+
+  /**
+   * Return route middleware with
+   * the given callback `fn()`.
+   *
+   * @param {Function} fn
+   * @return {Function}
+   * @api public
+   */
+
+  Route.prototype.middleware = function(fn) {
+    var self = this;
+    return function(ctx, next) {
+      if (self.match(ctx.path, ctx.params)) return fn(ctx, next);
+      next();
+    };
+  };
+
+  /**
+   * Check if this route matches `path`, if so
+   * populate `params`.
+   *
+   * @param {string} path
+   * @param {Object} params
+   * @return {boolean}
+   * @api private
+   */
+
+  Route.prototype.match = function(path, params) {
+    var keys = this.keys,
+      qsIndex = path.indexOf('?'),
+      pathname = ~qsIndex ? path.slice(0, qsIndex) : path,
+      m = this.regexp.exec(decodeURIComponent(pathname));
+
+    if (!m) return false;
+
+    for (var i = 1, len = m.length; i < len; ++i) {
+      var key = keys[i - 1];
+      var val = this.page._decodeURLEncodedURIComponent(m[i]);
+      if (val !== undefined || !(hasOwnProperty.call(params, key.name))) {
+        params[key.name] = val;
+      }
+    }
+
+    return true;
+  };
+
+
+  /**
+   * Module exports.
+   */
+
+  var globalPage = createPage();
+  var page_js = globalPage;
+  page.default = globalPage;
+
+export default page_js;

public/lib/widgets.js

@@ -15,6 +15,91 @@
             }
         }
 
+            inputTextFieldOutlined(obj){
+                function initFunc() {
+                    new mdc.textField.MDCTextField.attachTo(this);
+                }
+                let inputType = obj.type ? obj.type: 'text';
+                let init = obj.init ? obj.init: initFunc;
+                return {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-text-field mdc-text-field--outlined mdc-text-field--dense",
+                    $init: init,
+                    $components:[
+                        {
+                            $type: "input",
+                            type: inputType,
+                            id: obj.id,
+                            class: "mdc-text-field__input",
+                            value: obj.value,
+                            onchange: obj.change
+                        },
+                        {
+                            $type: "label",
+                            class: "mdc-floating-label",
+                            for: obj.id,
+                            $text: obj.label
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-notched-outline",
+                            $components:[
+                                {
+                                    $type: "svg",
+                                    $components:[
+                                        {
+                                            $type: "path",
+                                            class: "mdc-notched-outline__path"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-notched-outline__idle"
+                        }
+                    ]
+                    //onclick: obj.onclick
+                }
+            }
+
+            inputTextFieldStandart(obj){
+                return {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-text-field text-field mdc-ripple-upgraded",
+                    $init: function(){
+                    //new mdc.mdc.notchedOutline.MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));
+                       new mdc.textField.MDCTextField.attachTo(this);
+                    },
+                    $components:[
+                        {
+                            $type: "input",
+                            type: "text",
+                            id: obj.id,
+                            class: "mdc-text-field__input",
+                            value: obj.value,
+                            onchange: obj.change
+                        },
+                        {
+                            $type: "label",
+                            class: "mdc-floating-label",
+                            for: obj.id,
+                            $text: obj.label
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-line-ripple"
+                        }
+                        
+                    ]
+                    //onclick: obj.onclick
+                }
+            }
+
+
         headerH3(headertype, label, cssclass) {
 
             return  {
@@ -479,6 +564,12 @@
                 $cell: true,
                 $type: "div",
                 class: "mdc-switch",
+                _switch: null,
+                id: obj.id,
+                $init: obj.init, 
+                //function(){
+                //     new mdc.switchControl.MDCSwitch(this);
+                // },
                 $components: [
                     {
                         $type: "div",
@@ -496,8 +587,8 @@
                                         $type: "input",
                                         type: "checkbox",
                                         class: "mdc-switch__native-control",
-                                        id: obj.id,
-                                        $init: obj.init,
+                                        
+                                        //$init: obj.init,
                                         //id: "basic-switch",
                                         onchange: obj.onchange,
                                         role: "switch"

public/vwf/view/lib/editorLive.css

@@ -67,7 +67,7 @@
         padding-left: 16px;
         overflow-x: hidden;
         overflow-y: auto;
-        background-color: rgba(236, 236, 236, 0.88);
+        background-color: rgba(240, 240, 240, 0.90);
         z-index: 3;
         position: fixed;
         width: 450px;

public/web/app.html

@@ -5,19 +5,29 @@
         </div>
     <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
       <div id="reflectorMenu" class="text-field-container">
-        <div id="reflectorSelect" class="mdc-text-field text-field mdc-text-field--upgraded">
-          <input id="currentReflector" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:250px;">
-          <label for="currentReflector" class="mdc-floating-label mdc-floating-label--float-above">Reflector</label>
-          <div class="mdc-line-ripple" style="transform-origin: 76px center 0px;"></div>
+        <div id="reflectorSelect" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense">
+          <input id="currentReflector" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:300px;">
+          <label for="currentReflector" class="mdc-floating-label">Reflector</label>
+          <div class="mdc-notched-outline">
+            <svg>
+              <path class="mdc-notched-outline__path"/>
+            </svg>
+          </div>
+          <div class="mdc-notched-outline__idle"></div>
         </div>
       </div>
     </div>
     <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
       <div id="dbMenu" class="text-field-container">
-        <div id="dbSelect" class="mdc-text-field text-field mdc-text-field--upgraded">
+        <div id="dbSelect" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense">
           <input id="currentdb" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:300px;">
           <label for="currentdb" class="mdc-floating-label mdc-floating-label--float-above">DB Host</label>
-          <div class="mdc-line-ripple" style="transform-origin: 76px center 0px;"></div>
+          <div class="mdc-notched-outline">
+            <svg>
+              <path class="mdc-notched-outline__path"/>
+            </svg>
+          </div>
+          <div class="mdc-notched-outline__idle"></div>
         </div>
       </div>
     </div>

public/web/index-app.js

@@ -276,6 +276,8 @@ class IndexApp {
             class: "mdc-layout-grid mdc-layout-grid--align-left",
             _alias: null,
             _pass: null,
+            _passField: null,
+            _aliasField: null,
             _initData: function () {
                 this._alias = '';
                 this._pass = '';
@@ -305,24 +307,32 @@ class IndexApp {
                                         class: "mdc-typography--headline5",
                                         $text: "Login: "
                                     },
-                                    {
-                                        class: "mdc-text-field",
-                                        $type: "span",
-                                        $components: [
-                                            {
-                                                class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
-                                                id: "alias",
-                                                $type: "input",
-                                                type: "text",
-                                                value: this._alias,
-                                                onchange: function (e) {
-                                                    this._alias = this.value;
+                                    window._app.widgets.inputTextFieldOutlined({
+                                        "id": 'aliasInput',
+                                        "label": "Login",
+                                        "value": this._alias,
+                                        "type": "text",
+                                        "init": function() {
+                                                    this._aliasField = new mdc.textField.MDCTextField(this);
                                                 }
-                                            }
-
-                                        ]
-
-                                    }
+                                    }),
+                                    // {
+                                    //     class: "mdc-text-field",
+                                    //     $type: "span",
+                                    //     $init: function() {
+                                    //         this._aliasField = new mdc.textField.MDCTextField(this);
+                                    //     },
+                                    //     $components: [
+                                    //         {
+                                    //             class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
+                                    //             $type: "input",
+                                    //             type: "text",
+                                    //             value: this._alias
+                                    //         }
+
+                                    //     ]
+
+                                    // }
 
                                 ]
                             },
@@ -335,24 +345,32 @@ class IndexApp {
                                         class: "mdc-typography--headline5",
                                         $text: "Password: "
                                     },
-                                    {
-                                        class: "mdc-text-field",
-                                        $type: "span",
-                                        $components: [
-                                            {
-                                                class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
-                                                id: "pass",
-                                                $type: "input",
-                                                type: "password",
-                                                value: this._pass,
-                                                onchange: function (e) {
-                                                    this._pass = this.value;
-                                                }
-                                            }
-
-                                        ]
-
-                                    }
+                                    window._app.widgets.inputTextFieldOutlined({
+                                        "id": 'passwordInput',
+                                        "label": "Password",
+                                        "value": this._pass,
+                                        "type": "password",
+                                        "init": function() {
+                                            this._passField = new mdc.textField.MDCTextField(this);
+                                        }
+                                    }),
+                                    // {
+                                    //     class: "mdc-text-field",
+                                    //     $type: "span",
+                                    //     $init: function() {
+                                    //         this._passField = new mdc.textField.MDCTextField(this);
+                                    //     },
+                                    //     $components: [
+                                    //         {
+                                    //             class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
+                                    //             $type: "input",
+                                    //             type: "password",
+                                    //             value: this._pass
+                                    //         }
+
+                                    //     ]
+
+                                    // }
 
                                 ]
                             },
@@ -366,7 +384,10 @@ class IndexApp {
                                             "onclick": function (e) {
                                                 e.preventDefault();
 
-                                                if (this._pass.length < 7) {
+                                                let alias = this._aliasField.value;
+                                                let pass = this._passField.value
+
+                                                if (pass.length < 7) {
                                                     new Noty({
                                                         text: "Your passphrase needs to be longer than 7 letters",
                                                         timeout: 2000,
@@ -376,8 +397,7 @@ class IndexApp {
                                                     }).show();
                                                 } else {
                                                     //
-
-                                                    _LCSUSER.create(this._alias, this._pass,
+                                                    _LCSUSER.create(alias, pass,
                                                         (ack) => {
                                                             if (!ack.wait) { }
                                                             if (ack.err) {
@@ -385,9 +405,9 @@ class IndexApp {
                                                                 return ack.err
                                                             };
                                                             if (ack.pub) {
-                                                                _LCSUSER.auth(this._alias, this._pass);
-                                                                _LCSDB.get('users').get(this._alias).put({
-                                                                    'alias': this._alias,
+                                                                _LCSUSER.auth(alias, pass);
+                                                                _LCSDB.get('users').get(alias).put({
+                                                                    'alias': alias,
                                                                     'pub': ack.pub
                                                                 });
                                                             }
@@ -404,7 +424,7 @@ class IndexApp {
                                             "label": 'Sign IN',
                                             "onclick": function (e) {
                                                 e.preventDefault();
-                                                _LCSUSER.auth(this._alias, this._pass, ack => {
+                                                _LCSUSER.auth(this._aliasField.value, this._passField.value, ack => {
 
                                                     if (ack.err) {
                                                         new Noty({