Merge remote-tracking branch 'origin/master'

CHANGES.md

 # Changelog
 
-## 3.2.2 (Unreleased)
+## 3.3.0 (Unreleased)
 
+### Bugfixes
+- Don't require `auto_login` to be `true` when using the API to log in.
+
+### New Features
+- #828 Add routing for the `#converse-login` and `#converse-register` URL
+  fragments, which will render the registration and login forms respectively.
+
+### UX/UI changes
+- Use CSS3 fade transitions to render various elements.
+- Remove `Login` and `Registration` tabs and consolidate into one panel.
+- Show validation error messages on the login form.
 - Don't hang indefinitely and provide nicer error messages when a connection
   can't be established.
+- Consolidate error and validation reporting on the registration form.
+
+### Technical changes
+- Converse.js now includes a [Virtual DOM](https://github.com/Matt-Esch/virtual-dom)
+  and uses it to render the login form.
+- Converse.js no longer includes all the translations in its build. Instead,
+  only the currently relevant translation is requested. This results in a much
+  smaller filesize but means that the translations you want to provide need to
+  be available. See the [locales_url](https://conversejs.org/docs/html/configurations.html#locales-url)
+  configuration setting for more info.
 
 ## 3.2.1 (2017-08-29)
 

Makefile

@@ -61,10 +61,10 @@ serve_bg: dev
 ########################################################################
 ## Translation machinery
 
-GETTEXT = xgettext --language="JavaScript" --keyword=__ --keyword=___ --from-code=UTF-8 --output=locale/converse.pot src/*.js --package-name=Converse.js --copyright-holder="Jan-Carel Brand" --package-version=3.2.1 -c
+GETTEXT = xgettext --language="JavaScript" --keyword=__ --keyword=___ --from-code=UTF-8 --output=locale/converse.pot dist/converse-no-dependencies.js --package-name=Converse.js --copyright-holder="Jan-Carel Brand" --package-version=3.2.1 -c
 
 .PHONY: pot
-pot:
+pot: dist/converse-no-dependencies.js
 	$(GETTEXT) 2>&1 > /dev/null; exit $$?;
 
 .PHONY: po
@@ -189,7 +189,7 @@ dist/converse-no-jquery.js: transpile src locale node_modules *.js
 dist/converse-no-jquery.min.js: src locale node_modules *.js transpile
 	$(RJS) -o src/build.js include=converse wrap.endFile=end-no-jquery.frag exclude=jquery exclude=jquery.noconflict out=dist/converse-no-jquery.min.js
 dist/converse-no-dependencies.js: transpile src locale node_modules *.js
-	$(RJS) -o src/build-no-dependencies.js optimize=none out=dist/converse-no-dependencies.min.js
+	$(RJS) -o src/build-no-dependencies.js optimize=none out=dist/converse-no-dependencies.js
 dist/converse-no-dependencies.min.js: src locale node_modules *.js
 	$(RJS) -o src/build-no-dependencies.js out=dist/converse-no-dependencies.min.js
 dist/converse-mobile.js: transpile src locale node_modules *.js

css/theme.css

@@ -20,9 +20,6 @@ h6 {
   font-weight: 700;
   letter-spacing: 1px;
 }
-h1 {
-  text-transform: uppercase;
-}
 p {
   margin: 0 0 25px;
   font-size: 18px;

dev.html

@@ -37,7 +37,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>converse</h1>
                         <p class="intro-text">Developer page.</p>
                         <p class="intro-text">
                             Converse.js will only work on this page if you have 

docs/source/configuration.rst

@@ -648,11 +648,18 @@ state, then you can set this option to `true` to enable it.
 i18n
 ----
 
-* Default:  Auto-detection of the User/Browser language
+* Default:  Auto-detection of the User/Browser language or ``en``;
 
-If no locale is matching available locales, the default is ``en``.
-Specify the locale/language. The language must be in the ``locales`` object. Refer to
-``./locale/locales.js`` to see which locales are supported.
+Specify the locale/language.
+
+The translations for that locale must be available in JSON format at the
+`locales_url`_
+
+If an explicit locale is specified via the ``i18n`` setting and the
+translations for that locale are not found at the `locales_url``, then 
+then Converse.js will fall back to trying to determine the browser's language
+and fetching those translations, or if that fails the default English texts
+will be used.
 
 jid
 ---
@@ -692,6 +699,33 @@ See also:
     `XEP-0198 <http://xmpp.org/extensions/xep-0198.html>`_, specifically
     with regards to "stream resumption".
 
+locales_url
+-----------
+
+* Default: ``/locale/{{{locale}}}/LC_MESSAGES/converse.json``,
+
+The URL from where Converse.js should fetch translation JSON.
+
+The three curly braces ``{{{ }}}`` are
+`Mustache<https://github.com/janl/mustache.js#readme>`_-style
+variable interpolation which HTML-escapes the value being inserted. It's
+important that the inserted value is HTML-escaped, otherwise a malicious script
+injection attack could be attempted.
+
+The variable being interpolated via the curly braces is ``locale``, which is
+the value passed in to the `i18n`_ setting, or the browser's locale or the
+default local or `en` (resolved in that order).
+
+From version 3.3.0, Converse.js no longer bundles all translations into its
+final build file. Instead, only the relevant translations are fetched at
+runtime.
+
+This change also means that it's no longer possible to pass in the translation
+JSON data directly into ``_converse.initialize`` via the `i18n`_ setting.
+Instead, you only specify the language code (e.g. `de`) and that language's
+JSON translations will automatically be fetched via XMLHTTPRequest at
+``locales_url``.
+
 locked_domain
 -------------
 

docs/source/events.rst

@@ -19,13 +19,14 @@ The core events, which are also promises are:
 
 * `cachedRoster`_
 * `chatBoxesFetched`_
+* `controlboxInitialized`_ (only via the `converse-controlbox` plugin)
 * `pluginsInitialized`_
-* `roster`_
+* `roomsPanelRendered`_ (only via the `converse-muc` plugin)
 * `rosterContactsFetched`_
 * `rosterGroupsFetched`_
 * `rosterInitialized`_
+* `roster`_
 * `statusInitialized`_
-* `roomsPanelRendered`_ (only via the `converse-muc` plugin)
 
 For more info on how to use (or add promises), you can read the
 :ref:`promises-grouping` in the API documentation.
@@ -184,6 +185,25 @@ When a chat buddy's custom status message has changed.
 
 ``_converse.on('contactStatusMessageChanged', function (data) { ... });``
 
+controlboxInitialized
+~~~~~~~~~~~~~~~~~~~~~
+
+Called when the controlbox has been initialized and therefore exists.
+
+The controlbox contains the login and register forms when
+the user is logged out and a list of the user's contacts and group chats when
+logged in.
+
+``_converse.on('controlboxInitialized', function () { ... });``
+
+Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_:
+
+.. code-block:: javascript
+
+    _converse.api.waitUntil('controlboxInitialized').then(function () {
+        // Your code here...
+    });
+
 discoInitialized
 ~~~~~~~~~~~~~~~~
 

fonticons/style.css

 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?uikzla');
-  src:  url('fonts/icomoon.eot?uikzla#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?uikzla') format('truetype'),
-    url('fonts/icomoon.woff?uikzla') format('woff'),
-    url('fonts/icomoon.svg?uikzla#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?hbusyn');
+  src:  url('fonts/icomoon.eot?hbusyn#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?hbusyn') format('truetype'),
+    url('fonts/icomoon.woff?hbusyn') format('woff'),
+    url('fonts/icomoon.svg?hbusyn#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -19,260 +19,94 @@
   text-transform: none;
   line-height: 1;
   
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  font-feature-settings: "liga";
+  -webkit-font-variant-ligatures: discretionary-ligatures;
+  font-variant-ligatures: discretionary-ligatures;
+
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-save:before {
-  content: "\f0c7";
-}
-.icon-idcard-dark:before {
-  content: "\f2c2";
-}
-.icon-idcard:before {
-  content: "\f2c3";
-}
-.icon-snowflake:before {
-  content: "\f2dc";
-}
-.icon-globe:before {
-  content: "\f0ac";
-}
-.icon-legal:before {
-  content: "\f0e3";
-}
-.icon-group:before {
-  content: "\f0c0";
-}
-.icon-database:before {
-  content: "\f1c0";
-}
-.icon-xa:before {
-  content: "\e602";
-}
-.icon-conversejs:before {
-  content: "\e600";
-}
-.icon-closed:before {
-  content: "\25ba";
-}
-.icon-opened:before {
-  content: "\25bc";
-}
-.icon-checkmark:before {
-  content: "\2713";
-}
-.icon-home:before {
-  content: "\e000";
-}
-.icon-pencil:before {
-  content: "\270e";
-}
-.icon-music:before {
-  content: "\266b";
-}
-.icon-phone:before {
-  content: "\260f";
-}
-.icon-phone-hang-up:before {
-  content: "\260e";
-}
-.icon-address-book:before {
-  content: "\270f";
-}
-.icon-notebook:before {
-  content: "\2710";
-}
-.icon-pushpin:before {
-  content: "\e012";
-}
-.icon-online:before {
-  content: "\25fc";
-}
-.icon-away:before {
-  content: "\25fb";
-}
-.icon-bubbles:before {
-  content: "\e015";
-}
-.icon-bubbles2:before {
-  content: "\e016";
-}
-.icon-bubbles3:before {
-  content: "\e017";
-}
-.icon-user:before {
-  content: "\e01a";
-}
-.icon-hide-users:before {
-  content: "\e01c";
-}
-.icon-show-users:before {
-  content: "\e01e";
-}
-.icon-users:before {
-  content: "\e01b";
-}
-.icon-quotes-left:before {
-  content: "\e01d";
-}
-.icon-spinner:before {
-  content: "\231b";
-}
-.icon-search:before {
-  content: "\e021";
-}
-.icon-cogs:before {
-  content: "\e022";
-}
-.icon-wrench:before {
-  content: "\e024";
-}
-.icon-unlocked:before {
-  content: "\e025";
-}
-.icon-lock-2:before {
-  content: "\e027";
-}
-.icon-key:before {
-  content: "\e028";
-}
-.icon-zoomout:before {
-  content: "\e02a";
-}
-.icon-zoomin:before {
-  content: "\e02b";
-}
-.icon-cog:before {
-  content: "\e02f";
-}
-.icon-remove:before {
-  content: "\e02d";
-}
-.icon-eye:before {
-  content: "\e030";
-}
-.icon-eye-blocked:before {
-  content: "\e031";
-}
-.icon-attachment:before {
-  content: "\e032";
-}
-.icon-heart:before {
-  content: "\2764";
-}
-.icon-happy:before {
-  content: "\263b";
-}
-.icon-thumbs-up:before {
-  content: "\261d";
-}
-.icon-smiley:before {
-  content: "\263a";
-}
-.icon-tongue:before {
-  content: "\e038";
-}
-.icon-sad:before {
-  content: "\2639";
-}
-.icon-wink:before {
-  content: "\e03a";
-}
-.icon-wondering:before {
-  content: "\2369";
-}
-.icon-confused:before {
-  content: "\2368";
-}
-.icon-shocked:before {
-  content: "\2364";
-}
-.icon-evil:before {
-  content: "\261f";
-}
-.icon-angry:before {
-  content: "\e03f";
-}
-.icon-cool:before {
-  content: "\e040";
-}
-.icon-grin:before {
-  content: "\e041";
-}
-.icon-info:before {
-  content: "\2360";
-}
-.icon-notification:before {
-  content: "\e01f";
-}
-.icon-warning:before {
-  content: "\26a0";
-}
-.icon-spell-check:before {
-  content: "\e045";
-}
-.icon-bold:before {
-  content: "\e04d";
-}
-.icon-underline:before {
-  content: "\e04e";
-}
-.icon-italic:before {
-  content: "\e04f";
-}
-.icon-strikethrough:before {
-  content: "\e050";
-}
-.icon-newtab:before {
-  content: "\e053";
-}
-.icon-close:before {
-  content: "\2715";
-}
-.icon-blocked:before {
-  content: "\2718";
-}
-.icon-cancel-circle:before {
-  content: "\e058";
-}
-.icon-minus:before {
-  content: "\e05a";
-}
-.icon-plus:before {
-  content: "\271a";
-}
-.icon-checkbox-checked:before {
-  content: "\2611";
-}
-.icon-checkbox-unchecked:before {
-  content: "\2b27";
-}
-.icon-checkbox-partial:before {
-  content: "\2b28";
-}
-.icon-radio-checked:before {
-  content: "\2b26";
-}
-.icon-radio-unchecked:before {
-  content: "\2b25";
-}
-.icon-room-info:before {
-  content: "\e059";
-}
-.icon-newspaper:before {
-  content: "\e001";
-}
-.icon-image:before {
-  content: "\2b14";
-}
-.icon-offline:before {
-  content: "\e002";
-}
-.icon-busy:before {
-  content: "\e004";
-}
-.icon-exit:before {
-  content: "\e601";
-}
+.icon-address-book:before 	{ content: "\270f"; }
+.icon-attachment:before 	{ content: "\e032"; }
+.icon-away:before 		    { content: "\25fb"; }
+.icon-blocked:before 		{ content: "\2718"; }
+.icon-bold:before 		    { content: "\e04d"; }
+.icon-bubbles2:before 		{ content: "\e016"; }
+.icon-bubbles3:before 		{ content: "\e017"; }
+.icon-bubbles:before 		{ content: "\e015"; }
+.icon-busy:before 		    { content: "\e004"; }
+.icon-cancel-circle:before 	{ content: "\e058"; }
+.icon-checkmark:before 		{ content: "\2713"; }
+.icon-close:before 		    { content: "\2715"; }
+.icon-closed:before 		{ content: "\25ba"; }
+.icon-cog:before 		    { content: "\e02f"; }
+.icon-cogs:before 		    { content: "\e022"; }
+.icon-conversejs:before 	{ content: "\e600"; }
+.icon-database:before 		{ content: "\f1c0"; }
+.icon-envelope:before 		{ content: "\f003"; }
+.icon-exit:before 		    { content: "\e601"; }
+.icon-eye-blocked:before 	{ content: "\e031"; }
+.icon-eye:before 		    { content: "\e030"; }
+.icon-github:before 		{ content: "\eab0"; }
+.icon-globe:before 		    { content: "\f0ac"; }
+.icon-google2:before 		{ content: "\ea89"; }
+.icon-group:before 		    { content: "\f0c0"; }
+.icon-happy:before 		    { content: "\263b"; }
+.icon-heart2:before 		{ content: "\f004"; }
+.icon-heart:before 		    { content: "\2764"; }
+.icon-heart_empty:before 	{ content: "\f08a"; }
+.icon-hide-users:before 	{ content: "\e01c"; }
+.icon-home:before 		    { content: "\e000"; }
+.icon-idcard-dark:before 	{ content: "\f2c2"; }
+.icon-idcard:before 		{ content: "\f2c3"; }
+.icon-image:before 		    { content: "\2b14"; }
+.icon-info:before 		    { content: "\2360"; }
+.icon-italic:before 		{ content: "\e04f"; }
+.icon-key:before 		    { content: "\e028"; }
+.icon-legal:before 		    { content: "\f0e3"; }
+.icon-lock-2:before 		{ content: "\e027"; }
+.icon-minus:before 		    { content: "\e05a"; }
+.icon-music:before 		    { content: "\266b"; }
+.icon-newtab:before 		{ content: "\e053"; }
+.icon-notebook:before 		{ content: "\2710"; }
+.icon-notification:before 	{ content: "\e01f"; }
+.icon-offline:before 		{ content: "\e002"; }
+.icon-online:before 		{ content: "\25fc"; }
+.icon-opened:before 		{ content: "\25bc"; }
+.icon-pencil:before 		{ content: "\270e"; }
+.icon-phone-hang-up:before 	{ content: "\260e"; }
+.icon-phone:before 		    { content: "\260f"; }
+.icon-plus:before 		    { content: "\271a"; }
+.icon-pushpin:before 		{ content: "\e012"; }
+.icon-quotes-left:before 	{ content: "\e01d"; }
+.icon-reddit:before 		{ content: "\eac6"; }
+.icon-remove:before 		{ content: "\e02d"; }
+.icon-room-info:before 		{ content: "\e059"; }
+.icon-save:before 		    { content: "\f0c7"; }
+.icon-search:before 		{ content: "\e021"; }
+.icon-show-users:before 	{ content: "\e01e"; }
+.icon-smiley:before 		{ content: "\263a"; }
+.icon-snowflake:before 		{ content: "\f2dc"; }
+.icon-spell-check:before 	{ content: "\e045"; }
+.icon-spinner:before 		{ content: "\231b"; }
+.icon-star:before 		    { content: "\f005"; }
+.icon-star_empty:before 	{ content: "\f006"; }
+.icon-strikethrough:before 	{ content: "\e050"; }
+.icon-twitter:before 		{ content: "\ea96"; }
+.icon-underline:before 		{ content: "\e04e"; }
+.icon-unlocked:before 		{ content: "\e025"; }
+.icon-user:before 		    { content: "\e01a"; }
+.icon-users:before 		    { content: "\e01b"; }
+.icon-warning:before 		{ content: "\26a0"; }
+.icon-wrench:before 		{ content: "\e024"; }
+.icon-xa:before 		    { content: "\e602"; }
+.icon-zoomin:before 		{ content: "\e02b"; }
+.icon-zoomout:before 		{ content: "\e02a"; }

index.html

@@ -67,7 +67,7 @@
 
     <section class="intro" class="container">
         <div class="row">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse.js</h1>
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
             <div class="col-md-8 col-md-offset-2">
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
                 <p>Now also available in a fullscreen version.

package-lock.json

@@ -1203,6 +1203,12 @@
         "repeat-element": "1.1.2"
       }
     },
+    "browser-split": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.1.tgz",
+      "integrity": "sha1-ewl1dPjj6tYG+0Zk5krf3aKYGpM=",
+      "dev": true
+    },
     "browserslist": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
@@ -1258,6 +1264,12 @@
         }
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30000718",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
@@ -1920,6 +1932,12 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
+      "dev": true
+    },
     "domelementtype": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
@@ -2047,6 +2065,17 @@
       "integrity": "sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=",
       "dev": true
     },
+    "error": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/error/-/error-4.4.0.tgz",
+      "integrity": "sha1-v2n/JR+0onnBmtzNqmth6Q2b8So=",
+      "dev": true,
+      "requires": {
+        "camelize": "1.0.0",
+        "string-template": "0.2.1",
+        "xtend": "4.0.1"
+      }
+    },
     "error-ex": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
@@ -2260,6 +2289,15 @@
       "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
       "dev": true
     },
+    "ev-store": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ev-store/-/ev-store-7.0.0.tgz",
+      "integrity": "sha1-GrDH+CE2UF3XSzHRdwHLK+bSZVg=",
+      "dev": true,
+      "requires": {
+        "individual": "3.0.0"
+      }
+    },
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -3567,6 +3605,16 @@
         "is-glob": "2.0.1"
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dev": true,
+      "requires": {
+        "min-document": "2.19.0",
+        "process": "0.5.2"
+      }
+    },
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
@@ -4126,6 +4174,12 @@
         "repeating": "2.0.1"
       }
     },
+    "individual": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-3.0.0.tgz",
+      "integrity": "sha1-58pPhfiVewGHNPKFdQ3CLsL5hi0=",
+      "dev": true
+    },
     "infinity-agent": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
@@ -4323,6 +4377,12 @@
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
+    "is-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
+      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
+      "dev": true
+    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
@@ -4875,6 +4935,15 @@
         "mime-db": "1.29.0"
       }
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "0.1.1"
+      }
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -4988,6 +5057,12 @@
         "inherits": "2.0.3"
       }
     },
+    "next-tick": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
+      "integrity": "sha1-ddpKkn7liH45BliABltzNkE7MQ0=",
+      "dev": true
+    },
     "node-emoji": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
@@ -7907,6 +7982,12 @@
       "integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=",
       "dev": true
     },
+    "process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
@@ -9014,6 +9095,12 @@
         "strip-ansi": "3.0.1"
       }
     },
+    "string-template": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
+      "integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=",
+      "dev": true
+    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -9527,6 +9614,12 @@
       "integrity": "sha1-R84j7Y1Ord+p1LjvAHG2zxB418g=",
       "dev": true
     },
+    "vdom-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/vdom-parser/-/vdom-parser-1.4.1.tgz",
+      "integrity": "sha1-tmFo/Su+yBl0++X9Lk5nd9/Bc+0=",
+      "dev": true
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -9546,6 +9639,22 @@
         }
       }
     },
+    "virtual-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/virtual-dom/-/virtual-dom-2.1.1.tgz",
+      "integrity": "sha1-gO2i1IG57eDASRGM78tKBfIdE3U=",
+      "dev": true,
+      "requires": {
+        "browser-split": "0.0.1",
+        "error": "4.4.0",
+        "ev-store": "7.0.0",
+        "global": "4.3.2",
+        "is-object": "1.0.1",
+        "next-tick": "0.2.2",
+        "x-is-array": "0.1.0",
+        "x-is-string": "0.1.0"
+      }
+    },
     "wait-until-promise": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wait-until-promise/-/wait-until-promise-1.0.0.tgz",
@@ -9642,6 +9751,18 @@
         "slide": "1.1.6"
       }
     },
+    "x-is-array": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/x-is-array/-/x-is-array-0.1.0.tgz",
+      "integrity": "sha1-3lIBcdR7P0FvVYfWKbidJrEtwp0=",
+      "dev": true
+    },
+    "x-is-string": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
+      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
+      "dev": true
+    },
     "xdg-basedir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",

package.json

@@ -78,6 +78,8 @@
     "strophejs-plugin-vcard": "0.0.1",
     "text": "requirejs/text#2.0.15",
     "uglify-es": "^3.0.24",
+    "vdom-parser": "^1.4.1",
+    "virtual-dom": "^2.1.1",
     "wait-until-promise": "^1.0.0",
     "xss": "^0.3.3"
   },

sass/_controlbox.scss

@@ -27,6 +27,16 @@
             margin: 0;
             padding: 6px 6px 6px 0;
         }
+
+        &.logged-out {
+            .box-flyout {
+                .controlbox-pane {
+                    position: relative;
+                    overflow-y: auto;
+                }
+            }
+        }
+
         form.search-xmpp-contact {
             margin: 0;
             padding-left: 5px;
@@ -52,19 +62,19 @@
         }
 
         #converse-register {
+            @include fade-in;
             background: white;
             .title {
                 font-weight: bold;
             }
             .info {
-                font-style: italic;
                 color: green;
-                font-size: 85%;
-                margin: 5px 0;
+                font-size: 90%;
+                margin: 1.5em 0;
             }
             .form-errors {
-                color: red;
-                display: none;
+                color: $error-color;
+                margin: 1em 0;
             }
             .provider-title {
                 font-size: $font-size-huge;
@@ -104,31 +114,59 @@
             }
         }
 
-        #converse-register, #converse-login {
-            margin-top: 2em;
-            .login-anon {
-                height: auto;
-                white-space: normal;
-            }
-            .save-submit {
-                color: $save-button-color;
-            }
         .conn-feedback {
-                p {
             color: $controlbox-head-color;
+            &.error {
+                color: $error-color;
+            }
+            p {
                 padding-bottom: 0.5em;
                 &.feedback-subject.error {
                     font-weight: bold;
                 }
-                    &.error {
-                        color: $error-color;
             }
         }
+
+        .brand-heading-container {
+            .brand-heading {
+                text-align: left;
+                font-size: 150%;
+            }
+            .brand-name {
+                font-size: 120%;
+            }
+        }
+
+        .toggle-register-login {
+            font-weight: bold;
+        }
+
+        .oauth-login {
+            margin-left: 0;
+            color: $text-color;
+            .icon-social:before {
+                font-size: $font-size-large;
+            }
+        }
+
+        #converse-register, #converse-login {
+            .login-anon {
+                height: auto;
+                white-space: normal;
+            }
+            .save-submit {
+                color: $save-button-color;
             }
             input {
                 width: 100%;
-                margin: 0.5em 0;
+                margin: 1em 0;
             }
+            .form-url {
+                display: block;
+                font-weight: normal;
+                margin: 1em 0;
+            }
+
         }
         #users {
             .add-converse-contact {
@@ -413,16 +451,28 @@
             }
         }
 
+        .controlbox-panes {
+            height: 100%;
+            overflow-y: scroll;
+        }
+
         .controlbox-pane {
             padding: $controlbox-pane-padding;
             background-color: white;
             border: 0;
             font-size: $font-size;
             position: absolute;
+            left: 0;
             text-align: center;
             width: 100%;
             overflow-y: auto;
             overflow-x: hidden;
+            .switch-form {
+                padding-bottom: 2em;
+                p {
+                    margin-top: 0.5em;
+                }
+            }
             label {
                 font-size: $font-size;
                 font-weight: bold;

sass/_core.scss

+@mixin fade-in {
+    opacity:0;  /* make things invisible upon start */
+    @include animation-name(fadein);
+    @include animation-fill-mode(forwards);
+    @include animation-duration(1s);
+    @include animation-timing-function(ease);
+}
+
 #converse-embedded-chat,
 #conversejs {
     bottom: 0;
@@ -20,6 +28,9 @@
         width: 100vw;
     }
 
+    .fade-in {
+        @include fade-in;
+    }
 
 	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: $subdued-color;
@@ -141,8 +152,12 @@
     .error {
         color: $error-color;
     }
+    .info {
+        color: $info-color;
+    }
     .reg-feedback {
         font-size: 85%;
+        margin-bottom: 1em;
     }
 
     .reg-feedback,
@@ -173,7 +188,7 @@
         padding: 0.5em 0;
     }
     .pure-button {
-        border-radius: $chatbox-border-radius;
+        border-radius: $button-border-radius;
     }
     .button-primary {
         color: white;
@@ -195,6 +210,7 @@
             legend {
                 color: $text-color;
                 font-size: 125%;
+                margin-bottom: 1.5em;
             }
             input[type=checkbox] {
                 display: block;
@@ -234,6 +250,9 @@
                 &:hover {
                     color: $text-color;
                 }
+                &.error {
+                    color: $error-color;
+                }
             }
         }
         &.pure-form.converse-centered-form {

sass/_roster.scss

@@ -203,6 +203,9 @@
                     margin: 0;
                     padding: 0;
                     color: $subdued-color;
+                    &:before {
+                        font-size: $font-size;
+                    }
                     &:hover {
                         color: $gray-color;
                     }

sass/converse/_controlbox.scss

@@ -6,5 +6,11 @@
             height: 289px;
             @include calc(height, '100% - #{$controlbox-head-height}');
         }
+
+        .brand-heading-container {
+            .brand-heading {
+                margin-left: 1em;
+            }
+        }
     }
 }

sass/converse/_variables.scss

@@ -81,6 +81,7 @@ $light-background-color: #FCFDFD !default;
 $moderator-color: $dark-red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
+$info-color: $dark-green !default;
 
 $button-border-radius: 5px !default;
 $chatbox-border-radius: 4px !default;

sass/inverse/_core.scss

@@ -8,6 +8,10 @@ body {
     .brand-heading {
         font-size: 600%;
         margin-left: -10%;
+        &.fade-in {
+            @include fade-in;
+            @include animation-delay(2s);
+        }
         .icon-conversejs {
             font-size: 88%;
         }
@@ -35,14 +39,15 @@ body {
 #conversejs {
     width: 100vw;
     height: 100vh;
+    left: 0;
 
     form {
         &.pure-form.converse-form {
             margin: 1em;
-
             input[type=checkbox] {
                 margin-left: 1em;
                 display: inline;
+                margin-bottom: 2em;
             }
             input[type=text],
             input[type=password],

sass/inverse/_variables.scss

@@ -85,9 +85,10 @@ $light-background-color: #FCFDFD !default;
 $moderator-color: $red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
+$info-color: $dark-green !default;
 
 $button-border-radius: 5px !default;
-$chatbox-border-radius: 7px !default;
+$chatbox-border-radius: 0 !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
 
@@ -106,6 +107,7 @@ $toolbar-color: $greenish-white !default;
 
 $line-height-small:  20px !default;
 $line-height:  22px !default;
+$line-height-huge:  30px !default;
 
 $controlbox-width: 250px !default;
 $chat-width: 100% !default;

sass/pure/_buttons.scss

@@ -36,7 +36,7 @@ https://github.com/yahoo/pure/blob/master/LICENSE.md
     font-size: 100%;
     padding: 0.5em 1em;
     color: #444; /* rgba not supported (IE 8) */
-    color: rgba(0, 0, 0, 0.80); /* rgba supported */
+    color: rgba(0, 0, 0, 0.60); /* rgba supported */
     border: 1px solid #999;  /*IE 6/7/8*/
     border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
     background-color: #E6E6E6;