|
|
@@ -1,9 +1,10 @@
|
|
|
-import { html } from "lit";
|
|
|
-import { _converse, api, constants } from "@converse/headless";
|
|
|
-import "shared/components/brand-heading.js";
|
|
|
-import tplSpinner from "templates/spinner.js";
|
|
|
-import { CONNECTION_STATUS_CSS_CLASS } from "../constants.js";
|
|
|
-import { __ } from "i18n";
|
|
|
+import { html } from 'lit';
|
|
|
+import { _converse, api, constants } from '@converse/headless';
|
|
|
+import tplSpinner from 'templates/spinner.js';
|
|
|
+import { CONNECTION_STATUS_CSS_CLASS } from '../constants.js';
|
|
|
+import { __ } from 'i18n';
|
|
|
+import 'shared/components/brand-heading.js';
|
|
|
+import 'shared/components/footer.js';
|
|
|
|
|
|
const { ANONYMOUS, EXTERNAL, LOGIN, PREBIND, CONNECTION_STATUS } = constants;
|
|
|
|
|
|
@@ -12,31 +13,31 @@ const { ANONYMOUS, EXTERNAL, LOGIN, PREBIND, CONNECTION_STATUS } = constants;
|
|
|
*/
|
|
|
function tplTrustCheckbox(checked) {
|
|
|
const i18n_hint_trusted = __(
|
|
|
- "To improve performance, we cache your data in this browser. " +
|
|
|
- "Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. " +
|
|
|
+ 'To improve performance, we cache your data in this browser. ' +
|
|
|
+ 'Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. ' +
|
|
|
"It's important that you explicitly log out, otherwise not all cached data might be deleted. " +
|
|
|
- "Please note, when using an untrusted device, OMEMO encryption is NOT available."
|
|
|
+ 'Please note, when using an untrusted device, OMEMO encryption is NOT available.'
|
|
|
);
|
|
|
- const i18n_trusted = __("This is a trusted device");
|
|
|
+ const i18n_trusted = __('This is a trusted device');
|
|
|
return html`
|
|
|
- <div class="form-check login-trusted">
|
|
|
+ <div class="form-check mb-2 login-trusted">
|
|
|
<input
|
|
|
id="converse-login-trusted"
|
|
|
type="checkbox"
|
|
|
- class="form-check-input p-1 me-1"
|
|
|
+ class="form-check-input"
|
|
|
name="trusted"
|
|
|
?checked=${checked}
|
|
|
/>
|
|
|
<label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label>
|
|
|
- <converse-popover title="${__("Info")}" text="${i18n_hint_trusted}"></converse-popover>
|
|
|
+ <converse-popover title="${__('Info')}" text="${i18n_hint_trusted}"></converse-popover>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
export function tplConnectionURLInput() {
|
|
|
- const i18n_connection_url = __("Connection URL");
|
|
|
- const i18n_form_help = __("HTTP or websocket URL that is used to connect to your XMPP server");
|
|
|
- const i18n_placeholder = __("e.g. wss://example.org/xmpp-websocket");
|
|
|
+ const i18n_connection_url = __('Connection URL');
|
|
|
+ const i18n_form_help = __('HTTP or websocket URL that is used to connect to your XMPP server');
|
|
|
+ const i18n_placeholder = __('e.g. wss://example.org/xmpp-websocket');
|
|
|
return html`
|
|
|
<div class="mb-3 fade-in">
|
|
|
<label for="converse-conn-url" class="form-label">${i18n_connection_url}</label>
|
|
|
@@ -54,7 +55,7 @@ export function tplConnectionURLInput() {
|
|
|
}
|
|
|
|
|
|
function tplPasswordInput() {
|
|
|
- const i18n_password = __("Password");
|
|
|
+ const i18n_password = __('Password');
|
|
|
return html`
|
|
|
<div class="mb-3">
|
|
|
<label for="converse-login-password" class="form-label">${i18n_password}</label>
|
|
|
@@ -62,7 +63,7 @@ function tplPasswordInput() {
|
|
|
id="converse-login-password"
|
|
|
class="form-control"
|
|
|
required="required"
|
|
|
- value="${api.settings.get("password") ?? ""}"
|
|
|
+ value="${api.settings.get('password') ?? ''}"
|
|
|
type="password"
|
|
|
name="password"
|
|
|
placeholder="${i18n_password}"
|
|
|
@@ -72,71 +73,69 @@ function tplPasswordInput() {
|
|
|
}
|
|
|
|
|
|
function tplRegisterLink() {
|
|
|
- const i18n_create_account = __("Create an account");
|
|
|
+ const i18n_create_account = __('Create an account');
|
|
|
const i18n_hint_no_account = __("Don't have a chat account?");
|
|
|
return html`
|
|
|
- <fieldset class="switch-form">
|
|
|
- <p>${i18n_hint_no_account}</p>
|
|
|
- <p>
|
|
|
- <a class="register-account toggle-register-login" href="#converse/register">${i18n_create_account}</a>
|
|
|
- </p>
|
|
|
- </fieldset>
|
|
|
+ <div class="mt-3 text-center switch-form">
|
|
|
+ <p class="mb-1">${i18n_hint_no_account}</p>
|
|
|
+ <a class="register-account toggle-register-login" href="#converse/register">${i18n_create_account}</a>
|
|
|
+ </div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
function tplShowRegisterLink() {
|
|
|
return (
|
|
|
- api.settings.get("allow_registration") &&
|
|
|
- !api.settings.get("auto_login") &&
|
|
|
- _converse.pluggable.plugins["converse-register"].enabled(_converse)
|
|
|
+ api.settings.get('allow_registration') &&
|
|
|
+ !api.settings.get('auto_login') &&
|
|
|
+ _converse.pluggable.plugins['converse-register'].enabled(_converse)
|
|
|
);
|
|
|
}
|
|
|
|
|
|
function tplAuthFields() {
|
|
|
- const authentication = api.settings.get("authentication");
|
|
|
- const i18n_login = __("Log in");
|
|
|
- const i18n_xmpp_address = __("XMPP Address");
|
|
|
- const locked_domain = api.settings.get("locked_domain");
|
|
|
- const default_domain = api.settings.get("default_domain");
|
|
|
- const placeholder_username = ((locked_domain || default_domain) && __("Username")) || __("user@domain");
|
|
|
- const show_trust_checkbox = api.settings.get("allow_user_trust_override");
|
|
|
+ const authentication = api.settings.get('authentication');
|
|
|
+ const i18n_login = __('Log in');
|
|
|
+ const i18n_xmpp_address = __('XMPP Address');
|
|
|
+ const locked_domain = api.settings.get('locked_domain');
|
|
|
+ const default_domain = api.settings.get('default_domain');
|
|
|
+ const placeholder_username = ((locked_domain || default_domain) && __('Username')) || __('user@domain');
|
|
|
+ const show_trust_checkbox = api.settings.get('allow_user_trust_override');
|
|
|
|
|
|
return html`
|
|
|
- <fieldset class="form-group">
|
|
|
- <div class="mb-3">
|
|
|
- <label for="converse-login-jid" class="form-label">${i18n_xmpp_address}:</label>
|
|
|
- <input
|
|
|
- id="converse-login-jid"
|
|
|
- ?autofocus=${api.settings.get("auto_focus") ? true : false}
|
|
|
- value="${api.settings.get("jid") ?? ""}"
|
|
|
- required
|
|
|
- class="form-control"
|
|
|
- type="text"
|
|
|
- name="jid"
|
|
|
- placeholder="${placeholder_username}"
|
|
|
- />
|
|
|
- </div>
|
|
|
- ${authentication !== EXTERNAL ? tplPasswordInput() : ""}
|
|
|
- ${api.settings.get("show_connection_url_input") ? tplConnectionURLInput() : ""}
|
|
|
- ${show_trust_checkbox ? tplTrustCheckbox(show_trust_checkbox === "off" ? false : true) : ""}
|
|
|
- </fieldset>
|
|
|
- <fieldset class="form-group buttons">
|
|
|
- <input class="btn btn-primary" type="submit" value="${i18n_login}" />
|
|
|
- </fieldset>
|
|
|
- ${tplShowRegisterLink() ? tplRegisterLink() : ""}
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="converse-login-jid" class="form-label">${i18n_xmpp_address}:</label>
|
|
|
+ <input
|
|
|
+ id="converse-login-jid"
|
|
|
+ ?autofocus=${api.settings.get('auto_focus') ? true : false}
|
|
|
+ value="${api.settings.get('jid') ?? ''}"
|
|
|
+ required
|
|
|
+ class="form-control"
|
|
|
+ type="text"
|
|
|
+ name="jid"
|
|
|
+ placeholder="${placeholder_username}"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ${authentication !== EXTERNAL ? tplPasswordInput() : ''}
|
|
|
+ ${api.settings.get('show_connection_url_input') ? tplConnectionURLInput() : ''}
|
|
|
+ ${show_trust_checkbox ? tplTrustCheckbox(show_trust_checkbox === 'off' ? false : true) : ''}
|
|
|
+ <div class="text-center mb-3">
|
|
|
+ <button class="btn btn-primary px-5 mx-auto" type="submit">${i18n_login}</button>
|
|
|
+ </div>
|
|
|
+ ${tplShowRegisterLink() ? tplRegisterLink() : ''}
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
function tplFormFields() {
|
|
|
- const authentication = api.settings.get("authentication");
|
|
|
- const i18n_disconnected = __("Disconnected");
|
|
|
- const i18n_anon_login = __("Click here to log in anonymously");
|
|
|
+ const authentication = api.settings.get('authentication');
|
|
|
+ const i18n_disconnected = __('Disconnected');
|
|
|
+ const i18n_anon_login = __('Click here to log in anonymously');
|
|
|
return html`
|
|
|
- ${authentication == LOGIN || authentication == EXTERNAL ? tplAuthFields() : ""}
|
|
|
+ ${authentication == LOGIN || authentication == EXTERNAL ? tplAuthFields() : ''}
|
|
|
${authentication == ANONYMOUS
|
|
|
- ? html`<input class="btn btn-primary login-anon" type="submit" value="${i18n_anon_login}" />`
|
|
|
- : ""}
|
|
|
- ${authentication == PREBIND ? html`<p>${i18n_disconnected}</p>` : ""}
|
|
|
+ ? html`<div class="text-center mb-3">
|
|
|
+ <button class="btn btn-primary login-anon px-5 mx-auto" type="submit">${i18n_anon_login}</button>
|
|
|
+ </div>`
|
|
|
+ : ''}
|
|
|
+ ${authentication == PREBIND ? html`<p class="alert alert-warning">${i18n_disconnected}</p>` : ''}
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
@@ -145,19 +144,23 @@ function tplFormFields() {
|
|
|
*/
|
|
|
export default (el) => {
|
|
|
const { connfeedback } = _converse.state;
|
|
|
- const connection_status = connfeedback.get("connection_status");
|
|
|
- const feedback_class = CONNECTION_STATUS_CSS_CLASS?.[connection_status] ?? "none";
|
|
|
- const conn_feedback_message = connfeedback.get("message");
|
|
|
- return html` <converse-brand-heading></converse-brand-heading>
|
|
|
+ const connection_status = connfeedback.get('connection_status');
|
|
|
+ const feedback_class = CONNECTION_STATUS_CSS_CLASS?.[connection_status] ?? 'none';
|
|
|
+ const conn_feedback_message = connfeedback.get('message');
|
|
|
+ const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
|
|
|
+ return html` <div class="login-form-container">
|
|
|
+ <converse-brand-logo></converse-brand-logo>
|
|
|
<form id="converse-login" class="converse-form" method="post" @submit=${el.onLoginFormSubmitted}>
|
|
|
<div
|
|
|
- class="alert ${`alert-${feedback_class}`} fade-in conn-feedback ${!conn_feedback_message
|
|
|
- ? "d-none"
|
|
|
- : ""}"
|
|
|
+ class="alert ${`alert-${feedback_class}`} conn-feedback mb-3 ${!conn_feedback_message ? 'd-none' : ''}"
|
|
|
role="alert"
|
|
|
>
|
|
|
<span class="feedback-message">${conn_feedback_message}</span>
|
|
|
</div>
|
|
|
- ${CONNECTION_STATUS[connection_status] === "CONNECTING" ? tplSpinner() : tplFormFields()}
|
|
|
- </form>`;
|
|
|
+ ${CONNECTION_STATUS[connection_status] === 'CONNECTING'
|
|
|
+ ? html`<div class="text-center my-3">${tplSpinner()}</div>`
|
|
|
+ : tplFormFields()}
|
|
|
+ </form>
|
|
|
+ ${is_fullscreen ? html`<converse-footer></converse-footer>` : ''}
|
|
|
+ </div>`;
|
|
|
};
|
JC Brand