user.html | searchcode

/example/user.html

https://gitlab.com/rickmak/skygear-SDK-JS · HTML · 247 lines · 231 code · 16 blank · 0 comment · 0 complexity · 25d0110f55f2bb28efb1764bb461c24c MD5 · raw file

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Skygear-SDK-JS</title>
</head>
<body>
  <div id="main">
    <p>
      <label>End Point</label>
      <span id="endpoint"></span>
    </p>
    <p>
      <label>Token</label>
      <span id="accessToken">
        <a href="index.html">Go to Login</a>
      </span>
    </p>
    <p>
      <label>Username</label>
      <span id="currentUsername"></span>
    </p>
    <p>
      <label>Email</label>
      <span id="currentEmail"></span>
    </p>
  </div>
  <hr>
  <div id="whoami">
    <h4>Who am I?</h4>
    <form action="#" onsubmit="return false;">
      <p>
        <button onclick="whoami();">Me</button>
      </p>
      <p id="whoami-result"></p>
    </form>
  </div>
  <hr>
  <div id="user">
    <h4>Discover User</h4>
    <form action="#" onsubmit="return false;">
      <p>
        <label>Email</label>
        <input id="email" type="email" placeholder="user@skygear.io">
        <button onclick="getByEmail();">Get</button>
      </p>
      <p>
        <label>Username</label>
        <input id="username" type="username" placeholder="username">
        <button onclick="getByUsername();">Get</button>
      </p>
      <p id="user-result"></p>
    </form>
  </div>
  <hr>
  <div id="relation">
    <h4>Query user relation</h4>
    <form action="#" onsubmit="return false;">
      <p>
        <label>Relation</label>
        <select id="query-relation">
          <option value="Follower">Follower</option>
          <option value="Following">Following</option>
          <option value="Friend">Friend</option>
        </select>
      </p>
      <p id="relation-result"></p>
      <button onclick="queryRelation();">Query</button>
    </form>
  </div>
  <hr>
  <div>
    <h4>Add user relation</h4>
    <form action="#" onsubmit="return false;">
      <p>
        <label>Relation</label>
        <select id="add-relation">
          <option value="Follower">Follower</option>
          <option value="Following">Following</option>
          <option value="Friend">Friend</option>
        </select>
      </p>
      <p>
        <label>User id</label>
        <input id="add-id" type="text" placeholder="user id">
      </p>
      <p id="add-result"></p>
      <button onclick="addRelation();">Add</button>
    </form>
  </div>
  <hr>
  <div>
    <h4>Remove user relation</h4>
    <form action="#" onsubmit="return false;">
      <p>
        <label>Relation</label>
        <select id="remove-relation">
          <option value="Follower">Follower</option>
          <option value="Following">Following</option>
          <option value="Friend">Friend</option>
        </select>
      </p>
      <p>
        <label>User id</label>
        <input id="remove-id" type="text" placeholder="user id">
      </p>
      <p id="remove-result"></p>
      <button onclick="removeRelation();">Remove</button>
    </form>
  </div>
  <script src="/bundle.js"></script>
  <script type="text/javascript">
    var m = document.getElementById("endpoint");
    var token = document.getElementById("accessToken");
    var currentUsername = document.getElementById("currentUsername");
    var currentEmail = document.getElementById("currentEmail");
    skygear.config({
      'endPoint': '{{ SKYGEAR_ENDPOINT }}',
      'apiKey': '{{ SKYGEAR_API_KEY }}'
    }).then(function(container) {
      m.textContent = container.endPoint;
      token.innerText = skygear.auth.accessToken;
      if (skygear.auth.currentUser) {
        currentUsername.innerText = skygear.auth.currentUser.username;
        currentEmail.innerText = skygear.auth.currentUser.email;
      }
    }, function(err) {
      console.log(err);
    });

    function whoami () {
      console.log('Who am I?');
      var iam = document.getElementById("whoami-result");

      skygear.auth.whoami().then(function (user) {
        if (user.length ==  0) {
          iam.innerText = "no user found";
          return
        }
        console.log(user);
        iam.innerText = JSON.stringify(user.toJSON(), null, 2);
      }, function(error) {
        console.log(error);
        iam.innerText = error;
      });
    }

    function getByEmail () {
      console.log('discoverUserByEmails');
      var email = document.getElementById("email").value;
      var userInfo = document.getElementById("user-result");

      skygear.auth.discoverUserByEmails([email]).then(function (users) {
        if (users.length ==  0) {
          userInfo.innerText = "no user found";
          return
        }
        console.log(users[0]);
        userInfo.innerText = JSON.stringify(users[0].toJSON(), null, 2);
      }, function(error) {
        console.log(error);
        userInfo.innerText = error;
      });
    }

    function getByUsername () {
      console.log('discoverUserByUsernames');
      var username = document.getElementById("username").value;
      var userInfo = document.getElementById("user-result");

      skygear.auth.discoverUserByUsernames([username]).then(function (users) {
        if (users.length ==  0) {
          userInfo.innerText = "no user found";
          return
        }
        console.log(users[0]);
        userInfo.innerText = JSON.stringify(users[0].toJSON(), null, 2);
      }, function(error) {
        console.log(error);
        userInfo.innerText = error;
      });

    }

    function queryRelation () {
      console.log('queryRelation');
      var type = document.getElementById("query-relation").value;
      var relationResult = document.getElementById("relation-result");
      var method = "query" + type;
      console.log(method);

      skygear.relation[method]().then(function (users) {
        console.log(users);
        relationResult.innerText = JSON.stringify(users);
      }, function (error) {
        console.log(error);
        relationResult.innerText = error;
      })
    }

    function addRelation() {
      console.log('addRelation');
      var type = document.getElementById("add-relation").value;
      var addResult = document.getElementById("add-result");
      var userID = document.getElementById("add-id").value;
      var user = new skygear.User({
        user_id: userID
      });
      console.log(type);
      console.log(user.id);

      var relation = new skygear.relation[type]([user]);

      skygear.relation.add(relation).then(function (result) {
        console.log(result.targets);
        addResult.innerText = JSON.stringify(result.success);
      }, function (error) {
        console.log(error);
        addResult.innerText = error;
      });
    }

    function removeRelation() {
      console.log('removeRelation');
      var type = document.getElementById("remove-relation").value;
      var removeResult = document.getElementById("remove-result");
      var userID = document.getElementById("remove-id").value;
      var user = new skygear.User({
        user_id: userID
      });
      console.log(type);
      console.log(user.id);

      var relation = new skygear.relation[type]([user]);

      skygear.relation.remove(relation).then(function (result) {
        console.log(result.success);
        removeResult.innerText = JSON.stringify(result.success);
      }, function (error) {
        console.log(error);
        removeResult.innerText = error;
      });
    }

  </script>
</body>
</html>