Merge branch 'master' into converse-omemo

.babelrc

-{
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-		"browsers": ["last 2 versions", "safari >= 10", "IE >= 11"]
-      }
-    }]
-  ]
-}

.eslintrc.json

@@ -10,6 +10,7 @@
     "extends": ["eslint:recommended", "plugin:lodash/canonical"],
     "globals": {
         "Promise": true,
+        "converse": true,
         "define": true,
         "require": true,
         "sinon": true,

.gitignore

@@ -13,6 +13,8 @@
 .su?
 builds/*
 3rdparty/libsignal-protocol-javascript/
+*.map
+dist/converse-no-dependencies-es2015.js
 
 analytics.js
 inverse-analytics.js

CHANGES.md

@@ -7,7 +7,11 @@
 - #161 XEP-0363: HTTP File Upload
 - #194 Include entity capabilities in outgoing presence stanzas
 - #337 API call to update a VCard
+- #968 Use nickname from VCard when joining a room
+- #1091 There's now only one CSS file for all view modes.
 - #1094 Show room members who aren't currently online
+- #1106 Support for Roster Versioning
+- #1081 Allow for shift-enter to insert newlines
 - It's now also possible to edit your VCard via the UI
 - Automatically grow/shrink input as text is entered/removed
 - MP4 and MP3 files when sent as XEP-0066 Out of Band Data, are now playable directly in chat
@@ -16,6 +20,8 @@
 - Add a checkbox to indicate whether a trusted device is being used or not.
   If the device is not trusted, sessionStorage is used and all user data is deleted from the browser cache upon logout.
   If the device is trusted, localStorage is used and user data is cached indefinitely.
+- Initial support for XEP-0357 Push Notifications, specifically registering an "App Server".
+- Add support for logging in via OAuth (see the [oauth_providers](https://conversejs.org/docs/html/configurations.html#oauth-providers) setting)
 
 ### Bugfixes
 

Makefile

@@ -8,15 +8,16 @@ CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
 CLEANCSS		?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
 ESLINT		  	?= ./node_modules/.bin/eslint
 HTTPSERVE	   	?= ./node_modules/.bin/http-server
-HTTPSERVE_PORT  ?= 8000
-INKSCAPE        ?= inkscape
+HTTPSERVE_PORT		?= 8000
+INKSCAPE		?= inkscape
 JSDOC			?=  ./node_modules/.bin/jsdoc
-OXIPNG          ?= oxipng
+OXIPNG			?= oxipng
 PAPER		   	=
 PO2JSON		 	?= ./node_modules/.bin/po2json
-RJS			 	?= ./node_modules/.bin/r.js
+RJS			?= ./node_modules/.bin/r.js
+WEBPACK 		?= ./node_modules/.bin/npx
 SASS			?= ./.bundle/bin/sass
-SED				?= sed
+SED			?= sed
 SPHINXBUILD	 	?= ./bin/sphinx-build
 SPHINXOPTS	  	=
 UGLIFYJS		?= node_modules/.bin/uglifyjs
@@ -73,7 +74,7 @@ serve_bg: dev
 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.3.4 -c
 
 .PHONY: pot
-pot: dist/converse-no-dependencies.js
+pot: dist/converse-no-dependencies-es2015.js
 	$(GETTEXT) 2>&1 > /dev/null; exit $$?;
 
 .PHONY: po
@@ -121,7 +122,7 @@ stamp-bundler: Gemfile
 
 .PHONY: clean
 clean:
-	rm -rf node_modules .bundle stamp-npm
+	rm -rf node_modules .bundle stamp-npm stamp-bundler
 	rm dist/*.min.js
 	rm css/website.min.css
 	rm css/converse.min.css
@@ -134,10 +135,7 @@ dev: stamp-bundler stamp-npm
 ## Builds
 
 .PHONY: css
-css: dev sass/*.scss css/converse.css css/converse.min.css css/website.css css/website.min.css css/inverse.css css/inverse.min.css css/fonts.css
-
-css/inverse.css:: dev sass sass
-	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse.scss css/inverse.css
+css: dev sass/*.scss css/converse.css css/converse.min.css css/website.css css/website.min.css css/fonts.css
 
 css/converse.css:: dev sass
 	$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/converse.scss css/converse.css
@@ -158,12 +156,7 @@ watch: dev
 
 .PHONY: watchjs
 watchjs: dev
-	$(BABEL) --source-maps --watch=./src --out-dir=./builds
-
-transpile: dev src
-	$(BABEL) --source-maps --out-dir=./builds ./src
-	$(BABEL) --source-maps --out-dir=./builds ./node_modules/backbone.vdomview/backbone.vdomview.js
-	touch transpile
+	./node_modules/.bin/npx  webpack --mode=development  --watch
 
 .PHONY: logo
 logo: logo/conversejs-transparent16.png \
@@ -186,37 +179,34 @@ logo/conversejs-filled%.png:: logo/conversejs-filled.svg
 	$(OXIPNG) $@
 
 BUILDS = dist/converse.js \
-		 dist/converse.min.js \
-         dist/converse-headless.js \
-		 dist/converse-headless.min.js \
-		 dist/converse-no-dependencies.min.js \
-		 dist/converse-no-dependencies.js
-
-# dist/converse-esnext.js \
-# dist/converse-esnext.min.js \
-
-dist/converse.js: transpile src stamp-npm
-	$(RJS) -o src/build.js include=converse out=dist/converse.js optimize=none 
-dist/converse.min.js: transpile src stamp-npm
-	$(RJS) -o src/build.js include=converse out=dist/converse.min.js
-dist/converse-headless.js: transpile src stamp-npm
-	$(RJS) -o src/build.js paths.converse=src/headless include=converse out=dist/converse-headless.js optimize=none 
-dist/converse-headless.min.js: transpile src stamp-npm
-	$(RJS) -o src/build.js paths.converse=src/headless include=converse out=dist/converse-headless.min.js
-dist/converse-esnext.js: src stamp-npm
-	$(RJS) -o src/build-esnext.js include=converse out=dist/converse-esnext.js optimize=none 
-dist/converse-esnext.min.js: src stamp-npm
-	$(RJS) -o src/build-esnext.js include=converse out=dist/converse-esnext.min.js
-dist/converse-no-dependencies.js: transpile src stamp-npm
-	$(RJS) -o src/build-no-dependencies.js optimize=none out=dist/converse-no-dependencies.js
-dist/converse-no-dependencies.min.js: transpile src stamp-npm
-	$(RJS) -o src/build-no-dependencies.js out=dist/converse-no-dependencies.min.js
+	dist/converse.min.js \
+	dist/converse-headless.js \
+	dist/converse-headless.min.js \
+	dist/converse-no-dependencies.min.js \
+	dist/converse-no-dependencies.js \
+	dist/converse-no-dependencies-es2015.js
+
+dist/converse.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=development
+dist/converse.min.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=production
+dist/converse-headless.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=development --type=headless
+dist/converse-headless.min.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=production --type=headless
+dist/converse-no-dependencies.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=development --type=nodeps
+dist/converse-no-dependencies.min.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=production --type=nodeps 
+dist/converse-no-dependencies-es2015.js: src webpack.config.js stamp-npm
+	./node_modules/.bin/npx  webpack --mode=development --type=nodeps --lang=es2015
+
 
 .PHONY: dist
 dist:: build
 
 .PHONY: build
-build:: dev css transpile $(BUILDS)
+build:: dev css $(BUILDS)
 
 ########################################################################
 ## Tests

bootstrap.py

-##############################################################################
-#
-# Copyright (c) 2006 Zope Foundation and Contributors.
-# All Rights Reserved.
-#
-# This software is subject to the provisions of the Zope Public License,
-# Version 2.1 (ZPL).  A copy of the ZPL should accompany this distribution.
-# THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
-# WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-# WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
-# FOR A PARTICULAR PURPOSE.
-#
-##############################################################################
-"""Bootstrap a buildout-based project
-
-Simply run this script in a directory containing a buildout.cfg.
-The script accepts buildout command-line options, so you can
-use the -c option to specify an alternate configuration file.
-"""
-
-import os
-import shutil
-import sys
-import tempfile
-
-from optparse import OptionParser
-
-__version__ = '2015-07-01'
-# See zc.buildout's changelog if this version is up to date.
-
-tmpeggs = tempfile.mkdtemp(prefix='bootstrap-')
-
-usage = '''\
-[DESIRED PYTHON FOR BUILDOUT] bootstrap.py [options]
-
-Bootstraps a buildout-based project.
-
-Simply run this script in a directory containing a buildout.cfg, using the
-Python that you want bin/buildout to use.
-
-Note that by using --find-links to point to local resources, you can keep
-this script from going over the network.
-'''
-
-parser = OptionParser(usage=usage)
-parser.add_option("--version",
-                  action="store_true", default=False,
-                  help=("Return bootstrap.py version."))
-parser.add_option("-t", "--accept-buildout-test-releases",
-                  dest='accept_buildout_test_releases',
-                  action="store_true", default=False,
-                  help=("Normally, if you do not specify a --version, the "
-                        "bootstrap script and buildout gets the newest "
-                        "*final* versions of zc.buildout and its recipes and "
-                        "extensions for you.  If you use this flag, "
-                        "bootstrap and buildout will get the newest releases "
-                        "even if they are alphas or betas."))
-parser.add_option("-c", "--config-file",
-                  help=("Specify the path to the buildout configuration "
-                        "file to be used."))
-parser.add_option("-f", "--find-links",
-                  help=("Specify a URL to search for buildout releases"))
-parser.add_option("--allow-site-packages",
-                  action="store_true", default=False,
-                  help=("Let bootstrap.py use existing site packages"))
-parser.add_option("--buildout-version",
-                  help="Use a specific zc.buildout version")
-parser.add_option("--setuptools-version",
-                  help="Use a specific setuptools version")
-parser.add_option("--setuptools-to-dir",
-                  help=("Allow for re-use of existing directory of "
-                        "setuptools versions"))
-
-options, args = parser.parse_args()
-if options.version:
-    print("bootstrap.py version %s" % __version__)
-    sys.exit(0)
-
-
-######################################################################
-# load/install setuptools
-
-try:
-    from urllib.request import urlopen
-except ImportError:
-    from urllib2 import urlopen
-
-ez = {}
-if os.path.exists('ez_setup.py'):
-    exec(open('ez_setup.py').read(), ez)
-else:
-    exec(urlopen('https://bootstrap.pypa.io/ez_setup.py').read(), ez)
-
-if not options.allow_site_packages:
-    # ez_setup imports site, which adds site packages
-    # this will remove them from the path to ensure that incompatible versions
-    # of setuptools are not in the path
-    import site
-    # inside a virtualenv, there is no 'getsitepackages'.
-    # We can't remove these reliably
-    if hasattr(site, 'getsitepackages'):
-        for sitepackage_path in site.getsitepackages():
-            # Strip all site-packages directories from sys.path that
-            # are not sys.prefix; this is because on Windows
-            # sys.prefix is a site-package directory.
-            if sitepackage_path != sys.prefix:
-                sys.path[:] = [x for x in sys.path
-                               if sitepackage_path not in x]
-
-setup_args = dict(to_dir=tmpeggs, download_delay=0)
-
-if options.setuptools_version is not None:
-    setup_args['version'] = options.setuptools_version
-if options.setuptools_to_dir is not None:
-    setup_args['to_dir'] = options.setuptools_to_dir
-
-ez['use_setuptools'](**setup_args)
-import setuptools
-import pkg_resources
-
-# This does not (always?) update the default working set.  We will
-# do it.
-for path in sys.path:
-    if path not in pkg_resources.working_set.entries:
-        pkg_resources.working_set.add_entry(path)
-
-######################################################################
-# Install buildout
-
-ws = pkg_resources.working_set
-
-setuptools_path = ws.find(
-    pkg_resources.Requirement.parse('setuptools')).location
-
-# Fix sys.path here as easy_install.pth added before PYTHONPATH
-cmd = [sys.executable, '-c',
-       'import sys; sys.path[0:0] = [%r]; ' % setuptools_path +
-       'from setuptools.command.easy_install import main; main()',
-       '-mZqNxd', tmpeggs]
-
-find_links = os.environ.get(
-    'bootstrap-testing-find-links',
-    options.find_links or
-    ('http://downloads.buildout.org/'
-     if options.accept_buildout_test_releases else None)
-    )
-if find_links:
-    cmd.extend(['-f', find_links])
-
-requirement = 'zc.buildout'
-version = options.buildout_version
-if version is None and not options.accept_buildout_test_releases:
-    # Figure out the most recent final version of zc.buildout.
-    import setuptools.package_index
-    _final_parts = '*final-', '*final'
-
-    def _final_version(parsed_version):
-        try:
-            return not parsed_version.is_prerelease
-        except AttributeError:
-            # Older setuptools
-            for part in parsed_version:
-                if (part[:1] == '*') and (part not in _final_parts):
-                    return False
-            return True
-
-    index = setuptools.package_index.PackageIndex(
-        search_path=[setuptools_path])
-    if find_links:
-        index.add_find_links((find_links,))
-    req = pkg_resources.Requirement.parse(requirement)
-    if index.obtain(req) is not None:
-        best = []
-        bestv = None
-        for dist in index[req.project_name]:
-            distv = dist.parsed_version
-            if _final_version(distv):
-                if bestv is None or distv > bestv:
-                    best = [dist]
-                    bestv = distv
-                elif distv == bestv:
-                    best.append(dist)
-        if best:
-            best.sort()
-            version = best[-1].version
-if version:
-    requirement = '=='.join((requirement, version))
-cmd.append(requirement)
-
-import subprocess
-if subprocess.call(cmd) != 0:
-    raise Exception(
-        "Failed to execute command:\n%s" % repr(cmd)[1:-1])
-
-######################################################################
-# Import and run buildout
-
-ws.add_entry(tmpeggs)
-ws.require(requirement)
-import zc.buildout.buildout
-
-if not [a for a in args if '=' not in a]:
-    args.append('bootstrap')
-
-# if -c was provided, we push it back into args for buildout' main function
-if options.config_file is not None:
-    args[0:0] = ['-c', options.config_file]
-
-zc.buildout.buildout.main(args)
-shutil.rmtree(tmpeggs)

buildout.cfg

@@ -11,12 +11,4 @@ eggs =
     sphinx-bootstrap-theme
 
 [versions]
-docutils = 0.13.1
-Jinja2 = 2.9.5
-MarkupSafe = 0.23
-Pygments = 2.2.0
-six = 1.10.0
-setuptools = 28.6.1
-Sphinx = 1.5.2
-z3c.recipe.egg = 2.0.3
-zc.buildout = 2.5.3
+Sphinx = 1.7.5

builds/README.md

-This directory exists as a location for intermediate files generated by the
-Babel compiler, before they're bundled into distribution bundles in the
-`./dist/` directory.

css/fullpage.css

+body {
+    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #ffffff;
+    background-color: #578EA9;
+}
+.brand-heading {
+    font-size: 600%;
+    margin-left: -10%;
+}
+.icon-conversejs {
+    font-size: 88%;
+}
+.brand-heading div.content {
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    background-color: #578EA9;
+}
+.brand-heading div.content .inner-content {
+    text-align: center;
+    padding: 7%;
+}
+p.no-chats {
+    padding-right: 10%;
+    font-size: 120%;
+}

css/website.css

@@ -117,6 +117,14 @@ a:hover, a:focus {
 .outro {
   background: url("images/bgtr.svg") top right no-repeat, url("images/bgbl.svg") bottom left no-repeat, url("images/overlay.png"), linear-gradient(45deg, #384955, #655361, #85505f); }
 
+section h2 {
+  color: #E7A151; }
+section h3 {
+  color: #89B7CD; }
+section h4 {
+  color: #5CBC86;
+  font-size: 1.5em; }
+
 .brand-heading {
   font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
   font-weight: normal;
@@ -181,7 +189,17 @@ a:hover, a:focus {
   -moz-animation-timing-function: linear; }
 
 .content-section {
-  padding-top: 100px; }
+  padding-top: 100px;
+  padding-top: 100px;
+  min-height: 100vh; }
+  .content-section .privacy-policy {
+    padding-top: 2em; }
+    .content-section .privacy-policy h4 {
+      padding-top: 1.5em; }
+    .content-section .privacy-policy p {
+      font-size: 1.2em;
+      padding-bottom: 0;
+      margin-bottom: 1em; }
 
 .donate-section {
   width: 100%;
@@ -194,7 +212,6 @@ a:hover, a:focus {
 
 @media (min-width: 767px) {
   .content-section {
-    padding-top: 150px;
     padding-bottom: 50px; }
 
   .donate-section {
@@ -304,6 +321,8 @@ ul.features {
   clear: both;
   font-size: 1.4em;
   padding: 2em 0 6em 0; }
+  .sponsors ul {
+    padding: 0; }
 
 .sponsors h2 {
   text-align: center; }

dev.html

@@ -9,35 +9,33 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
-    <script src="node_modules/requirejs/require.js"></script>
-    <script src="src/config.js"></script>
+    <link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
+    <script src="dist/converse.js"></script>
 </head>
 
 <body class="reset">
 
 <script>
-    require(['converse', 'converse-omemo'], function (converse) {
-        converse.initialize({
-            auto_away: 300,
-            i18n: 'en',
-            // auto_join_rooms: [
-            //     'discuss@conference.conversejs.org',
-            //     'prosody@conference.prosody.im',
-            //     'jdev@conference.jabber.org'
-            // ],
-            // websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
-            view_mode: 'fullscreen',
-            archived_messages_page_size: '500',
-            allow_public_bookmarks: true,
-            notify_all_room_messages: [
-                'discuss@conference.conversejs.org'
-            ],
-            // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
-            bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
-            message_archiving: 'always',
-            debug: true
-        });
+    converse.initialize({
+        auto_away: 300,
+        i18n: 'en',
+        // auto_join_rooms: [
+        //     'discuss@conference.conversejs.org',
+        //     'prosody@conference.prosody.im',
+        //     'jdev@conference.jabber.org'
+        // ],
+        // websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
+        view_mode: 'fullscreen',
+        archived_messages_page_size: '500',
+        allow_public_bookmarks: true,
+        notify_all_room_messages: [
+            'discuss@conference.conversejs.org'
+        ],
+        // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
+        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+        message_archiving: 'always',
+        debug: true
     });
 </script>
 </body>

docs/source/events.rst

@@ -7,7 +7,7 @@
 Events and promises
 ===================
 
-Converse.js and its plugins emit various events which you can listen to via the
+Converse and its plugins emit various events which you can listen to via the
 :ref:`listen-grouping`.
 
 Some of these events are also available as `ES2015 Promises <http://es6-features.org/#PromiseUsage>`_,
@@ -294,6 +294,25 @@ Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_:
         // Your code here...
     });
 
+privateChatsAutoJoined
+~~~~~~~~~~~~~~~~~~~~~~
+
+Emitted once any private chats have been automatically joined as specified by
+the _`auto_join_private_chats` settings.
+
+.. code-block:: javascript
+
+    _converse.api.listen.on('privateChatsAutoJoined', function () { ... });
+
+Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_.
+
+.. code-block:: javascript
+
+    _converse.api.waitUntil('privateChatsAutoJoined').then(function () {
+        // Your code here...
+    });
+
+
 reconnecting
 ~~~~~~~~~~~~
 
@@ -311,24 +330,14 @@ have to be registered anew.
 
     _converse.api.listen.on('reconnected', function () { ... });
 
+registeredGlobalEventHandlers
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-privateChatsAutoJoined
-~~~~~~~~~~~~~~~~~~~~~~
-
-Emitted once any private chats have been automatically joined as specified by
-the _`auto_join_private_chats` settings.
+Called once Converse has registered its global event handlers (for events such
+as window resize or unload).
 
-.. code-block:: javascript
-
-    _converse.api.listen.on('privateChatsAutoJoined', function () { ... });
-
-Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_.
-
-.. code-block:: javascript
-
-    _converse.api.waitUntil('privateChatsAutoJoined').then(function () {
-        // Your code here...
-    });
+Plugins can listen to this event as cue to register their own global event
+handlers.
 
 roomsAutoJoined
 ---------------
@@ -466,6 +475,14 @@ Similar to `rosterInitialized`, but instead pertaining to reconnection. This
 event indicates that the Backbone collections representing the roster and its
 groups are now again available after converse.js has reconnected.
 
+serviceDiscovered
+~~~~~~~~~~~~~~~~~
+
+When converse.js has learned of a service provided by the XMPP server. See XEP-0030.
+
+``_converse.api.listen.on('serviceDiscovered', function (service) { ... });``
+
+
 .. _`statusInitialized`:
 
 statusInitialized
@@ -497,12 +514,12 @@ When own custom status message has changed.
 
 ``_converse.api.listen.on('statusMessageChanged', function (message) { ... });``
 
-serviceDiscovered
-~~~~~~~~~~~~~~~~~
-
-When converse.js has learned of a service provided by the XMPP server. See XEP-0030.
+streamFeaturesAdded
+~~~~~~~~~~~~~~~~~~~
 
-``_converse.api.listen.on('serviceDiscovered', function (service) { ... });``
+Emitted as soon as Converse has processed the stream features as advertised by
+the server. If you want to check whether a stream feature is supported before
+proceeding, then you'll first want to wait for this event.
 
 windowStateChanged
 ~~~~~~~~~~~~~~~~~~

docs/source/features.rst

@@ -19,7 +19,7 @@ and a private chat with a URL fragment such as
 Off-the-record encryption
 =========================
 
-Converse.js supports `Off-the-record (OTR) <https://otr.cypherpunks.ca/>`_
+Converse supports `Off-the-record (OTR) <https://otr.cypherpunks.ca/>`_
 encrypted messaging.
 
 The OTR protocol not only **encrypts your messages**, it provides ways to
@@ -38,17 +38,17 @@ secure crypto.
 For harsh but fairly valid criticism of JavaScript cryptography, read:
 `JavaScript Cryptography Considered Harmful <http://www.matasano.com/articles/javascript-cryptography/>`_.
 
-To get an idea on how this applies to OTR support in Converse.js, please read
+To get an idea on how this applies to OTR support in Converse, please read
 `my thoughts on it <https://opkode.com/media/blog/2013/11/11/conversejs-otr-support>`_.
 
 For now, suffice to say that although its useful to have OTR support in
-Converse.js in order to avoid most eavesdroppers, if you need serious
+Converse in order to avoid most eavesdroppers, if you need serious
 communications privacy, then you're much better off using native software.
 
 Notifications
 =============
 
-From version 0.8.1 Converse.js can play a sound notification when you receive a
+From version 0.8.1 Converse can play a sound notification when you receive a
 message.
 
 For more info, refer to the :ref:`play-sounds` configuration setting.
@@ -61,13 +61,10 @@ For more info, refer to the :ref:`show-desktop-notifications` configuration sett
 Multilingual Support
 ====================
 
-Converse.js is translated into multiple languages. The default build,
-``converse.min.js``, includes all languages.
-
-Languages increase the size of the Converse.js significantly.
-
-If you only need one, or a subset of the available languages, it's better to
-make a custom build which includes only those languages that you need.
+Converse is translated into multiple languages. Translations are supplied in
+JSON format and are loaded on demand. Converse will expect to find the
+translations in the ``/locales`` path of your site. This can be changed via the
+:ref:`locales-url` configuration setting.
 
 Moderating chatrooms
 ====================
@@ -103,7 +100,7 @@ Here are the different commands that may be used to moderate a chatroom:
 Passwordless login with client certificates
 ===========================================
 
-Converse.js supports the SASL-EXTERNAL authentication mechanism, which can be
+Converse supports the SASL-EXTERNAL authentication mechanism, which can be
 used together with x509 client certificates to enable passwordless login or
 even 2-factor authentication.
 

docs/source/quickstart.rst

@@ -34,8 +34,6 @@ via the *script* and *link* tags:
     <script src="https://cdn.conversejs.org/dist/converse.min.js" charset="utf-8"></script>
 
 
-.. note:: For the fullscreen :ref:`view_mode` version of converse.js, replace ``converse.min.css`` with ``inverse.min.css``.
-
 .. note:: Instead of always loading the latest version of Converse.js via the
     CDN, it's generally better to load a specific version (preferably the
     latest one), to avoid breakage when new backwards-incompatible versions are
@@ -111,19 +109,13 @@ split up into two parts, with the UI part dropped for this build.
 Fullscreen version
 ------------------
 
-Converse.js also comes in a fullscreen version (often referred to as Inverse).
+Converse.js also comes in a fullscreen version.
 A hosted version is available online at `inverse.chat <https://inverse.chat>`_.
 
 Originally this version was available as a separate build file, but 
 as of version 4.0.0 and higher, the difference between the "overlay" and the
 "fullscreen" versions of converse.js is simply a matter of configuring the 
-:ref:`view_mode` and including the right CSS file.
-
-For the default "overlay" version, ``converse.css`` is used, and for the
-"fullscreen" version ``inverse.css`` is used.
-
-We'd like to eventually not require two different CSS files, and to allow you
-to seamlessly switch between the different view modes.
+:ref:`view_mode`.
 
 To generate the headless build, run ``make dist/converse-headless.js`` and/or 
 ``make dist/converse-headless.min.js``.

fullscreen.html

@@ -3,11 +3,12 @@
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>inVerse</title>
+    <title>Converse</title>
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
     <script type="text/javascript" src="inverse-analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=5" style="border:0;" alt="" /></p></noscript>
-    <link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
     <script src="dist/converse.js"></script>
 </head>
 <body class="reset">

mockup/chatbox.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Converse.js Mockups</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
 </head>
 
 <body class="reset">

mockup/chatroom.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chatroom Fullscreen</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
 </head>
 
 <body class="reset">
@@ -23,12 +23,11 @@
             <div class="chatbox chatroom" id="chatroom">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <div class="col col-9">
+                        <div class="chatbox-title">
                             <div class="chat-title">Capulet's orchard</div>
                             <p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
                         </div>
                         <div class="chatbox-buttons row no-gutters">
-                            <a class="chatbox-btn fa fa-minus"></a>
                             <a class="chatbox-btn fa fa-close"></a>
                             <a class="chatbox-btn fa fa-wrench"></a>
                         </div>

mockup/fullscreen-login.html

@@ -6,7 +6,7 @@
     <title>Login Fullscreen</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
 </head>
 
 <body>

package.json

 {
   "name": "converse.js",
   "version": "3.3.4",
-  "description": "Browser based XMPP instant messaging client",
-  "main": "main.js",
+  "description": "Browser based XMPP chat client",
+  "main": "dist/converse.js",
   "directories": {
     "doc": "docs",
     "locale": "locale",
@@ -20,20 +20,24 @@
     "chatrooms",
     "webchat"
   ],
-  "author": "JC Brand",
+  "author": {
+    "name": "JC Brand",
+    "email": "jc@opkode.com"
+  },
   "license": "MPL-2.0",
   "bugs": {
-    "url": "https://github.com/jcbrand/converse.js/issues"
+    "url": "https://github.com/conversejs/converse.js/issues"
   },
   "engines": {
     "browser": "*"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.35",
-    "@babel/core": "^7.0.0-beta.35",
-    "@babel/preset-env": "^7.0.0-beta.35",
-    "almond": "~0.3.3",
+    "@babel/cli": "^7.0.0-beta.48",
+    "@babel/core": "^7.0.0-beta.48",
+    "@babel/preset-env": "^7.0.0-beta.48",
+    "@babel/preset-es2015": "^7.0.0-beta.49",
     "awesomplete-avoid-xss": "^1.1.2",
+    "babel-loader": "^8.0.0-beta.3",
     "backbone": "1.3.3",
     "backbone.browserStorage": "0.0.3",
     "backbone.nativeview": "^0.3.3",
@@ -48,9 +52,12 @@
     "es6-promise": "^4.1.0",
     "eslint": "4.19.1",
     "eslint-plugin-lodash": "^2.3.3",
+    "exports-loader": "^0.7.0",
     "filesize": "^3.6.1",
     "font-awesome": "^4.7.0",
+    "hellojs": "^1.16.1",
     "http-server": "^0.10.0",
+    "imports-loader": "^0.8.0",
     "install": "^0.9.5",
     "jasmine-core": "2.6.4",
     "jed": "1.1.1",
@@ -60,7 +67,10 @@
     "lodash": "4.17.4",
     "lodash-template-loader": "^2.0.0",
     "long": "^3.1.0",
+    "lodash-template-webpack-loader": "jcbrand/lodash-template-webpack-loader",
+    "minimist": "^1.2.0",
     "moment": "~> 2.19.3 ",
+    "npm": "^5.7.1",
     "otr": "0.2.16",
     "pluggable.js": "2.0.0",
     "po2json": "^0.4.4",
@@ -70,17 +80,15 @@
     "sinon": "^2.1.0",
     "sizzle": "^2.3.3",
     "snabbdom": "0.7.1",
-    "strophe.js": "1.2.14",
+    "strophe.js": "1.2.15",
     "strophejs-plugin-ping": "0.0.1",
     "strophejs-plugin-register": "0.0.1",
     "strophejs-plugin-rsm": "0.0.1",
-    "text": "requirejs/text#2.0.15",
     "uglify-es": "^3.0.24",
     "urijs": "^1.19.1",
     "wait-until-promise": "^1.0.0",
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.1.4",
     "xss": "^0.3.3"
-  },
-  "dependencies": {
-    "npm": "^5.7.1"
   }
 }

redirect.html

+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Converse</title>
+    <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
+    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
+    <script src="node_modules/hellojs/dist/hello.all.js"></script>
+</head>
+<body>
+    <div class="content">
+        <div class="inner-content">
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
+        </div>
+    </div>
+</body>
+</html>

requirements.txt

+zc.buildout==2.11.4

sass/_awesomplete.scss

-#converse-embedded-chat,
 #conversejs {
     [hidden] { display: none; }
 

sass/_chatbox.scss

 #conversejs {
+    .chatbox-navback {
+        display: none;
+    }
     .flyout {
         border-radius: $chatbox-border-radius;
-        bottom: $chatbox-hover-height;
         position: absolute;
 
         @media screen and (max-height: $mobile-landscape-height) {
@@ -38,7 +40,6 @@
         flex-wrap: nowrap;
         color: #ffffff;
         font-size: 100%;
-        height: $chat-head-height;
         margin: 0;
         padding: 0.5em;
         position: relative;
@@ -53,6 +54,11 @@
             margin-right: 0.5em;
         }
 
+        .chatbox-title {
+            .chatroom-description {
+                font-size: 80%;
+            }
+        }
         .chatbox-buttons {
             flex-direction: row-reverse;
             @include make-col-ready();
@@ -120,8 +126,6 @@
             justify-content: space-between;
             background-color: $chat-head-color;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-            height: $chat-height;
-            min-height: $chat-height/2;
             z-index: 1;
             overflow-y: scroll;
             width: 100%;
@@ -246,7 +250,6 @@
                 width: 100%;
                 border: none;
                 min-height: $chat-textarea-height;
-                max-height: $max-chat-textarea-height;
                 margin-bottom: -4px; // Not clear why this is necessar :(
                 &.spoiler {
                     height: 42px;
@@ -330,7 +333,6 @@
                         }
                         ul {
                             &.emoji-picker {
-                                height: $emoji-picker-height;
                                 overflow: scroll;
                                 padding: 0.5em;
                             }
@@ -434,33 +436,224 @@
     }
 }
 
+/* ******************* Overlay and embedded styles *************************** */
+
+#conversejs.converse-embedded,
+#conversejs.converse-overlayed {
+    .chat-head {
+        border-top-left-radius: $chatbox-border-radius;
+        border-top-right-radius: $chatbox-border-radius;
+        @media screen and (max-height: $mobile-landscape-height) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        .chatbox-title {
+            @include make-col(8);
+        }
+        .chatbox-buttons {
+            @include make-col(4);
+        }
+    }
+
+    .chatbox {
+        min-width: $overlayed-chat-width!important;
+        width: $overlayed-chat-width;
+
+        .box-flyout {
+            min-width: $overlayed-chat-width!important;
+            width: $overlayed-chat-width;
+        }
+
+        .chat-body {
+            .chat-message {
+                line-height: $line-height-large;
+                .chat-msg-author {
+                    line-height: $line-height-large;
+                }
+                .chat-msg-content {
+                    line-height: $line-height-large;
+                    .emojione {
+                        margin-bottom: -5px;
+                    }
+                }
+            }
+        }
+    }
+    .chatbox {
+        form.sendXMPPMessage {
+            .chat-toolbar {
+                li {
+                    .toolbar-menu {
+                        min-width: 235px;
+
+                        ul {
+                            &.emoji-toolbar {
+                                width: 100%;
+                                .emoji-category {
+                                    float: left;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#conversejs.converse-overlayed  {
+    .flyout {
+        bottom: $overlayed-chatbox-hover-height;
+    }
+    .box-flyout {
+        height: $overlayed-chat-height;
+        min-height: $overlayed-chat-height/2;
+    }
+    .chat-head {
+        height: $overlayed-chat-head-height;
+    }
+    .chat-textarea {
+        max-height: $overlayed-max-chat-textarea-height;
+    }
+    .emoji-picker {
+        height: $overlayed-emoji-picker-height;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+	#conversejs.converse-overlayed {
+		> .row {
+			flex-direction: column;
+
+            &.no-gutters {
+                margin: -1em;
+            }
+		}
+	}
+}
+
+/* ******************* Fullpage styles *************************** */
+
 #conversejs.converse-fullscreen  {
+    .flyout {
+        border-radius: 0;
+        border-top: 0.8em solid $chat-head-color;
+        border: $flyout-padding solid $chat-head-color;
+        bottom: 0;
+    }
     .chatbox-btn {
         font-size: $fullpage-chatbox-button-size;
+        margin: 0 0.3em;
     }
     .chat-head {
+        height: $fullpage-chat-head-height;
+        font-size: $font-size-huge;
+        padding: 0;
+        .user-custom-message {
+            font-size: 50%;
+            height: auto;
+            line-height: $line-height;
+        }
+        .chatbox-title {
+            @include make-col(10);
+        }
         .chatbox-buttons {
-            @include make-col(3);
+            @include make-col(2);
+        }
+    }
+    .chat-textarea {
+        max-height: $fullpage-max-chat-textarea-height;
+    }
+    .emoji-picker {
+        height: $fullpage-emoji-picker-height;
+    }
+
+    .chatbox {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            @include make-col(9);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(9);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(10);
+        }
+
+        .box-flyout {
+            background-color: $chat-head-color;
+            box-shadow: none;
+            height: $fullpage-chat-height;
+            min-height: $fullpage-chat-height/2;
+            width: $fullpage-chat-width;
+        }
+        .chat-body {
+            background-color: $chat-head-color;
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+
+            .chat-message {
+                line-height: $line-height;
+                font-size: $font-size-small;
+                .chat-msg-author {
+                    line-height: $line-height;
+                }
+                .chat-msg-content {
+                    line-height: $line-height;
+                    .emojione {
+                        height: $line-height;
+                        margin-bottom: -$line-height/4;
+                    }
+                }
+            }
+        }
+        .chat-content {
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+        }
+        .chat-title {
+            font-size: $font-size-huge;
+            line-height: $line-height-huge;
+        }
+        .sendXMPPMessage {
+            ul {
+                width: 100%;
+            }
+            .toggle-smiley {
+                ul {
+                    &.emoji-toolbar {
+                        .emoji-category-picker {
+                            margin-right: 5em;
+                        }
+                        .emoji-category {
+                            padding-left: 10px;
+                            padding-right: 10px;
+                        }
+                    }
+                }
+            }
         }
     }
 }
 
-@media screen and (max-width: 767px) {
+@include media-breakpoint-down(sm) {
     #conversejs:not(.converse-embedded)  {
         > .row {
             flex-direction: row-reverse;
         }
-
         #converse-login-panel {
             .converse-form {
                 padding: 3em 2em 3em;
             }
         }
-
-        .sidebar {
-            display: block;
-        }
-
         .chatbox {
             width: calc(100% - 50px);
             .row {
@@ -473,4 +666,29 @@
             }
         }
     }
+
+    #conversejs.converse-mobile,
+    #conversejs.converse-overlayed,
+    #conversejs.converse-embedded,
+    #conversejs.converse-fullscreen {
+        .chatbox {
+            .box-flyout {
+                .chatbox-navback {
+                    display: flex;
+                    @include make-col(2);
+                    .fa-arrow-left {
+                        &:before {
+                            color: white;
+                        }
+                    }
+                }
+                .chatbox-title {
+                    @include make-col(7);
+                }
+                .chatbox-buttons {
+                    @include make-col(3);
+                }
+            }
+        }
+    }
 }

sass/_controlbox.scss

 #conversejs {
+    .oauth-providers {
+        text-align: center;
+        .oauth-provider {
+            margin: 1em 0;
+
+            .oauth-login {
+                margin-left: 0;
+                color: $link-color;
+                font-size: $font-size-large;
+                &:hover {
+                    color: darken($link-color, 20%);
+                }
+                i {
+                    color: $link-color;
+                    font-size: $font-size-huge;
+                    margin-right: 0.5em;
+                }
+            }
+        }
+    }
 
     .set-xmpp-status, .xmpp-status, .roster-contacts {
         .fa-circle {
@@ -173,15 +193,6 @@
             font-weight: bold;
         }
 
-        .oauth-login {
-            margin-left: 0;
-            color: $text-color;
-            .icon-social:before {
-                font-size: $font-size-large;
-            }
-        }
-
-
         .controlbox-pane {
             .userinfo {
                 padding-bottom: 1em;
@@ -296,6 +307,7 @@
             }
 
             .switch-form {
+                text-align: center;
                 padding: 2em 0;
                 p {
                     margin-top: 0.5em;
@@ -357,7 +369,6 @@
 
             .chatbox { 
                 .box-flyout {
-                    top: -100vh;
                     margin-left: 15px; // Counteracts Bootstrap margins, but
                                        // not clear why needed...
                     left: 0;
@@ -369,10 +380,11 @@
             }
 
             #controlbox {
-                order: 0;
+                width: 100vw !important;
                 .box-flyout {
                     width: 100vw !important;
                     height: 100vh !important;
+                    margin-left: 30px;
                 }
                 .sidebar {
                     display: block;
@@ -393,7 +405,7 @@
     }
 }
 
-#conversejs:not(.converse-fullscreen) {
+#conversejs.converse-overlayed {
     #controlbox {
         order: -1;
         min-width: $controlbox-width !important;
@@ -444,3 +456,110 @@
         }
     }
 }
+
+#conversejs.converse-fullscreen,
+#conversejs.converse-mobile {
+    #controlbox {
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(2);
+        }
+
+        &.logged-out {
+            @include make-col(12);
+        }
+
+        margin: 0;
+
+        .controlbox-pane {
+            border-radius: 0;
+        }
+
+        .flyout {
+            border-radius: 0;
+        }
+
+        #converse-login-panel {
+            border-radius: 0;
+            .converse-form {
+                padding: 3em 2em 3em;
+            }
+        }
+
+        .toggle-register-login {
+            line-height: $line-height-huge;
+        }
+
+        .brand-heading-container {
+            @include make-col(12);
+            text-align: center;
+            .brand-heading {
+                font-size: 150%;
+                font-size: 600%;
+                padding: 0.7em 0 0 0;
+                opacity: 0.8;
+                color: $blue;
+            }
+            .brand-subtitle {
+                font-size: 90%;
+                padding: 0.5em;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                .brand-heading {
+                    font-size: 400%;
+                }
+            }
+        }
+
+        &.logged-out {
+            @include make-col(12);
+            @include fade-in;
+            width: 100%;
+            .box-flyout {
+                width: 100%;
+            }
+        }
+        .box-flyout {
+            border: 0;
+            width: 100%;
+            z-index: 1;
+            background-color: $controlbox-head-color;
+
+            .controlbox-head {
+                display: none;
+            }
+        }
+
+        #converse-register, #converse-login {
+            @include make-col-ready();
+            @include make-col(8);
+            @include make-col-offset(2);
+
+            @include media-breakpoint-up(sm) {
+                @include make-col(8);
+                @include make-col-offset(2);
+            }
+            @include media-breakpoint-up(md) {
+                @include make-col(8);
+                @include make-col-offset(2);
+            }
+            @include media-breakpoint-up(lg) {
+                @include make-col(6);
+                @include make-col-offset(3);
+            }
+            .title, .instructions {
+                margin: 1em 0;
+            }
+            input[type=submit],
+            input[type=button] {
+                width: auto;
+            }
+        }
+    }
+}

sass/_embedded.scss

 @import "bourbon";
-@import "converse/variables";
 #conversejs.converse-embedded {
 
     @include box-sizing(border-box);

sass/_headline.scss

@@ -18,3 +18,20 @@
     }
 }
 
+#conversejs.converse-fullscreen {
+    .chatbox.headlines {
+        .box-flyout {
+            background-color: $headline-head-color;
+        }
+        .chat-head {
+            &.chat-head-chatbox {
+                background-color: $headline-head-color;
+            }
+        }
+        .flyout {
+            border: $flyout-padding solid $headline-head-color;
+            border-top: 0.8em solid $headline-head-color;
+        }
+    }
+}
+

sass/converse/_minimized_chats.scss → sass/_minimized_chats.scss

-#conversejs:not(.fullscreen) {
+#conversejs.converse-overlayed {
     #minimized-chats {
         order: 100;
 

sass/converse/_core.scss

-#conversejs {
-    > .row {
-        flex-direction: row-reverse;
-    }
-}

sass/inverse/_roster.scss

-#conversejs {
-    #converse-roster {
-        padding-bottom: 3em;
-    }
-}