Skip to content

S
SiB Chat
Source
Select Git revision
...
Target
Select Git revision
 
Commits (7)
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 94 deletions
index.html
View file @ 5e67e47e
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="module"
src="https://unpkg.com/@startinblox/oidc@0.5"
data-authority="https://test-paris.happy-dev.fr/openid/"
data-client_id="833925"
data-response_type="id_token token"
data-scope="openid profile email"
data-automaticSilentRenew="true"
data-loadUserInfo="true"
></script>
<meta charset="UTF-8" />
<script type="module" src="https://unpkg.com/@startinblox/oidc@0.7" ></script>
<script type="module" src="sib-chat.js"></script>
<title>XMPP chat</title>
......@@ -23,31 +15,104 @@
-->
<style>
body {
background-color: lightgrey;
padding: 1em 10%;
}
h1 {
color: black;
}
.converse-container {
border: 1px dashed blue;
height: 75vh;
}
body {
background-color: lightgrey;
padding: 1em 10%;
}
h1 {
color: black;
}
.converse-container {
border: 1px dashed blue;
height: 75vh;
}
</style>
</head>
<body>
<h1>sib-oidc</h1>
<button id="reset">clear storage and set new URL</button>
<button id="reload">reload</button>
<sib-test bind-user>
<button id="login">Se connecter</button>
<button id="logout">Se déconnecter</button>
<button id="stat">Status (console)</button>
<div id="result"></div>
</sib-test>
<sib-auth>
<sib-auth-provider
data-authority="https://api.test-paris.happy-dev.fr/"
data-client_id="234528"
data-id="paris"
>
</sib-auth-provider>
<sib-auth-provider
data-authority="https://api.test-paris.happy-dev.fr/"
data-client_id="234528"
data-id="paris2"
>
</sib-auth-provider>
</sib-auth>
<h1>Demo of an XMPP chatroom via a web component</h1>
<div class="converse-container">
<sib-chat
data-src="https://test-paris.happy-dev.fr/members/1/"
data-authentication="login"
data-auto-login="true"
data-bosh-service-url="https://jabber.happy-dev.fr/http-bind/"
data-debug="true"
data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json">
</sib-chat>
<sib-chat
data-src="https://test-paris.happy-dev.fr/members/1/"
data-authentication="login"
data-auto-login="true"
data-bosh-service-url="https://jabber.happy-dev.fr/http-bind/"
data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json"
>
</sib-chat>
</div>
<script>
reset.onclick = () => {
window.sessionStorage.clear();
window.localStorage.clear();
history.pushState({}, '', '.?time=' + new Date().toLocaleTimeString());
};
reload.onclick = () => location.reload();
</script>
<script type="module">
import { store } from 'https://unpkg.com/@startinblox/core@0.8';
class TestComponent extends HTMLElement {
async connectedCallback() {
stat.onclick = () => console.log(this.getStatus());
login.onclick = () => this.triggerLogin();
logout.onclick = () => this.triggerLogout();
this.update();
}
async triggerLogin() {
await document.querySelector("sib-auth").login();
}
async triggerLogout() {
await document.querySelector("sib-auth").logout();
}
async update() {
let user = await document.querySelector("sib-auth").getUser();
let idToken = await document.querySelector("sib-auth").getUserIdToken();
if (!user) {
result.innerHTML = `Vous n'êtes pas connecté !`;
return;
}
user = await store.get(user);
console.log(user);
result.innerHTML = `Bonjour ${user.username} !<br>
ID Token: <pre>${idToken}</pre>`;
}
empty() {}
populate() {}
}
customElements.define('sib-test', TestComponent);
</script>
</body>
</html>
package-lock.json
View file @ 5e67e47e
......@@ -14,7 +14,7 @@
"resolved": "https://registry.npmjs.org/@startinblox/oidc/-/oidc-0.5.1.tgz",
"integrity": "sha512-0laMDJ//g+BPBBJCydIVazqWDJpP8fAK6TdnLFCUpUBk3tywuXxgg5vhn0wizKrkQYW2nofmtoJOpia1qzrARg==",
"requires": {
"oidc-client": "^1.6.1"
"oidc-client": "1.6.1"
},
"dependencies": {
"oidc-client": {
......@@ -22,8 +22,8 @@
"resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.6.1.tgz",
"integrity": "sha512-buA9G0hlFjUwxoL/xuHunBtTgoICtJSojnZtATqMliUTKxPYAzHprOQ85Lj0hgF+Zv8lI/ViqaNFDG0Z5KCUKA==",
"requires": {
"babel-polyfill": ">=6.9.1",
"jsrsasign": "^8.0.12"
"babel-polyfill": "6.26.0",
"jsrsasign": "8.0.12"
}
}
}
......@@ -45,9 +45,9 @@
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
"optional": true,
"requires": {
"babel-runtime": "^6.26.0",
"core-js": "^2.5.0",
"regenerator-runtime": "^0.10.5"
"babel-runtime": "6.26.0",
"core-js": "2.5.7",
"regenerator-runtime": "0.10.5"
}
},
"babel-runtime": {
......@@ -56,8 +56,8 @@
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"optional": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
"core-js": "2.5.7",
"regenerator-runtime": "0.11.1"
},
"dependencies": {
"regenerator-runtime": {
......@@ -79,7 +79,7 @@
"resolved": "https://registry.npmjs.org/converse.js/-/converse.js-4.1.0.tgz",
"integrity": "sha512-Efhp4cn6LjDqyG8y/BAyQxgIiQA9dx48DArsYc4cKqzj3yxD0VjFrXlxUeFqU/y5HGMNHYjkA7CPauNXG8WYsg==",
"requires": {
"fast-text-encoding": "^1.0.0"
"fast-text-encoding": "1.0.0"
}
},
"core-js": {
......@@ -108,10 +108,10 @@
"integrity": "sha512-Goilx/2cfU9vvfQjgtNgc2VmJAD8CasQ6rZDqCd2u4Hsyd/qFET6nBf60jiHodevR3nl3IGzNKtrzPXWP88utQ==",
"dev": true,
"requires": {
"he": "^1.1.1",
"mime": "^1.4.1",
"minimist": "^1.1.0",
"url-join": "^2.0.2"
"he": "1.1.1",
"mime": "1.6.0",
"minimist": "1.2.0",
"url-join": "2.0.5"
}
},
"eventemitter3": {
......@@ -131,7 +131,7 @@
"integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
"dev": true,
"requires": {
"debug": "^3.1.0"
"debug": "3.1.0"
}
},
"he": {
......@@ -146,9 +146,9 @@
"integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
"dev": true,
"requires": {
"eventemitter3": "^3.0.0",
"follow-redirects": "^1.0.0",
"requires-port": "^1.0.0"
"eventemitter3": "3.1.0",
"follow-redirects": "1.5.0",
"requires-port": "1.0.0"
}
},
"http-server": {
......@@ -158,13 +158,13 @@
"dev": true,
"requires": {
"colors": "1.0.3",
"corser": "~2.0.0",
"ecstatic": "^3.0.0",
"http-proxy": "^1.8.1",
"opener": "~1.4.0",
"optimist": "0.6.x",
"portfinder": "^1.0.13",
"union": "~0.4.3"
"corser": "2.0.1",
"ecstatic": "3.2.0",
"http-proxy": "1.17.0",
"opener": "1.4.3",
"optimist": "0.6.1",
"portfinder": "1.0.13",
"union": "0.4.6"
}
},
"jsrsasign": {
......@@ -219,8 +219,8 @@
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
"dev": true,
"requires": {
"minimist": "~0.0.1",
"wordwrap": "~0.0.2"
"minimist": "0.0.10",
"wordwrap": "0.0.3"
},
"dependencies": {
"minimist": {
......@@ -237,9 +237,9 @@
"integrity": "sha1-uzLs2HwnEErm7kS1o8y/Drsa7ek=",
"dev": true,
"requires": {
"async": "^1.5.2",
"debug": "^2.2.0",
"mkdirp": "0.5.x"
"async": "1.5.2",
"debug": "2.6.9",
"mkdirp": "0.5.1"
},
"dependencies": {
"debug": {
......@@ -277,7 +277,7 @@
"integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
"dev": true,
"requires": {
"qs": "~2.3.3"
"qs": "2.3.3"
}
},
"url-join": {
......
sib-chat.js
View file @ 5e67e47e
import 'https://unpkg.com/converse.js@4.2/dist/converse.js';
import { Helpers, SIBBase, store } from 'https://unpkg.com/@startinblox/core@0.7';
import {
Helpers,
store,
} from 'https://unpkg.com/@startinblox/core@0.8';
const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
import { Sib } from 'https://unpkg.com/@startinblox/core@0.8/dist/libs/Sib.js';
import { WidgetMixin } from 'https://unpkg.com/@startinblox/core@0.8/dist/mixins/widgetMixin.js';
import { StoreMixin } from 'https://unpkg.com/@startinblox/core@0.8/dist/mixins/storeMixin.js';
// const currentURL = import.meta.url;
const currentURL = (new Error()).stack.toString().match(/[a-z]+:[^:]+/)[0];
const baseURL = currentURL.replace(/\/[^\/]*$/, '');
export class ConversePlugin {
changeChat(jid, is_groupchat = false, root) {
......@@ -26,20 +37,19 @@ export class ConversePlugin {
}
}
export class ChatWindow extends SIBBase {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.append(
export const ChatWindow = {
name: 'sib-chat',
use: [ WidgetMixin, StoreMixin ],
created() {
this.element.attachShadow({ mode: 'open' });
this.element.shadowRoot.append(
...Helpers.importCSS(
'https://unpkg.com/converse.js@4.2/css/converse.css',
`${base_url}/converse-embed.css`,
`${baseURL}/converse-embed.css`,
),
);
// Dirty fix. @see https://stackoverflow.com/questions/33696169/chrome-extension-font-awesome-wont-display-in-shadow-root
Helpers.importCSS(
'https://unpkg.com/converse.js@4.2/css/fonts.css'
);
Helpers.importCSS('https://unpkg.com/converse.js@4.2/css/fonts.css');
if (typeof window.converse === 'undefined') {
window.converseLoaded = new Promise((resolve, reject) =>
window.addEventListener('converse-loaded', resolve),
......@@ -48,11 +58,11 @@ export class ChatWindow extends SIBBase {
window.converseLoaded = Promise.resolve();
}
window.converseLoaded.then(() => this.initConverse());
}
},
empty() {
this.innerHTML = '';
}
this.element.innerHTML = '';
},
async populate() {
await window.converseLoaded;
......@@ -60,13 +70,18 @@ export class ChatWindow extends SIBBase {
this.initConverse();
}
await window.converseInitialized;
const user = await document.querySelector('sib-auth').getUser();
const resource = await store
.get(user)
const jabberID = resource.chatProfile['foaf:jabberID'];
window.converse_sib.changeChat(
(this.resource.jabberID || this.resource.chatProfile.jabberID),
jabberID,
this.resource.jabberRoom,
this.shadowRoot,
this.element.shadowRoot,
);
window.dispatchEvent(new CustomEvent('read', { detail: { resource: this.resource } }));
}
},
async initConverse() {
if (typeof window.converseInitialized !== 'undefined') {
......@@ -76,35 +91,39 @@ export class ChatWindow extends SIBBase {
window.converse_sib = new ConversePlugin();
converse.plugins.add('sib-chat', converse_sib);
const user = await this.getUser()
const user = await document.querySelector('sib-auth').getUser();
const jabberID = await store
.get(user.profile.website)
.get(user)
.then(resource => resource.chatProfile['foaf:jabberID']);
const idToken = await document.querySelector('sib-auth').getUserIdToken();
await converse.initialize({
debug: (this.dataset.debug === "true"),
root: this.shadowRoot,
authentication: this.dataset.authentication,
debug: this.element.dataset.debug === 'true',
root: this.element.shadowRoot,
authentication: this.element.dataset.authentication,
auto_reconnect: true,
allow_non_roster_messaging: true,
auto_login: this.dataset.autoLogin === 'true',
bosh_service_url: this.dataset.boshServiceUrl,
auto_login: this.element.dataset.autoLogin === 'true',
bosh_service_url: this.element.dataset.boshServiceUrl,
jid: jabberID,
i18n: 'en',
password: user.access_token,
nickname: user.profile.nickname,
locales_url: this.dataset.localesUrl,
password: idToken,
nickname: user.username,
locales_url: this.element.dataset.localesUrl,
whitelisted_plugins: ['sib-chat'],
view_mode: 'embedded',
sounds_path: 'https://unpkg.com/converse.js@4.2/sounds/',
});
window.converseInitialized.resolve();
}
},
get extra_context() {
return { jabberID: 'http://xmlns.com/foaf/0.1/jabberID' };
}
}
return {
foaf: 'http://xmlns.com/foaf/0.1/',
jabberID: 'foaf:jabberID',
};
},
};
export function customElementIsRegistered(name) {
switch (document.createElement(this).constructor) {
......@@ -116,6 +135,4 @@ export function customElementIsRegistered(name) {
return true;
}
if (!customElementIsRegistered('sib-chat')) {
window.customElements.define('sib-chat', ChatWindow);
}
Sib.register(ChatWindow);
\ No newline at end of file