Allow to use Websocket connection at the login form

app/controllers/about-controller.js

@@ -5,6 +5,6 @@ angApp.controller('AboutController', function($scope, AppStateService, AppInfo)
     $scope.appInfo = AppInfo
 
     $scope.closeAbout = () => {
-        AppStateService.set(AppStateService.previousState)
+        AppStateService.set(AppStateService.APP_STATE_DEFAULT)
     }
 })

app/controllers/login-controller.js

@@ -2,8 +2,14 @@ let angApp = require(__dirname+'/../init')
 
 angApp.controller('LoginController', function($scope, ChimeVerseService, CredentialsServise) {
 
+    $scope.help = {}
+
+    $scope.showHelp = (item) => {
+        $scope.help[item] = typeof $scope.help[item] === 'undefined' ? true : !$scope.help[item];
+    }
+
     $scope.addAccountAndLoginAction = () => {
-        CredentialsServise.addCredentials($scope.credentials.bosh,
+        CredentialsServise.addCredentials($scope.credentials.connectionManager,
             $scope.credentials.login,
             $scope.credentials.password
         )

app/services/chimeverse-service.js

@@ -19,42 +19,47 @@ angApp.factory('ChimeVerseService', ($window, $timeout, CredentialsServise, Syst
         let credentials = CredentialsServise.getCredentials()
         credentials.then((result) => {
             let remove = CredentialsServise.removeCredentials(result.login)
-            console.log('Remove credential on logout')
+            console.log('Remove credentials on logout')
             remove.then(() => {
                 AppStateService.set(AppStateService.APP_STATE_LOGIN)
             })
         })
     }
 
-    chimeverseService.initConverse = (bosh, login, password) => {
+    chimeverseService.initConverse = (connectionManager, login, password) => {
         AppStateService.set(AppStateService.APP_STATE_DEFAULT) // Always set to default state before init
         chimeversePlugin.register(login)
         let lang = navigator.language
         let allowBookmarks = SettingsService.get('allowBookmarks')
         let omemoDefault = SettingsService.get('omemoDefault')
         let xmppResource = '.' + (Math.random().toString(36)+'00000000000000000').slice(2, 7); // Generate 5 char unique str
+        let conversejsParams = {
+            allow_bookmarks: allowBookmarks,
+            auto_login: true,
+            auto_reconnect: true,
+            // debug: true,
+            i18n: lang,
+            jid: login + '/Chimeverse'+xmppResource,
+            omemo_default: omemoDefault,
+            password: password,
+            priority: 50,
+            view_mode: 'embedded',
+            whitelisted_plugins: ['chimeVerse'],
+        }
+        if (connectionManager.startsWith('ws')) {
+            conversejsParams.websocket_url = connectionManager
+        } else {
+            conversejsParams.bosh_service_url = connectionManager
+        }
         $timeout(() => {
-            converse.initialize({
+            converse.initialize(conversejsParams)
-                allow_bookmarks: allowBookmarks,
-                auto_login: true,
-                auto_reconnect: true,
-                bosh_service_url: bosh,
-                // debug: true,
-                i18n: lang,
-                jid: login + '/Chimeverse'+xmppResource,
-                omemo_default: omemoDefault,
-                password: password,
-                priority: 50,
-                view_mode: 'embedded',
-                whitelisted_plugins: ['chimeVerse'],
-            })
         }, 50)
     }
 
     chimeverseService.getCredentialsAndLogin = () => {
         let credentials = CredentialsServise.getCredentials()
         credentials.then((result) => {
-            chimeverseService.initConverse(result.bosh, result.login, result.password)
+            chimeverseService.initConverse(result.connectionManager, result.login, result.password)
         }, (error) => {
             AppStateService.set(AppStateService.APP_STATE_LOGIN)
         })

app/services/credentials-service.js

@@ -12,7 +12,7 @@ angApp.factory('CredentialsServise', () => {
         credentials.login = settings.get('login')
         let promise = new Promise((resolve, reject) => {
             if (credentials.login) {
-                credentials.bosh = settings.get('bosh')
+                credentials.connectionManager = settings.get('connectionManager')
                 credentials.xmppService = credentials.login.split('@').pop()
                 let password = keytar.getPassword(credentials.xmppService, credentials.login)
                 password.then((result) => {
@@ -27,9 +27,9 @@ angApp.factory('CredentialsServise', () => {
         return promise
     }
 
-    credentialsService.addCredentials = (bosh, login, password) => {
+    credentialsService.addCredentials = (connectionManager, login, password) => {
         let xmppService = login.split('@').pop()
-        settings.set('bosh', bosh)
+        settings.set('connectionManager', connectionManager)
         settings.set('login', login)
         keytar.setPassword(xmppService, login, password)
     }
@@ -40,7 +40,7 @@ angApp.factory('CredentialsServise', () => {
         let promise = new Promise((resolve, reject) => {
             passwordDelete.then((result) => {
                 settings.delete('login')
-                settings.delete('bosh')
+                settings.delete('connectionManager')
                 resolve()
             }, (error) => {
                 reject(error)

app/services/settings-service.js

@@ -83,6 +83,11 @@ angApp.factory('SettingsService', () => {
      */
     settingsService.initDefaults = () => {
         iterateSettings(saveDefault)
+        // Logout for versions with BOSH only
+        if (electronSettings.has('bosh')) {
+            electronSettings.delete('bosh')
+            electronSettings.delete('login')
+        }
     }
 
     settingsService.get = (key) => {

app/views/login/page.html

@@ -5,19 +5,29 @@
         <form name="accountForm" ng-controller="LoginController">
             <div class="login-form__wrapper">
                 <div class="login-form__input-group">
-                    <span class="oi" data-glyph="link-intact"></span>
+                    <span class="group-prepend oi" data-glyph="link-intact"></span>
-                    <input ng-model="credentials.bosh" class="login-form__input" type="text" placeholder="Bosh service url" required>
+                    <input ng-model="credentials.connectionManager" class="login-form__input login-form__input--with-append" type="text" placeholder="Connection manager url" required>
+                    <span class="group-append--backgrounded oi" data-glyph="info" ng-click="showHelp('connectionManager')"></span>
+                </div>
+                <div class="login-form__input-help" ng-show="help.connectionManager == true"">
+                    <div>
+                        Should be a
+                        <a href="https://m.conversejs.org/docs/html/setup.html#bosh-section" target="_blank">BOSH service</a>
+                         or a
+                        <a href="https://m.conversejs.org/docs/html/setup.html#websocket-section" target="_blank">Websocket</a>
+                         URL
+                    </div>
                 </div>
             </div>
             <div class="login-form__wrapper">
                 <div class="login-form__input-group">
-                    <span class="oi" data-glyph="person"></span>
+                    <span class="group-prepend oi" data-glyph="person"></span>
                     <input ng-model="credentials.login" class="login-form__input" type="text" placeholder="jid@jabber.org" required>
                 </div>
             </div>
             <div class="login-form__wrapper">
                 <div class="login-form__input-group">
-                    <span class="oi" data-glyph="lock-locked"></span>
+                    <span class="group-prepend oi" data-glyph="lock-locked"></span>
                     <input ng-model="credentials.password" class="login-form__input" type="password" placeholder="Password" required>
                 </div>
             </div>

resources/css/page-login.css

@@ -41,12 +41,21 @@
     border: 1px solid #aaa;
 }
 
-.login-form__input-group span {
+.login-form__input-group .group-prepend {
     position: absolute;
     left: 15px;
     top: 12px;
 }
 
+.login-form__input-group .group-append--backgrounded {
+    background: #f2f2f2;
+    cursor: pointer;
+    padding: 12px;
+    position: absolute;
+    right: 0px;
+    top: 0  px;
+}
+
 .login-form__input {
     border: 0px;
     color: #222;
@@ -57,7 +66,16 @@
 }
 
 .login-form__input::placeholder { /* Most modern browsers support this now. */
-    color:  #ddd;
+    color:  #ccc;
+ }
+
+ .login-form__input--with-append {
+    width: 260px;
+ }
+
+ .login-form__input-help {
+    font-size: 13px;
+    margin: 4px;
  }
 
  .login-form__button {