From c655781bc9c0bac115c9d00bb61eb0b2250ca4d8 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sat, 24 Feb 2018 19:59:25 +0100
Subject: [PATCH] More login form improvements and also update registration
 form

---
 css/converse.css                  | 19 ++++-----
 css/inverse.css                   | 39 ++++++++----------
 mockup/fullscreen-login.html      | 47 ++++++++++-----------
 sass/_controlbox.scss             |  9 ++--
 sass/_core.scss                   |  8 ++--
 sass/inverse/_controlbox.scss     | 11 ++---
 src/converse-fullscreen.js        |  2 +-
 src/templates/login_panel.html    | 68 +++++++++++++++----------------
 src/templates/register_panel.html | 44 ++++++++++++--------
 9 files changed, 122 insertions(+), 125 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 780d85c4c..cfdb4861c 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -5061,13 +5061,13 @@ body.reset {
     #conversejs form.converse-form input.error {
       border: 1px solid #A53214;
       color: #777; }
-    #conversejs form.converse-form .form-help {
-      color: gray;
+    #conversejs form.converse-form .text-muted {
+      color: #A8ABA1 !important;
       font-size: 85%;
       padding-top: 0.5em; }
-      #conversejs form.converse-form .form-help:hover {
-        color: #777; }
-      #conversejs form.converse-form .form-help.error {
+      #conversejs form.converse-form .text-muted a {
+        color: #79a5ba; }
+      #conversejs form.converse-form .text-muted.error {
         color: #A53214; }
   #conversejs form.converse-centered-form {
     text-align: center;
@@ -5730,8 +5730,6 @@ body.reset {
     #conversejs #controlbox #converse-register .provider-score {
       width: 178px;
       margin-bottom: 8px; }
-    #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label {
-      margin: 0.5em 0 0 0; }
     #conversejs #controlbox #converse-register .form-help .url {
       font-weight: bold;
       color: #578EA9; }
@@ -5778,6 +5776,8 @@ body.reset {
     width: 100%;
     text-align: center;
     margin: 0 auto 1em auto; }
+  #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
+    margin-top: 2em; }
   #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 {
@@ -5786,8 +5786,7 @@ body.reset {
   #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
     color: #3AA569; }
   #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
-    width: 100%;
-    margin: 0 0 2em 0; }
+    width: 100%; }
   #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
     display: block;
     font-weight: normal;
@@ -5924,7 +5923,7 @@ body.reset {
     #conversejs #controlbox .controlbox-pane .chatbox-btn {
       margin: 0; }
     #conversejs #controlbox .controlbox-pane .switch-form {
-      padding-bottom: 2em; }
+      padding: 2em 0; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
         margin-top: 0.5em; }
     #conversejs #controlbox .controlbox-pane dd {
diff --git a/css/inverse.css b/css/inverse.css
index cf7cf2128..d140201a8 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -5061,13 +5061,13 @@ body.reset {
     #conversejs form.converse-form input.error {
       border: 1px solid #A53214;
       color: #777; }
-    #conversejs form.converse-form .form-help {
-      color: gray;
+    #conversejs form.converse-form .text-muted {
+      color: #A8ABA1 !important;
       font-size: 85%;
       padding-top: 0.5em; }
-      #conversejs form.converse-form .form-help:hover {
-        color: #777; }
-      #conversejs form.converse-form .form-help.error {
+      #conversejs form.converse-form .text-muted a {
+        color: #79a5ba; }
+      #conversejs form.converse-form .text-muted.error {
         color: #A53214; }
   #conversejs form.converse-centered-form {
     text-align: center;
@@ -5796,8 +5796,6 @@ body {
     #conversejs #controlbox #converse-register .provider-score {
       width: 178px;
       margin-bottom: 8px; }
-    #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label {
-      margin: 0.5em 0 0 0; }
     #conversejs #controlbox #converse-register .form-help .url {
       font-weight: bold;
       color: #578EA9; }
@@ -5844,6 +5842,8 @@ body {
     width: 100%;
     text-align: center;
     margin: 0 auto 1em auto; }
+  #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
+    margin-top: 2em; }
   #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 {
@@ -5852,8 +5852,7 @@ body {
   #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
     color: #3AA569; }
   #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
-    width: 100%;
-    margin: 0 0 2em 0; }
+    width: 100%; }
   #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
     display: block;
     font-weight: normal;
@@ -5990,7 +5989,7 @@ body {
     #conversejs #controlbox .controlbox-pane .chatbox-btn {
       margin: 0; }
     #conversejs #controlbox .controlbox-pane .switch-form {
-      padding-bottom: 2em; }
+      padding: 2em 0; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
         margin-top: 0.5em; }
     #conversejs #controlbox .controlbox-pane dd {
@@ -6034,6 +6033,8 @@ body {
     display: block; } }
 #conversejs.fullscreen #controlbox {
   margin: 0; }
+  #conversejs.fullscreen #controlbox .controlbox-panes {
+    overflow-y: hidden; }
   #conversejs.fullscreen #controlbox .controlbox-pane {
     border-radius: 0; }
   #conversejs.fullscreen #controlbox .flyout {
@@ -6084,18 +6085,12 @@ body {
     background-color: #578EA9; }
     #conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
       display: none; }
-  #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
-    margin: 2em 30% 3em 30%; }
-    #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
-      margin: 1em 0; }
-    #conversejs.fullscreen #controlbox #converse-register input[type=submit],
-    #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; }
-  @media screen and (max-width: 480px) {
-    #conversejs.fullscreen #controlbox #converse-register,
-    #conversejs.fullscreen #controlbox #converse-login {
-      margin: 3em 10% 3em 10%; } }
+  #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
+    margin: 1em 0; }
+  #conversejs.fullscreen #controlbox #converse-register input[type=submit],
+  #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 #converse-roster {
   text-align: left;
diff --git a/mockup/fullscreen-login.html b/mockup/fullscreen-login.html
index 4da5f8081..114146947 100644
--- a/mockup/fullscreen-login.html
+++ b/mockup/fullscreen-login.html
@@ -19,32 +19,33 @@
             <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
-                        <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 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 class="row">
+                            <div class="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>
                             </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="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">
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="password">Password:</label>
-                                            <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
-                                        </div>
-                                        <fieldset class="buttons">
-                                            <p><input class="btn btn-primary" type="submit" value="Log In"></p>
+                        <div id="converse-login-panel" class="controlbox-pane fade-in 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">
+                                    <div class="form-group">
+                                        <label for="jid">XMPP Username:</label>
+                                        <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="password">Password:</label>
+                                        <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
+                                    </div>
+                                    <fieldset class="buttons">
+                                        <p><input class="btn btn-primary" type="submit" value="Log In"></p>
+                                        <div class="switch-form">
+                                            <p>Don't have an XMPP account?</p>
                                             <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
-                                        </fieldset>
-                                    </form>
-                                </div>
+                                        </div>
+                                    </fieldset>
+                                </form>
                             </div>
                         </div>
                     </div>
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index 6d342cbbf..325970ac7 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -107,9 +107,6 @@
                 width: 178px;
                 margin-bottom: 8px;
             }
-            .title, .instructions, label {
-                margin: 0.5em 0 0 0;
-            }
             .form-help .url {
                 font-weight: bold;
                 color: $link-color;
@@ -186,6 +183,9 @@
                 text-align: center;
                 margin: 0 auto 1em auto;
             }
+            label {
+                margin-top: 2em;
+            }
             fieldset.buttons {
                 text-align: center;
             }
@@ -198,7 +198,6 @@
             }
             input {
                 width: 100%;
-                margin: 0 0 2em 0;
             }
             .form-url {
                 display: block;
@@ -385,7 +384,7 @@
             }
 
             .switch-form {
-                padding-bottom: 2em;
+                padding: 2em 0;
                 p {
                     margin-top: 0.5em;
                 }
diff --git a/sass/_core.scss b/sass/_core.scss
index a948130e8..bf989486c 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -398,12 +398,12 @@ body.reset {
                 border: 1px solid $error-color;
                 color: $text-color;
             }
-            .form-help {
-                color: gray;
+            .text-muted {
+                color: $subdued-color !important;
                 font-size: 85%;
                 padding-top: 0.5em;
-                &:hover {
-                    color: $text-color;
+                a {
+                    color: lighten($link-color, 10%);
                 }
                 &.error {
                     color: $error-color;
diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss
index 3eca7b410..fab6ccbe9 100644
--- a/sass/inverse/_controlbox.scss
+++ b/sass/inverse/_controlbox.scss
@@ -2,6 +2,10 @@
     #controlbox {
         margin: 0;
 
+        .controlbox-panes {
+            overflow-y: hidden;
+        }
+
         .controlbox-pane {
             border-radius: 0;
         }
@@ -61,7 +65,6 @@
         }
 
         #converse-register, #converse-login {
-            margin: 2em 30% 3em 30%;
             .title, .instructions {
                 margin: 1em 0;
             }
@@ -70,11 +73,5 @@
                 width: auto;
             }
         }
-        @media screen and (max-width: $mobile-portrait-length) {
-            #converse-register,
-            #converse-login {
-                margin: 3em 10% 3em 10%;
-            }
-        }
     }
 }
diff --git a/src/converse-fullscreen.js b/src/converse-fullscreen.js
index ef3022ad7..281350e46 100644
--- a/src/converse-fullscreen.js
+++ b/src/converse-fullscreen.js
@@ -39,7 +39,7 @@
                 insertBrandHeading () {
                     const { _converse } = this.__super__;
                     const el = _converse.root.getElementById('converse-login-panel');
-                    el.insertAdjacentHTML(
+                    el.parentNode.insertAdjacentHTML(
                         'afterbegin',
                         this.createBrandHeadingHTML()
                     );
diff --git a/src/templates/login_panel.html b/src/templates/login_panel.html
index 40eace096..d8929cd81 100644
--- a/src/templates/login_panel.html
+++ b/src/templates/login_panel.html
@@ -1,39 +1,37 @@
-<div id="converse-login-panel" class="controlbox-pane fade-in">
-    <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>
+<div id="converse-login-panel" class="controlbox-pane fade-in 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>
                 {[ } ]}
-                </fieldset>
-            </form>
-        </div>
+                {[ 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>
+                {[ } ]}
+            {[ } ]}
+            </fieldset>
+        </form>
     </div>
 </div>
diff --git a/src/templates/register_panel.html b/src/templates/register_panel.html
index b350180e4..bb96825eb 100644
--- a/src/templates/register_panel.html
+++ b/src/templates/register_panel.html
@@ -1,22 +1,30 @@
-<form id="converse-register" class="pure-form converse-form">
-    <legend>{{{o.__("Create your account")}}}</legend>
+<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-register" class="converse-form">
+            <legend>{{{o.__("Create your account")}}}</legend>
 
-    <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
-    <p class="form-help">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
-    <div class="form-errors hidden"></div>
+            <div class="form-group">
+                <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
+                <div class="form-errors hidden"></div>
 
-    {[ if (o.default_domain) { ]}
-        {{{o.default_domain}}}
-    {[ } ]}
-    {[ if (!o.default_domain) { ]}
-        <input autofocus required type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
-        <input class="pure-button button-primary" type="submit" value="{{{o.label_register}}}">
-    {[ } ]}
-</form>
+                {[ if (o.default_domain) { ]}
+                    {{{o.default_domain}}}
+                </div>
+                {[ } ]}
+                {[ if (!o.default_domain) { ]}
+                    <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
+                    <p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
+                </div>
+                <fieldset class="buttons">
+                    <input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
+                    <div class="switch-form">
+                        <p>{{{ o.__("Already have a chat account?") }}}</p>
+                        <p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
+                    </div>
+                </fieldset>
+                {[ } ]}
+            </div>
+        </form>
 
-<div class="switch-form">
-    <p>{{{ o.__("Already have a chat account?") }}}</p>
-    <p>
-        <a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a>
-    </p>
+    </div>
 </div>