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

Use CustomElement instead of ElementView for login form

Browse Source
This commit is contained in:
JC Brand 2021-12-04 22:28:50 +01:00
parent a673086941
commit 0dee9897dd
3 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/plugins/controlbox/loginform.js
View File

@ -1,29 +1,24 @@
import bootstrap from 'bootstrap.native';
import tpl_login_panel from './templates/loginform.js';
import { ElementView } from '@converse/skeletor/src/element';
import { CustomElement } from 'shared/components/element.js';
import { __ } from 'i18n';
import { _converse, api, converse } from '@converse/headless/core';
import { render } from 'lit';
const { Strophe, u } = converse.env;
class LoginForm extends ElementView {
id = 'converse-login-panel';
className = 'controlbox-pane fade-in row no-gutters';
events = {
'submit form#converse-login': 'authenticate',
'change input': 'validate',
};
class LoginForm extends CustomElement {
initialize () {
this.listenTo(_converse.connfeedback, 'change', this.render);
this.render();
this.initPopovers();
this.listenTo(_converse.connfeedback, 'change', this.requesUpdate);
}
render () {
render(tpl_login_panel(), this);
return tpl_login_panel(this);
}
firstUpdated () {
this.initPopovers();
}
initPopovers () {

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

@ -26,7 +26,8 @@ export default o => html`
}`
: o['active-form'] === 'register'
? html`<converse-register-panel></converse-register-panel>`
: html`<converse-login-panel></converse-login-panel>`
: html`<converse-login-panel id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
</converse-login-panel>`
}
</div>
</div>

13
src/plugins/controlbox/templates/loginform.js
View File

@ -52,7 +52,7 @@ const show_register_link = () => {
}
const auth_fields = () => {
const auth_fields = (el) => {
const authentication = api.settings.get('authentication');
const i18n_login = __('Log in');
const i18n_xmpp_address = __("XMPP Address");
@ -65,6 +65,7 @@ const auth_fields = () => {
<label for="converse-login-jid">${i18n_xmpp_address}:</label>
<input id="converse-login-jid"
?autofocus=${api.settings.get('auto_focus') ? true : false}
@changed=${el.validate}
required
class="form-control"
type="text"
@ -81,20 +82,20 @@ const auth_fields = () => {
}
const form_fields = () => {
const form_fields = (el) => {
const authentication = api.settings.get('authentication');
const { ANONYMOUS, EXTERNAL, LOGIN, PREBIND } = _converse;
const i18n_disconnected = __('Disconnected');
const i18n_anon_login = __('Click here to log in anonymously');
return html`
${ (authentication == LOGIN || authentication == EXTERNAL) ? auth_fields() : '' }
${ (authentication == LOGIN || authentication == EXTERNAL) ? auth_fields(el) : '' }
${ authentication == ANONYMOUS ? html`<input class="btn btn-primary login-anon" type="submit" value="${i18n_anon_login}">` : '' }
${ authentication == PREBIND ? html`<p>${i18n_disconnected}</p>` : '' }
`;
}
export default () => {
export default (el) => {
const connection_status = _converse.connfeedback.get('connection_status');
let feedback_class, pretty_status;
if (REPORTABLE_STATUSES.includes(connection_status)) {
@ -104,11 +105,11 @@ export default () => {
const conn_feedback_message = _converse.connfeedback.get('message');
return html`
<converse-brand-heading></converse-brand-heading>
<form id="converse-login" class="converse-form" method="post">
<form id="converse-login" class="converse-form" method="post" @submit=${el.authenticate}>
<div class="conn-feedback fade-in ${ !pretty_status ? 'hidden' : feedback_class}">
<p class="feedback-subject">${ pretty_status }</p>
<p class="feedback-message ${ !conn_feedback_message ? 'hidden' : '' }">${conn_feedback_message}</p>
</div>
${ (_converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') ? tpl_spinner({'classes': 'hor_centered'}) : form_fields() }
${ (_converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') ? tpl_spinner({'classes': 'hor_centered'}) : form_fields(el) }
</form>`;
}