Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update the login form with markup from bootstrap mockup

Browse Source
This commit is contained in:
JC Brand 2018-02-24 18:43:32 +01:00
parent 3b22f918fa
commit e1d1bac790
12 changed files with 82 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/converse.css
View File

@ -5115,7 +5115,7 @@ body.reset {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs label {
#conversejs #user-profile-modal label {
font-weight: bold; }
#converse-embedded-chat .flyout,
@ -5590,7 +5590,7 @@ body.reset {
@media screen and (max-width: 767px) {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs #login-dialog .converse-form {
#conversejs #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs .sidebar {
display: block; }
@ -5763,9 +5763,9 @@ body.reset {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog {
#conversejs #controlbox #converse-login-panel {
flex-direction: column; }
#conversejs #controlbox #login-dialog .brand-heading {
#conversejs #controlbox #converse-login-panel .brand-heading {
color: #578EA9; }
#conversejs #controlbox .toggle-register-login {
font-weight: bold; }
@ -5774,6 +5774,10 @@ body.reset {
color: #777; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 16px; }
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
text-align: center; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@ -5783,7 +5787,7 @@ body.reset {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
margin: 0 0 2em 0; }
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
display: block;
font-weight: normal;
@ -5923,10 +5927,6 @@ body.reset {
padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p {
margin-top: 0.5em; }
#conversejs #controlbox .controlbox-pane label {
font-size: 14px;
font-weight: bold;
height: auto; }
#conversejs #controlbox .controlbox-pane dd {
margin-left: 0;
margin-bottom: 0; }

33
css/inverse.css
View File

@ -5159,19 +5159,13 @@ body {
margin-left: 1em;
display: inline;
margin-bottom: 2em; }
#conversejs.fullscreen form.converse-form input[type=text],
#conversejs.fullscreen form.converse-form input[type=password],
#conversejs.fullscreen form.converse-form input[type=number],
#conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.converse-form input[type=submit] {
height: 2.2em; }
#conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em; }
#conversejs label {
#conversejs #user-profile-modal label {
font-weight: bold; }
#converse-embedded-chat .flyout,
@ -5646,7 +5640,7 @@ body {
@media screen and (max-width: 767px) {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs #login-dialog .converse-form {
#conversejs #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs .sidebar {
display: block; }
@ -5835,9 +5829,9 @@ body {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog {
#conversejs #controlbox #converse-login-panel {
flex-direction: column; }
#conversejs #controlbox #login-dialog .brand-heading {
#conversejs #controlbox #converse-login-panel .brand-heading {
color: #578EA9; }
#conversejs #controlbox .toggle-register-login {
font-weight: bold; }
@ -5846,6 +5840,10 @@ body {
color: #777; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 18px; }
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
text-align: center; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@ -5855,7 +5853,7 @@ body {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
margin: 0 0 2em 0; }
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
display: block;
font-weight: normal;
@ -5995,10 +5993,6 @@ body {
padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p {
margin-top: 0.5em; }
#conversejs #controlbox .controlbox-pane label {
font-size: 16px;
font-weight: bold;
height: auto; }
#conversejs #controlbox .controlbox-pane dd {
margin-left: 0;
margin-bottom: 0; }
@ -6044,9 +6038,9 @@ body {
border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout {
border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog {
#conversejs.fullscreen #controlbox #converse-login-panel {
border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog .converse-form {
#conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
margin: 0;
padding: 3em 2em 3em; }
#conversejs.fullscreen #controlbox .toggle-register-login {
@ -6098,11 +6092,6 @@ body {
#conversejs.fullscreen #controlbox #converse-register input[type=button], #conversejs.fullscreen #controlbox #converse-login input[type=submit],
#conversejs.fullscreen #controlbox #converse-login input[type=button] {
width: auto; }
#conversejs.fullscreen #controlbox #converse-register input, #conversejs.fullscreen #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
#conversejs.fullscreen #controlbox #converse-register input.pure-button, #conversejs.fullscreen #controlbox #converse-login input.pure-button {
margin: 1em 0.5em; }
@media screen and (max-width: 480px) {
#conversejs.fullscreen #controlbox #converse-register,
#conversejs.fullscreen #controlbox #converse-login {

7
mockup/fullscreen-login.html
View File

@ -19,17 +19,18 @@
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div id="converse-login-panel" class="controlbox-pane fade-in">
<div class="row">
<div class="brand-heading-container col-12">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p><a 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>
</div>
</div>
<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-login" class="pure-form converse-form">
<form id="converse-login" class="converse-form" method="post">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">

2
sass/_chatbox.scss
View File

@ -493,7 +493,7 @@
flex-direction: row-reverse;
}
#login-dialog {
#converse-login-panel {
.converse-form {
padding: 3em 2em 3em;
}

14
sass/_controlbox.scss
View File

@ -160,7 +160,7 @@
}
}
#login-dialog {
#converse-login-panel {
flex-direction: column;
.brand-heading {
@ -181,6 +181,11 @@
}
#converse-register, #converse-login {
legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto;
}
fieldset.buttons {
text-align: center;
}
@ -193,7 +198,7 @@
}
input {
width: 100%;
margin: 1em 0;
margin: 0 0 2em 0;
}
.form-url {
display: block;
@ -385,11 +390,6 @@
margin-top: 0.5em;
}
}
label {
font-size: $font-size;
font-weight: bold;
height: auto;
}
dd {
margin-left: 0;
margin-bottom: 0;

6
sass/_profile.scss
View File

@ -1,5 +1,7 @@
#conversejs {
label {
font-weight: bold;
#user-profile-modal {
label {
font-weight: bold;
}
}
}

9
sass/inverse/_controlbox.scss
View File

@ -10,7 +10,7 @@
border-radius: 0;
}
#login-dialog {
#converse-login-panel {
border-radius: 0;
.converse-form {
margin: 0;
@ -69,13 +69,6 @@
input[type=button] {
width: auto;
}
input {
width: 100%;
margin: 1em 0;
&.pure-button {
margin: 1em 0.5em;
}
}
}
@media screen and (max-width: $mobile-portrait-length) {
#converse-register,

7
sass/inverse/_core.scss
View File

@ -44,13 +44,6 @@ body {
display: inline;
margin-bottom: 2em;
}
input[type=text],
input[type=password],
input[type=number],
input[type=button],
input[type=submit] {
height: 2.2em;
}
input[type=button],
input[type=submit] {
padding-left: 1em;

2
src/converse-fullscreen.js
View File

@ -39,7 +39,7 @@
insertBrandHeading () {
const { _converse } = this.__super__;
const el = _converse.root.getElementById('converse-login-panel');
el.parentNode.insertAdjacentHTML(
el.insertAdjacentHTML(
'afterbegin',
this.createBrandHeadingHTML()
);

3
src/converse-register.js
View File

@ -69,7 +69,7 @@
if (_.isUndefined(this.registerlinkview)) {
this.registerlinkview = new _converse.RegisterLinkView({'model': this.model});
this.registerlinkview.render();
this.el.insertAdjacentElement('beforeend', this.registerlinkview.el);
this.el.querySelector('.buttons').insertAdjacentElement('beforeend', this.registerlinkview.el);
}
this.registerlinkview.render();
}
@ -156,7 +156,6 @@
_converse.RegisterLinkView = Backbone.VDOMView.extend({
toHTML () {
return tpl_register_link(
_.extend(this.model.toJSON(), {

12
src/templates/inverse_brand_heading.html
View File

@ -1,5 +1,7 @@
<span class="container brand-heading-container">
<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://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
<span>
<div class="row">
<span class="container brand-heading-container col-12">
<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://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
<span>
</div>

66
src/templates/login_panel.html
View File

@ -1,33 +1,39 @@
<div id="converse-login-panel" class="controlbox-pane fade-in">
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
<legend>{{{o.__("Login")}}}</legend>
<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-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
</div>
{[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
<span class="spinner centered"/>
{[ } else { ]}
{[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
<label>{{{o.__("Jabber ID:")}}}</label>
<input autofocus required
type="text"
name="jid"
placeholder="{{{o.placeholder_username}}}">
{[ if (o.authentication !== o.EXTERNAL) { ]}
<label>{{{o.__("Password:")}}}</label>
<input required
type="password" name="password"
placeholder="{{{o.__('password')}}}">
<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-login" class="converse-form" method="post">
<legend>{{{o.__("Login")}}}</legend>
<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-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
</div>
{[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
<span class="spinner centered"/>
{[ } else { ]}
{[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
<div class="form-group">
<label for="jid">{{{o.__("XMPP Username:")}}}</label>
<input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
</div>
{[ if (o.authentication !== o.EXTERNAL) { ]}
<div class="form-group">
<label for="password">{{{o.__("Password:")}}}</label>
<input class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
</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>
{[ } ]}
{[ } ]}
<input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
{[ } ]}
{[ 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>
{[ } ]}
{[ } ]}
</form>
</fieldset>
</form>
</div>
</div>
</div>