Skip to content

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

More login form improvements and also update registration form

parent e1d1bac7
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 125 deletions
css/converse.css
View file @ c655781b
...@@ -5061,13 +5061,13 @@ body.reset { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 {
......
css/inverse.css
View file @ c655781b
...@@ -5061,13 +5061,13 @@ body.reset { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { #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: 2em 30% 3em 30%; } margin: 1em 0; }
#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 input[type=submit],
margin: 1em 0; } #conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
#conversejs.fullscreen #controlbox #converse-register input[type=submit], #conversejs.fullscreen #controlbox #converse-login input[type=button] {
#conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit], width: auto; }
#conversejs.fullscreen #controlbox #converse-login input[type=button] {
width: auto; }
@media screen and (max-width: 480px) {
#conversejs.fullscreen #controlbox #converse-register,
#conversejs.fullscreen #controlbox #converse-login {
margin: 3em 10% 3em 10%; } }
#conversejs #converse-roster { #conversejs #converse-roster {
text-align: left; text-align: left;
......
mockup/fullscreen-login.html
View file @ c655781b
...@@ -19,32 +19,33 @@ ...@@ -19,32 +19,33 @@
<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> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
</div>
</div> </div>
</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">
<label for="jid">XMPP Username:</label> <label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off"> <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password:</label> <label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off"> <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</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>
</fieldset> </div>
</form> </fieldset>
</div> </form>
</div> </div>
</div> </div>
</div> </div>
......
sass/_controlbox.scss
View file @ c655781b
...@@ -107,9 +107,6 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -385,7 +384,7 @@
} }
.switch-form { .switch-form {
padding-bottom: 2em; padding: 2em 0;
p { p {
margin-top: 0.5em; margin-top: 0.5em;
} }
......
sass/_core.scss
View file @ c655781b
...@@ -398,12 +398,12 @@ body.reset { ...@@ -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;
......
sass/inverse/_controlbox.scss
View file @ c655781b
...@@ -2,6 +2,10 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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%;
}
}
} }
} }
src/converse-fullscreen.js
View file @ c655781b
...@@ -39,7 +39,7 @@ ...@@ -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()
); );
......
src/templates/login_panel.html
View file @ c655781b
<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> <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
<div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}"> <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
<p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p> <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
<p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p> </div>
</div> {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
{[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]} <span class="spinner centered"/>
<span class="spinner centered"/> {[ } else { ]}
{[ } else { ]} {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
{[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]} <div class="form-group">
<div class="form-group"> <label for="jid">{{{o.__("XMPP Username:")}}}</label>
<label for="jid">{{{o.__("XMPP Username:")}}}</label> <input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
<input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}"> </div>
</div> {[ if (o.authentication !== o.EXTERNAL) { ]}
{[ if (o.authentication !== o.EXTERNAL) { ]} <div class="form-group">
<div class="form-group"> <label for="password">{{{o.__("Password:")}}}</label>
<label for="password">{{{o.__("Password:")}}}</label> <input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
<input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}"> </div>
</div>
{[ } ]}
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
</fieldset>
{[ } ]}
{[ if (o.authentication == o.ANONYMOUS) { ]}
<input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
{[ } ]}
{[ if (o.authentication == o.PREBIND) { ]}
<p>Disconnected.</p>
{[ } ]} {[ } ]}
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
</fieldset>
{[ } ]}
{[ if (o.authentication == o.ANONYMOUS) { ]}
<input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
{[ } ]}
{[ if (o.authentication == o.PREBIND) { ]}
<p>Disconnected.</p>
{[ } ]} {[ } ]}
</fieldset> {[ } ]}
</form> </fieldset>
</div> </form>
</div> </div>
</div> </div>
src/templates/register_panel.html
View file @ c655781b
<form id="converse-register" class="pure-form converse-form"> <div class="row">
<legend>{{{o.__("Create your account")}}}</legend> <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<form id="converse-register" class="converse-form">
<legend>{{{o.__("Create your account")}}}</legend>
<label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label> <div class="form-group">
<p class="form-help">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p> <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
<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) { ]} {[ } ]}
<input autofocus required type="text" name="domain" placeholder="{{{o.domain_placeholder}}}"> {[ if (!o.default_domain) { ]}
<input class="pure-button button-primary" type="submit" value="{{{o.label_register}}}"> <input class="form-control" autofocus="autofocus" required="required" type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
{[ } ]} <p class="form-text text-muted">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
</form> </div>
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.label_register}}}">
<div class="switch-form">
<p>{{{ o.__("Already have a chat account?") }}}</p>
<p><a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a></p>
</div>
</fieldset>
{[ } ]}
</div>
</form>
<div class="switch-form"> </div>
<p>{{{ o.__("Already have a chat account?") }}}</p>
<p>
<a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a>
</p>
</div> </div>
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