Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
182 lines (150 sloc) 6.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ugliest To-Do</title>
<script type="text/javascript" src="https://sdk.userbase.com/1/userbase.js"></script>
</head>
<body>
<!-- Loading View -->
<div id="loading-view">Loading...</div>
<!-- Auth View -->
<div id="auth-view">
<h1>Login</h1>
<form id="login-form">
<input id="login-username" type="text" required placeholder="Username">
<input id="login-password" type="password" required placeholder="Password">
<input type="submit" value="Sign in">
</form>
<div id="login-error"></div>
<h1>Create an account</h1>
<form id="signup-form">
<input id="signup-username" type="text" required placeholder="Username">
<input id="signup-password" type="password" required placeholder="Password">
<input type="submit" value="Create an account">
</form>
<div id="signup-error"></div>
</div>
<!-- To-dos View -->
<div id="todo-view">
<div id="username"></div>
<input type="button" value="Logout" id="logout-button">
<div id="logout-error"></div>
<h1>To-Do List</h1>
<div id="todos"></div>
<div id="db-loading">Loading to-dos...</div>
<div id="db-error"></div>
<form id="add-todo-form">
<input id="add-todo" type="text" required placeholder="To-Do">
<input type="submit" value="Add">
</form>
<div id="add-todo-error"></div>
</div>
<!-- application code -->
<script type="text/javascript">
userbase.init({ appId: '507612d6-3cd8-489d-9eb0-7c9f0a19411c' })
.then((session) => session.user ? showTodos(session.user.username) : showAuth())
.catch(() => showAuth())
.finally(() => document.getElementById('loading-view').style.display = 'none')
function handleLogin(e) {
e.preventDefault()
const username = document.getElementById('login-username').value
const password = document.getElementById('login-password').value
userbase.signIn({ username, password, rememberMe: 'local' })
.then((user) => showTodos(user.username))
.catch((e) => document.getElementById('login-error').innerHTML = e)
}
function handleSignUp(e) {
e.preventDefault()
const username = document.getElementById('signup-username').value
const password = document.getElementById('signup-password').value
userbase.signUp({ username, password, rememberMe: 'local' })
.then((user) => showTodos(user.username))
.catch((e) => document.getElementById('signup-error').innerHTML = e)
}
function handleLogout() {
userbase.signOut()
.then(() => showAuth())
.catch((e) => document.getElementById('logout-error').innerText = e)
}
function showTodos(username) {
document.getElementById('auth-view').style.display = 'none'
document.getElementById('todo-view').style.display = 'block'
// reset the todos view
document.getElementById('username').innerHTML = username
document.getElementById('todos').innerText = ''
document.getElementById('db-loading').style.display = 'block'
document.getElementById('db-error').innerText = ''
userbase.openDatabase({ databaseName: 'todos', changeHandler })
.catch((e) => document.getElementById('db-error').innerText = e)
}
function showAuth() {
document.getElementById('todo-view').style.display = 'none'
document.getElementById('auth-view').style.display = 'block'
document.getElementById('login-username').value = ''
document.getElementById('login-password').value = ''
document.getElementById('login-error').innerText = ''
document.getElementById('signup-username').value = ''
document.getElementById('signup-password').value = ''
document.getElementById('signup-error').innerText = ''
}
function changeHandler(items) {
document.getElementById('db-loading').style.display = 'none'
const todosList = document.getElementById('todos')
if (items.length === 0) {
todosList.innerText = 'Empty'
} else {
// clear the list
todosList.innerHTML = ''
// render all the to-do items
for (let i = 0; i < items.length; i++) {
// build the todo delete button
const todoDelete = document.createElement('button')
todoDelete.innerHTML = 'X'
todoDelete.style.display = 'inline-block'
todoDelete.onclick = () => {
userbase.deleteItem({ databaseName: 'todos', itemId: items[i].itemId })
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
}
// build the todo checkbox
const todoBox = document.createElement('input')
todoBox.type = 'checkbox'
todoBox.id = items[i].itemId
todoBox.checked = items[i].item.complete ? true : false
todoBox.onclick = (e) => {
e.preventDefault()
userbase.updateItem({ databaseName: 'todos', itemId: items[i].itemId, item: {
'todo': items[i].item.todo,
'complete': !items[i].item.complete
}})
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
}
// build the todo label
const todoLabel = document.createElement('label')
todoLabel.innerHTML = items[i].item.todo
todoLabel.style.textDecoration = items[i].item.complete ? 'line-through' : 'none'
// append the todo item to the list
const todoItem = document.createElement('div')
todoItem.appendChild(todoDelete)
todoItem.appendChild(todoBox)
todoItem.appendChild(todoLabel)
todosList.appendChild(todoItem)
}
}
}
function addTodoHandler(e) {
e.preventDefault()
const todo = document.getElementById('add-todo').value
userbase.insertItem({ databaseName: 'todos', item: { 'todo': todo }})
.then(() => document.getElementById('add-todo').value = '')
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
}
document.getElementById('login-form').addEventListener('submit', handleLogin)
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
document.getElementById('logout-button').addEventListener('click', handleLogout)
document.getElementById('todo-view').style.display = 'none'
document.getElementById('auth-view').style.display = 'none'
</script>
</body>
</html>
You can’t perform that action at this time.