From 4702402484a773c0eccf7415d0318e367fb996e1 Mon Sep 17 00:00:00 2001 From: Alexis Hovorka Date: Sat, 27 Jul 2024 19:43:38 -0600 Subject: [refactor] Try out some client-side UI libraries --- app/public/main.js | 186 +++++++++++++++++++---------------------------------- 1 file changed, 65 insertions(+), 121 deletions(-) (limited to 'app/public/main.js') diff --git a/app/public/main.js b/app/public/main.js index 2a30c45..a9119b4 100644 --- a/app/public/main.js +++ b/app/public/main.js @@ -1,4 +1,7 @@ -document.addEventListener("DOMContentLoaded", async () => { "use strict"; +import { getNote, getList, saveNote, newNote, getUserData, getUserSessions, + signIn, changePassword, changeUsername, signOut, signOutEverywhere } from "./api.js"; + +document.addEventListener("DOMContentLoaded", async () => { const $ = (s,c) => (c||document).querySelector(s); function $$(x,y,z,a){a=(z||document).querySelectorAll(x);if(typeof y=="function")[].forEach.call(a,y);return a} @@ -27,79 +30,37 @@ function debounce(fn, delay) { // .then(() => console.log("Service worker registered")); //} -function drawNote(note) { - const el = m(`
- - -
`); - - const ta = $("textarea", el) - - ta.addEventListener("input", - debounce(() => { saveNote(note.id, ta.value); }, 500)); - - function resizeTextarea() { // TODO simplify - el.style.height = (el.scrollHeight) + "px"; - ta.style.height = ""; ta.style.height = (ta.scrollHeight) + "px"; - el.style.height = ""; - } - ta.addEventListener("input", resizeTextarea); - ta.addEventListener("focus", resizeTextarea); - window.addEventListener("resize", resizeTextarea); - setTimeout(resizeTextarea); +//console.log("outside", $("note-card").textContent); +//$("note-card").addEventListener("edit", () => console.log("edit event fired")); +function drawNote(note) { + //const el = m(`
+ // + // + //
`); + + //const ta = $("textarea", el) + + //ta.addEventListener("input", + // debounce(() => { saveNote(note.id, ta.value); }, 500)); + + //function resizeTextarea() { // TODO simplify + // el.style.height = (el.scrollHeight) + "px"; + // ta.style.height = ""; ta.style.height = (ta.scrollHeight) + "px"; + // el.style.height = ""; + //} + //ta.addEventListener("input", resizeTextarea); + //ta.addEventListener("focus", resizeTextarea); + //window.addEventListener("resize", resizeTextarea); + //setTimeout(resizeTextarea); + + const el = m(`${note.content.trim()}`); $("#notes").appendChild(el); } -async function getNote(id) { - const res = await fetch(`${id}`); - const note = await res.json(); - console.log(note); - drawNote(note); -} - -async function getList() { - const res = await fetch("/list"); - const list = await res.json(); - console.log(list); - - return Promise.all(list.map(id => getNote(id))); -} - -async function saveNote(id, content) { - const res = await fetch("/"+id, { - method: "POST", - body: JSON.stringify({id, content}), - }); - - const note = await res.json(); - console.log(note); -} - -async function newNote() { - const res = await fetch("/new", { - method: "POST", - }); - - const note = await res.json(); - console.log(note); - - drawNote(note); -} - -$("#add-btn").addEventListener("click", newNote); - -async function getUserData() { - const res = await fetch(`/user`); - const user = await res.json(); - console.log(user); -} - -async function getUserSessions() { - const res = await fetch(`/session-list`); - const sessions = await res.json(); - console.log(sessions); -} +$("#add-btn").addEventListener("click", async () => { + drawNote(await newNote()); +}); function showSignIn() { const hash = location.hash.slice(2).replace(/^sign-in(\/to\/)?/,""); @@ -131,32 +92,27 @@ $("#sign-in-basic-go").addEventListener("click", async e => { inputs.forEach(e => e.disabled = true); $("#sign-in-form").classList.add("loading"); - const res = await fetch("/login", { - method: "POST", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({ - username: $("#sign-in-username").value, - password: $("#sign-in-password").value, - keepSession: $("#sign-in-keep-session").checked, - }) + const res = await signIn({ + username: $("#sign-in-username").value, + password: $("#sign-in-password").value, + keepSession: $("#sign-in-keep-session").checked, }); inputs.forEach(e => e.disabled = false); $("#sign-in-form").classList.remove("loading"); - if (!res.ok) { - $("#sign-in-error").textContent = res.status+" "+res.statusText; + if (res.error) { + $("#sign-in-error").textContent = res.code+" "+res.error; return; } - const json = await res.json(); - console.log(json); + console.log(res); - if (!json.success) { - $("#sign-in-error").textContent = json.msg; + if (!res.success) { + $("#sign-in-error").textContent = res.msg; return; } - if (json.mustChangePassword) { + if (res.mustChangePassword) { alert("Must change password (TODO)"); // TODO return; @@ -167,66 +123,54 @@ $("#sign-in-basic-go").addEventListener("click", async e => { // TODO load location getUserData(); - getList(); + const noteList = await getList(); + for (const note of noteList) drawNote(note); $("#sign-in-dialog").close(); }); $("#change-password").addEventListener("click", async () => { - const res = await fetch("/change-password", { - method: "POST", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({ - username: $("#username").value, // TODO - password: $("#password").value, // TODO - newPassword: $("#new-password").value, - keepSession: $("#keep-session").checked, - }) + const res = await changePassword({ + username: $("#username").value, // TODO + password: $("#password").value, // TODO + newPassword: $("#new-password").value, + keepSession: $("#keep-session").checked, }); - const json = await res.json(); - console.log(json); + console.log(res); getUserData(); }); $("#change-username").addEventListener("click", async () => { - const res = await fetch("/change-username", { - method: "POST", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({ - newUsername: $("#new-username").value, - password: $("#password").value, // TODO - }) + const res = await changeUsername({ + newUsername: $("#new-username").value, + password: $("#password").value, // TODO }); - const json = await res.json(); - console.log(json); + console.log(res); getUserData(); }); -$("#log-out").addEventListener("click", async () => { - const res = await fetch("/logout", { - method: "POST", - }); - - //const json = await res.json(); - //console.log(json); - console.log("Logged out"); +$("#sign-out").addEventListener("click", async () => { + await signOut(); + console.log("Signed out"); $("#sign-in-dialog").showModal(); }); -$("#log-out-everywhere").addEventListener("click", async () => { - const res = await fetch("/deauth-all", { - method: "POST", - }); - - console.log("Logged out everywhere"); +$("#sign-out-everywhere").addEventListener("click", async () => { + signOutEverywhere(); + console.log("Signed out everywhere"); showSignIn(); }); -try { await getUserData(); await getList(); await getUserSessions(); } catch(e) { showSignIn(); } +try { + await getUserData(); + const noteList = await getList(); + for (const note of noteList) drawNote(note); + await getUserSessions(); +} catch(e) { showSignIn(); } (() => { let prevScroll = 0; -- cgit v1.2.3-70-g09d2