examples/custom-login-button.html

<!doctype html>
<html lang="en">

<head>
  <title>Custom login button — Pryv JS lib example</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" type="text/css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,400italic" type="text/css">
  <link rel="stylesheet" type="text/css" href="https://api.pryv.com/style/pryv.min.css">
  <!-- Paths assume we're in dist/examples/ (update as needed) -->
  <script src="../pryv.js"></script>
</head>

<body>
  <div class="container container-narrow">
    <h1>Example: Custom login button</h1>
    <button type="button" id="pryv-button">My custom button</button>
  </div>

  <script>
    const authSettings = {
      spanButtonID: 'pryv-button', // span id the DOM that will be replaced by the Service specific button
      authRequest: { // See: https://api.pryv.com/reference/#auth-request
        requestingAppId: 'custom-login-button-example',
        requestedPermissions: [
          {
            streamId: 'test',
            defaultName: 'test',
            level: 'manage'
          }
        ]
      }
    };

  class MyLoginButton {

    constructor(authSettings, service) {
      this.authSettings = authSettings;
      this.service = service;
      this.serviceInfo = service.infoSync();
    }

    async init() {
      const loginButtonSpan = document.getElementById(this.authSettings.spanButtonID);
      loginButtonSpan.addEventListener('click', this.onClick.bind(this));
      this.loginButtonSpan = loginButtonSpan;

      this._cookieKey = 'pryv-libjs-' + this.authSettings.authRequest.requestingAppId;

      this.auth = new pryv.Auth.AuthController(this.authSettings, this.service, this);
      await this.auth.init();
    }

    onClick() {
      this.auth.handleClick();
    }

    async onStateChange (state) {
      switch (state.status) {
        case pryv.Auth.AuthStates.LOADING:
          this.text = 'Loading visual assets';
          break;
        case pryv.Auth.AuthStates.INITIALIZED:
          this.text = 'Sign into: ' + this.serviceInfo.name;
          break;
        case pryv.Auth.AuthStates.NEED_SIGNIN:
          const loginUrl = state.authUrl || state.url; // .url is deprecated
          if (this.authSettings.authRequest.returnURL) { // open on same page (no Popup)
            location.href = loginUrl;
            return;
          } else {
            startLoginScreen(this, loginUrl);
          }
          break;
        case pryv.Auth.AuthStates.AUTHORIZED:
          this.text = 'Signed in as ' + state.username;
          this.saveAuthorizationData({
            apiEndpoint: state.apiEndpoint,
            username: state.username
          });
          break;
        case pryv.Auth.AuthStates.SIGNOUT:
          const message = 'Do you wish to sign out?';
          if (confirm(message)) {
            this.deleteAuthorizationData();
            this.auth.init();
          }
          break;
        case pryv.Auth.AuthStates.ERROR:
          this.text = getErrorMessage(this, state.message);
          break;
        default:
          console.log('WARNING Unhandled state for Login: ' + state.status);
      }
      if (this.loginButtonSpan) {
        this.loginButtonSpan.innerHTML = this.text;
      }
    }

    saveAuthorizationData(authData) {
      console.log('You should save this object to the storage', authData);
    }

    getAuthorizationData() {
      return pryv.Browser.CookieUtils.get(this._cookieKey);
    }

    async deleteAuthorizationData() {
      console.log('You should delete saved data from the storage');
    }
  }

  function startLoginScreen(loginButton, authUrl) {
      console.log('My custom popup that is huge:');
      let screenX = typeof window.screenX !== 'undefined' ? window.screenX : window.screenLeft,
        screenY = typeof window.screenY !== 'undefined' ? window.screenY : window.screenTop,
        outerWidth = typeof window.outerWidth !== 'undefined' ?
          window.outerWidth : document.body.clientWidth,
        outerHeight = typeof window.outerHeight !== 'undefined' ?
          window.outerHeight : (document.body.clientHeight - 22),
        width = 900,
        height = 500,
        left = parseInt(screenX + ((outerWidth - width) / 2), 10),
        top = parseInt(screenY + ((outerHeight - height) / 2.5), 10),
        features = (
          'width=' + width +
          ',height=' + height +
          ',left=' + left +
          ',top=' + top +
          ',scrollbars=yes'
        );
        loginButton.popup = window.open(authUrl, 'Your custom Sign-in pop-up', features);

      if (!loginButton.popup) {
        console.log('Pop-up blocked. A second click should allow it.');
      } else if (window.focus) {
        loginButton.popup.focus();
      }
    }

  const serviceInfoUrl = null; // 'https://api.pryv.com/lib-js/demos/service-info.json';
  const serviceInfoJson = {
    "register": "https://reg.pryv.me",
    "access": "https://access.pryv.me/access",
    "api": "https://{username}.pryv.me/",
    "name": "Pryv Lab",
    "home": "https://www.pryv.com",
    "support": "https://pryv.com/helpdesk",
    "terms": "https://pryv.com/pryv-lab-terms-of-use/",
    "eventTypes": "https://api.pryv.com/event-types/flat.json",
    "assets": {
      "definitions": "https://pryv.github.io/assets-pryv.me/index.json"
  }};
  (async function () {
    let service = await pryv.Auth.setupAuth(
      authSettings,
      serviceInfoUrl,
      serviceInfoJson,
      MyLoginButton,
      );
  })();
  </script>
</body>

</html>