converse-register: Consolidate validation and error reporting

CHANGES.md

@@ -7,6 +7,8 @@
 - Remove `Login` and `Registration` tabs and consolidate into one panel.
 - Add validation message for an invalid JID in the login form.
 - Don't require `auto_login` to be `true` when using the API to log in.
+- Use CSS3 fade transitions to render various elements.
+- Consolidate error and validation reporting on the registration 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

@@ -1281,6 +1281,9 @@
   #converse-embedded-chat .error,
   #conversejs .error {
     color: #A53214; }
+  #converse-embedded-chat .info,
+  #conversejs .info {
+    color: #1E9652; }
   #converse-embedded-chat .reg-feedback,
   #conversejs .reg-feedback {
     font-size: 85%;
@@ -1945,8 +1948,8 @@
       font-size: 90%;
       margin: 1.5em 0; }
     #conversejs #controlbox #converse-register .form-errors {
-      color: red;
-      display: none; }
+      color: #A53214;
+      margin: 1em 0; }
     #conversejs #controlbox #converse-register .provider-title {
       font-size: 20px;
       margin: 0; }

css/inverse.css

@@ -1281,6 +1281,9 @@
   #converse-embedded-chat .error,
   #conversejs .error {
     color: #A53214; }
+  #converse-embedded-chat .info,
+  #conversejs .info {
+    color: #1E9652; }
   #converse-embedded-chat .reg-feedback,
   #conversejs .reg-feedback {
     font-size: 85%;
@@ -2033,8 +2036,8 @@ body {
       font-size: 90%;
       margin: 1.5em 0; }
     #conversejs #controlbox #converse-register .form-errors {
-      color: red;
-      display: none; }
+      color: #A53214;
+      margin: 1em 0; }
     #conversejs #controlbox #converse-register .provider-title {
       font-size: 26px;
       margin: 0; }
@@ -2401,6 +2404,11 @@ body {
     @media screen and (max-width: 480px) {
       #conversejs #controlbox .brand-heading-container .brand-heading {
         font-size: 400%; } }
+  #conversejs #controlbox .controlbox-panes {
+    background-color: white; }
+  #conversejs #controlbox .controlbox-pane {
+    height: -webkit-calc(100% - 63px);
+    height: calc(100% - 63px); }
   #conversejs #controlbox.logged-out {
     opacity: 0;
     /* make things invisible upon start */
@@ -2422,6 +2430,8 @@ body {
       #conversejs #controlbox.logged-out .box-flyout .controlbox-head {
         background-color: white;
         height: 0; }
+      #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
+        height: auto; }
   #conversejs #controlbox .box-flyout {
     border: 0;
     min-width: 250px;
@@ -2459,10 +2469,6 @@ body {
         font-size: 18px; }
         #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
           height: 63px; }
-  #conversejs #controlbox .controlbox-panes {
-    background-color: white; }
-  #conversejs #controlbox .controlbox-pane {
-    height: auto; }
 
 #conversejs #converse-roster {
   text-align: left;

sass/_controlbox.scss

@@ -73,8 +73,8 @@
                 margin: 1.5em 0;
             }
             .form-errors {
-                color: red;
-                display: none;
+                color: $error-color;
+                margin: 1em 0;
             }
             .provider-title {
                 font-size: $font-size-huge;

sass/_core.scss

@@ -152,6 +152,9 @@
     .error {
         color: $error-color;
     }
+    .info {
+        color: $info-color;
+    }
     .reg-feedback {
         font-size: 85%;
         margin-bottom: 1em;

sass/converse/_variables.scss

@@ -81,6 +81,7 @@ $light-background-color: #FCFDFD !default;
 $moderator-color: $dark-red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
+$info-color: $dark-green !default;
 
 $button-border-radius: 5px !default;
 $chatbox-border-radius: 4px !default;

sass/inverse/_controlbox.scss

@@ -32,6 +32,12 @@
             }
         }
 
+        .controlbox-panes {
+            background-color: white;
+        }
+        .controlbox-pane {
+            @include calc(height, '100% - #{$controlbox-head-height}');
+        }
         &.logged-out {
             @include fade-in;
             width: 100%;
@@ -41,6 +47,9 @@
                     background-color: white;
                     height: 0;
                 }
+                .controlbox-pane {
+                    height: auto;
+                }
             }
         }
         .box-flyout {
@@ -93,11 +102,5 @@
                 }
             }
         }
-        .controlbox-panes {
-            background-color: white;
-        }
-        .controlbox-pane {
-            height: auto;
-        }
     }
 }

sass/inverse/_variables.scss

@@ -85,6 +85,7 @@ $light-background-color: #FCFDFD !default;
 $moderator-color: $red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
+$info-color: $dark-green !default;
 
 $button-border-radius: 5px !default;
 $chatbox-border-radius: 0 !default;

src/converse-core.js

@@ -100,7 +100,7 @@
     _converse.OPENED = 'opened';
     _converse.PREBIND = "prebind";
 
-    const PRETTY_CONNECTION_STATUS = {
+    _converse.PRETTY_CONNECTION_STATUS = {
         0: 'ERROR',
         1: 'CONNECTING',
         2: 'CONNFAIL',
@@ -495,7 +495,7 @@
              * through various states while establishing or tearing down a
              * connection.
              */
-            _converse.log(`Status changed to: ${PRETTY_CONNECTION_STATUS[status]}`);
+            _converse.log(`Status changed to: ${_converse.PRETTY_CONNECTION_STATUS[status]}`);
             if (status === Strophe.Status.CONNECTED || status === Strophe.Status.ATTACHED) {
                 _converse.giveFeedback();
                 // By default we always want to send out an initial presence stanza.

src/templates/register_panel.html

 <form id="converse-register" class="pure-form converse-form">
     <legend>{{{__("Account Registration")}}}</legend>
-    <span class="reg-feedback"></span>
 
     <label>{{{__("Please enter the XMPP provider to register with:")}}}</label>
     <p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
+    <div class="form-errors hidden"></div>
 
     {[ if (default_domain) { ]}
     	{{{default_domain}}}

src/templates/registration_form.html

 <legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
-<span class="reg-feedback"></span>
 <p class="title">{{{title}}}</p>
 <p class="instructions">{{{instructions}}}</p>
+<div class="form-errors hidden"></div>