<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://spaceuptech.com/downloads/libraries/space-api-v0.11.0.js"></script>
</head>
<body>
<!-- Sign In -->
<b>Sign In:</b><br />
<input id="txtEmail1" placeholder="Email" type="text" /><br />
<input id="txtPass1" placeholder="Password" type="password" /><br />
<button onclick="login()">Login</button>
<br /><br />
<!-- Sign Up -->
<b>Sign Up:</b><br />
<input id="txtEmail2" placeholder="Email" type="text" /><br />
<input id="txtName2" placeholder="Name" type="text" /><br />
<input id="txtPass2" placeholder="Password" type="password" /><br />
<button onclick="signUp()">Sign Up</button>
<br /><br />
<!-- TODOs -->
<b>TODOs</b><br />
<input id="txtTodo" type="text" placeholder="Todo" />
<button onclick="addTodo()">Add</button>
<ul id="todos"></ul>
<script>
const generateId = () => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
// Initialise the API
var api = new Space.API("realtime-todo-app", "http://localhost:4122");
var db = api.Mongo();
var userId = "";
// Login function
function login() {
// Get the input field values
var email = document.getElementById("txtEmail1").value;
var pass = document.getElementById("txtPass1").value;
// Call the Sign In method
db.signIn(email, pass).then(res => {
// Verify if sign in is successful
if (res.status == 200) {
// Initialise the api token
api.setToken(res.data.token);
// Store the user id
userId = res.data.user._id;
const onSnapshot = (docs, type) => {
// Clear the existing todos
document.getElementById("todos").innerHTML = ''
// Print the todos
docs.forEach(element => {
printTodo(element.todo);
});
}
const onError = (err) => {
console.log('Operation failed:', err)
}
// Get todos from the database
db.liveQuery("todos")
.where(Space.cond("userId", "==", userId))
.subscribe(onSnapshot, onError)
alert("Login Success");
return;
}
alert("Login Failed");
});
}
// Sign Up function
function signUp() {
// Get the input field values
var email = document.getElementById("txtEmail2").value;
var name = document.getElementById("txtName2").value;
var pass = document.getElementById("txtPass2").value;
// Call the Sign Up method
db.signUp(email, name, pass, "default").then(res => {
// Verify if sign in is successful
if (res.status == 200) {
// Initialise the api token
api.setToken(res.data.token);
alert("Sign Up Success");
return;
}
alert("Sign Up Failed");
});
}
// Function to add li to the todos list
function printTodo(todo) {
var list = document.getElementById("todos");
var todos = list.innerHTML;
todos += "<li>" + todo + "</li>";
list.innerHTML = todos;
}
// Add Todo function
function addTodo() {
// Get the input field values
var todo = document.getElementById("txtTodo").value;
// Add todo to the database
db.insert("todos")
.one({ _id: generateId(), todo: todo, userId: userId })
.then(res => {
// Verify if get request is successful
if (res.status != 200) {
alert("Error occurred")
return;
}
});
}
</script>
</body>
</html>