Fast-link to web based client

[sjehuda]

Clients: Candy, Converse.js, JabberWebChat (JWChat), JSXC, Kaiwa, Movim, Speeqe, XMPP Web (1, 2)

We could link https://conversejs.org/fullscreen.html or https://inverse.chat/ where you can login with any account on any server.

Source: @Perflyst at #18 (comment)

Web-admins will be able to choose a web based client of their choice and enable it, if they choose so.

Configuration file might be as follows:

// If URL set, display button for web client
{client-web: URL}

[licaon-kter]

Also #18 (comment)

[sjehuda]

Clickable text:
"Web clients"
"Looking for web based clients?"
"Try XMPP without installing"
"XMPP inside your browser"

Upon click (using event onclick), the current selection will be replaced by web clients.

[sjehuda]

I've got thiis error for the following code.
I've checked the JS code and it works when replacing "#webui > a" by something else (e.g. "body") or when locating the code somewhere else than function load_done().

Error:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at load_done (main.js:170)
    at HTMLDocument.document.onreadystatechange (main.js:180)

index.html

  <p class="lead text-center" id="clients"></p>
+ <p class="lead text-center" id="webui"></p>
  <p class="lead text-center" id="recommend"></p>

en.json

  "webui": "You can also access from a <a>web client</a> (no installation).",

clients_Web.json

[
    "<a href=\"https://jwchat.org/kaiwa/login.html\"><img src=\"assets/kaiwa.svg\" height=\"60\">Kaiwa</a>",
    "<a href=\"https://movim.hmm.st/\"><img src=\"assets/movim.svg\" height=\"60\">Movim</a>",
    "<a href=\"https://www.libervia.org/\"><img src=\"assets/libervia.svg\" height=\"60\">Libervia</a>",
    "<a href=\"https://conversejs.org/\"><img src=\"assets/conversejs.svg\" height=\"60\">Converse</a>",
    "<a href=\"https://web.xabber.com/\"><img src=\"assets/xabber.svg\" height=\"60\">Xabber</a>"
]

main.js

document.querySelector("#webui > a").addEventListener("click", function() {
	for (const item of document.querySelectorAll("#client_list > div")) {
		item.remove()
	}
	load_clients("clients_Web.json");
});

[sjehuda]

@Perflyst @licaon-kter please help me here.

I don't know what to do in this case of UI design.

• If we present possible web clients to install:

1. This is a matter for web administrators, not new users;
2. I'm adding more text ("You can also access from a web client (no installation).").

• If we present a single link to an instance:

1. Make it customizable;
2. Where should we place it?

[sjehuda]

@strugee

I was just looking at your #1 and #2 PRs.
Thank you for your work.

I'd be pleased if you'd kindly look into the recent issues we have posted here.
It seems that we are heading to a complete refinement of the current design.