Initial version
This commit is contained in:
257
public/index.html
Normal file
257
public/index.html
Normal file
@ -0,0 +1,257 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Encrypted Todo List</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Encrypted Todo List</h1>
|
||||
</div>
|
||||
|
||||
<div id="user-setup" class="container">
|
||||
<h3 class="section-title">Create/Login User</h3>
|
||||
<input type="text" id="userId" placeholder="Enter user ID" />
|
||||
<button onclick="createUser()">Create User</button>
|
||||
</div>
|
||||
|
||||
<div id="todo-app" style="display: none">
|
||||
<div class="container">
|
||||
<h3 class="section-title">Add New Todo</h3>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
id="todoText"
|
||||
placeholder="Enter todo item"
|
||||
/>
|
||||
<button onclick="addTodo()">Add Todo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h3 class="section-title">Your Encrypted Todos</h3>
|
||||
<div class="toggle-container">
|
||||
<span>Show Decrypted</span>
|
||||
<label class="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="viewToggle"
|
||||
onchange="toggleView()"
|
||||
/>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span>Show Encrypted</span>
|
||||
</div>
|
||||
|
||||
<div id="todos"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentUser = null;
|
||||
let allTodos = [];
|
||||
let showEncrypted = false;
|
||||
let allUsers = [];
|
||||
|
||||
async function createUser() {
|
||||
const userId = document.getElementById("userId").value;
|
||||
if (!userId) return;
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/users", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
currentUser = userId;
|
||||
document.getElementById("user-setup").style.display =
|
||||
"none";
|
||||
document.getElementById("todo-app").style.display =
|
||||
"block";
|
||||
loadUsers();
|
||||
loadTodos();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Error creating user: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch("/api/users");
|
||||
allUsers = await response.json();
|
||||
} catch (error) {
|
||||
console.error("Error loading users:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function addTodo() {
|
||||
const text = document.getElementById("todoText").value;
|
||||
if (!text) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/users/${currentUser}/todos`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text }),
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
document.getElementById("todoText").value = "";
|
||||
loadTodos();
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Error adding todo: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTodos() {
|
||||
try {
|
||||
// Get the decrypted todos
|
||||
const response = await fetch(
|
||||
`/api/users/${currentUser}/todos`,
|
||||
);
|
||||
const todos = await response.json();
|
||||
|
||||
// Get the raw encrypted todos
|
||||
const encryptedResponse = await fetch(
|
||||
`/api/users/${currentUser}/todos/encrypted`,
|
||||
);
|
||||
const encryptedTodos = await encryptedResponse.json();
|
||||
|
||||
// Create a map of encrypted todos by ID
|
||||
const encryptedMap = {};
|
||||
encryptedTodos.forEach((todo) => {
|
||||
encryptedMap[todo.id] = todo.encrypted;
|
||||
});
|
||||
|
||||
// Combine the data
|
||||
allTodos = todos.map((todo) => ({
|
||||
...todo,
|
||||
encrypted: encryptedMap[todo.id] || {
|
||||
body: "Encryption data not available",
|
||||
},
|
||||
}));
|
||||
|
||||
renderTodos();
|
||||
} catch (error) {
|
||||
console.error("Error loading todos:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderTodos() {
|
||||
const todosDiv = document.getElementById("todos");
|
||||
|
||||
if (allTodos.length === 0) {
|
||||
todosDiv.innerHTML = "<p>No todos yet. Add one above.</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
todosDiv.innerHTML = allTodos
|
||||
.map(
|
||||
(todo) => `
|
||||
<div class="todo-item">
|
||||
<div class="todo-content">
|
||||
${
|
||||
showEncrypted
|
||||
? `<div class="encrypted-data">
|
||||
<strong>Type:</strong> ${todo.encrypted.type}<br>
|
||||
<strong>Encrypted Data:</strong><br>${todo.encrypted.body}
|
||||
</div>`
|
||||
: `<div>
|
||||
<span>${todo.text}</span>
|
||||
${todo.sharedBy ? `<span class="shared-badge">Shared by ${todo.sharedBy}</span>` : ""}
|
||||
</div>`
|
||||
}
|
||||
</div>
|
||||
<div class="todo-actions">
|
||||
${
|
||||
!todo.sharedBy
|
||||
? `
|
||||
<div class="share-container">
|
||||
<select id="share-${todo.id}" class="share-select">
|
||||
<option value="">Share with...</option>
|
||||
${allUsers
|
||||
.filter((user) => user !== currentUser)
|
||||
.map(
|
||||
(user) =>
|
||||
`<option value="${user}">${user}</option>`,
|
||||
)
|
||||
.join("")}
|
||||
</select>
|
||||
<button onclick="shareTodo('${todo.id}')">Share</button>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
<button onclick="deleteTodo('${todo.id}')">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function toggleView() {
|
||||
showEncrypted = document.getElementById("viewToggle").checked;
|
||||
renderTodos();
|
||||
}
|
||||
|
||||
async function shareTodo(todoId) {
|
||||
const selectElement = document.getElementById(
|
||||
`share-${todoId}`,
|
||||
);
|
||||
const recipientId = selectElement.value;
|
||||
|
||||
if (!recipientId) {
|
||||
alert("Please select a user to share with");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/users/${currentUser}/todos/${todoId}/share`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ recipientId }),
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
alert(`Todo shared with ${recipientId}`);
|
||||
selectElement.value = "";
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Error sharing todo: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteTodo(todoId) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/users/${currentUser}/todos/${todoId}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
loadTodos();
|
||||
}
|
||||
} catch (error) {
|
||||
alert("Error deleting todo: " + error.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user