Add checkbox to indicate whether this is a trusted device

This commit is contained in:
JC Brand 2018-05-17 18:25:12 +02:00
parent d4a33656d8
commit 59535656b6
9 changed files with 104 additions and 26 deletions

View File

@ -13,6 +13,8 @@
- MP4 and MP3 files when sent as XEP-0066 Out of Band Data, are now playable directly in chat
- Support for rendering URLs sent according to XEP-0066 Out of Band Data.
- Geo-URIs (e.g. from Conversations) are now replaced by links to openstreetmap (works in reverse also)
- Add a checkbox to indicate whether a trusted device is being used or not.
If the device is not trusted, then all user data is deleted from the cache upon logout.
### Bugfixes

View File

@ -7203,7 +7203,7 @@ body.reset {
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.3rem; }
margin-top: 0.1rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
@ -7240,7 +7240,7 @@ body.reset {
margin: 1em 0; }
#conversejs form.converse-form {
background: white;
padding: 1em; }
padding: 1.5em; }
#conversejs form.converse-form legend {
color: #666;
font-size: 125%;
@ -7276,6 +7276,9 @@ body.reset {
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs.fullscreen form .form-check-label {
margin-top: 0.3rem; }
#conversejs #user-profile-modal label {
font-weight: bold; }

View File

@ -7245,7 +7245,7 @@ body {
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.3rem; }
margin-top: 0.1rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
@ -7282,7 +7282,7 @@ body {
margin: 1em 0; }
#conversejs form.converse-form {
background: white;
padding: 1em; }
padding: 1.5em; }
#conversejs form.converse-form legend {
color: #666;
font-size: 125%;
@ -7318,6 +7318,9 @@ body {
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs.fullscreen form .form-check-label {
margin-top: 0.3rem; }
#conversejs #user-profile-modal label {
font-weight: bold; }

View File

@ -5,7 +5,7 @@
}
.form-check-label {
margin-top: $form-check-input-margin-y;
margin-top: 0.1rem;
}
.form-control {
@ -61,7 +61,7 @@
&.converse-form {
background: white;
padding: 1em;
padding: 1.5em;
legend {
color: $text-color;
font-size: 125%;
@ -108,3 +108,12 @@
}
}
}
#conversejs.fullscreen {
form {
.form-check-label {
margin-top: $form-check-input-margin-y;
}
}
}

45
spec/login.js Normal file
View File

@ -0,0 +1,45 @@
(function (root, factory) {
define(["jasmine", "mock", "converse-core", "test-utils"], factory);
} (this, function (jasmine, mock, converse, test_utils) {
describe("The Login Form", function () {
it("contains a checkbox to indicate whether the computer is trusted or not",
mock.initConverseWithPromises(
null, ['connectionInitialized', 'chatBoxesInitialized'],
{ auto_login: false,
allow_registration: false },
function (done, _converse) {
test_utils.waitUntil(() => _converse.chatboxviews.get('controlbox'))
.then(function () {
var cbview = _converse.chatboxviews.get('controlbox');
test_utils.openControlBox();
const checkboxes = cbview.el.querySelectorAll('input[type="checkbox"]');
expect(checkboxes.length).toBe(1);
const checkbox = checkboxes[0];
const label = cbview.el.querySelector(`label[for="${checkbox.getAttribute('id')}"]`);
expect(label.textContent).toBe('This is a trusted device');
expect(checkbox.checked).toBe(true);
cbview.el.querySelector('input[name="jid"]').value = 'dummy@localhost';
cbview.el.querySelector('input[name="password"]').value = 'secret';
spyOn(cbview.loginpanel, 'connect');
cbview.delegateEvents();
expect(_converse.storage).toBe('session');
cbview.el.querySelector('input[type="submit"]').click();
expect(_converse.storage).toBe('local');
expect(cbview.loginpanel.connect).toHaveBeenCalled();
checkbox.click();
cbview.el.querySelector('input[type="submit"]').click();
expect(_converse.storage).toBe('session');
done();
});
}));
});
}));

View File

@ -14,15 +14,12 @@
allow_registration: false },
function (done, _converse) {
test_utils.waitUntil(function () {
return _converse.chatboxviews.get('controlbox');
}, 300)
test_utils.waitUntil(() => _converse.chatboxviews.get('controlbox'))
.then(function () {
test_utils.openControlBox();
var cbview = _converse.chatboxviews.get('controlbox');
expect($(cbview.el.querySelector('a.register-account')).length).toBe(0);
done();
test_utils.openControlBox();
var cbview = _converse.chatboxviews.get('controlbox');
expect($(cbview.el.querySelector('a.register-account')).length).toBe(0);
done();
});
}));

View File

@ -8,6 +8,7 @@
(function (root, factory) {
define(["converse-core",
"bootstrap",
"lodash.fp",
"tpl!converse_brand_heading",
"tpl!controlbox",
@ -19,6 +20,7 @@
], factory);
}(this, function (
converse,
bootstrap,
fp,
tpl_brand_heading,
tpl_controlbox,
@ -414,6 +416,14 @@
initialize (cfg) {
this.model.on('change', this.render, this);
this.listenTo(_converse.connfeedback, 'change', this.render);
this.render();
_.forEach(this.el.querySelectorAll('[data-title]'), (el) => {
const popover = new bootstrap.Popover(el, {
'trigger': _converse.view_mode === 'mobile' && 'click' || 'hover',
'dismissible': _converse.view_mode === 'mobile' && true || false,
'container': _converse.chatboxviews.el
})
});
},
toHTML () {
@ -465,18 +475,18 @@
this.connect(_converse.jid, null);
return;
}
if (!this.validate()) {
return;
}
let jid = ev.target.querySelector('input[name=jid]').value;
if (!this.validate()) { return; }
const form_data = new FormData(ev.target);
_converse.storage = form_data.get('trusted') ? 'local' : 'session';
let jid = form_data.get('jid');
if (_converse.locked_domain) {
jid = Strophe.escapeNode(jid) + '@' + _converse.locked_domain;
} else if (_converse.default_domain && !_.includes(jid, '@')) {
jid = jid + '@' + _converse.default_domain;
}
this.connect(
jid, _.get(ev.target.querySelector('input[name=password]'), 'value')
);
this.connect(jid, form_data.get('password'));
},
connect (jid, password) {

View File

@ -9,17 +9,25 @@
{[ } 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}}}">
<label for="converse-login-jid">{{{o.__("XMPP Username:")}}}</label>
<input id="converse-login-jid" 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')}}}">
<label for="converse-login-password">{{{o.__("Password:")}}}</label>
<input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
</div>
{[ } ]}
<div class="form-group form-check">
<input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" checked="checked">
<label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label>
<i class="fa fa-info-circle" data-toggle="popover"
data-title=""
data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all data might be deleted.')}}}"></i>
</div>
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="{{{o.__('Submit')}}}">
<input class="btn btn-primary" type="submit" value="{{{o.__('Log in')}}}">
</fieldset>
{[ } ]}
{[ if (o.authentication == o.ANONYMOUS) { ]}

View File

@ -56,6 +56,7 @@ var specs = [
"spec/chatroom",
"spec/minchats",
"spec/notification",
"spec/login",
"spec/register",
"spec/http-file-upload"
];