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