More login form improvements and also update registration form
This commit is contained in:
parent
e1d1bac790
commit
c655781bc9
@ -5061,13 +5061,13 @@ body.reset {
|
|||||||
#conversejs form.converse-form input.error {
|
#conversejs form.converse-form input.error {
|
||||||
border: 1px solid #A53214;
|
border: 1px solid #A53214;
|
||||||
color: #777; }
|
color: #777; }
|
||||||
#conversejs form.converse-form .form-help {
|
#conversejs form.converse-form .text-muted {
|
||||||
color: gray;
|
color: #A8ABA1 !important;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
padding-top: 0.5em; }
|
padding-top: 0.5em; }
|
||||||
#conversejs form.converse-form .form-help:hover {
|
#conversejs form.converse-form .text-muted a {
|
||||||
color: #777; }
|
color: #79a5ba; }
|
||||||
#conversejs form.converse-form .form-help.error {
|
#conversejs form.converse-form .text-muted.error {
|
||||||
color: #A53214; }
|
color: #A53214; }
|
||||||
#conversejs form.converse-centered-form {
|
#conversejs form.converse-centered-form {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -5730,8 +5730,6 @@ body.reset {
|
|||||||
#conversejs #controlbox #converse-register .provider-score {
|
#conversejs #controlbox #converse-register .provider-score {
|
||||||
width: 178px;
|
width: 178px;
|
||||||
margin-bottom: 8px; }
|
margin-bottom: 8px; }
|
||||||
#conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label {
|
|
||||||
margin: 0.5em 0 0 0; }
|
|
||||||
#conversejs #controlbox #converse-register .form-help .url {
|
#conversejs #controlbox #converse-register .form-help .url {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #578EA9; }
|
color: #578EA9; }
|
||||||
@ -5778,6 +5776,8 @@ body.reset {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto 1em auto; }
|
margin: 0 auto 1em auto; }
|
||||||
|
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
|
||||||
|
margin-top: 2em; }
|
||||||
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
|
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
|
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
|
||||||
@ -5786,8 +5786,7 @@ body.reset {
|
|||||||
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
||||||
color: #3AA569; }
|
color: #3AA569; }
|
||||||
#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: 0 0 2em 0; }
|
|
||||||
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
|
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -5924,7 +5923,7 @@ body.reset {
|
|||||||
#conversejs #controlbox .controlbox-pane .chatbox-btn {
|
#conversejs #controlbox .controlbox-pane .chatbox-btn {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
#conversejs #controlbox .controlbox-pane .switch-form {
|
#conversejs #controlbox .controlbox-pane .switch-form {
|
||||||
padding-bottom: 2em; }
|
padding: 2em 0; }
|
||||||
#conversejs #controlbox .controlbox-pane .switch-form p {
|
#conversejs #controlbox .controlbox-pane .switch-form p {
|
||||||
margin-top: 0.5em; }
|
margin-top: 0.5em; }
|
||||||
#conversejs #controlbox .controlbox-pane dd {
|
#conversejs #controlbox .controlbox-pane dd {
|
||||||
|
@ -5061,13 +5061,13 @@ body.reset {
|
|||||||
#conversejs form.converse-form input.error {
|
#conversejs form.converse-form input.error {
|
||||||
border: 1px solid #A53214;
|
border: 1px solid #A53214;
|
||||||
color: #777; }
|
color: #777; }
|
||||||
#conversejs form.converse-form .form-help {
|
#conversejs form.converse-form .text-muted {
|
||||||
color: gray;
|
color: #A8ABA1 !important;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
padding-top: 0.5em; }
|
padding-top: 0.5em; }
|
||||||
#conversejs form.converse-form .form-help:hover {
|
#conversejs form.converse-form .text-muted a {
|
||||||
color: #777; }
|
color: #79a5ba; }
|
||||||
#conversejs form.converse-form .form-help.error {
|
#conversejs form.converse-form .text-muted.error {
|
||||||
color: #A53214; }
|
color: #A53214; }
|
||||||
#conversejs form.converse-centered-form {
|
#conversejs form.converse-centered-form {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -5796,8 +5796,6 @@ body {
|
|||||||
#conversejs #controlbox #converse-register .provider-score {
|
#conversejs #controlbox #converse-register .provider-score {
|
||||||
width: 178px;
|
width: 178px;
|
||||||
margin-bottom: 8px; }
|
margin-bottom: 8px; }
|
||||||
#conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label {
|
|
||||||
margin: 0.5em 0 0 0; }
|
|
||||||
#conversejs #controlbox #converse-register .form-help .url {
|
#conversejs #controlbox #converse-register .form-help .url {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #578EA9; }
|
color: #578EA9; }
|
||||||
@ -5844,6 +5842,8 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto 1em auto; }
|
margin: 0 auto 1em auto; }
|
||||||
|
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
|
||||||
|
margin-top: 2em; }
|
||||||
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
|
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
|
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
|
||||||
@ -5852,8 +5852,7 @@ body {
|
|||||||
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
||||||
color: #3AA569; }
|
color: #3AA569; }
|
||||||
#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: 0 0 2em 0; }
|
|
||||||
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
|
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -5990,7 +5989,7 @@ body {
|
|||||||
#conversejs #controlbox .controlbox-pane .chatbox-btn {
|
#conversejs #controlbox .controlbox-pane .chatbox-btn {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
#conversejs #controlbox .controlbox-pane .switch-form {
|
#conversejs #controlbox .controlbox-pane .switch-form {
|
||||||
padding-bottom: 2em; }
|
padding: 2em 0; }
|
||||||
#conversejs #controlbox .controlbox-pane .switch-form p {
|
#conversejs #controlbox .controlbox-pane .switch-form p {
|
||||||
margin-top: 0.5em; }
|
margin-top: 0.5em; }
|
||||||
#conversejs #controlbox .controlbox-pane dd {
|
#conversejs #controlbox .controlbox-pane dd {
|
||||||
@ -6034,6 +6033,8 @@ body {
|
|||||||
display: block; } }
|
display: block; } }
|
||||||
#conversejs.fullscreen #controlbox {
|
#conversejs.fullscreen #controlbox {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
|
#conversejs.fullscreen #controlbox .controlbox-panes {
|
||||||
|
overflow-y: hidden; }
|
||||||
#conversejs.fullscreen #controlbox .controlbox-pane {
|
#conversejs.fullscreen #controlbox .controlbox-pane {
|
||||||
border-radius: 0; }
|
border-radius: 0; }
|
||||||
#conversejs.fullscreen #controlbox .flyout {
|
#conversejs.fullscreen #controlbox .flyout {
|
||||||
@ -6084,18 +6085,12 @@ body {
|
|||||||
background-color: #578EA9; }
|
background-color: #578EA9; }
|
||||||
#conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
|
#conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
|
||||||
display: none; }
|
display: none; }
|
||||||
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
|
|
||||||
margin: 2em 30% 3em 30%; }
|
|
||||||
#conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
|
#conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {
|
||||||
margin: 1em 0; }
|
margin: 1em 0; }
|
||||||
#conversejs.fullscreen #controlbox #converse-register input[type=submit],
|
#conversejs.fullscreen #controlbox #converse-register input[type=submit],
|
||||||
#conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
|
#conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
|
||||||
#conversejs.fullscreen #controlbox #converse-login input[type=button] {
|
#conversejs.fullscreen #controlbox #converse-login input[type=button] {
|
||||||
width: auto; }
|
width: auto; }
|
||||||
@media screen and (max-width: 480px) {
|
|
||||||
#conversejs.fullscreen #controlbox #converse-register,
|
|
||||||
#conversejs.fullscreen #controlbox #converse-login {
|
|
||||||
margin: 3em 10% 3em 10%; } }
|
|
||||||
|
|
||||||
#conversejs #converse-roster {
|
#conversejs #converse-roster {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -19,7 +19,6 @@
|
|||||||
<div id="controlbox" class="chatbox">
|
<div id="controlbox" class="chatbox">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="controlbox-panes">
|
<div class="controlbox-panes">
|
||||||
<div id="converse-login-panel" class="controlbox-pane fade-in">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="brand-heading-container col-12">
|
<div class="brand-heading-container col-12">
|
||||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||||
@ -28,7 +27,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div id="converse-login-panel" class="controlbox-pane fade-in row">
|
||||||
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||||
<form id="converse-login" class="converse-form" method="post">
|
<form id="converse-login" class="converse-form" method="post">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -41,7 +40,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<fieldset class="buttons">
|
<fieldset class="buttons">
|
||||||
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
|
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
|
||||||
|
<div class="switch-form">
|
||||||
|
<p>Don't have an XMPP account?</p>
|
||||||
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
|
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
|
||||||
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@ -51,6 +53,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -107,9 +107,6 @@
|
|||||||
width: 178px;
|
width: 178px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.title, .instructions, label {
|
|
||||||
margin: 0.5em 0 0 0;
|
|
||||||
}
|
|
||||||
.form-help .url {
|
.form-help .url {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
@ -186,6 +183,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto 1em auto;
|
margin: 0 auto 1em auto;
|
||||||
}
|
}
|
||||||
|
label {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
fieldset.buttons {
|
fieldset.buttons {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -198,7 +198,6 @@
|
|||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 0 2em 0;
|
|
||||||
}
|
}
|
||||||
.form-url {
|
.form-url {
|
||||||
display: block;
|
display: block;
|
||||||
@ -385,7 +384,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.switch-form {
|
.switch-form {
|
||||||
padding-bottom: 2em;
|
padding: 2em 0;
|
||||||
p {
|
p {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
@ -398,12 +398,12 @@ body.reset {
|
|||||||
border: 1px solid $error-color;
|
border: 1px solid $error-color;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
.form-help {
|
.text-muted {
|
||||||
color: gray;
|
color: $subdued-color !important;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
&:hover {
|
a {
|
||||||
color: $text-color;
|
color: lighten($link-color, 10%);
|
||||||
}
|
}
|
||||||
&.error {
|
&.error {
|
||||||
color: $error-color;
|
color: $error-color;
|
||||||
|
@ -2,6 +2,10 @@
|
|||||||
#controlbox {
|
#controlbox {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
.controlbox-panes {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.controlbox-pane {
|
.controlbox-pane {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@ -61,7 +65,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#converse-register, #converse-login {
|
#converse-register, #converse-login {
|
||||||
margin: 2em 30% 3em 30%;
|
|
||||||
.title, .instructions {
|
.title, .instructions {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
@ -70,11 +73,5 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: $mobile-portrait-length) {
|
|
||||||
#converse-register,
|
|
||||||
#converse-login {
|
|
||||||
margin: 3em 10% 3em 10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -39,7 +39,7 @@
|
|||||||
insertBrandHeading () {
|
insertBrandHeading () {
|
||||||
const { _converse } = this.__super__;
|
const { _converse } = this.__super__;
|
||||||
const el = _converse.root.getElementById('converse-login-panel');
|
const el = _converse.root.getElementById('converse-login-panel');
|
||||||
el.insertAdjacentHTML(
|
el.parentNode.insertAdjacentHTML(
|
||||||
'afterbegin',
|
'afterbegin',
|
||||||
this.createBrandHeadingHTML()
|
this.createBrandHeadingHTML()
|
||||||
);
|
);
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
<div id="converse-login-panel" class="controlbox-pane fade-in">
|
<div id="converse-login-panel" class="controlbox-pane fade-in row">
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||||
<form id="converse-login" class="converse-form" method="post">
|
<form id="converse-login" class="converse-form" method="post">
|
||||||
<legend>{{{o.__("Login")}}}</legend>
|
<legend>{{{o.__("Login")}}}</legend>
|
||||||
@ -35,5 +34,4 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,22 +1,30 @@
|
|||||||
<form id="converse-register" class="pure-form converse-form">
|
<div class="row">
|
||||||
|
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||||
|
<form id="converse-register" class="converse-form">
|
||||||
<legend>{{{o.__("Create your account")}}}</legend>
|
<legend>{{{o.__("Create your account")}}}</legend>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
<label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
|
<label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
|
||||||
<p class="form-help">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
|
|
||||||
<div class="form-errors hidden"></div>
|
<div class="form-errors hidden"></div>
|
||||||
|
|
||||||
{[ if (o.default_domain) { ]}
|
{[ if (o.default_domain) { ]}
|
||||||
{{{o.default_domain}}}
|
{{{o.default_domain}}}
|
||||||
|
</div>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
{[ if (!o.default_domain) { ]}
|
{[ if (!o.default_domain) { ]}
|
||||||
<input autofocus required type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
|
<input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
|
||||||
<input class="pure-button button-primary" type="submit" value="{{{o.label_register}}}">
|
<p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
|
||||||
{[ } ]}
|
</div>
|
||||||
</form>
|
<fieldset class="buttons">
|
||||||
|
<input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
|
||||||
<div class="switch-form">
|
<div class="switch-form">
|
||||||
<p>{{{ o.__("Already have a chat account?") }}}</p>
|
<p>{{{ o.__("Already have a chat account?") }}}</p>
|
||||||
<p>
|
<p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
|
||||||
<a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a>
|
</div>
|
||||||
</p>
|
</fieldset>
|
||||||
|
{[ } ]}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user