Add validation message for an invalid JID in the login form

CHANGES.md

@@ -5,6 +5,7 @@
 - Don't hang indefinitely and provide nicer error messages when a connection
   can't be established.
 - Remove `Login` and `Registration` tabs and consolidate into one panel.
+- Add validation message for an invalid JID in the login form.
 - #828 Add routing for the `#converse-login` and `#converse-register` URL
   fragments, which will render the registration and login forms respectively.
 

css/converse.css

@@ -1364,6 +1364,9 @@
       #converse-embedded-chat form.pure-form.converse-form .form-help:hover,
       #conversejs form.pure-form.converse-form .form-help:hover {
         color: #777; }
+      #converse-embedded-chat form.pure-form.converse-form .form-help.error,
+      #conversejs form.pure-form.converse-form .form-help.error {
+        color: #A53214; }
   #converse-embedded-chat form.pure-form.converse-centered-form,
   #conversejs form.pure-form.converse-centered-form {
     text-align: center;
@@ -1957,6 +1960,8 @@
       font-size: 120%; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
+  #conversejs #controlbox .oauth-login {
+    color: #777; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin: 2em 0; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {

css/inverse.css

@@ -1364,6 +1364,9 @@
       #converse-embedded-chat form.pure-form.converse-form .form-help:hover,
       #conversejs form.pure-form.converse-form .form-help:hover {
         color: #777; }
+      #converse-embedded-chat form.pure-form.converse-form .form-help.error,
+      #conversejs form.pure-form.converse-form .form-help.error {
+        color: #A53214; }
   #converse-embedded-chat form.pure-form.converse-centered-form,
   #conversejs form.pure-form.converse-centered-form {
     text-align: center;
@@ -2026,6 +2029,8 @@ body {
       font-size: 120%; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
+  #conversejs #controlbox .oauth-login {
+    color: #777; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin: 2em 0; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -2340,7 +2345,8 @@ body {
     #conversejs #controlbox.logged-out .box-flyout {
       width: 100%; }
       #conversejs #controlbox.logged-out .box-flyout .controlbox-head {
-        background-color: white; }
+        background-color: white;
+        height: 0; }
   #conversejs #controlbox .box-flyout {
     border: 0;
     min-width: 250px;
@@ -2348,7 +2354,7 @@ body {
     z-index: 1;
     background-color: #578EA9; }
   #conversejs #controlbox .controlbox-head {
-    height: 0;
+    height: 63px;
     padding: 6px 0 6px 0;
     margin-top: 0.5em; }
   #conversejs #controlbox #converse-register,

sass/_controlbox.scss

@@ -140,6 +140,9 @@
         .toggle-register-login {
             font-weight: bold;
         }
+        .oauth-login {
+            color: $text-color;
+        }
 
         #converse-register, #converse-login {
             margin: 2em 0;

sass/_core.scss

@@ -235,6 +235,9 @@
                 &:hover {
                     color: $text-color;
                 }
+                &.error {
+                    color: $error-color;
+                }
             }
         }
         &.pure-form.converse-centered-form {

sass/inverse/_controlbox.scss

@@ -36,6 +36,7 @@
                 width: 100%;
                 .controlbox-head {
                     background-color: white;
+                    height: 0;
                 }
             }
         }
@@ -47,7 +48,7 @@
             background-color: $controlbox-head-color;
         }
         .controlbox-head {
-            height: 0;
+            height: $controlbox-head-height;
             padding: 6px 0 6px 0;
             margin-top: 0.5em;
         }

src/converse-controlbox.js

@@ -463,6 +463,7 @@
                         return;
                     }
                     const $jid_input = $form.find('input[name=jid]');
+                    const $jid_error_msg = $form.find('.invalid-jid-msg');
                     const $pw_input = $form.find('input[name=password]');
                     const password = $pw_input.val();
 
@@ -475,6 +476,9 @@
                             _.filter(jid.split('@')).length < 2)) {
                         errors = true;
                         $jid_input.addClass('error');
+                        $jid_error_msg.removeClass('hidden');
+                    } else {
+                        $jid_error_msg.addClass('hidden');
                     }
 
                     if (!password && _converse.authentication !== _converse.EXTERNAL)  {

src/converse-register.js

@@ -63,12 +63,13 @@
             LoginPanel: {
 
                 initialize: function (cfg) {
-                    const _converse = this.__super__._converse;
+                    const { _converse } = this.__super__;
                     this.__super__.initialize.apply(this, arguments);
-                    this.registerlink = new _converse.RegisterLink();
-                    const div = document.createElement('div');
-                    div.innerHTML = tpl_register_link({'__': _converse.__})
-                    this.el.appendChild(div);
+                    if (_converse.allow_registration) {
+                        const div = document.createElement('div');
+                        div.innerHTML = tpl_register_link({'__': _converse.__})
+                        this.el.appendChild(div);
+                    }
                 }
             },
 
@@ -165,18 +166,6 @@
             const router = new _converse.RegistrationRouter();
 
 
-            _converse.RegisterLink = Backbone.View.extend({
-                tagName: 'div',
-
-                initialize () {
-                    this.render();
-                },
-
-                render () {
-                    return this;
-                }
-            });
-
             _converse.RegisterPanel = Backbone.View.extend({
                 tagName: 'div',
                 id: "converse-register-panel",

src/templates/controlbox.html

@@ -1,5 +1,6 @@
 <div class="flyout box-flyout">
     <div class="chat-head controlbox-head">
+        <ul id="controlbox-tabs"></ul>
         {[ if (!sticky_controlbox) { ]}
             <a class="chatbox-btn close-chatbox-button icon-close"></a>
         {[ } ]}

src/templates/login_panel.html

@@ -1,4 +1,4 @@
-<div class="conn-feedback">
+<div class="conn-feedback hidden">
     <p class="feedback-subject hidden {{{ conn_feedback_class }}}">{{{ conn_feedback_subject }}}</p>
     <p class="feedback-message hidden {{{ conn_feedback_class }}}">{{{ conn_feedback_message }}}</p>
 </div>
@@ -12,6 +12,7 @@
 
         {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
             <label>{{{label_username}}}</label>
+            <p class="form-help invalid-jid-msg error hidden">{{{_('Please enter a valid XMPP address')}}}</p>
             <input type="text" name="jid" placeholder="{{{placeholder_username}}}">
             {[ if (authentication !== EXTERNAL) { ]}
                 <label>{{{label_password}}}</label>