Skip to content

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

Update the login form with markup from bootstrap mockup

parent 3b22f918
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 97 deletions
css/converse.css
View file @ e1d1bac7
...@@ -5115,7 +5115,7 @@ body.reset { ...@@ -5115,7 +5115,7 @@ body.reset {
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs label { #conversejs #user-profile-modal label {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
...@@ -5590,7 +5590,7 @@ body.reset { ...@@ -5590,7 +5590,7 @@ body.reset {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs #login-dialog .converse-form { #conversejs #converse-login-panel .converse-form {
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs .sidebar { #conversejs .sidebar {
display: block; } display: block; }
...@@ -5763,9 +5763,9 @@ body.reset { ...@@ -5763,9 +5763,9 @@ body.reset {
text-align: center; } text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox #login-dialog { #conversejs #controlbox #converse-login-panel {
flex-direction: column; } flex-direction: column; }
#conversejs #controlbox #login-dialog .brand-heading { #conversejs #controlbox #converse-login-panel .brand-heading {
color: #578EA9; } color: #578EA9; }
#conversejs #controlbox .toggle-register-login { #conversejs #controlbox .toggle-register-login {
font-weight: bold; } font-weight: bold; }
...@@ -5774,6 +5774,10 @@ body.reset { ...@@ -5774,6 +5774,10 @@ body.reset {
color: #777; } color: #777; }
#conversejs #controlbox .oauth-login .icon-social:before { #conversejs #controlbox .oauth-login .icon-social:before {
font-size: 16px; } 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 { #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 {
...@@ -5783,7 +5787,7 @@ body.reset { ...@@ -5783,7 +5787,7 @@ body.reset {
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: 1em 0; } 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;
...@@ -5923,10 +5927,6 @@ body.reset { ...@@ -5923,10 +5927,6 @@ body.reset {
padding-bottom: 2em; } padding-bottom: 2em; }
#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 label {
font-size: 14px;
font-weight: bold;
height: auto; }
#conversejs #controlbox .controlbox-pane dd { #conversejs #controlbox .controlbox-pane dd {
margin-left: 0; margin-left: 0;
margin-bottom: 0; } margin-bottom: 0; }
......
css/inverse.css
View file @ e1d1bac7
...@@ -5159,19 +5159,13 @@ body { ...@@ -5159,19 +5159,13 @@ body {
margin-left: 1em; margin-left: 1em;
display: inline; display: inline;
margin-bottom: 2em; } 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=button],
#conversejs.fullscreen form.converse-form input[type=submit] { #conversejs.fullscreen form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin-right: 1em; } margin-right: 1em; }
#conversejs label { #conversejs #user-profile-modal label {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
...@@ -5646,7 +5640,7 @@ body { ...@@ -5646,7 +5640,7 @@ body {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs #login-dialog .converse-form { #conversejs #converse-login-panel .converse-form {
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs .sidebar { #conversejs .sidebar {
display: block; } display: block; }
...@@ -5835,9 +5829,9 @@ body { ...@@ -5835,9 +5829,9 @@ body {
text-align: center; } text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name { #conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; } font-size: 120%; }
#conversejs #controlbox #login-dialog { #conversejs #controlbox #converse-login-panel {
flex-direction: column; } flex-direction: column; }
#conversejs #controlbox #login-dialog .brand-heading { #conversejs #controlbox #converse-login-panel .brand-heading {
color: #578EA9; } color: #578EA9; }
#conversejs #controlbox .toggle-register-login { #conversejs #controlbox .toggle-register-login {
font-weight: bold; } font-weight: bold; }
...@@ -5846,6 +5840,10 @@ body { ...@@ -5846,6 +5840,10 @@ body {
color: #777; } color: #777; }
#conversejs #controlbox .oauth-login .icon-social:before { #conversejs #controlbox .oauth-login .icon-social:before {
font-size: 18px; } 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 { #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 {
...@@ -5855,7 +5853,7 @@ body { ...@@ -5855,7 +5853,7 @@ body {
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: 1em 0; } 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;
...@@ -5995,10 +5993,6 @@ body { ...@@ -5995,10 +5993,6 @@ body {
padding-bottom: 2em; } padding-bottom: 2em; }
#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 label {
font-size: 16px;
font-weight: bold;
height: auto; }
#conversejs #controlbox .controlbox-pane dd { #conversejs #controlbox .controlbox-pane dd {
margin-left: 0; margin-left: 0;
margin-bottom: 0; } margin-bottom: 0; }
...@@ -6044,9 +6038,9 @@ body { ...@@ -6044,9 +6038,9 @@ body {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout { #conversejs.fullscreen #controlbox .flyout {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog { #conversejs.fullscreen #controlbox #converse-login-panel {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog .converse-form { #conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
margin: 0; margin: 0;
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs.fullscreen #controlbox .toggle-register-login { #conversejs.fullscreen #controlbox .toggle-register-login {
...@@ -6098,11 +6092,6 @@ body { ...@@ -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-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; }
#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) { @media screen and (max-width: 480px) {
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-register,
#conversejs.fullscreen #controlbox #converse-login { #conversejs.fullscreen #controlbox #converse-login {
......
mockup/fullscreen-login.html
View file @ e1d1bac7
...@@ -19,17 +19,18 @@ ...@@ -19,17 +19,18 @@
<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="login-dialog" class="controlbox-pane"> <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><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> </div>
<div class="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="pure-form converse-form"> <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">
......
sass/_chatbox.scss
View file @ e1d1bac7
...@@ -493,7 +493,7 @@ ...@@ -493,7 +493,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
#login-dialog { #converse-login-panel {
.converse-form { .converse-form {
padding: 3em 2em 3em; padding: 3em 2em 3em;
} }
......
sass/_controlbox.scss
View file @ e1d1bac7
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
} }
} }
#login-dialog { #converse-login-panel {
flex-direction: column; flex-direction: column;
.brand-heading { .brand-heading {
...@@ -181,6 +181,11 @@ ...@@ -181,6 +181,11 @@
} }
#converse-register, #converse-login { #converse-register, #converse-login {
legend {
width: 100%;
text-align: center;
margin: 0 auto 1em auto;
}
fieldset.buttons { fieldset.buttons {
text-align: center; text-align: center;
} }
...@@ -193,7 +198,7 @@ ...@@ -193,7 +198,7 @@
} }
input { input {
width: 100%; width: 100%;
margin: 1em 0; margin: 0 0 2em 0;
} }
.form-url { .form-url {
display: block; display: block;
...@@ -385,11 +390,6 @@ ...@@ -385,11 +390,6 @@
margin-top: 0.5em; margin-top: 0.5em;
} }
} }
label {
font-size: $font-size;
font-weight: bold;
height: auto;
}
dd { dd {
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
......
sass/_profile.scss
View file @ e1d1bac7
#conversejs { #conversejs {
label { #user-profile-modal {
font-weight: bold; label {
font-weight: bold;
}
} }
} }
sass/inverse/_controlbox.scss
View file @ e1d1bac7
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
border-radius: 0; border-radius: 0;
} }
#login-dialog { #converse-login-panel {
border-radius: 0; border-radius: 0;
.converse-form { .converse-form {
margin: 0; margin: 0;
...@@ -69,13 +69,6 @@ ...@@ -69,13 +69,6 @@
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) { @media screen and (max-width: $mobile-portrait-length) {
#converse-register, #converse-register,
......
sass/inverse/_core.scss
View file @ e1d1bac7
...@@ -44,13 +44,6 @@ body { ...@@ -44,13 +44,6 @@ body {
display: inline; display: inline;
margin-bottom: 2em; 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=button],
input[type=submit] { input[type=submit] {
padding-left: 1em; padding-left: 1em;
......
src/converse-fullscreen.js
View file @ e1d1bac7
...@@ -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.parentNode.insertAdjacentHTML( el.insertAdjacentHTML(
'afterbegin', 'afterbegin',
this.createBrandHeadingHTML() this.createBrandHeadingHTML()
); );
......
src/converse-register.js
View file @ e1d1bac7
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
if (_.isUndefined(this.registerlinkview)) { if (_.isUndefined(this.registerlinkview)) {
this.registerlinkview = new _converse.RegisterLinkView({'model': this.model}); this.registerlinkview = new _converse.RegisterLinkView({'model': this.model});
this.registerlinkview.render(); this.registerlinkview.render();
this.el.insertAdjacentElement('beforeend', this.registerlinkview.el); this.el.querySelector('.buttons').insertAdjacentElement('beforeend', this.registerlinkview.el);
} }
this.registerlinkview.render(); this.registerlinkview.render();
} }
...@@ -156,7 +156,6 @@ ...@@ -156,7 +156,6 @@
_converse.RegisterLinkView = Backbone.VDOMView.extend({ _converse.RegisterLinkView = Backbone.VDOMView.extend({
toHTML () { toHTML () {
return tpl_register_link( return tpl_register_link(
_.extend(this.model.toJSON(), { _.extend(this.model.toJSON(), {
......
src/templates/inverse_brand_heading.html
View file @ e1d1bac7
<span class="container brand-heading-container"> <div class="row">
<h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1> <span class="container brand-heading-container col-12">
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p> <h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
<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://conversejs.org">Open Source</a> XMPP chat client</p>
<span> <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>
src/templates/login_panel.html
View file @ e1d1bac7
<div id="converse-login-panel" class="controlbox-pane fade-in"> <div id="converse-login-panel" class="controlbox-pane fade-in">
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post"> <div class="row">
<legend>{{{o.__("Login")}}}</legend> <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}"> <form id="converse-login" class="converse-form" method="post">
<p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p> <legend>{{{o.__("Login")}}}</legend>
<p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p> <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
</div> <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
{[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]} <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
<span class="spinner centered"/> </div>
{[ } else { ]} {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
{[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]} <span class="spinner centered"/>
<label>{{{o.__("Jabber ID:")}}}</label> {[ } else { ]}
<input autofocus required {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
type="text" <div class="form-group">
name="jid" <label for="jid">{{{o.__("XMPP Username:")}}}</label>
placeholder="{{{o.placeholder_username}}}"> <input class="form-control" autofocus required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}">
{[ if (o.authentication !== o.EXTERNAL) { ]} </div>
<label>{{{o.__("Password:")}}}</label> {[ if (o.authentication !== o.EXTERNAL) { ]}
<input required <div class="form-group">
type="password" name="password" <label for="password">{{{o.__("Password:")}}}</label>
placeholder="{{{o.__('password')}}}"> <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')}}}"> </fieldset>
{[ } ]} </form>
{[ if (o.authentication == o.ANONYMOUS) { ]} </div>
<input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/> </div>
{[ } ]}
{[ if (o.authentication == o.PREBIND) { ]}
<p>Disconnected.</p>
{[ } ]}
{[ } ]}
</form>
</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