157 lines
4.6 KiB
HTML
157 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Notely</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Notely</h1>
|
|
<button id="createUserButton">Create User</button>
|
|
|
|
<h2>Create Note</h2>
|
|
<textarea id="newNoteContent"></textarea>
|
|
<button id="createNoteButton">Create Note</button>
|
|
|
|
<h2>Your Notes</h2>
|
|
<div id="notes"></div>
|
|
|
|
<script>
|
|
const API_BASE = '/v1';
|
|
let currentUserAPIKey = localStorage.getItem('currentUserAPIKey')
|
|
let currentUser = null;
|
|
|
|
document.getElementById('createUserButton').addEventListener('click', createUser);
|
|
document.getElementById('createNoteButton').addEventListener('click', createNote);
|
|
|
|
async function createUser() {
|
|
const response = await fetch(`${API_BASE}/users`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: 'Test User' })
|
|
});
|
|
const user = await response.json();
|
|
localStorage.setItem('currentUserAPIKey', user.api_key);
|
|
currentUserAPIKey = user.api_key;
|
|
currentUser = user;
|
|
alert(`User Created: ${user.name}`);
|
|
}
|
|
|
|
async function createNote() {
|
|
if (!currentUser) {
|
|
alert('Please create a user first');
|
|
return;
|
|
}
|
|
const noteContent = document.getElementById('newNoteContent').value;
|
|
const response = await fetch(`${API_BASE}/notes`,
|
|
{
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `ApiKey ${currentUserAPIKey}` },
|
|
body: JSON.stringify({ note: noteContent })
|
|
});
|
|
const note = await response.json();
|
|
displayNote(note);
|
|
|
|
}
|
|
|
|
async function getUser() {
|
|
const response = await fetch(`${API_BASE}/users`, { headers: { 'Authorization': `ApiKey ${currentUserAPIKey}` } });
|
|
return await response.json();
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem('currentUserAPIKey');
|
|
currentUser = null;
|
|
}
|
|
|
|
async function loadNotes() {
|
|
if (!currentUser) {
|
|
return;
|
|
}
|
|
const response = await fetch(`${API_BASE}/notes`, { headers: { 'Authorization': `ApiKey ${currentUserAPIKey}` } });
|
|
const notes = await response.json();
|
|
const notesContainer = document.getElementById('notes');
|
|
notesContainer.innerHTML = '';
|
|
notes.forEach(note => displayNote(note));
|
|
}
|
|
|
|
function displayNote(note) {
|
|
const noteElement = document.createElement('div');
|
|
noteElement.className = 'note';
|
|
noteElement.textContent = note.note;
|
|
document.getElementById('notes').appendChild(noteElement);
|
|
}
|
|
|
|
async function login() {
|
|
if (!currentUserAPIKey) {
|
|
return
|
|
}
|
|
const user = await getUser();
|
|
currentUser = user;
|
|
currentUserAPIKey = user.api_key;
|
|
await loadNotes();
|
|
}
|
|
|
|
login();
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--primary: hsl(235, 86%, 65%);
|
|
--primary-light: hsl(235, 88%, 73%);
|
|
--dark: #121212;
|
|
--light: #E4E4E4;
|
|
--grey: #424242;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
background-color: var(--dark);
|
|
color: var(--light);
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
|
|
textarea {
|
|
width: 300px;
|
|
height: 100px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button {
|
|
background-color: var(--primary);
|
|
color: var(--light);
|
|
border: none;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
transition-duration: 0.4s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.note {
|
|
width: 300px;
|
|
background-color: var(--grey);
|
|
border: 1px solid var(--primary);
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|