Skip to content

C
converse.js
Commit 9cdb0dde authored by JC Brand's avatar JC Brand
Browse files
Options

Various changes 

* In certain places, use native methods instead of jQuery
* Nicer rendering of registration forms
* Use CSS3 fade-in animations.
parent 43bbae90
Show whitespace changes
Inline Side-by-side
Showing with 469 additions and 262 deletions
css/converse.css
View file @ 9cdb0dde
...@@ -1120,6 +1120,22 @@ ...@@ -1120,6 +1120,22 @@
#conversejs { #conversejs {
width: 100%; width: 100%;
width: 100vw; } } 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, #converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
...@@ -1267,7 +1283,8 @@ ...@@ -1267,7 +1283,8 @@
color: #A53214; } color: #A53214; }
#converse-embedded-chat .reg-feedback, #converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback { #conversejs .reg-feedback {
font-size: 85%; } font-size: 85%;
margin-bottom: 1em; }
#converse-embedded-chat .reg-feedback, #converse-embedded-chat .reg-feedback,
#converse-embedded-chat #converse-login .conn-feedback, #converse-embedded-chat #converse-login .conn-feedback,
#conversejs .reg-feedback, #conversejs .reg-feedback,
...@@ -1295,7 +1312,7 @@ ...@@ -1295,7 +1312,7 @@
padding: 0.5em 0; } padding: 0.5em 0; }
#converse-embedded-chat .pure-button, #converse-embedded-chat .pure-button,
#conversejs .pure-button { #conversejs .pure-button {
border-radius: 4px; } border-radius: 5px; }
#converse-embedded-chat .button-primary, #converse-embedded-chat .button-primary,
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
...@@ -1316,7 +1333,7 @@ ...@@ -1316,7 +1333,7 @@
#conversejs form.pure-form.converse-form legend { #conversejs form.pure-form.converse-form legend {
color: #777; color: #777;
font-size: 125%; font-size: 125%;
margin-bottom: 2em; } margin-bottom: 1em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; } display: block; }
...@@ -1885,10 +1902,9 @@ ...@@ -1885,10 +1902,9 @@
#conversejs #controlbox .controlbox-head { #conversejs #controlbox .controlbox-head {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; } } border-top-right-radius: 0; } }
#conversejs #controlbox.logged-out .controlbox-head { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
background-color: white; } position: relative;
#conversejs #controlbox.logged-out .controlbox-head .chatbox-btn { overflow-y: auto; }
color: #578EA9; }
#conversejs #controlbox form.search-xmpp-contact { #conversejs #controlbox form.search-xmpp-contact {
margin: 0; margin: 0;
padding-left: 5px; padding-left: 5px;
...@@ -1907,14 +1923,27 @@ ...@@ -1907,14 +1923,27 @@
padding-left: 2em; padding-left: 2em;
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #converse-register { #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; } background: white; }
#conversejs #controlbox #converse-register .title { #conversejs #controlbox #converse-register .title {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #converse-register .info { #conversejs #controlbox #converse-register .info {
font-style: italic;
color: green; color: green;
font-size: 85%; font-size: 90%;
margin: 5px 0; } margin: 1.5em 0; }
#conversejs #controlbox #converse-register .form-errors { #conversejs #controlbox #converse-register .form-errors {
color: red; color: red;
display: none; } display: none; }
...@@ -1952,18 +1981,18 @@ ...@@ -1952,18 +1981,18 @@
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .conn-feedback p.error { #conversejs #controlbox .conn-feedback p.error {
color: #A53214; } color: #A53214; }
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading { #conversejs #controlbox .brand-heading-container .brand-heading {
text-align: left;
font-size: 150%; } font-size: 150%; }
#conversejs #controlbox .brand-heading-container .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox .toggle-register-login { #conversejs #controlbox .toggle-register-login {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .oauth-login { #conversejs #controlbox .oauth-login {
margin-left: 0;
color: #777; } color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #conversejs #controlbox .oauth-login .icon-social:before {
margin: 2em 0; } font-size: 16px; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto; height: auto;
white-space: normal; } white-space: normal; }
...@@ -1972,6 +2001,10 @@ ...@@ -1972,6 +2001,10 @@
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; width: 100%;
margin: 1em 0; } 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 { #conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; } margin: 0 0 0.75em 0; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom {
...@@ -2194,17 +2227,23 @@ ...@@ -2194,17 +2227,23 @@
padding: 1px; padding: 1px;
float: right; } float: right; }
#conversejs #controlbox .controlbox-panes { #conversejs #controlbox .controlbox-panes {
background-color: white; } height: 100%;
overflow-y: scroll; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
padding: 1em; padding: 1em;
background-color: white; background-color: white;
border: 0; border: 0;
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
left: 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; } 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 { #conversejs #controlbox .controlbox-pane label {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
...@@ -2258,6 +2297,8 @@ ...@@ -2258,6 +2297,8 @@
height: 289px; height: 289px;
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 55px);
height: 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 { #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%; border-radius: 10%;
......
css/inverse.css
View file @ 9cdb0dde
...@@ -1120,6 +1120,22 @@ ...@@ -1120,6 +1120,22 @@
#conversejs { #conversejs {
width: 100%; width: 100%;
width: 100vw; } } 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, #converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
...@@ -1267,7 +1283,8 @@ ...@@ -1267,7 +1283,8 @@
color: #A53214; } color: #A53214; }
#converse-embedded-chat .reg-feedback, #converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback { #conversejs .reg-feedback {
font-size: 85%; } font-size: 85%;
margin-bottom: 1em; }
#converse-embedded-chat .reg-feedback, #converse-embedded-chat .reg-feedback,
#converse-embedded-chat #converse-login .conn-feedback, #converse-embedded-chat #converse-login .conn-feedback,
#conversejs .reg-feedback, #conversejs .reg-feedback,
...@@ -1295,7 +1312,7 @@ ...@@ -1295,7 +1312,7 @@
padding: 0.5em 0; } padding: 0.5em 0; }
#converse-embedded-chat .pure-button, #converse-embedded-chat .pure-button,
#conversejs .pure-button { #conversejs .pure-button {
border-radius: 7px; } border-radius: 5px; }
#converse-embedded-chat .button-primary, #converse-embedded-chat .button-primary,
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
...@@ -1316,7 +1333,7 @@ ...@@ -1316,7 +1333,7 @@
#conversejs form.pure-form.converse-form legend { #conversejs form.pure-form.converse-form legend {
color: #777; color: #777;
font-size: 125%; font-size: 125%;
margin-bottom: 2em; } margin-bottom: 1em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox], #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; } display: block; }
...@@ -1395,6 +1412,24 @@ body { ...@@ -1395,6 +1412,24 @@ body {
body .brand-heading { body .brand-heading {
font-size: 600%; font-size: 600%;
margin-left: -10%; } 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 { body .brand-heading .icon-conversejs {
font-size: 88%; } font-size: 88%; }
body div.content { body div.content {
...@@ -1419,7 +1454,8 @@ body { ...@@ -1419,7 +1454,8 @@ body {
margin: 1em; } margin: 1em; }
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
margin-left: 1em; 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=text],
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=number],
...@@ -1434,7 +1470,7 @@ body { ...@@ -1434,7 +1470,7 @@ body {
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 7px; border-radius: 0;
bottom: 6px; bottom: 6px;
display: block; display: block;
position: absolute; } position: absolute; }
...@@ -1554,8 +1590,8 @@ body { ...@@ -1554,8 +1590,8 @@ body {
#converse-embedded-chat .chatbox .chat-body, #converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
background-color: white; background-color: white;
border-bottom-left-radius: 7px; border-bottom-left-radius: 0;
border-bottom-right-radius: 7px; border-bottom-right-radius: 0;
border-top: 0; border-top: 0;
height: 289px; height: 289px;
height: -webkit-calc(100% - 62px); height: -webkit-calc(100% - 62px);
...@@ -1670,8 +1706,8 @@ body { ...@@ -1670,8 +1706,8 @@ body {
#conversejs .chatbox form.sendXMPPMessage { #conversejs .chatbox form.sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
border-bottom-left-radius: 7px; border-bottom-left-radius: 0;
border-bottom-right-radius: 7px; border-bottom-right-radius: 0;
background-clip: padding-box; background-clip: padding-box;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
border: 0; border: 0;
...@@ -1690,8 +1726,8 @@ body { ...@@ -1690,8 +1726,8 @@ body {
width: 100%; } } width: 100%; } }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea { #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
border-bottom-left-radius: 7px; border-bottom-left-radius: 0;
border-bottom-right-radius: 7px; border-bottom-right-radius: 0;
border: 0; border: 0;
height: 70px; height: 70px;
padding: 0.5em; padding: 0.5em;
...@@ -1898,8 +1934,8 @@ body { ...@@ -1898,8 +1934,8 @@ body {
min-width: auto; } min-width: auto; }
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
background-color: #3AA569; background-color: #3AA569;
border-top-left-radius: 7px; border-top-left-radius: 0;
border-top-right-radius: 7px; } border-top-right-radius: 0; }
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
...@@ -1913,8 +1949,8 @@ body { ...@@ -1913,8 +1949,8 @@ body {
margin-bottom: -5.5px; } margin-bottom: -5.5px; }
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
border-top-left-radius: 7px; border-top-left-radius: 0;
border-top-right-radius: 7px; } border-top-right-radius: 0; }
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
font-size: 26px; font-size: 26px;
line-height: 26px; } line-height: 26px; }
...@@ -1940,8 +1976,8 @@ body { ...@@ -1940,8 +1976,8 @@ body {
margin: 0; } } margin: 0; } }
#conversejs #controlbox .controlbox-head { #conversejs #controlbox .controlbox-head {
background-color: #578EA9; background-color: #578EA9;
border-top-left-radius: 7px; border-top-left-radius: 0;
border-top-right-radius: 7px; border-top-right-radius: 0;
color: white; color: white;
height: 62px; height: 62px;
margin: 0; margin: 0;
...@@ -1954,10 +1990,9 @@ body { ...@@ -1954,10 +1990,9 @@ body {
#conversejs #controlbox .controlbox-head { #conversejs #controlbox .controlbox-head {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; } } border-top-right-radius: 0; } }
#conversejs #controlbox.logged-out .controlbox-head { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
background-color: white; } position: relative;
#conversejs #controlbox.logged-out .controlbox-head .chatbox-btn { overflow-y: auto; }
color: #578EA9; }
#conversejs #controlbox form.search-xmpp-contact { #conversejs #controlbox form.search-xmpp-contact {
margin: 0; margin: 0;
padding-left: 5px; padding-left: 5px;
...@@ -1976,14 +2011,27 @@ body { ...@@ -1976,14 +2011,27 @@ body {
padding-left: 2em; padding-left: 2em;
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #converse-register { #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; } background: white; }
#conversejs #controlbox #converse-register .title { #conversejs #controlbox #converse-register .title {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #converse-register .info { #conversejs #controlbox #converse-register .info {
font-style: italic;
color: green; color: green;
font-size: 85%; font-size: 90%;
margin: 5px 0; } margin: 1.5em 0; }
#conversejs #controlbox #converse-register .form-errors { #conversejs #controlbox #converse-register .form-errors {
color: red; color: red;
display: none; } display: none; }
...@@ -2021,18 +2069,18 @@ body { ...@@ -2021,18 +2069,18 @@ body {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .conn-feedback p.error { #conversejs #controlbox .conn-feedback p.error {
color: #A53214; } color: #A53214; }
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading { #conversejs #controlbox .brand-heading-container .brand-heading {
text-align: left;
font-size: 150%; } font-size: 150%; }
#conversejs #controlbox .brand-heading-container .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox .toggle-register-login { #conversejs #controlbox .toggle-register-login {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .oauth-login { #conversejs #controlbox .oauth-login {
margin-left: 0;
color: #777; } color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #conversejs #controlbox .oauth-login .icon-social:before {
margin: 2em 0; } font-size: 18px; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto; height: auto;
white-space: normal; } white-space: normal; }
...@@ -2041,6 +2089,10 @@ body { ...@@ -2041,6 +2089,10 @@ body {
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; width: 100%;
margin: 1em 0; } 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 { #conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; } margin: 0 0 0.75em 0; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom {
...@@ -2263,17 +2315,23 @@ body { ...@@ -2263,17 +2315,23 @@ body {
padding: 1px; padding: 1px;
float: right; } float: right; }
#conversejs #controlbox .controlbox-panes { #conversejs #controlbox .controlbox-panes {
background-color: white; } height: 100%;
overflow-y: scroll; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
padding: 1.2em; padding: 1.2em;
background-color: white; background-color: white;
border: 0; border: 0;
font-size: 16px; font-size: 16px;
position: absolute; position: absolute;
left: 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; } 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 { #conversejs #controlbox .controlbox-pane label {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -2330,7 +2388,10 @@ body { ...@@ -2330,7 +2388,10 @@ body {
padding-top: 2em; } padding-top: 2em; }
#conversejs #controlbox .toggle-register-login { #conversejs #controlbox .toggle-register-login {
line-height: 30px; } line-height: 30px; }
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading { #conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center;
font-size: 600%; font-size: 600%;
padding: 0.7em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
...@@ -2341,6 +2402,20 @@ body { ...@@ -2341,6 +2402,20 @@ body {
#conversejs #controlbox .brand-heading-container .brand-heading { #conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 400%; } } font-size: 400%; } }
#conversejs #controlbox.logged-out { #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%; } width: 100%; }
#conversejs #controlbox.logged-out .box-flyout { #conversejs #controlbox.logged-out .box-flyout {
width: 100%; } width: 100%; }
...@@ -2357,19 +2432,23 @@ body { ...@@ -2357,19 +2432,23 @@ body {
height: 63px; height: 63px;
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
margin-top: 0.5em; } margin-top: 0.5em; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
#conversejs #controlbox #converse-login {
margin: 3em 30% 3em 30%; } margin: 3em 30% 3em 30%; }
@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 { #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; } margin: 1em 0; }
#conversejs #controlbox #converse-register input[type=submit], #conversejs #controlbox #converse-register input[type=submit],
#conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit], #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
#conversejs #controlbox #converse-login input[type=button] { #conversejs #controlbox #converse-login input[type=button] {
width: auto; } 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 #controlbox-tabs { #conversejs #controlbox #controlbox-tabs {
/* single tab */ } /* single tab */ }
#conversejs #controlbox #controlbox-tabs li { #conversejs #controlbox #controlbox-tabs li {
...@@ -2380,11 +2459,11 @@ body { ...@@ -2380,11 +2459,11 @@ body {
font-size: 18px; } font-size: 18px; }
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover { #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
height: 63px; } height: 63px; }
#conversejs #controlbox .controlbox-panes {
background-color: white; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
height: -webkit-calc(100% - 63px); height: -webkit-calc(100% - 63px);
height: calc(100% - 63px); height: calc(100% - 63px); }
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
#conversejs #converse-roster { #conversejs #converse-roster {
text-align: left; text-align: left;
...@@ -2617,8 +2696,8 @@ body { ...@@ -2617,8 +2696,8 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body, #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
height: 289px; height: 289px;
border-bottom-left-radius: 7px; border-bottom-left-radius: 0;
border-bottom-right-radius: 7px; border-bottom-right-radius: 0;
height: -webkit-calc(100% - 62px); height: -webkit-calc(100% - 62px);
height: calc(100% - 62px); height: calc(100% - 62px);
background-color: white; background-color: white;
...@@ -2664,7 +2743,7 @@ body { ...@@ -2664,7 +2743,7 @@ body {
vertical-align: top; vertical-align: top;
background-color: white; background-color: white;
border-left: 1px solid #777; border-left: 1px solid #777;
border-bottom-right-radius: 7px; border-bottom-right-radius: 0;
width: 30%; width: 30%;
height: 100%; height: 100%;
padding: 0.5em; } padding: 0.5em; }
...@@ -2743,8 +2822,8 @@ body { ...@@ -2743,8 +2822,8 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: 7px; border-bottom-left-radius: 0;
border-bottom-right-radius: 7px; border-bottom-right-radius: 0;
border: 0; border: 0;
color: #777; color: #777;
font-size: 16px; font-size: 16px;
...@@ -2803,22 +2882,22 @@ body { ...@@ -2803,22 +2882,22 @@ body {
width: -webkit-calc(100% - 250px); width: -webkit-calc(100% - 250px);
width: calc(100% - 250px); } width: calc(100% - 250px); }
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 7px; border-top-left-radius: 0;
border-top-right-radius: 7px; } border-top-right-radius: 0; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
border-radius: 7px; } border-radius: 0; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area { #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 7px; border-top-left-radius: 0;
min-width: auto; } min-width: auto; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #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; } padding: 0 1em 1em 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full { #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; } max-width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator { #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
max-width: 100%; } max-width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants { #conversejs .chatroom .box-flyout .chatroom-body .occupants {
border-top-right-radius: 7px; border-top-right-radius: 0;
padding: 1em; } padding: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 18px; } font-size: 18px; }
...@@ -2842,12 +2921,12 @@ body { ...@@ -2842,12 +2921,12 @@ body {
background-color: #E7A151; } background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body { #conversejs .chatbox.headlines .chat-body {
background-color: #E7A151; background-color: #E7A151;
border-radius: 7px; } border-radius: 0; }
#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them { #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
color: #D2842B; } color: #D2842B; }
#conversejs .chatbox.headlines .chat-content { #conversejs .chatbox.headlines .chat-content {
height: 100%; height: 100%;
border-radius: 7px; } border-radius: 0; }
#conversejs .chatbox.headlines .box-flyout { #conversejs .chatbox.headlines .box-flyout {
background-color: #E7A151; } background-color: #E7A151; }
......
sass/_controlbox.scss
View file @ 9cdb0dde
...@@ -29,10 +29,10 @@ ...@@ -29,10 +29,10 @@
} }
&.logged-out { &.logged-out {
.controlbox-head { .box-flyout {
background-color: white; .controlbox-pane {
.chatbox-btn { position: relative;
color: $controlbox-head-color; overflow-y: auto;
} }
} }
} }
...@@ -62,15 +62,15 @@ ...@@ -62,15 +62,15 @@
} }
#converse-register { #converse-register {
@include fade-in;
background: white; background: white;
.title { .title {
font-weight: bold; font-weight: bold;
} }
.info { .info {
font-style: italic;
color: green; color: green;
font-size: 85%; font-size: 90%;
margin: 5px 0; margin: 1.5em 0;
} }
.form-errors { .form-errors {
color: red; color: red;
...@@ -128,8 +128,8 @@ ...@@ -128,8 +128,8 @@
} }
.brand-heading-container { .brand-heading-container {
text-align: center;
.brand-heading { .brand-heading {
text-align: left;
font-size: 150%; font-size: 150%;
} }
.brand-name { .brand-name {
...@@ -140,12 +140,16 @@ ...@@ -140,12 +140,16 @@
.toggle-register-login { .toggle-register-login {
font-weight: bold; font-weight: bold;
} }
.oauth-login { .oauth-login {
margin-left: 0;
color: $text-color; color: $text-color;
.icon-social:before {
font-size: $font-size-large;
}
} }
#converse-register, #converse-login { #converse-register, #converse-login {
margin: 2em 0;
.login-anon { .login-anon {
height: auto; height: auto;
white-space: normal; white-space: normal;
...@@ -157,6 +161,12 @@ ...@@ -157,6 +161,12 @@
width: 100%; width: 100%;
margin: 1em 0; margin: 1em 0;
} }
.form-url {
display: block;
font-weight: normal;
margin: 1em 0;
}
} }
#users { #users {
.add-converse-contact { .add-converse-contact {
...@@ -442,7 +452,8 @@ ...@@ -442,7 +452,8 @@
} }
.controlbox-panes { .controlbox-panes {
background-color: white; height: 100%;
overflow-y: scroll;
} }
.controlbox-pane { .controlbox-pane {
...@@ -451,10 +462,17 @@ ...@@ -451,10 +462,17 @@
border: 0; border: 0;
font-size: $font-size; font-size: $font-size;
position: absolute; position: absolute;
left: 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
.switch-form {
padding-bottom: 2em;
p {
margin-top: 0.5em;
}
}
label { label {
font-size: $font-size; font-size: $font-size;
font-weight: bold; font-weight: bold;
......
sass/_core.scss
View file @ 9cdb0dde
@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, #converse-embedded-chat,
#conversejs { #conversejs {
bottom: 0; bottom: 0;
...@@ -20,6 +28,9 @@ ...@@ -20,6 +28,9 @@
width: 100vw; width: 100vw;
} }
.fade-in {
@include fade-in;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color; color: $subdued-color;
...@@ -143,6 +154,7 @@ ...@@ -143,6 +154,7 @@
} }
.reg-feedback { .reg-feedback {
font-size: 85%; font-size: 85%;
margin-bottom: 1em;
} }
.reg-feedback, .reg-feedback,
...@@ -173,7 +185,7 @@ ...@@ -173,7 +185,7 @@
padding: 0.5em 0; padding: 0.5em 0;
} }
.pure-button { .pure-button {
border-radius: $chatbox-border-radius; border-radius: $button-border-radius;
} }
.button-primary { .button-primary {
color: white; color: white;
...@@ -195,7 +207,7 @@ ...@@ -195,7 +207,7 @@
legend { legend {
color: $text-color; color: $text-color;
font-size: 125%; font-size: 125%;
margin-bottom: 2em; margin-bottom: 1em;
} }
input[type=checkbox] { input[type=checkbox] {
display: block; display: block;
......
sass/converse/_controlbox.scss
View file @ 9cdb0dde
...@@ -6,5 +6,11 @@ ...@@ -6,5 +6,11 @@
height: 289px; height: 289px;
@include calc(height, '100% - #{$controlbox-head-height}'); @include calc(height, '100% - #{$controlbox-head-height}');
} }
.brand-heading-container {
.brand-heading {
margin-left: 1em;
}
}
} }
} }
sass/inverse/_controlbox.scss
View file @ 9cdb0dde
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
} }
.brand-heading-container { .brand-heading-container {
text-align: center;
.brand-heading { .brand-heading {
text-align: center;
font-size: 600%; font-size: 600%;
padding: 0.7em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
...@@ -31,6 +33,7 @@ ...@@ -31,6 +33,7 @@
} }
&.logged-out { &.logged-out {
@include fade-in;
width: 100%; width: 100%;
.box-flyout { .box-flyout {
width: 100%; width: 100%;
...@@ -52,17 +55,8 @@ ...@@ -52,17 +55,8 @@
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
margin-top: 0.5em; 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 { #converse-register, #converse-login {
margin: 3em 30% 3em 30%;
.title, .instructions, label { .title, .instructions, label {
margin: 1em 0; margin: 1em 0;
} }
...@@ -70,6 +64,19 @@ ...@@ -70,6 +64,19 @@
input[type=button] { input[type=button] {
width: auto; 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 { #controlbox-tabs {
/* single tab */ /* single tab */
...@@ -86,10 +93,11 @@ ...@@ -86,10 +93,11 @@
} }
} }
} }
.controlbox-panes {
background-color: white;
}
.controlbox-pane { .controlbox-pane {
@include calc(height, '100% - #{$controlbox-head-height}'); @include calc(height, '100% - #{$controlbox-head-height}');
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
} }
} }
sass/inverse/_core.scss
View file @ 9cdb0dde
...@@ -8,6 +8,10 @@ body { ...@@ -8,6 +8,10 @@ body {
.brand-heading { .brand-heading {
font-size: 600%; font-size: 600%;
margin-left: -10%; margin-left: -10%;
&.fade-in {
@include fade-in;
@include animation-delay(2s);
}
.icon-conversejs { .icon-conversejs {
font-size: 88%; font-size: 88%;
} }
...@@ -40,10 +44,10 @@ body { ...@@ -40,10 +44,10 @@ body {
form { form {
&.pure-form.converse-form { &.pure-form.converse-form {
margin: 1em; margin: 1em;
input[type=checkbox] { input[type=checkbox] {
margin-left: 1em; margin-left: 1em;
display: inline; display: inline;
margin-bottom: 2em;
} }
input[type=text], input[type=text],
input[type=password], input[type=password],
......
sass/inverse/_variables.scss
View file @ 9cdb0dde
...@@ -87,7 +87,7 @@ $online-color: $green !default; ...@@ -87,7 +87,7 @@ $online-color: $green !default;
$error-color: $darkest-red !default; $error-color: $darkest-red !default;
$button-border-radius: 5px !default; $button-border-radius: 5px !default;
$chatbox-border-radius: 7px !default; $chatbox-border-radius: 0 !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default; $chatbox-hover-height: 6px !default;
......
src/converse-controlbox.js
View file @ 9cdb0dde
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
_converse.ControlBoxView = _converse.ChatBoxView.extend({ _converse.ControlBoxView = _converse.ChatBoxView.extend({
tagName: 'div', tagName: 'div',
className: 'chatbox', className: 'chatbox fade-in',
id: 'controlbox', id: 'controlbox',
events: { events: {
'click a.close-chatbox-button': 'close', 'click a.close-chatbox-button': 'close',
...@@ -273,9 +273,12 @@ ...@@ -273,9 +273,12 @@
}, },
createBrandHeadingElement () { createBrandHeadingElement () {
const div = document.createElement('div'); return tpl_brand_heading();
div.innerHTML = tpl_brand_heading(); },
return div.firstChild;
insertBrandHeading () {
const el = this.el.querySelector('.controlbox-head');
el.insertAdjacentHTML('beforeend', this.createBrandHeadingElement());
}, },
renderLoginPanel () { renderLoginPanel () {
...@@ -285,8 +288,7 @@ ...@@ -285,8 +288,7 @@
}); });
this.loginpanel.render(); this.loginpanel.render();
this.el.classList.add("logged-out"); this.el.classList.add("logged-out");
const el = document.getElementById('converse-login-panel'); this.insertBrandHeading();
el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
return this; return this;
}, },
...@@ -343,13 +345,11 @@ ...@@ -343,13 +345,11 @@
}, },
onControlBoxToggleHidden () { onControlBoxToggleHidden () {
const that = this;
utils.fadeIn(this.el, function () {
_converse.controlboxtoggle.updateOnlineCount(); _converse.controlboxtoggle.updateOnlineCount();
utils.refreshWebkit(); utils.refreshWebkit();
that.model.set('closed', false); this.model.set('closed', false);
_converse.emit('controlBoxOpened', that); this.el.classList.remove('hidden');
}); _converse.emit('controlBoxOpened', this);
}, },
show () { show () {
...@@ -389,7 +389,7 @@ ...@@ -389,7 +389,7 @@
_converse.LoginPanel = Backbone.View.extend({ _converse.LoginPanel = Backbone.View.extend({
tagName: 'div', tagName: 'div',
id: "converse-login-panel", id: "converse-login-panel",
className: 'controlbox-pane', className: 'controlbox-pane fade-in',
events: { events: {
'submit form#converse-login': 'authenticate' 'submit form#converse-login': 'authenticate'
}, },
...@@ -422,7 +422,6 @@ ...@@ -422,7 +422,6 @@
'label_username': __('Jabber ID:'), 'label_username': __('Jabber ID:'),
'label_password': __('Password:'), 'label_password': __('Password:'),
'label_anon_login': __('Click here to log in anonymously'), '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_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
'placeholder_password': __('password') 'placeholder_password': __('password')
}) })
......
src/converse-inverse.js
View file @ 9cdb0dde
...@@ -55,6 +55,11 @@ ...@@ -55,6 +55,11 @@
const div = document.createElement('div'); const div = document.createElement('div');
div.innerHTML = tpl_brand_heading(); div.innerHTML = tpl_brand_heading();
return div.firstChild; return div.firstChild;
},
insertBrandHeading () {
const el = document.getElementById('converse-login-panel');
el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
} }
}, },
......
src/converse-register.js
View file @ 9cdb0dde
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"tpl!register_panel", "tpl!register_panel",
"tpl!registration_form", "tpl!registration_form",
"tpl!registration_request", "tpl!registration_request",
"tpl!form_input",
"tpl!spinner", "tpl!spinner",
"converse-controlbox" "converse-controlbox"
], factory); ], factory);
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
tpl_register_panel, tpl_register_panel,
tpl_registration_form, tpl_registration_form,
tpl_registration_request, tpl_registration_request,
tpl_form_input,
tpl_spinner tpl_spinner
) { ) {
...@@ -132,19 +134,12 @@ ...@@ -132,19 +134,12 @@
const { _converse } = this, const { _converse } = this,
{ __ } = _converse; { __ } = _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({ _converse.api.settings.update({
allow_registration: true, allow_registration: true,
domain_placeholder: __(" e.g. conversejs.org"), // Placeholder text shown in the domain input on the registration form 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 providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page
}); });
_converse.RegistrationRouter = Backbone.Router.extend({ _converse.RegistrationRouter = Backbone.Router.extend({
initialize () { initialize () {
...@@ -169,7 +164,7 @@ ...@@ -169,7 +164,7 @@
_converse.RegisterPanel = Backbone.View.extend({ _converse.RegisterPanel = Backbone.View.extend({
tagName: 'div', tagName: 'div',
id: "converse-register-panel", id: "converse-register-panel",
className: 'controlbox-pane', className: 'controlbox-pane fade-in',
events: { events: {
'submit form#converse-register': 'onProviderChosen' 'submit form#converse-register': 'onProviderChosen'
}, },
...@@ -242,7 +237,9 @@ ...@@ -242,7 +237,9 @@
} }
// Send an IQ stanza to get all required data fields // Send an IQ stanza to get all required data fields
conn._addSysHandler(this.onRegistrationFields.bind(this), null, "iq", null, null); 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; conn.connected = false;
return true; return true;
}, },
...@@ -253,6 +250,13 @@ ...@@ -253,6 +250,13 @@
* Parameters: * Parameters:
* (XMLElement) elem - The query stanza. * (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) { if (stanza.getElementsByTagName("query").length !== 1) {
_converse.connection._changeConnectStatus(Strophe.Status.REGIFAIL, "unknown"); _converse.connection._changeConnectStatus(Strophe.Status.REGIFAIL, "unknown");
return false; return false;
...@@ -383,6 +387,40 @@ ...@@ -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) { renderRegistrationForm (stanza) {
/* Renders the registration form based on the XForm fields /* Renders the registration form based on the XForm fields
* received from the XMPP server. * received from the XMPP server.
...@@ -392,44 +430,29 @@ ...@@ -392,44 +430,29 @@
*/ */
this.model.set('registration_form_rendered', true); this.model.set('registration_form_rendered', true);
const $form = this.$('form'), const form = this.el.querySelector('form'),
$form = $(form),
$stanza = $(stanza); $stanza = $(stanza);
let $fields, $input; let $fields;
$form.empty().append(tpl_registration_form({
// 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, 'domain': this.domain,
'title': this.title, 'title': this.title,
'instructions': this.instructions 'instructions': this.instructions
}));
if (this.form_type === 'xform') {
$fields = $stanza.find('field');
_.each($fields, (field) => {
$form.append(utils.xForm2webForm.bind(this, field, stanza));
}); });
} else { if (this.form_type === 'xform') {
// Show fields _.each(stanza.querySelectorAll('field'), (field) => {
_.each(_.keys(this.fields), (key) => { form.insertAdjacentHTML(
if (key === "username") { 'beforeend',
$input = tpl_form_username({ utils.xForm2webForm(field, stanza, this.domain)
domain: ` @${this.domain}`, );
name: key,
type: "text",
label: key,
value: '',
required: 1
}); });
} else { } else {
$form.append(`<label>${key}</label>`); this.renderLegacyRegistrationForm(form);
$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));
});
} }
if (this.fields) { if (this.fields) {
$form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`); $form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`);
...@@ -443,6 +466,7 @@ ...@@ -443,6 +466,7 @@
if (_converse.registration_domain) { if (_converse.registration_domain) {
$form.find('input[type=button]').hide(); $form.find('input[type=button]').hide();
} }
form.classList.remove('hidden');
}, },
reportErrors (stanza) { reportErrors (stanza) {
......
src/form-utils.js
View file @ 9cdb0dde
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
"tpl!form_checkbox", "tpl!form_checkbox",
"tpl!form_username", "tpl!form_username",
"tpl!form_input", "tpl!form_input",
"tpl!form_captcha" "tpl!form_captcha",
"tpl!form_url",
], factory); ], factory);
}(this, function ( }(this, function (
sizzle, sizzle,
...@@ -32,7 +33,8 @@ ...@@ -32,7 +33,8 @@
tpl_form_checkbox, tpl_form_checkbox,
tpl_form_username, tpl_form_username,
tpl_form_input, tpl_form_input,
tpl_form_captcha tpl_form_captcha,
tpl_form_url
) { ) {
"use strict"; "use strict";
...@@ -69,7 +71,7 @@ ...@@ -69,7 +71,7 @@
)[0]; )[0];
}; };
u.xForm2webForm = function (field, stanza) { u.xForm2webForm = function (field, stanza, domain) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into an HTML field. * and turns it into an HTML field.
* *
...@@ -79,6 +81,7 @@ ...@@ -79,6 +81,7 @@
* Parameters: * Parameters:
* (XMLElement) field - the field to convert * (XMLElement) field - the field to convert
*/ */
if (field.getAttribute('type')) {
if (field.getAttribute('type') === 'list-single' || if (field.getAttribute('type') === 'list-single' ||
field.getAttribute('type') === 'list-multi') { field.getAttribute('type') === 'list-multi') {
...@@ -104,19 +107,17 @@ ...@@ -104,19 +107,17 @@
'options': options.join(''), 'options': options.join(''),
'multiple': (field.getAttribute('type') === 'list-multi'), 'multiple': (field.getAttribute('type') === 'list-multi'),
'required': _.isNil(field.querySelector('required')) 'required': _.isNil(field.querySelector('required'))
}) });
} else if (field.getAttribute('type') === 'fixed') { } else if (field.getAttribute('type') === 'fixed') {
const text = _.get(field.querySelector('value'), 'textContent'); const text = _.get(field.querySelector('value'), 'textContent');
const el = u.stringToDOM('<p class="form-help">'); return '<p class="form-help">'+text+'</p>';
el.textContent = text;
return el;
} else if (field.getAttribute('type') === 'jid-multi') { } else if (field.getAttribute('type') === 'jid-multi') {
return tpl_form_textarea({ return tpl_form_textarea({
'name': field.getAttribute('var'), 'name': field.getAttribute('var'),
'label': field.getAttribute('label') || '', 'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'), 'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required')) 'required': _.isNil(field.querySelector('required'))
}) });
} else if (field.getAttribute('type') === 'boolean') { } else if (field.getAttribute('type') === 'boolean') {
return tpl_form_checkbox({ return tpl_form_checkbox({
'name': field.getAttribute('var'), 'name': field.getAttribute('var'),
...@@ -124,24 +125,31 @@ ...@@ -124,24 +125,31 @@
'label': field.getAttribute('label') || '', 'label': field.getAttribute('label') || '',
'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '', 'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
'required': _.isNil(field.querySelector('required')) 'required': _.isNil(field.querySelector('required'))
}) });
} else if (field.getAttribute('type') && field.getAttribute('var') === 'username') { } 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({ return tpl_form_username({
'domain': ' @'+this.domain, 'domain': ' @'+domain,
'name': field.getAttribute('var'), 'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')], 'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '', 'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'), 'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required')) 'required': _.isNil(field.querySelector('required'))
}) });
} else if (field.getAttribute('type')) { } else {
return tpl_form_input({ return tpl_form_input({
'label': field.getAttribute('label') || '',
'name': field.getAttribute('var'), 'name': field.getAttribute('var'),
'placeholder': null,
'required': _.isNil(field.querySelector('required')),
'type': XFORM_TYPE_MAP[field.getAttribute('type')], 'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '', 'value': _.get(field.querySelector('value'), 'textContent')
'value': _.get(field.querySelector('value'), 'textContent'), });
'required': _.isNil(field.querySelector('required')) }
})
} else { } else {
if (field.getAttribute('var') === 'ocr') { // Captcha if (field.getAttribute('var') === 'ocr') { // Captcha
const uri = field.querySelector('uri'); const uri = field.querySelector('uri');
...@@ -152,7 +160,7 @@ ...@@ -152,7 +160,7 @@
'data': _.get(el, 'textContent'), 'data': _.get(el, 'textContent'),
'type': uri.getAttribute('type'), 'type': uri.getAttribute('type'),
'required': _.isNil(field.querySelector('required')) 'required': _.isNil(field.querySelector('required'))
}) });
} }
} }
} }
......
src/templates/converse_brand_heading.html
View file @ 9cdb0dde
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
<i class="icon-conversejs"></i> <i class="icon-conversejs"></i>
<span class="brand-name">converse</span> <span class="brand-name">converse</span>
</div> </div>
<span> </span>
src/templates/form_input.html
View file @ 9cdb0dde
<label> <label>
{{{label}}} {{{label}}}
<input name="{{{name}}}" type="{{{type}}}" <input name="{{{name}}}" type="{{{type}}}"
{[ if (placeholder) { ]} placeholder="{{{placeholder}}}" {[ } ]}
{[ if (value) { ]} value="{{{value}}}" {[ } ]} {[ if (value) { ]} value="{{{value}}}" {[ } ]}
{[ if (required) { ]} class="required" {[ } ]} > {[ if (required) { ]} class="required" {[ } ]} >
</label> </label>
src/templates/login_panel.html
View file @ 9cdb0dde
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
{[ if (authentication == LOGIN || authentication == EXTERNAL) { ]} {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
<label>{{{label_username}}}</label> <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}}}"> <input type="text" name="jid" placeholder="{{{placeholder_username}}}">
{[ if (authentication !== EXTERNAL) { ]} {[ if (authentication !== EXTERNAL) { ]}
<label>{{{label_password}}}</label> <label>{{{label_password}}}</label>
<input type="password" name="password" placeholder="{{{placeholder_password}}}"> <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) { ]} {[ if (authentication == ANONYMOUS) { ]}
<input class="pure-button button-primary login-anon" type="submit" value="{{{label_anon_login}}}"/> <input class="pure-button button-primary login-anon" type="submit" value="{{{label_anon_login}}}"/>
......
src/templates/register_link.html
View file @ 9cdb0dde
<p>{{{ __("Don't have a chat account?") }}}</p> <div class="switch-form">
<p style="margin-top: 0.5em"> <p>{{{ __("Don't have a chat account?") }}}</p>
<a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account here")}}}</a> <p><a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account")}}}</a></p>
</p> </div>
src/templates/register_panel.html
View file @ 9cdb0dde
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<legend>{{{__("Account Registration")}}}</legend> <legend>{{{__("Account Registration")}}}</legend>
<span class="reg-feedback"></span> <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> <p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
{[ if (default_domain) { ]} {[ if (default_domain) { ]}
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
{[ } ]} {[ } ]}
</form> </form>
<p style="margin-top: 1em">{{{ __("Already have a Jabber/XMPP chat account?") }}}</p> <div class="switch-form">
<p style="margin-top: 0.5em"> <p>{{{ __("Already have a chat account?") }}}</p>
<p>
<a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a> <a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
</p> </p>
</div>
src/templates/registration_form.html
View file @ 9cdb0dde
<p class="provider-title">{{{domain}}}</p> <legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
<p class="title">{{{title}}}</p> <p class="title">{{{title}}}</p>
<p class="instructions">{{{instructions}}}</p> <p class="instructions">{{{instructions}}}</p>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7