Update the login form with markup from bootstrap mockup

css/converse.css

@@ -5115,7 +5115,7 @@ body.reset {
 #conversejs > .row {
   flex-direction: row-reverse; }
 
-#conversejs label {
+#conversejs #user-profile-modal label {
   font-weight: bold; }
 
 #converse-embedded-chat .flyout,
@@ -5590,7 +5590,7 @@ body.reset {
 @media screen and (max-width: 767px) {
   #conversejs > .row {
     flex-direction: row-reverse; }
-  #conversejs #login-dialog .converse-form {
+  #conversejs #converse-login-panel .converse-form {
     padding: 3em 2em 3em; }
   #conversejs .sidebar {
     display: block; }
@@ -5763,9 +5763,9 @@ body.reset {
     text-align: center; }
   #conversejs #controlbox .brand-heading-container .brand-name {
     font-size: 120%; }
-  #conversejs #controlbox #login-dialog {
+  #conversejs #controlbox #converse-login-panel {
     flex-direction: column; }
-    #conversejs #controlbox #login-dialog .brand-heading {
+    #conversejs #controlbox #converse-login-panel .brand-heading {
       color: #578EA9; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
@@ -5774,6 +5774,10 @@ body.reset {
     color: #777; }
     #conversejs #controlbox .oauth-login .icon-social:before {
       font-size: 16px; }
+  #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
+    width: 100%;
+    text-align: center;
+    margin: 0 auto 1em auto; }
   #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
     text-align: center; }
   #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -5783,7 +5787,7 @@ body.reset {
     color: #3AA569; }
   #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
     width: 100%;
-    margin: 1em 0; }
+    margin: 0 0 2em 0; }
   #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
     display: block;
     font-weight: normal;
@@ -5923,10 +5927,6 @@ body.reset {
       padding-bottom: 2em; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
         margin-top: 0.5em; }
-    #conversejs #controlbox .controlbox-pane label {
-      font-size: 14px;
-      font-weight: bold;
-      height: auto; }
     #conversejs #controlbox .controlbox-pane dd {
       margin-left: 0;
       margin-bottom: 0; }

css/inverse.css

@@ -5159,19 +5159,13 @@ body {
     margin-left: 1em;
     display: inline;
     margin-bottom: 2em; }
-  #conversejs.fullscreen form.converse-form input[type=text],
-  #conversejs.fullscreen form.converse-form input[type=password],
-  #conversejs.fullscreen form.converse-form input[type=number],
-  #conversejs.fullscreen form.converse-form input[type=button],
-  #conversejs.fullscreen form.converse-form input[type=submit] {
-    height: 2.2em; }
   #conversejs.fullscreen form.converse-form input[type=button],
   #conversejs.fullscreen form.converse-form input[type=submit] {
     padding-left: 1em;
     padding-right: 1em;
     margin-right: 1em; }
 
-#conversejs label {
+#conversejs #user-profile-modal label {
   font-weight: bold; }
 
 #converse-embedded-chat .flyout,
@@ -5646,7 +5640,7 @@ body {
 @media screen and (max-width: 767px) {
   #conversejs > .row {
     flex-direction: row-reverse; }
-  #conversejs #login-dialog .converse-form {
+  #conversejs #converse-login-panel .converse-form {
     padding: 3em 2em 3em; }
   #conversejs .sidebar {
     display: block; }
@@ -5835,9 +5829,9 @@ body {
     text-align: center; }
   #conversejs #controlbox .brand-heading-container .brand-name {
     font-size: 120%; }
-  #conversejs #controlbox #login-dialog {
+  #conversejs #controlbox #converse-login-panel {
     flex-direction: column; }
-    #conversejs #controlbox #login-dialog .brand-heading {
+    #conversejs #controlbox #converse-login-panel .brand-heading {
       color: #578EA9; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
@@ -5846,6 +5840,10 @@ body {
     color: #777; }
     #conversejs #controlbox .oauth-login .icon-social:before {
       font-size: 18px; }
+  #conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
+    width: 100%;
+    text-align: center;
+    margin: 0 auto 1em auto; }
   #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
     text-align: center; }
   #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -5855,7 +5853,7 @@ body {
     color: #3AA569; }
   #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
     width: 100%;
-    margin: 1em 0; }
+    margin: 0 0 2em 0; }
   #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
     display: block;
     font-weight: normal;
@@ -5995,10 +5993,6 @@ body {
       padding-bottom: 2em; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
         margin-top: 0.5em; }
-    #conversejs #controlbox .controlbox-pane label {
-      font-size: 16px;
-      font-weight: bold;
-      height: auto; }
     #conversejs #controlbox .controlbox-pane dd {
       margin-left: 0;
       margin-bottom: 0; }
@@ -6044,9 +6038,9 @@ body {
     border-radius: 0; }
   #conversejs.fullscreen #controlbox .flyout {
     border-radius: 0; }
-  #conversejs.fullscreen #controlbox #login-dialog {
+  #conversejs.fullscreen #controlbox #converse-login-panel {
     border-radius: 0; }
-    #conversejs.fullscreen #controlbox #login-dialog .converse-form {
+    #conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
       margin: 0;
       padding: 3em 2em 3em; }
   #conversejs.fullscreen #controlbox .toggle-register-login {
@@ -6098,11 +6092,6 @@ body {
     #conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
     #conversejs.fullscreen #controlbox #converse-login input[type=button] {
       width: auto; }
-    #conversejs.fullscreen #controlbox #converse-register input, #conversejs.fullscreen #controlbox #converse-login input {
-      width: 100%;
-      margin: 1em 0; }
-      #conversejs.fullscreen #controlbox #converse-register input.pure-button, #conversejs.fullscreen #controlbox #converse-login input.pure-button {
-        margin: 1em 0.5em; }
   @media screen and (max-width: 480px) {
     #conversejs.fullscreen #controlbox #converse-register,
     #conversejs.fullscreen #controlbox #converse-login {

mockup/fullscreen-login.html

@@ -19,17 +19,18 @@
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
-                        <div id="login-dialog" class="controlbox-pane">
+                        <div id="converse-login-panel" class="controlbox-pane fade-in">
                             <div class="row">
                                 <div class="brand-heading-container col-12">
                                     <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 target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+                                    <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
                                 </div>
                             </div>
 
                             <div class="row">
                                 <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-                                    <form id="converse-login" class="pure-form converse-form">
+                                    <form id="converse-login" class="converse-form" method="post">
                                         <div class="form-group">
                                             <label for="jid">XMPP Username:</label>
                                             <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">

sass/_chatbox.scss

@@ -493,7 +493,7 @@
             flex-direction: row-reverse;
         }
 
-        #login-dialog {
+        #converse-login-panel {
             .converse-form {
                 padding: 3em 2em 3em;
             }

sass/_controlbox.scss

@@ -160,7 +160,7 @@
             }
         }
 
-        #login-dialog {
+        #converse-login-panel {
             flex-direction: column;
 
             .brand-heading {
@@ -181,6 +181,11 @@
         }
 
         #converse-register, #converse-login {
+            legend {
+                width: 100%;
+                text-align: center;
+                margin: 0 auto 1em auto;
+            }
             fieldset.buttons {
                 text-align: center;
             }
@@ -193,7 +198,7 @@
             }
             input {
                 width: 100%;
-                margin: 1em 0;
+                margin: 0 0 2em 0;
             }
             .form-url {
                 display: block;
@@ -385,11 +390,6 @@
                     margin-top: 0.5em;
                 }
             }
-            label {
-                font-size: $font-size;
-                font-weight: bold;
-                height: auto;
-            }
             dd {
                 margin-left: 0;
                 margin-bottom: 0;

sass/_profile.scss

@@ -1,5 +1,7 @@
 #conversejs {
-    label {
-        font-weight: bold;
+    #user-profile-modal {
+        label {
+            font-weight: bold;
+        }
     }
 }

sass/inverse/_controlbox.scss

@@ -10,7 +10,7 @@
             border-radius: 0;
         }
 
-        #login-dialog {
+        #converse-login-panel {
             border-radius: 0;
             .converse-form {
                 margin: 0;
@@ -69,13 +69,6 @@
             input[type=button] {
                 width: auto;
             }
-            input {
-                width: 100%;
-                margin: 1em 0;
-                &.pure-button {
-                    margin: 1em 0.5em;
-                }
-            }
         }
         @media screen and (max-width: $mobile-portrait-length) {
             #converse-register,

sass/inverse/_core.scss

@@ -44,13 +44,6 @@ body {
                 display: inline;
                 margin-bottom: 2em;
             }
-            input[type=text],
-            input[type=password],
-            input[type=number],
-            input[type=button],
-            input[type=submit] {
-                height: 2.2em;
-            }
             input[type=button],
             input[type=submit] {
                 padding-left: 1em;

src/converse-fullscreen.js

@@ -39,7 +39,7 @@
                 insertBrandHeading () {
                     const { _converse } = this.__super__;
                     const el = _converse.root.getElementById('converse-login-panel');
-                    el.parentNode.insertAdjacentHTML(
+                    el.insertAdjacentHTML(
                         'afterbegin',
                         this.createBrandHeadingHTML()
                     );

src/converse-register.js

@@ -69,7 +69,7 @@
                         if (_.isUndefined(this.registerlinkview)) {
                             this.registerlinkview = new _converse.RegisterLinkView({'model': this.model});
                             this.registerlinkview.render();
-                            this.el.insertAdjacentElement('beforeend', this.registerlinkview.el);
+                            this.el.querySelector('.buttons').insertAdjacentElement('beforeend', this.registerlinkview.el);
                         }
                         this.registerlinkview.render();
                     }
@@ -156,7 +156,6 @@
 
 
             _converse.RegisterLinkView = Backbone.VDOMView.extend({
-
                 toHTML () {
                     return tpl_register_link(
                         _.extend(this.model.toJSON(), {

src/templates/inverse_brand_heading.html

@@ -1,5 +1,7 @@
-<span class="container brand-heading-container">
-    <h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
-    <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
-    <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
-<span>
+<div class="row">
+    <span class="container brand-heading-container col-12">
+        <h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
+        <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+        <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
+    <span>
+</div>

src/templates/login_panel.html

@@ -1,33 +1,39 @@
 <div id="converse-login-panel" class="controlbox-pane fade-in">
-    <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
-        <legend>{{{o.__("Login")}}}</legend>
-        <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
-            <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
-            <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
-        </div>
-        {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
-            <span class="spinner centered"/>
-        {[ } else { ]}
-            {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
-                <label>{{{o.__("Jabber ID:")}}}</label>
-                <input autofocus required
-                    type="text"
-                    name="jid"
-                    placeholder="{{{o.placeholder_username}}}">
-                {[ if (o.authentication !== o.EXTERNAL) { ]}
-                    <label>{{{o.__("Password:")}}}</label>
-                    <input required
-                        type="password" name="password"
-                        placeholder="{{{o.__('password')}}}">
+    <div class="row">
+        <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
+            <form id="converse-login" class="converse-form" method="post">
+                <legend>{{{o.__("Login")}}}</legend>
+                <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
+                    <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
+                    <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
+                </div>
+                {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
+                    <span class="spinner centered"/>
+                {[ } else { ]}
+                    {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
+                        <div class="form-group">
+                            <label for="jid">{{{o.__("XMPP Username:")}}}</label>
+                            <input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
+                        </div>
+                        {[ if (o.authentication !== o.EXTERNAL) { ]}
+                        <div class="form-group">
+                            <label for="password">{{{o.__("Password:")}}}</label>
+                            <input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
+                        </div>
+                        {[ } ]}
+                        <fieldset class="buttons">
+                            <input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
+                        </fieldset>
+                    {[ } ]}
+                    {[ if (o.authentication == o.ANONYMOUS) { ]}
+                        <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
+                    {[ } ]}
+                    {[ if (o.authentication == o.PREBIND) { ]}
+                        <p>Disconnected.</p>
+                    {[ } ]}
                 {[ } ]}
-                <input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
-            {[ } ]}
-            {[ if (o.authentication == o.ANONYMOUS) { ]}
-                <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
-            {[ } ]}
-            {[ if (o.authentication == o.PREBIND) { ]}
-                <p>Disconnected.</p>
-            {[ } ]}
-        {[ } ]}
-    </form>
+                </fieldset>
+            </form>
+        </div>
+    </div>
 </div>