index.html 3.09 KB
Newer Older
1 2 3
<!DOCTYPE html>
<html>
  <head>
Clément's avatar
Clément committed
4
    <meta charset="UTF-8" />
Alexandre's avatar
Alexandre committed
5
    <script type="module" src="https://unpkg.com/@startinblox/oidc@0.7" ></script>
Clément's avatar
Clément committed
6
    <script type="module" src="sib-chat.js"></script>
7
    <title>SIB Chat</title>
8

9
    <style>
Clément's avatar
Clément committed
10 11 12 13 14 15 16 17 18 19 20
      body {
        background-color: lightgrey;
        padding: 1em 10%;
      }
      h1 {
        color: black;
      }
      .converse-container {
        border: 1px dashed blue;
        height: 75vh;
      }
21
    </style>
22
  </head>
Clément's avatar
Clément committed
23

24
  <body>
Clément's avatar
Clément committed
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

    <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>

Clément's avatar
Clément committed
52 53 54
    <h1>Demo of an XMPP chatroom via a web component</h1>
    <div class="converse-container">
      <sib-chat
55
        data-src="https://api.test-paris.happy-dev.fr/projects/3/"
Clément's avatar
Clément committed
56 57 58 59 60 61 62 63
        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>

Clément's avatar
Clément committed
64 65 66 67 68 69 70 71 72 73
    <script>
      reset.onclick = () => {
        window.sessionStorage.clear();
        window.localStorage.clear();
        history.pushState({}, '', '.?time=' + new Date().toLocaleTimeString());
      };
      reload.onclick = () => location.reload();
    </script>

    <script type="module">
Clément's avatar
Clément committed
74
      import { store } from 'https://unpkg.com/@startinblox/core@0.8';
Clément's avatar
Clément committed
75

Alexandre's avatar
Alexandre committed
76
      class TestComponent extends HTMLElement {
Clément's avatar
Clément committed
77 78 79 80 81 82 83 84 85
        async connectedCallback() {
          stat.onclick = () => console.log(this.getStatus());
          login.onclick = () => this.triggerLogin();
          logout.onclick = () => this.triggerLogout();

          this.update();
        }

        async triggerLogin() {
Alexandre's avatar
Alexandre committed
86
          await document.querySelector("sib-auth").login();
Clément's avatar
Clément committed
87 88
        }
        async triggerLogout() {
Alexandre's avatar
Alexandre committed
89
          await document.querySelector("sib-auth").logout();
Clément's avatar
Clément committed
90 91 92
        }

        async update() {
Alexandre's avatar
Alexandre committed
93 94
          let user = await document.querySelector("sib-auth").getUser();
          let idToken = await document.querySelector("sib-auth").getUserIdToken();
Clément's avatar
Clément committed
95 96 97 98 99 100
          if (!user) {
            result.innerHTML = `Vous n'êtes pas connecté !`;
            return;
          }
          user = await store.get(user);
          console.log(user);
Clément's avatar
Clément committed
101 102
          result.innerHTML = `Bonjour ${user.username} !<br>
          ID Token: <pre>${idToken}</pre>`;
Clément's avatar
Clément committed
103 104 105 106 107 108
        }
        empty() {}
        populate() {}
      }
      customElements.define('sib-test', TestComponent);
    </script>
109 110
  </body>
</html>