index.html 2.28 KB
Newer Older
Clément's avatar
Clément committed
1 2 3 4 5 6 7
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SIB-OIDC test</title>
8
    <script type="module" src="./index.js"></script>
Clément's avatar
Clément committed
9 10 11 12 13
    <style>
      sib-test {
        display: block;
      }
    </style>
Clément's avatar
Clément committed
14 15
  </head>
  <body>
Clément's avatar
Clément committed
16 17 18 19 20 21 22 23 24 25 26
    <h1>sib-oidc</h1>
    <button id="reset">clear storage and set new URL</button>
    <button id="reload">reload</button>

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

Nicolas Mérigot's avatar
Nicolas Mérigot committed
27
    <sib-auth>
28
      <sib-auth-provider
Clément's avatar
Clément committed
29 30 31
        data-authority="https://test-paris.happy-dev.fr/openid/"
        data-client_id="833925"
        data-id="paris"
32 33 34
      >
      </sib-auth-provider>
      <sib-auth-provider
Clément's avatar
Clément committed
35 36 37
        data-authority="https://test-paris.happy-dev.fr/openid/"
        data-client_id="833925"
        data-id="paris2"
38 39 40
      >
      </sib-auth-provider>
    </sib-auth>
Clément's avatar
Clément committed
41

Clément's avatar
Clément committed
42 43 44 45 46 47 48 49 50
    <script>
      reset.onclick = () => {
        window.sessionStorage.clear();
        window.localStorage.clear();
        history.pushState({}, '', '.?time=' + new Date().toLocaleTimeString());
      };
      reload.onclick = () => location.reload();
    </script>

Clément's avatar
Clément committed
51
    <script type="module">
Matthieu Fesselier's avatar
Matthieu Fesselier committed
52
      import { SIBBase } from 'https://unpkg.com/@startinblox/core@0.6';
53

Nicolas Mérigot's avatar
Nicolas Mérigot committed
54 55
      class TestComponent extends SIBBase {
        async connectedCallback() {
Clément's avatar
Clément committed
56
          stat.onclick = () => console.log(this.getStatus());
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
          login.onclick = () => this.triggerLogin();
          logout.onclick = () => this.triggerLogout();

          this.update();
        }

        async triggerLogin() {
          await this.login();
        }
        async triggerLogout() {
          await this.logout();
        }

        async getStatus() {
          return this.getUser();
        }

        update() {
          const user = this.getUser();
          if (user) {
            result.innerHTML = `Bonjour ${user.profile.name} !`;
          } else {
            result.innerHTML = `Vous n'êtes pas connecté !`;
          }
Nicolas Mérigot's avatar
Nicolas Mérigot committed
81 82 83
        }
      }
      customElements.define('sib-test', TestComponent);
Clément's avatar
Clément committed
84
    </script>
Clément's avatar
Clément committed
85
  </body>
Clément's avatar
Clément committed
86
</html>