Add connection feedback on the controlbox.

Now that the toggle is hidden when the controlbox is visible.

converse.js

@@ -1158,9 +1158,7 @@
             },
 
             clearMessages: function (ev) {
-                if (ev && ev.preventDefault) {
-                    ev.preventDefault();
-                }
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
                 var result = confirm(__("Are you sure you want to clear the messages from this chat box?"));
                 if (result === true) {
                     this.$el.find('.chat-content').empty();
@@ -3615,7 +3613,7 @@
                 var $form = this.$el.find('#converse-login');
                 var $button = $form.find('input[type=submit]');
                 if ($button.length) {
-                    $button.show().siblings('span').remove();
+                    $button.show().siblings('span.spinner.login-submit').remove();
                 }
             },
 
@@ -3637,6 +3635,7 @@
             },
 
             authenticate: function (ev) {
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
                 var $form = $(ev.target),
                     $jid_input = $form.find('input[name=jid]'),
                     jid = $jid_input.val(),

css/converse.css

@@ -746,6 +746,11 @@ input.error {
 #conversejs .conn-feedback.error {
   color: red;
 }
+#converse-login .conn-feedback {
+  width: 100%;
+  text-align: center;
+  display: block;
+}
 #conversejs .chat-message-error {
   color: #76797C;
   font-size: 90%;
@@ -1088,15 +1093,16 @@ dl.add-converse-contact {
 }
 #conversejs form#converse-login {
   background: white;
-  padding: 2em 0 0.3em 0.5em;
+  padding: 2em 0.5em;
 }
 #conversejs form#converse-login input {
-  display: block;
-  width: 90%;
+  width: 100%;
+}
+#conversejs form#converse-login label {
+  margin-top: 0.5em;
 }
 #conversejs form#converse-login .login-submit {
   margin-top: 1em;
-  width: auto;
 }
 #conversejs form.set-xmpp-status {
   background: none;

index.html

@@ -226,7 +226,7 @@
             allow_otr: true,
             auto_list_rooms: false,
             auto_subscribe: false,
-            bosh_service_url: 'http://devbox:8890/http-bind', // Please use this connection manager only for testing purposes
+            bosh_service_url: 'https://bind.conversejs.org', // Please use this connection manager only for testing purposes
             debug: true ,
             hide_muc_server: false,
             i18n: locales['en'], // Refer to ./locale/locales.js to see which locales are supported

less/converse.less

@@ -808,6 +808,12 @@ input.error {
     color: red;
 }
 
+#converse-login .conn-feedback {
+    width: 100%;
+    text-align: center;
+    display: block;
+}
+
 #conversejs .chat-message-error {
     color:#76797C;
     font-size:90%;
@@ -1206,17 +1212,19 @@ dl.add-converse-contact {
 
 #conversejs form#converse-login {
     background: white;
-    padding: 2em 0 0.3em 0.5em;
+    padding: 2em 0.5em;
 }
 
 #conversejs form#converse-login input {
-    display: block;
-    width: 90%;
+    width: 100%;
+}
+
+#conversejs form#converse-login label {
+    margin-top: 0.5em;
 }
 
 #conversejs form#converse-login .login-submit {
     margin-top: 1em;
-    width: auto;
 }
 
 #conversejs form.set-xmpp-status {

mockup/index.html

@@ -40,6 +40,7 @@
                     <label>Password:</label><input type="password" id="password">
                     <input class="login-submit" type="submit" value="Log In">
                 </form>
+                <span class="conn-feedback"></span>
             </div>
         </div>
     </div>
@@ -375,7 +376,7 @@
 
     <div id="minimized-chats">
         <a id="toggle-minimized-chats" href="#">
-            <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
+            Minimized <span id="minimized-count">(0)</span>
             <span class="unread-message-count" href="#" style="display:block">322</span>
         </a>
         <div class="minimized-chats-flyout">

src/templates/login_panel.html

 <form id="converse-login">
     <label>{{label_username}}</label>
-    <input type="username" name="jid">
+    <input type="username" name="jid" placeholder="Username">
     <label>{{label_password}}</label>
-    <input type="password" name="password">
+    <input type="password" name="password" placeholder="Password">
     <input class="login-submit" type="submit" value="{{label_login}}">
+    <span class="conn-feedback"></span>
 </form">