Selaa lähdekoodia

Various changes

* In certain places, use native methods instead of jQuery
* Nicer rendering of registration forms
* Use CSS3 fade-in animations.
JC Brand 7 vuotta sitten
vanhempi
commit
9cdb0dde8c

+ 68 - 27
css/converse.css

@@ -1120,6 +1120,22 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
+  #converse-embedded-chat .fade-in,
+  #conversejs .fade-in {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
   #converse-embedded-chat ::-webkit-input-placeholder,
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
@@ -1267,7 +1283,8 @@
     color: #A53214; }
   #converse-embedded-chat .reg-feedback,
   #conversejs .reg-feedback {
-    font-size: 85%; }
+    font-size: 85%;
+    margin-bottom: 1em; }
   #converse-embedded-chat .reg-feedback,
   #converse-embedded-chat #converse-login .conn-feedback,
   #conversejs .reg-feedback,
@@ -1295,7 +1312,7 @@
     padding: 0.5em 0; }
   #converse-embedded-chat .pure-button,
   #conversejs .pure-button {
-    border-radius: 4px; }
+    border-radius: 5px; }
   #converse-embedded-chat .button-primary,
   #conversejs .button-primary {
     color: white;
@@ -1316,7 +1333,7 @@
     #conversejs form.pure-form.converse-form legend {
       color: #777;
       font-size: 125%;
-      margin-bottom: 2em; }
+      margin-bottom: 1em; }
     #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
     #conversejs form.pure-form.converse-form input[type=checkbox] {
       display: block; }
@@ -1885,10 +1902,9 @@
       #conversejs #controlbox .controlbox-head {
         border-top-left-radius: 0;
         border-top-right-radius: 0; } }
-  #conversejs #controlbox.logged-out .controlbox-head {
-    background-color: white; }
-    #conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
-      color: #578EA9; }
+  #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
+    position: relative;
+    overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
     padding-left: 5px;
@@ -1907,14 +1923,27 @@
     padding-left: 2em;
     font-weight: bold; }
   #conversejs #controlbox #converse-register {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease;
     background: white; }
     #conversejs #controlbox #converse-register .title {
       font-weight: bold; }
     #conversejs #controlbox #converse-register .info {
-      font-style: italic;
       color: green;
-      font-size: 85%;
-      margin: 5px 0; }
+      font-size: 90%;
+      margin: 1.5em 0; }
     #conversejs #controlbox #converse-register .form-errors {
       color: red;
       display: none; }
@@ -1952,26 +1981,30 @@
       font-weight: bold; }
     #conversejs #controlbox .conn-feedback p.error {
       color: #A53214; }
-  #conversejs #controlbox .brand-heading-container {
-    text-align: center; }
-    #conversejs #controlbox .brand-heading-container .brand-heading {
-      font-size: 150%; }
-    #conversejs #controlbox .brand-heading-container .brand-name {
-      font-size: 120%; }
+  #conversejs #controlbox .brand-heading-container .brand-heading {
+    text-align: left;
+    font-size: 150%; }
+  #conversejs #controlbox .brand-heading-container .brand-name {
+    font-size: 120%; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
   #conversejs #controlbox .oauth-login {
+    margin-left: 0;
     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 {
-      height: auto;
-      white-space: normal; }
-    #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: 1em 0; }
+    #conversejs #controlbox .oauth-login .icon-social:before {
+      font-size: 16px; }
+  #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
+    height: auto;
+    white-space: normal; }
+  #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: 1em 0; }
+  #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
+    display: block;
+    font-weight: normal;
+    margin: 1em 0; }
   #conversejs #controlbox #users .add-converse-contact {
     margin: 0 0 0.75em 0; }
   #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -2194,17 +2227,23 @@
     padding: 1px;
     float: right; }
   #conversejs #controlbox .controlbox-panes {
-    background-color: white; }
+    height: 100%;
+    overflow-y: scroll; }
   #conversejs #controlbox .controlbox-pane {
     padding: 1em;
     background-color: white;
     border: 0;
     font-size: 14px;
     position: absolute;
+    left: 0;
     text-align: center;
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden; }
+    #conversejs #controlbox .controlbox-pane .switch-form {
+      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;
@@ -2258,6 +2297,8 @@
   height: 289px;
   height: -webkit-calc(100% - 55px);
   height: calc(100% - 55px); }
+#conversejs #controlbox .brand-heading-container .brand-heading {
+  margin-left: 1em; }
 
 #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
   border-radius: 10%;

+ 153 - 74
css/inverse.css

@@ -1120,6 +1120,22 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
+  #converse-embedded-chat .fade-in,
+  #conversejs .fade-in {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
   #converse-embedded-chat ::-webkit-input-placeholder,
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
@@ -1267,7 +1283,8 @@
     color: #A53214; }
   #converse-embedded-chat .reg-feedback,
   #conversejs .reg-feedback {
-    font-size: 85%; }
+    font-size: 85%;
+    margin-bottom: 1em; }
   #converse-embedded-chat .reg-feedback,
   #converse-embedded-chat #converse-login .conn-feedback,
   #conversejs .reg-feedback,
@@ -1295,7 +1312,7 @@
     padding: 0.5em 0; }
   #converse-embedded-chat .pure-button,
   #conversejs .pure-button {
-    border-radius: 7px; }
+    border-radius: 5px; }
   #converse-embedded-chat .button-primary,
   #conversejs .button-primary {
     color: white;
@@ -1316,7 +1333,7 @@
     #conversejs form.pure-form.converse-form legend {
       color: #777;
       font-size: 125%;
-      margin-bottom: 2em; }
+      margin-bottom: 1em; }
     #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
     #conversejs form.pure-form.converse-form input[type=checkbox] {
       display: block; }
@@ -1395,6 +1412,24 @@ body {
   body .brand-heading {
     font-size: 600%;
     margin-left: -10%; }
+    body .brand-heading.fade-in {
+      opacity: 0;
+      /* make things invisible upon start */
+      -webkit-animation-name: fadein;
+      -moz-animation-name: fadein;
+      animation-name: fadein;
+      -webkit-animation-fill-mode: forwards;
+      -moz-animation-fill-mode: forwards;
+      animation-fill-mode: forwards;
+      -webkit-animation-duration: 1s;
+      -moz-animation-duration: 1s;
+      animation-duration: 1s;
+      -webkit-animation-timing-function: ease;
+      -moz-animation-timing-function: ease;
+      animation-timing-function: ease;
+      -webkit-animation-delay: 2s;
+      -moz-animation-delay: 2s;
+      animation-delay: 2s; }
     body .brand-heading .icon-conversejs {
       font-size: 88%; }
   body div.content {
@@ -1419,7 +1454,8 @@ body {
     margin: 1em; }
     #conversejs form.pure-form.converse-form input[type=checkbox] {
       margin-left: 1em;
-      display: inline; }
+      display: inline;
+      margin-bottom: 2em; }
     #conversejs form.pure-form.converse-form input[type=text],
     #conversejs form.pure-form.converse-form input[type=password],
     #conversejs form.pure-form.converse-form input[type=number],
@@ -1434,7 +1470,7 @@ body {
 
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
-  border-radius: 7px;
+  border-radius: 0;
   bottom: 6px;
   display: block;
   position: absolute; }
@@ -1554,8 +1590,8 @@ body {
   #converse-embedded-chat .chatbox .chat-body,
   #conversejs .chatbox .chat-body {
     background-color: white;
-    border-bottom-left-radius: 7px;
-    border-bottom-right-radius: 7px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     border-top: 0;
     height: 289px;
     height: -webkit-calc(100% - 62px);
@@ -1670,8 +1706,8 @@ body {
   #conversejs .chatbox form.sendXMPPMessage {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
-    border-bottom-left-radius: 7px;
-    border-bottom-right-radius: 7px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     background-clip: padding-box;
     border-top: 1px solid #BBB;
     border: 0;
@@ -1690,8 +1726,8 @@ body {
         width: 100%; } }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
-      border-bottom-left-radius: 7px;
-      border-bottom-right-radius: 7px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
       border: 0;
       height: 70px;
       padding: 0.5em;
@@ -1898,8 +1934,8 @@ body {
     min-width: auto; }
   #conversejs .chatbox .chat-body {
     background-color: #3AA569;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px; }
+    border-top-left-radius: 0;
+    border-top-right-radius: 0; }
     #conversejs .chatbox .chat-body .chat-message {
       line-height: 22px;
       font-size: 14px;
@@ -1913,8 +1949,8 @@ body {
           margin-bottom: -5.5px; }
   #conversejs .chatbox .chat-content {
     padding: 0 1em 1em 1em;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px; }
+    border-top-left-radius: 0;
+    border-top-right-radius: 0; }
   #conversejs .chatbox .chat-title {
     font-size: 26px;
     line-height: 26px; }
@@ -1940,8 +1976,8 @@ body {
       margin: 0; } }
   #conversejs #controlbox .controlbox-head {
     background-color: #578EA9;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
     color: white;
     height: 62px;
     margin: 0;
@@ -1954,10 +1990,9 @@ body {
       #conversejs #controlbox .controlbox-head {
         border-top-left-radius: 0;
         border-top-right-radius: 0; } }
-  #conversejs #controlbox.logged-out .controlbox-head {
-    background-color: white; }
-    #conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
-      color: #578EA9; }
+  #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
+    position: relative;
+    overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
     padding-left: 5px;
@@ -1976,14 +2011,27 @@ body {
     padding-left: 2em;
     font-weight: bold; }
   #conversejs #controlbox #converse-register {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease;
     background: white; }
     #conversejs #controlbox #converse-register .title {
       font-weight: bold; }
     #conversejs #controlbox #converse-register .info {
-      font-style: italic;
       color: green;
-      font-size: 85%;
-      margin: 5px 0; }
+      font-size: 90%;
+      margin: 1.5em 0; }
     #conversejs #controlbox #converse-register .form-errors {
       color: red;
       display: none; }
@@ -2021,26 +2069,30 @@ body {
       font-weight: bold; }
     #conversejs #controlbox .conn-feedback p.error {
       color: #A53214; }
-  #conversejs #controlbox .brand-heading-container {
-    text-align: center; }
-    #conversejs #controlbox .brand-heading-container .brand-heading {
-      font-size: 150%; }
-    #conversejs #controlbox .brand-heading-container .brand-name {
-      font-size: 120%; }
+  #conversejs #controlbox .brand-heading-container .brand-heading {
+    text-align: left;
+    font-size: 150%; }
+  #conversejs #controlbox .brand-heading-container .brand-name {
+    font-size: 120%; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
   #conversejs #controlbox .oauth-login {
+    margin-left: 0;
     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 {
-      height: auto;
-      white-space: normal; }
-    #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: 1em 0; }
+    #conversejs #controlbox .oauth-login .icon-social:before {
+      font-size: 18px; }
+  #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
+    height: auto;
+    white-space: normal; }
+  #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: 1em 0; }
+  #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
+    display: block;
+    font-weight: normal;
+    margin: 1em 0; }
   #conversejs #controlbox #users .add-converse-contact {
     margin: 0 0 0.75em 0; }
   #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -2263,17 +2315,23 @@ body {
     padding: 1px;
     float: right; }
   #conversejs #controlbox .controlbox-panes {
-    background-color: white; }
+    height: 100%;
+    overflow-y: scroll; }
   #conversejs #controlbox .controlbox-pane {
     padding: 1.2em;
     background-color: white;
     border: 0;
     font-size: 16px;
     position: absolute;
+    left: 0;
     text-align: center;
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden; }
+    #conversejs #controlbox .controlbox-pane .switch-form {
+      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;
@@ -2330,17 +2388,34 @@ body {
     padding-top: 2em; }
   #conversejs #controlbox .toggle-register-login {
     line-height: 30px; }
-  #conversejs #controlbox .brand-heading-container .brand-heading {
-    font-size: 600%;
-    padding: 0.7em 0 0 0;
-    opacity: 0.8;
-    color: #387592; }
-  #conversejs #controlbox .brand-heading-container .brand-subtitle {
-    font-size: 90%; }
-  @media screen and (max-width: 480px) {
+  #conversejs #controlbox .brand-heading-container {
+    text-align: center; }
     #conversejs #controlbox .brand-heading-container .brand-heading {
-      font-size: 400%; } }
+      text-align: center;
+      font-size: 600%;
+      padding: 0.7em 0 0 0;
+      opacity: 0.8;
+      color: #387592; }
+    #conversejs #controlbox .brand-heading-container .brand-subtitle {
+      font-size: 90%; }
+    @media screen and (max-width: 480px) {
+      #conversejs #controlbox .brand-heading-container .brand-heading {
+        font-size: 400%; } }
   #conversejs #controlbox.logged-out {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease;
     width: 100%; }
     #conversejs #controlbox.logged-out .box-flyout {
       width: 100%; }
@@ -2357,19 +2432,23 @@ body {
     height: 63px;
     padding: 6px 0 6px 0;
     margin-top: 0.5em; }
-  #conversejs #controlbox #converse-register,
-  #conversejs #controlbox #converse-login {
+  #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin: 3em 30% 3em 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 #converse-register input, #conversejs #controlbox #converse-login input {
+      width: 100%;
+      margin: 1em 0; }
+      #conversejs #controlbox #converse-register input.pure-button, #conversejs #controlbox #converse-login input.pure-button {
+        margin: 1em 0.5em; }
   @media screen and (max-width: 480px) {
     #conversejs #controlbox #converse-register,
     #conversejs #controlbox #converse-login {
       margin: 3em 10% 3em 10%; } }
-  #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 {
@@ -2380,11 +2459,11 @@ 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: -webkit-calc(100% - 63px);
-    height: calc(100% - 63px);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0; }
+    height: calc(100% - 63px); }
 
 #conversejs #converse-roster {
   text-align: left;
@@ -2617,8 +2696,8 @@ body {
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
     #conversejs .chatroom .box-flyout .chatroom-body {
       height: 289px;
-      border-bottom-left-radius: 7px;
-      border-bottom-right-radius: 7px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
       height: -webkit-calc(100% - 62px);
       height: calc(100% - 62px);
       background-color: white;
@@ -2664,7 +2743,7 @@ body {
         vertical-align: top;
         background-color: white;
         border-left: 1px solid #777;
-        border-bottom-right-radius: 7px;
+        border-bottom-right-radius: 0;
         width: 30%;
         height: 100%;
         padding: 0.5em; }
@@ -2743,8 +2822,8 @@ body {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
-        border-bottom-left-radius: 7px;
-        border-bottom-right-radius: 7px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
         border: 0;
         color: #777;
         font-size: 16px;
@@ -2803,22 +2882,22 @@ body {
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px); }
     #conversejs .chatroom .box-flyout .chatroom-body {
-      border-top-left-radius: 7px;
-      border-top-right-radius: 7px; }
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; }
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
-        border-radius: 7px; }
+        border-radius: 0; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
-        border-top-left-radius: 7px;
+        border-top-left-radius: 0;
         min-width: auto; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          border-top-left-radius: 7px;
+          border-top-left-radius: 0;
           padding: 0 1em 1em 1em; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           max-width: 100%; }
           #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
             max-width: 100%; }
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
-        border-top-right-radius: 7px;
+        border-top-right-radius: 0;
         padding: 1em; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           font-size: 18px; }
@@ -2842,12 +2921,12 @@ body {
   background-color: #E7A151; }
 #conversejs .chatbox.headlines .chat-body {
   background-color: #E7A151;
-  border-radius: 7px; }
+  border-radius: 0; }
   #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
     color: #D2842B; }
 #conversejs .chatbox.headlines .chat-content {
   height: 100%;
-  border-radius: 7px; }
+  border-radius: 0; }
 
 #conversejs .chatbox.headlines .box-flyout {
   background-color: #E7A151; }

+ 28 - 10
sass/_controlbox.scss

@@ -29,10 +29,10 @@
         }
 
         &.logged-out {
-            .controlbox-head {
-                background-color: white;
-                .chatbox-btn {
-                    color: $controlbox-head-color;
+            .box-flyout {
+                .controlbox-pane {
+                    position: relative;
+                    overflow-y: auto;
                 }
             }
         }
@@ -62,15 +62,15 @@
         }
 
         #converse-register {
+            @include fade-in;
             background: white;
             .title {
                 font-weight: bold;
             }
             .info {
-                font-style: italic;
                 color: green;
-                font-size: 85%;
-                margin: 5px 0;
+                font-size: 90%;
+                margin: 1.5em 0;
             }
             .form-errors {
                 color: red;
@@ -128,8 +128,8 @@
         }
 
         .brand-heading-container {
-            text-align: center;
             .brand-heading {
+                text-align: left;
                 font-size: 150%;
             }
             .brand-name {
@@ -140,12 +140,16 @@
         .toggle-register-login {
             font-weight: bold;
         }
+
         .oauth-login {
+            margin-left: 0;
             color: $text-color;
+            .icon-social:before {
+                font-size: $font-size-large;
+            }
         }
 
         #converse-register, #converse-login {
-            margin: 2em 0;
             .login-anon {
                 height: auto;
                 white-space: normal;
@@ -157,6 +161,12 @@
                 width: 100%;
                 margin: 1em 0;
             }
+            .form-url {
+                display: block;
+                font-weight: normal;
+                margin: 1em 0;
+            }
+
         }
         #users {
             .add-converse-contact {
@@ -442,7 +452,8 @@
         }
 
         .controlbox-panes {
-            background-color: white;
+            height: 100%;
+            overflow-y: scroll;
         }
 
         .controlbox-pane {
@@ -451,10 +462,17 @@
             border: 0;
             font-size: $font-size;
             position: absolute;
+            left: 0;
             text-align: center;
             width: 100%;
             overflow-y: auto;
             overflow-x: hidden;
+            .switch-form {
+                padding-bottom: 2em;
+                p {
+                    margin-top: 0.5em;
+                }
+            }
             label {
                 font-size: $font-size;
                 font-weight: bold;

+ 14 - 2
sass/_core.scss

@@ -1,3 +1,11 @@
+@mixin fade-in {
+    opacity:0;  /* make things invisible upon start */
+    @include animation-name(fadein);
+    @include animation-fill-mode(forwards);
+    @include animation-duration(1s);
+    @include animation-timing-function(ease);
+}
+
 #converse-embedded-chat,
 #conversejs {
     bottom: 0;
@@ -20,6 +28,9 @@
         width: 100vw;
     }
 
+    .fade-in {
+        @include fade-in;
+    }
 
 	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: $subdued-color;
@@ -143,6 +154,7 @@
     }
     .reg-feedback {
         font-size: 85%;
+        margin-bottom: 1em;
     }
 
     .reg-feedback,
@@ -173,7 +185,7 @@
         padding: 0.5em 0;
     }
     .pure-button {
-        border-radius: $chatbox-border-radius;
+        border-radius: $button-border-radius;
     }
     .button-primary {
         color: white;
@@ -195,7 +207,7 @@
             legend {
                 color: $text-color;
                 font-size: 125%;
-                margin-bottom: 2em;
+                margin-bottom: 1em;
             }
             input[type=checkbox] {
                 display: block;

+ 6 - 0
sass/converse/_controlbox.scss

@@ -6,5 +6,11 @@
             height: 289px;
             @include calc(height, '100% - #{$controlbox-head-height}');
         }
+
+        .brand-heading-container {
+            .brand-heading {
+                margin-left: 1em;
+            }
+        }
     }
 }

+ 20 - 12
sass/inverse/_controlbox.scss

@@ -14,7 +14,9 @@
         }
 
         .brand-heading-container {
+            text-align: center;
             .brand-heading {
+                text-align: center;
                 font-size: 600%;
                 padding: 0.7em 0 0 0;
                 opacity: 0.8;
@@ -31,6 +33,7 @@
         }
 
         &.logged-out {
+            @include fade-in;
             width: 100%;
             .box-flyout {
                 width: 100%;
@@ -52,17 +55,8 @@
             padding: 6px 0 6px 0;
             margin-top: 0.5em;
         }
-        #converse-register,
-        #converse-login {
-            margin: 3em 30% 3em 30%;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            #converse-register,
-            #converse-login {
-                margin: 3em 10% 3em 10%;
-            }
-        }
         #converse-register, #converse-login {
+            margin: 3em 30% 3em 30%;
             .title, .instructions, label {
                 margin: 1em 0;
             }
@@ -70,6 +64,19 @@
             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,
+            #converse-login {
+                margin: 3em 10% 3em 10%;
+            }
         }
         #controlbox-tabs {
             /* single tab */
@@ -86,10 +93,11 @@
                 }
             }
         }
+        .controlbox-panes {
+            background-color: white;
+        }
         .controlbox-pane {
             @include calc(height, '100% - #{$controlbox-head-height}');
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
         }
     }
 }

+ 5 - 1
sass/inverse/_core.scss

@@ -8,6 +8,10 @@ body {
     .brand-heading {
         font-size: 600%;
         margin-left: -10%;
+        &.fade-in {
+            @include fade-in;
+            @include animation-delay(2s);
+        }
         .icon-conversejs {
             font-size: 88%;
         }
@@ -40,10 +44,10 @@ body {
     form {
         &.pure-form.converse-form {
             margin: 1em;
-
             input[type=checkbox] {
                 margin-left: 1em;
                 display: inline;
+                margin-bottom: 2em;
             }
             input[type=text],
             input[type=password],

+ 1 - 1
sass/inverse/_variables.scss

@@ -87,7 +87,7 @@ $online-color: $green !default;
 $error-color: $darkest-red !default;
 
 $button-border-radius: 5px !default;
-$chatbox-border-radius: 7px !default;
+$chatbox-border-radius: 0 !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
 

+ 14 - 15
src/converse-controlbox.js

@@ -202,7 +202,7 @@
 
             _converse.ControlBoxView = _converse.ChatBoxView.extend({
                 tagName: 'div',
-                className: 'chatbox',
+                className: 'chatbox fade-in',
                 id: 'controlbox',
                 events: {
                     'click a.close-chatbox-button': 'close',
@@ -273,9 +273,12 @@
                 },
 
                  createBrandHeadingElement () {
-                    const div = document.createElement('div');
-                    div.innerHTML = tpl_brand_heading();
-                    return div.firstChild;
+                    return tpl_brand_heading();
+                },
+
+                insertBrandHeading () {
+                    const el = this.el.querySelector('.controlbox-head');
+                    el.insertAdjacentHTML('beforeend', this.createBrandHeadingElement());
                 },
 
                 renderLoginPanel () {
@@ -285,8 +288,7 @@
                     });
                     this.loginpanel.render();
                     this.el.classList.add("logged-out");
-                    const el = document.getElementById('converse-login-panel');
-                    el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
+                    this.insertBrandHeading();
                     return this;
                 },
 
@@ -343,13 +345,11 @@
                 },
 
                 onControlBoxToggleHidden () {
-                    const that = this;
-                    utils.fadeIn(this.el, function () {
-                        _converse.controlboxtoggle.updateOnlineCount();
-                        utils.refreshWebkit();
-                        that.model.set('closed', false);
-                        _converse.emit('controlBoxOpened', that);
-                    });
+                    _converse.controlboxtoggle.updateOnlineCount();
+                    utils.refreshWebkit();
+                    this.model.set('closed', false);
+                    this.el.classList.remove('hidden');
+                    _converse.emit('controlBoxOpened', this);
                 },
 
                 show () {
@@ -389,7 +389,7 @@
             _converse.LoginPanel = Backbone.View.extend({
                 tagName: 'div',
                 id: "converse-login-panel",
-                className: 'controlbox-pane',
+                className: 'controlbox-pane fade-in',
                 events: {
                     'submit form#converse-login': 'authenticate'
                 },
@@ -422,7 +422,6 @@
                         '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@domain'),
                         'placeholder_password': __('password')
                     })

+ 5 - 0
src/converse-inverse.js

@@ -55,6 +55,11 @@
                     const div = document.createElement('div');
                     div.innerHTML = tpl_brand_heading();
                     return div.firstChild;
+                },
+
+                insertBrandHeading () {
+                    const el = document.getElementById('converse-login-panel');
+                    el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
                 }
             },
 

+ 65 - 41
src/converse-register.js

@@ -18,6 +18,7 @@
             "tpl!register_panel",
             "tpl!registration_form",
             "tpl!registration_request",
+            "tpl!form_input",
             "tpl!spinner",
             "converse-controlbox"
     ], factory);
@@ -30,6 +31,7 @@
             tpl_register_panel,
             tpl_registration_form,
             tpl_registration_request,
+            tpl_form_input,
             tpl_spinner
         ) {
 
@@ -132,19 +134,12 @@
             const { _converse } = this,
                 { __ } = _converse;
 
-            // Add new templates
-            _converse.templates.form_username = tpl_form_username;
-            _converse.templates.register_panel = tpl_register_panel;
-            _converse.templates.registration_form = tpl_registration_form;
-            _converse.templates.registration_request = tpl_registration_request;
-
             _converse.api.settings.update({
                 allow_registration: true,
                 domain_placeholder: __(" e.g. conversejs.org"),  // Placeholder text shown in the domain input on the registration form
                 providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page
             });
 
-
             _converse.RegistrationRouter = Backbone.Router.extend({
 
                 initialize () {
@@ -169,7 +164,7 @@
             _converse.RegisterPanel = Backbone.View.extend({
                 tagName: 'div',
                 id: "converse-register-panel",
-                className: 'controlbox-pane',
+                className: 'controlbox-pane fade-in',
                 events: {
                     'submit form#converse-register': 'onProviderChosen'
                 },
@@ -242,7 +237,9 @@
                     }
                     // Send an IQ stanza to get all required data fields
                     conn._addSysHandler(this.onRegistrationFields.bind(this), null, "iq", null, null);
-                    conn.send($iq({type: "get"}).c("query", {xmlns: Strophe.NS.REGISTER}).tree());
+                    const stanza = $iq({type: "get"}).c("query", {xmlns: Strophe.NS.REGISTER}).tree();
+                    stanza.setAttribute("id", conn.getUniqueId("sendIQ"));
+                    conn.send(stanza);
                     conn.connected = false;
                     return true;
                 },
@@ -253,6 +250,13 @@
                      *  Parameters:
                      *    (XMLElement) elem - The query stanza.
                      */
+                    if (stanza.getAttribute("type") === "error") {
+                        _converse.connection._changeConnectStatus(
+                            Strophe.Status.REGIFAIL,
+                            __('Something went wrong while establishing a connection with "%1$s". Are you sure it exists?', this.domain)
+                        );
+                        return false;
+                    }
                     if (stanza.getElementsByTagName("query").length !== 1) {
                         _converse.connection._changeConnectStatus(Strophe.Status.REGIFAIL, "unknown");
                         return false;
@@ -383,6 +387,40 @@
                     }
                 },
 
+                renderLegacyRegistrationForm (form) {
+                    _.each(_.keys(this.fields), (key) => {
+                        if (key === "username") {
+                            form.insertAdjacentHTML(
+                                'beforeend',
+                                tpl_form_username({
+                                    'domain': ` @${this.domain}`,
+                                    'name': key,
+                                    'type': "text",
+                                    'label': key,
+                                    'value': '',
+                                    'required': true
+                                })
+                            );
+                        } else {
+                            form.insertAdjacentHTML(
+                                'beforeend',
+                                tpl_form_input({
+                                    'label': key, 
+                                    'name': key,
+                                    'placeholder': key,
+                                    'required': true,
+                                    'type': (key === 'password' || key === 'email') ? key : "text",
+                                    'value': ''
+                                })
+                            );
+                        }
+                    });
+                    // Show urls
+                    _.each(this.urls, (url) => {
+                        $(form).append($('<a target="blank"></a>').attr('href', url).text(url));
+                    });
+                },
+
                 renderRegistrationForm (stanza) {
                     /* Renders the registration form based on the XForm fields
                      * received from the XMPP server.
@@ -392,44 +430,29 @@
                      */
                     this.model.set('registration_form_rendered', true);
 
-                    const $form = this.$('form'),
-                        $stanza = $(stanza);
-                    let $fields, $input;
-                    $form.empty().append(tpl_registration_form({
+                    const form = this.el.querySelector('form'),
+                          $form = $(form),
+                          $stanza = $(stanza);
+                    let $fields;
+
+                    // Hide and show at the end so that we get a fade-in animation
+                    form.classList.add('hidden');
+
+                    form.innerHTML = tpl_registration_form({
+                        '__': _converse.__,
                         'domain': this.domain,
                         'title': this.title,
                         'instructions': this.instructions
-                    }));
+                    });
                     if (this.form_type === 'xform') {
-                        $fields = $stanza.find('field');
-                        _.each($fields, (field) => {
-                            $form.append(utils.xForm2webForm.bind(this, field, stanza));
+                        _.each(stanza.querySelectorAll('field'), (field) => {
+                            form.insertAdjacentHTML(
+                                'beforeend',
+                                utils.xForm2webForm(field, stanza, this.domain)
+                            );
                         });
                     } else {
-                        // Show fields
-                        _.each(_.keys(this.fields), (key) => {
-                            if (key === "username") {
-                                $input = tpl_form_username({
-                                    domain: ` @${this.domain}`,
-                                    name: key,
-                                    type: "text",
-                                    label: key,
-                                    value: '',
-                                    required: 1
-                                });
-                            } else {
-                                $form.append(`<label>${key}</label>`);
-                                $input = $(`<input placeholder="${key}" name="${key}"></input>`);
-                                if (key === 'password' || key === 'email') {
-                                    $input.attr('type', key);
-                                }
-                            }
-                            $form.append($input);
-                        });
-                        // Show urls
-                        _.each(this.urls, (url) => {
-                            $form.append($('<a target="blank"></a>').attr('href', url).text(url));
-                        });
+                        this.renderLegacyRegistrationForm(form);
                     }
                     if (this.fields) {
                         $form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`);
@@ -443,6 +466,7 @@
                     if (_converse.registration_domain) {
                         $form.find('input[type=button]').hide();
                     }
+                    form.classList.remove('hidden');
                 },
 
                 reportErrors (stanza) {

+ 74 - 66
src/form-utils.js

@@ -19,7 +19,8 @@
         "tpl!form_checkbox",
         "tpl!form_username",
         "tpl!form_input",
-        "tpl!form_captcha"
+        "tpl!form_captcha",
+        "tpl!form_url",
     ], factory);
 }(this, function (
         sizzle,
@@ -32,7 +33,8 @@
         tpl_form_checkbox,
         tpl_form_username,
         tpl_form_input,
-        tpl_form_captcha
+        tpl_form_captcha,
+        tpl_form_url
     ) {
     "use strict";
 
@@ -69,7 +71,7 @@
         )[0];
     };
 
-    u.xForm2webForm = function (field, stanza) {
+    u.xForm2webForm = function (field, stanza, domain) {
         /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
          * and turns it into an HTML field.
          *
@@ -79,69 +81,75 @@
          *  Parameters:
          *      (XMLElement) field - the field to convert
          */
-        if (field.getAttribute('type') === 'list-single' ||
-            field.getAttribute('type') === 'list-multi') {
+        if (field.getAttribute('type')) {
+            if (field.getAttribute('type') === 'list-single' ||
+                field.getAttribute('type') === 'list-multi') {
 
-            const values = _.map(
-                u.queryChildren(field, 'value'),
-                _.partial(_.get, _, 'textContent')
-            );
-            const options = _.map(
-                u.queryChildren(field, 'option'),
-                function (option) {
-                    const value = _.get(option.querySelector('value'), 'textContent');
-                    return tpl_select_option({
-                        'value': value,
-                        'label': option.getAttribute('label'),
-                        'selected': _.startsWith(values, value),
-                        'required': _.isNil(field.querySelector('required'))
-                    })
-                }
-            );
-            return tpl_form_select({
-                'name': field.getAttribute('var'),
-                'label': field.getAttribute('label'),
-                'options': options.join(''),
-                'multiple': (field.getAttribute('type') === 'list-multi'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type') === 'fixed') {
-            const text = _.get(field.querySelector('value'), 'textContent');
-            const el = u.stringToDOM('<p class="form-help">');
-            el.textContent = text;
-            return el;
-        } else if (field.getAttribute('type') === 'jid-multi') {
-            return tpl_form_textarea({
-                'name': field.getAttribute('var'),
-                'label': field.getAttribute('label') || '',
-                'value': _.get(field.querySelector('value'), 'textContent'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type') === 'boolean') {
-            return tpl_form_checkbox({
-                'name': field.getAttribute('var'),
-                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
-                'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type') && field.getAttribute('var') === 'username') {
-            return tpl_form_username({
-                'domain': ' @'+this.domain,
-                'name': field.getAttribute('var'),
-                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
-                'value': _.get(field.querySelector('value'), 'textContent'),
-                'required': _.isNil(field.querySelector('required'))
-            })
-        } else if (field.getAttribute('type')) {
-            return tpl_form_input({
-                'name': field.getAttribute('var'),
-                'type': XFORM_TYPE_MAP[field.getAttribute('type')],
-                'label': field.getAttribute('label') || '',
-                'value': _.get(field.querySelector('value'), 'textContent'),
-                'required': _.isNil(field.querySelector('required'))
-            })
+                const values = _.map(
+                    u.queryChildren(field, 'value'),
+                    _.partial(_.get, _, 'textContent')
+                );
+                const options = _.map(
+                    u.queryChildren(field, 'option'),
+                    function (option) {
+                        const value = _.get(option.querySelector('value'), 'textContent');
+                        return tpl_select_option({
+                            'value': value,
+                            'label': option.getAttribute('label'),
+                            'selected': _.startsWith(values, value),
+                            'required': _.isNil(field.querySelector('required'))
+                        })
+                    }
+                );
+                return tpl_form_select({
+                    'name': field.getAttribute('var'),
+                    'label': field.getAttribute('label'),
+                    'options': options.join(''),
+                    'multiple': (field.getAttribute('type') === 'list-multi'),
+                    'required': _.isNil(field.querySelector('required'))
+                });
+            } else if (field.getAttribute('type') === 'fixed') {
+                const text = _.get(field.querySelector('value'), 'textContent');
+                return '<p class="form-help">'+text+'</p>';
+            } else if (field.getAttribute('type') === 'jid-multi') {
+                return tpl_form_textarea({
+                    'name': field.getAttribute('var'),
+                    'label': field.getAttribute('label') || '',
+                    'value': _.get(field.querySelector('value'), 'textContent'),
+                    'required': _.isNil(field.querySelector('required'))
+                });
+            } else if (field.getAttribute('type') === 'boolean') {
+                return tpl_form_checkbox({
+                    'name': field.getAttribute('var'),
+                    'type': XFORM_TYPE_MAP[field.getAttribute('type')],
+                    'label': field.getAttribute('label') || '',
+                    'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
+                    'required': _.isNil(field.querySelector('required'))
+                });
+            } else if (field.getAttribute('var') === 'url') {
+                return tpl_form_url({
+                    'label': field.getAttribute('label') || '',
+                    'value': _.get(field.querySelector('value'), 'textContent')
+                });
+            } else if (field.getAttribute('var') === 'username') {
+                return tpl_form_username({
+                    'domain': ' @'+domain,
+                    'name': field.getAttribute('var'),
+                    'type': XFORM_TYPE_MAP[field.getAttribute('type')],
+                    'label': field.getAttribute('label') || '',
+                    'value': _.get(field.querySelector('value'), 'textContent'),
+                    'required': _.isNil(field.querySelector('required'))
+                });
+            } else {
+                return tpl_form_input({
+                    'label': field.getAttribute('label') || '',
+                    'name': field.getAttribute('var'),
+                    'placeholder': null,
+                    'required': _.isNil(field.querySelector('required')),
+                    'type': XFORM_TYPE_MAP[field.getAttribute('type')],
+                    'value': _.get(field.querySelector('value'), 'textContent')
+                });
+            }
         } else {
             if (field.getAttribute('var') === 'ocr') { // Captcha
                 const uri = field.querySelector('uri');
@@ -152,7 +160,7 @@
                     'data': _.get(el, 'textContent'),
                     'type': uri.getAttribute('type'),
                     'required': _.isNil(field.querySelector('required'))
-                })
+                });
             }
         }
     }

+ 1 - 1
src/templates/converse_brand_heading.html

@@ -3,4 +3,4 @@
         <i class="icon-conversejs"></i>
         <span class="brand-name">converse</span>
     </div>
-<span>
+</span>

+ 1 - 0
src/templates/form_input.html

@@ -1,6 +1,7 @@
 <label>
     {{{label}}}
     <input name="{{{name}}}" type="{{{type}}}" 
+        {[ if (placeholder) { ]} placeholder="{{{placeholder}}}" {[ } ]}
         {[ if (value) { ]} value="{{{value}}}" {[ } ]}
         {[ if (required) { ]} class="required" {[ } ]} >
 </label>

+ 2 - 2
src/templates/login_panel.html

@@ -12,13 +12,13 @@
 
         {[ 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>
+            <p class="form-help fade-in 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>
                 <input type="password" name="password" placeholder="{{{placeholder_password}}}">
             {[ } ]}
-            <input class="pure-button button-primary" type="submit" value="{{{label_login}}}">
+            <input class="pure-button button-primary" type="submit" value="{{{__('Submit')}}}">
         {[ } ]}
         {[ if (authentication == ANONYMOUS) { ]}
             <input class="pure-button button-primary login-anon" type="submit" value="{{{label_anon_login}}}"/>

+ 4 - 4
src/templates/register_link.html

@@ -1,4 +1,4 @@
-<p>{{{ __("Don't have a chat account?") }}}</p>
-<p style="margin-top: 0.5em">
-    <a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account here")}}}</a>
-</p>
+<div class="switch-form">
+    <p>{{{ __("Don't have a chat account?") }}}</p>
+    <p><a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account")}}}</a></p>
+</div>

+ 7 - 5
src/templates/register_panel.html

@@ -2,7 +2,7 @@
     <legend>{{{__("Account Registration")}}}</legend>
     <span class="reg-feedback"></span>
 
-    <label>{{{__("Please enter the XMPP provider you want to register with:")}}}</label>
+    <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>
 
     {[ if (default_domain) { ]}
@@ -14,7 +14,9 @@
     {[ } ]}
 </form>
 
-<p style="margin-top: 1em">{{{ __("Already have a Jabber/XMPP chat account?") }}}</p>
-<p style="margin-top: 0.5em">
-    <a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
-</p>
+<div class="switch-form">
+    <p>{{{ __("Already have a chat account?") }}}</p>
+    <p>
+        <a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
+    </p>
+</div>

+ 1 - 1
src/templates/registration_form.html

@@ -1,3 +1,3 @@
-<p class="provider-title">{{{domain}}}</p>
+<legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
 <p class="title">{{{title}}}</p>
 <p class="instructions">{{{instructions}}}</p>