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

Fix switching between login and register panels

Browse Source
This commit is contained in:
JC Brand 2021-01-25 14:50:57 +01:00
parent 75b8a16465
commit be9016a081
11 changed files with 65 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
sass/_controlbox.scss
View File

@ -358,9 +358,6 @@
.switch-form {
text-align: center;
padding: 2em 0;
p {
margin-top: 0.5em;
}
}
dd {
margin-left: 0;
@ -489,10 +486,6 @@
margin: 0;
.controlbox-pane {
border-radius: 0;
}
.flyout {
border-radius: 0;
}

2
spec/mock.js
View File

@ -641,8 +641,6 @@ window.addEventListener('converse-loaded', () => {
'view_mode': mock.view_mode
}, settings || {}));
_converse.minimize.trimChat = function () {};
_converse.api.vcard.get = function (model, force) {
let jid;
if (typeof model === 'string' || model instanceof String) {

49
spec/register.js
View File

@ -1,11 +1,16 @@
/*global mock, converse, _ */
/*global mock, converse */
const Strophe = converse.env.Strophe;
const $iq = converse.env.$iq;
const { sizzle} = converse.env;
const u = converse.env.utils;
fdescribe("The Registration Panel", function () {
describe("The Registration Panel", function () {
afterEach(() => {
// Remove the hash
history.pushState("", document.title, window.location.pathname + window.location.search);
});
it("is not available unless allow_registration=true",
mock.initConverse(
@ -20,7 +25,7 @@ fdescribe("The Registration Panel", function () {
done();
}));
fit("can be opened by clicking on the registration tab",
it("can be opened by clicking on the registration tab",
mock.initConverse(
['chatBoxesInitialized'],
{ auto_login: false,
@ -35,15 +40,13 @@ fdescribe("The Registration Panel", function () {
toggle.click();
}
const cbview = _converse.chatboxviews.get('controlbox');
const panels = cbview.querySelector('.controlbox-panes');
const login = panels.firstElementChild;
const registration = panels.childNodes[1];
expect(cbview.querySelector('converse-register-panel')).toBe(null);
const register_link = await u.waitUntil(() => cbview.querySelector('a.register-account'));
expect(register_link.textContent).toBe("Create an account");
register_link.click();
await u.waitUntil(() => u.isVisible(registration));
expect(u.isVisible(login)).toBe(false);
expect(cbview.querySelector('converse-register-panel')).toBeDefined();
done();
}));
@ -56,20 +59,19 @@ fdescribe("The Registration Panel", function () {
async function (done, _converse) {
await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
const toggle = document.querySelector(".toggle-controlbox");
const toggle = await u.waitUntil(() => document.querySelector(".toggle-controlbox"));
toggle.click();
const cbview = _converse.api.controlbox.get();
await u.waitUntil(() => u.isVisible(cbview));
const registerview = cbview.registerpanel;
spyOn(registerview, 'onProviderChosen').and.callThrough();
spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
registerview.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
// Open the register panel
cbview.querySelector('.toggle-register-login').click();
const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
spyOn(registerview, 'onProviderChosen').and.callThrough();
spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
// Check the form layout
const form = cbview.querySelector('#converse-register');
expect(form.querySelectorAll('input').length).toEqual(2);
@ -97,11 +99,13 @@ fdescribe("The Registration Panel", function () {
allow_registration: true },
async function (done, _converse) {
await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
const toggle = await u.waitUntil(() => document.querySelector(".toggle-controlbox"));
toggle.click();
const cbview = _converse.api.controlbox.get();
cbview.querySelector('.toggle-register-login').click();
const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
spyOn(registerview, 'onProviderChosen').and.callThrough();
spyOn(registerview, 'getRegistrationFields').and.callThrough();
@ -153,7 +157,6 @@ fdescribe("The Registration Panel", function () {
allow_registration: true },
async function (done, _converse) {
await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
const toggle = document.querySelector(".toggle-controlbox");
if (!u.isVisible(document.querySelector("#controlbox"))) {
if (!u.isVisible(toggle)) {
@ -164,7 +167,7 @@ fdescribe("The Registration Panel", function () {
const cbview = _converse.api.controlbox.get();
cbview.querySelector('.toggle-register-login').click();
const registerview = cbview.registerpanel;
const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
spyOn(registerview, 'onProviderChosen').and.callThrough();
spyOn(registerview, 'getRegistrationFields').and.callThrough();
spyOn(registerview, 'onRegistrationFields').and.callThrough();
@ -217,7 +220,6 @@ fdescribe("The Registration Panel", function () {
allow_registration: true },
async function (done, _converse) {
await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
const toggle = document.querySelector(".toggle-controlbox");
if (!u.isVisible(document.querySelector("#controlbox"))) {
if (!u.isVisible(toggle)) {
@ -227,7 +229,7 @@ fdescribe("The Registration Panel", function () {
}
const cbview = _converse.api.controlbox.get();
cbview.querySelector('.toggle-register-login').click();
const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
spyOn(registerview, 'onProviderChosen').and.callThrough();
spyOn(registerview, 'getRegistrationFields').and.callThrough();
spyOn(registerview, 'onRegistrationFields').and.callThrough();
@ -298,7 +300,6 @@ fdescribe("The Registration Panel", function () {
allow_registration: true },
async function (done, _converse) {
await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
const toggle = document.querySelector(".toggle-controlbox");
if (!u.isVisible(document.querySelector("#controlbox"))) {
if (!u.isVisible(toggle)) {
@ -308,7 +309,7 @@ fdescribe("The Registration Panel", function () {
}
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.toggle-register-login').click();
const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
spyOn(registerview, 'onProviderChosen').and.callThrough();
spyOn(registerview, 'getRegistrationFields').and.callThrough();
spyOn(registerview, 'onRegistrationFields').and.callThrough();
@ -369,7 +370,6 @@ fdescribe("The Registration Panel", function () {
allow_registration: true },
async function (done, _converse) {
await u.waitUntil(() => _converse.chatboxviews.get('controlbox')?.registerpanel);
const toggle = document.querySelector(".toggle-controlbox");
if (!u.isVisible(document.querySelector("#controlbox"))) {
if (!u.isVisible(toggle)) {
@ -379,8 +379,7 @@ fdescribe("The Registration Panel", function () {
}
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.toggle-register-login').click();
const view = _converse.chatboxviews.get('controlbox').registerpanel;
view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
const view = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
view.querySelector('input[name=domain]').value = 'conversejs.org';
view.querySelector('input[type=submit]').click();

34
src/plugins/controlbox/templates/controlbox.js
View File

@ -1,26 +1,28 @@
import { html } from 'lit-html';
export default (o) => html`
export default o => html`
<div class="flyout box-flyout">
<converse-dragresize></converse-dragresize>
<div class="chat-head controlbox-head">
${o.sticky_controlbox ? '' : html`<a class="chatbox-btn close-chatbox-button fa fa-times"></a>` }
${o.sticky_controlbox
? ''
: html`
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
`}
</div>
<div class="controlbox-panes">
${ o.connected
? html`
<div class="controlbox-pane">
<converse-user-profile></converse-user-profile>
<converse-headlines-panel></converse-headlines-panel>
<converse-rooms-list></converse-rooms-list>
<converse-bookmarks></converse-bookmarks>
</div>`
: (
o['active-form'] === 'register'
? html`<converse-login-panel></converse-login-panel>`
: html`<converse-register-panel></converse-headlines-panel>`
)
}
<div class="controlbox-pane">
${o.connected
? html`
<converse-user-profile></converse-user-profile>
<converse-headlines-panel></converse-headlines-panel>
<converse-rooms-list></converse-rooms-list>
<converse-bookmarks></converse-bookmarks>`
: o['active-form'] === 'register'
? html`<converse-register-panel></converse-register-panel>`
: html`<converse-login-panel></converse-login-panel>`
}
</div>
</div>
</div>
`;

2
src/plugins/controlbox/templates/loginpanel.js
View File

@ -67,7 +67,7 @@ const auth_fields = (o) => {
</div>
${ (o.authentication !== o.EXTERNAL) ? password_input() : '' }
${ o.show_trust_checkbox ? trust_checkbox(o.show_trust_checkbox === 'off' ? false : true) : '' }
<fieldset class="buttons">
<fieldset class="form-group buttons">
<input class="btn btn-primary" type="submit" value="${i18n_login}"/>
</fieldset>
${ show_register_link() ? register_link(o) : '' }

3
src/plugins/controlbox/view.js
View File

@ -18,7 +18,8 @@ class ControlBoxView extends ElementView {
}
initialize () {
this.model = _converse.chatboxes.get(this.getAttribute('id'));
this.model = _converse.chatboxes.get('controlbox');
this.listenTo(this.model, 'change:active-form', this.render);
this.listenTo(this.model, 'change:connected', this.onConnected);
this.listenTo(this.model, 'show', this.show);
this.render();

2
src/plugins/minimize/utils.js
View File

@ -49,7 +49,7 @@ function getBoxesWidth (newchat) {
* @param { _converse.ChatBoxView|_converse.ChatRoomView|_converse.ControlBoxView|_converse.HeadlinesBoxView } [newchat]
*/
export async function trimChats (newchat) {
if (api.settings.get('no_trimming') || !api.connection.connected() || api.settings.get("view_mode") !== 'overlayed') {
if (_converse.isTestEnv() || api.settings.get('no_trimming') || !api.connection.connected() || api.settings.get("view_mode") !== 'overlayed') {
return;
}
const shown_chats = getShownChats();

3
src/plugins/minimize/view.js
View File

@ -1,3 +1,4 @@
import MinimizedChatsToggle from './toggle.js';
import tpl_chats_panel from './templates/chats-panel.js';
import { ElementView } from '@converse/skeletor/src/element.js';
import { _converse, api } from '@converse/headless/core';
@ -32,7 +33,7 @@ class MinimizedChats extends ElementView {
async initToggle () {
const id = `converse.minchatstoggle-${_converse.bare_jid}`;
this.minchats = new _converse.MinimizedChatsToggle({id});
this.minchats = new MinimizedChatsToggle({id});
this.minchats.browserStorage = _converse.createStore(id);
await new Promise(resolve => this.minchats.fetch({'success': resolve, 'error': resolve}));
}

15
src/plugins/register/index.js
View File

@ -8,7 +8,6 @@
*/
import './panel.js';
import '../controlbox/index.js';
import log from '@converse/headless/log';
import { __ } from 'i18n';
import { _converse, api, converse } from '@converse/headless/core';
@ -26,6 +25,9 @@ Strophe.Status.CONFLICT = i + 3;
Strophe.Status.NOTACCEPTABLE = i + 5;
converse.plugins.add('converse-register', {
dependencies: ['converse-controlbox'],
enabled () {
return true;
},
@ -43,13 +45,10 @@ converse.plugins.add('converse-register', {
'registration_domain': ''
});
function setActiveForm (value) {
api.waitUntil('controlBoxInitialized')
.then(() => {
const controlbox = _converse.chatboxes.get('controlbox');
controlbox.set({ 'active-form': value });
})
.catch(e => log.fatal(e));
async function setActiveForm (value) {
await api.waitUntil('controlBoxInitialized');
const controlbox = _converse.chatboxes.get('controlbox');
controlbox.set({ 'active-form': value });
}
_converse.router.route('converse/login', () => setActiveForm('login'));
_converse.router.route('converse/register', () => setActiveForm('register'));

6
src/plugins/register/panel.js
View File

@ -58,7 +58,6 @@ class RegisterPanel extends ElementView {
'model': this.model,
'title': this.title,
}), this);
return this;
}
/**
@ -79,6 +78,11 @@ class RegisterPanel extends ElementView {
};
}
connectedCallback () {
super.connectedCallback();
this.render();
}
/**
* Send an IQ stanza to the XMPP server asking for the registration fields.
* @private

10
src/plugins/register/templates/register_panel.js
View File

@ -40,13 +40,13 @@ const tpl_fetch_form_buttons = () => {
const i18n_existing_account = __('Already have a chat account?');
const i18n_login = __('Log in here');
return html`
<fieldset class="buttons">
<fieldset class="form-group buttons">
<input class="btn btn-primary" type="submit" value="${i18n_register}" />
<div class="switch-form">
<p>${i18n_existing_account}</p>
<p><a class="login-here toggle-register-login" href="#converse/login">${i18n_login}</a></p>
</div>
</fieldset>
<div class="switch-form">
<p>${i18n_existing_account}</p>
<p><a class="login-here toggle-register-login" href="#converse/login">${i18n_login}</a></p>
</div>
`;
};