Remove `Login` and `Registration` tabs and consolidate into one panel

CHANGES.md

@@ -4,6 +4,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.
 
 ## 3.2.1 (2017-08-29)
 

css/converse.css

@@ -1044,7 +1044,7 @@
     padding: 0.5em 1em;
     color: #444;
     /* rgba not supported (IE 8) */
-    color: rgba(0, 0, 0, 0.8);
+    color: rgba(0, 0, 0, 0.6);
     /* rgba supported */
     border: 1px solid #999;
     /*IE 6/7/8*/
@@ -1983,6 +1983,15 @@
       font-size: 85%; }
       #conversejs #controlbox #converse-register .instructions:hover {
         color: #777; }
+  #conversejs #controlbox .conn-feedback {
+    padding-top: 2em; }
+    #conversejs #controlbox .conn-feedback p {
+      color: #578EA9;
+      padding-bottom: 0.5em; }
+      #conversejs #controlbox .conn-feedback p.feedback-subject.error {
+        font-weight: bold; }
+      #conversejs #controlbox .conn-feedback p.error {
+        color: #A53214; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin-top: 2em; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -1990,13 +1999,6 @@
       white-space: normal; }
     #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
       color: #3AA569; }
-    #conversejs #controlbox #converse-register .conn-feedback p, #conversejs #controlbox #converse-login .conn-feedback p {
-      color: #578EA9;
-      padding-bottom: 0.5em; }
-      #conversejs #controlbox #converse-register .conn-feedback p.feedback-subject.error, #conversejs #controlbox #converse-login .conn-feedback p.feedback-subject.error {
-        font-weight: bold; }
-      #conversejs #controlbox #converse-register .conn-feedback p.error, #conversejs #controlbox #converse-login .conn-feedback p.error {
-        color: #A53214; }
     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
       width: 100%;
       margin: 0.5em 0; }

css/inverse.css

@@ -1044,7 +1044,7 @@
     padding: 0.5em 1em;
     color: #444;
     /* rgba not supported (IE 8) */
-    color: rgba(0, 0, 0, 0.8);
+    color: rgba(0, 0, 0, 0.6);
     /* rgba supported */
     border: 1px solid #999;
     /*IE 6/7/8*/
@@ -2051,6 +2051,15 @@ body {
       font-size: 85%; }
       #conversejs #controlbox #converse-register .instructions:hover {
         color: #777; }
+  #conversejs #controlbox .conn-feedback {
+    padding-top: 2em; }
+    #conversejs #controlbox .conn-feedback p {
+      color: #578EA9;
+      padding-bottom: 0.5em; }
+      #conversejs #controlbox .conn-feedback p.feedback-subject.error {
+        font-weight: bold; }
+      #conversejs #controlbox .conn-feedback p.error {
+        color: #A53214; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin-top: 2em; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -2058,13 +2067,6 @@ body {
       white-space: normal; }
     #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
       color: #3AA569; }
-    #conversejs #controlbox #converse-register .conn-feedback p, #conversejs #controlbox #converse-login .conn-feedback p {
-      color: #578EA9;
-      padding-bottom: 0.5em; }
-      #conversejs #controlbox #converse-register .conn-feedback p.feedback-subject.error, #conversejs #controlbox #converse-login .conn-feedback p.feedback-subject.error {
-        font-weight: bold; }
-      #conversejs #controlbox #converse-register .conn-feedback p.error, #conversejs #controlbox #converse-login .conn-feedback p.error {
-        color: #A53214; }
     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
       width: 100%;
       margin: 0.5em 0; }
@@ -2351,16 +2353,21 @@ body {
   width: 200px;
   float: left;
   margin: 0; }
-  #conversejs #controlbox #login-dialog .brand-heading, #conversejs #controlbox #register .brand-heading {
+  #conversejs #controlbox #login-dialog .brand-heading {
     font-size: 600%;
-    margin: 10% 0 0 0;
+    margin: 0.5em 0 0 0;
+    opacity: 0.8;
     color: #387592; }
-  #conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form {
-    margin: 4em 30% 0 30%; }
+  #conversejs #controlbox #login-dialog .brand-subtitle {
+    font-size: 90%; }
+  #conversejs #controlbox #login-dialog .register-account {
+    font-weight: bold; }
   #conversejs #controlbox.fullscreen {
     width: 100%; }
     #conversejs #controlbox.fullscreen .box-flyout {
       width: 100%; }
+      #conversejs #controlbox.fullscreen .box-flyout .controlbox-head {
+        background-color: white; }
   #conversejs #controlbox .box-flyout {
     border: 0;
     min-width: 250px;
@@ -2371,18 +2378,16 @@ body {
     height: 63px;
     padding: 6px 0 6px 0;
     margin-top: 0.5em; }
-  #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
-    margin: 30%;
-    margin-top: 15%; }
-    #conversejs #controlbox #converse-register #available-chatrooms, #conversejs #controlbox #converse-login #available-chatrooms {
-      padding: 0 1em 2em 1em; }
-    #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
-      margin: 1em 0; }
-    #conversejs #controlbox #converse-register input[type=submit],
-    #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
-    #conversejs #controlbox #converse-login input[type=button] {
-      width: auto;
-      margin: 1.5em 1em 0 0; }
+  #conversejs #controlbox #converse-register {
+    margin: 4em 30% 0 30%; }
+  #conversejs #controlbox #converse-login {
+    margin: 2em 30% 0 30%; }
+  #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
+    margin: 1em 0; }
+  #conversejs #controlbox #converse-register input[type=submit],
+  #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
+  #conversejs #controlbox #converse-login input[type=button] {
+    width: auto; }
   #conversejs #controlbox #controlbox-tabs {
     /* single tab */ }
     #conversejs #controlbox #controlbox-tabs li {

sass/_controlbox.scss

@@ -104,6 +104,20 @@
             }
         }
 
+        .conn-feedback {
+            padding-top: 2em;
+            p {
+                color: $controlbox-head-color;
+                padding-bottom: 0.5em;
+                &.feedback-subject.error {
+                    font-weight: bold;
+                }
+                &.error {
+                    color: $error-color;
+                }
+            }
+        }
+
         #converse-register, #converse-login {
             margin-top: 2em;
             .login-anon {
@@ -113,18 +127,6 @@
             .save-submit {
                 color: $save-button-color;
             }
-            .conn-feedback {
-                p {
-                    color: $controlbox-head-color;
-                    padding-bottom: 0.5em;
-                    &.feedback-subject.error {
-                        font-weight: bold;
-                    }
-                    &.error {
-                        color: $error-color;
-                    }
-                }
-            }
             input {
                 width: 100%;
                 margin: 0.5em 0;

sass/inverse/_controlbox.scss

@@ -5,14 +5,18 @@
         float: left;
         margin: 0;
 
-        #login-dialog, #register {
+        #login-dialog {
             .brand-heading {
                 font-size: 600%;
-                margin: 10% 0 0 0;
+                margin: 0.5em 0 0 0;
+                opacity: 0.8;
                 color: $blue;
             }
-            .converse-form {
-                margin: 4em 30% 0 30%;
+            .brand-subtitle {
+                font-size: 90%;
+            }
+            .register-account {
+                font-weight: bold;
             }
         }
 
@@ -20,6 +24,9 @@
             width: 100%;
             .box-flyout {
                 width: 100%;
+                .controlbox-head {
+                    background-color: white;
+                }
             }
         }
         .box-flyout {
@@ -34,19 +41,19 @@
             padding: 6px 0 6px 0;
             margin-top: 0.5em;
         }
+        #converse-register {
+            margin: 4em 30% 0 30%;
+        }
+        #converse-login {
+            margin: 2em 30% 0 30%;
+        }
         #converse-register, #converse-login {
-            margin: 30%;
-            margin-top: 15%;
-            #available-chatrooms {
-                padding: 0 1em 2em 1em;
-            }
             .title, .instructions, label {
                 margin: 1em 0;
             }
             input[type=submit],
             input[type=button] {
                 width: auto;
-                margin: 1.5em 1em 0 0;
             }
         }
         #controlbox-tabs {

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;

src/converse-controlbox.js

@@ -20,7 +20,6 @@
             "tpl!controlbox",
             "tpl!controlbox_toggle",
             "tpl!login_panel",
-            "tpl!login_tab",
             "tpl!search_contact",
             "tpl!status_option",
             "converse-chatview",
@@ -40,7 +39,6 @@
             tpl_controlbox,
             tpl_controlbox_toggle,
             tpl_login_panel,
-            tpl_login_tab,
             tpl_search_contact,
             tpl_status_option
         ) {
@@ -269,17 +267,6 @@
                     return this;
                 },
 
-                showLoginPanel () {
-                    if (!_.isUndefined(this.loginpanel)) {
-                        this.renderLoginPanel();
-                    } else {
-                        this.loginpanel.$el.find('input#jid').focus();
-                        if (!this.loginpanel.$el.is(':visible')) {
-                            this.loginpanel.$el.show();
-                        }
-                    }
-                },
-
                 renderLoginPanel () {
                     this.loginpanel = new _converse.LoginPanel({
                         '$parent': this.$el.find('.controlbox-panes'),
@@ -404,20 +391,18 @@
                             'conn_feedback_class': _converse.connfeedback.get('klass'),
                             'conn_feedback_subject': _converse.connfeedback.get('subject'),
                             'conn_feedback_message': _converse.connfeedback.get('message'),
-                            'label_username': __('XMPP Username:'),
+                            'label_username': __('Jabber ID:'),
                             'label_password': __('Password:'),
                             'label_anon_login': __('Click here to log in anonymously'),
                             'label_login': __('Log In'),
-                            'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@server'),
+                            'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
                             'placeholder_password': __('password')
                         })
                     ));
-                    this.$tabs = cfg.$parent.parent().find('#controlbox-tabs');
                     _converse.connfeedback.on('change', this.showConnectionFeedback, this);
                 },
 
                 render () {
-                    this.$tabs.append(tpl_login_tab({label_sign_in: __('Sign in')}));
                     this.$el.find('input#jid').focus();
                     if (!this.$el.is(':visible')) {
                         this.$el.show();
@@ -738,7 +723,7 @@
                     if (!jid || _.filter(jid.split('@')).length < 2) {
                         this.el.querySelector('.search-xmpp div').innerHTML =
                             this.generateAddContactHTML({
-                                error_message: __('Please enter a valid XMPP username'),
+                                error_message: __('Please enter a valid XMPP address'),
                                 label_contact_username: __('e.g. user@example.org'),
                                 label_add: __('Add'),
                                 value: jid
@@ -858,7 +843,7 @@
                 const view = _converse.chatboxviews.get('controlbox');
                 view.model.set({connected:false});
                 view.$('#controlbox-tabs').empty();
-                view.showLoginPanel();
+                view.renderLoginPanel();
             };
             _converse.on('disconnected', disconnect);
 

src/converse-inverse.js

@@ -63,20 +63,11 @@
                     return this;
                 },
 
-                renderRegistrationPanel () {
-                    this.__super__.renderRegistrationPanel.apply(this, arguments);
-                    if (this.__super__._converse.allow_registration) {
-                        const el = document.getElementById('converse-register');
-                        el.parentNode.insertBefore(createBrandHeadingElement(), el);
-                    }
-                    return this;
-                },
-
                 renderLoginPanel () {
                     this.__super__.renderLoginPanel.apply(this, arguments);
                     this.el.classList.add("fullscreen");
                     const el = document.getElementById('converse-login');
-                    el.parentNode.insertBefore(createBrandHeadingElement(), el);
+                    el.parentNode.insertBefore(createBrandHeadingElement(), el.parentNode.firstChild);
                     return this;
                 }
             },

src/converse-register.js

@@ -127,7 +127,6 @@
                 initialize (cfg) {
                     this.reset();
                     this.$parent = cfg.$parent;
-                    this.$tabs = cfg.$parent.parent().find('#controlbox-tabs');
                     this.registerHooks();
                 },
 
@@ -144,7 +143,6 @@
                             'domain_placeholder': _converse.domain_placeholder
                         })
                     ));
-                    this.$tabs.append(tpl_register_tab({label_register: __('Register')}));
                     return this;
                 },
 

src/templates/brand_heading.html

@@ -1,4 +1,4 @@
 <span>
     <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
-    <p><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+    <p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
 <span>

src/templates/login_panel.html

@@ -1,11 +1,12 @@
+<div class="conn-feedback">
+    <p class="feedback-subject {{ conn_feedback_class }}">{{ conn_feedback_subject }}</p>
+    <p class="feedback-message {{ conn_feedback_class }}">{{ conn_feedback_message }} </p>
+</div>
+
 <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
     {[ if (auto_login) { ]}
         <span class="spinner login-submit"/>
     {[ } ]}
-    <div class="conn-feedback">
-        <p class="feedback-subject {{ conn_feedback_class }}">{{ conn_feedback_subject }}</p>
-        <p class="feedback-message {{ conn_feedback_class }}">{{ conn_feedback_message }} </p>
-    </div>
     {[ if (!auto_login) { ]}
         {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
             <label>{{{label_username}}}</label>
@@ -24,3 +25,7 @@
         {[ } ]}
     {[ } ]}
 </form>
+
+<form class="pure-form pure-form-stacked converse-form" id="converse-register" method="post">
+    <p>Don't have a chat account? You can <a class="register-account">register an account</a></p>
+</form>