index.html 2.71 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
    <style>
      sib-test {
        display: block;
      }
Clément's avatar
Clément committed
13 14 15 16
      pre{
        white-space: normal;
        word-wrap: break-word;
      }
Clément's avatar
Clément committed
17 18 19 20 21 22 23 24 25 26 27 28 29 30
      .bu-test{
        border: 3px solid red;
      }
      .bu-test[data-src]{
        border-color: green;
      }
      .bu-test:after{
        content: '???';
      }
      .bu-test[data-src]:after{
        color: green;
        content: attr(data-src);

      }
Clément's avatar
Clément committed
31
    </style>
Clément's avatar
Clément committed
32 33
  </head>
  <body>
Clément's avatar
Clément committed
34
    <div bind-user class="bu-test">user-id: </div>
Clément's avatar
Clément committed
35 36 37 38
    <h1>sib-oidc</h1>
    <button id="reset">clear storage and set new URL</button>
    <button id="reload">reload</button>

39
    <sib-test bind-user>
Clément's avatar
Clément committed
40 41 42 43 44
      <button id="login">Se connecter</button>
      <button id="logout">Se déconnecter</button>
      <div id="result"></div>
    </sib-test>

Nicolas Mérigot's avatar
Nicolas Mérigot committed
45
    <sib-auth>
46
      <sib-auth-provider
47 48
        data-authority="https://api.test-paris.happy-dev.fr/"
        data-client_id="234528"
Clément's avatar
Clément committed
49
        data-id="paris"
50 51 52
      >
      </sib-auth-provider>
      <sib-auth-provider
53 54
        data-authority="https://api.test-paris.happy-dev.fr/"
        data-client_id="234528"
Clément's avatar
Clément committed
55
        data-id="paris2"
56 57 58
      >
      </sib-auth-provider>
    </sib-auth>
Clément's avatar
Clément committed
59

60

Clément's avatar
Clément committed
61 62 63 64 65 66 67 68 69
    <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
70
    <script type="module">
71
      import { SIBBase, store } from 'https://unpkg.com/@startinblox/core@0.7';
72

Nicolas Mérigot's avatar
Nicolas Mérigot committed
73 74
      class TestComponent extends SIBBase {
        async connectedCallback() {
75 76 77 78 79 80 81 82 83 84 85 86
          login.onclick = () => this.triggerLogin();
          logout.onclick = () => this.triggerLogout();

          this.update();
        }

        async triggerLogin() {
          await this.login();
        }
        async triggerLogout() {
          await this.logout();
        }
87
        
Jean-Baptiste's avatar
Jean-Baptiste committed
88
        async update() {
89
          let user = await this.getUser();
Clément's avatar
Clément committed
90
          let idToken = await this.getUserIdToken();
91
          if (!user) {
92
            result.innerHTML = `Vous n'êtes pas connecté !`;
93
            return;
94
          }
95 96
          user = await store.get(user);
          console.log(user);
Clément's avatar
Clément committed
97
          result.innerHTML = `Bonjour ${user.username} !<br>ID Token: <pre>${idToken}</pre>`;
Nicolas Mérigot's avatar
Nicolas Mérigot committed
98
        }
99 100
        empty(){}
        populate(){}
Nicolas Mérigot's avatar
Nicolas Mérigot committed
101 102
      }
      customElements.define('sib-test', TestComponent);
Clément's avatar
Clément committed
103
    </script>
Clément's avatar
Clément committed
104
  </body>
Jean-Baptiste's avatar
Jean-Baptiste committed
105
</html>