feat: add demo html file

2 files changed, 68 insertions, 11 deletions

diff --git a/client.js b/client.js
index 27055de..d855c38 100644
--- a/client.js
+++ b/client.js
@@ -1,12 +1,22 @@
 /* Config */
-const baseUrl = 'https://localhost:7060/comments';
 const pageId = 'add-page-id-here';
 const commentsUrl = `${baseUrl}?page_url=${pageId}`;
 
-
-/* State */
+/* Running State */
 let comments = [];
 
+/* LocalStorage Access */
+
+function getDeletionKeys() {
+    return (localStorage.deletion_keys && JSON.parse(localStorage.deletion_keys)) || {};
+}
+
+function setDeletionKey(commentId, key) {
+    const keys = getDeletionKeys();
+    keys[commentId] = key;
+    localStorage.deletion_keys = JSON.stringify(keys);
+}
+
 /* GUI components */
 
 const deleteButton = x =>
@@ -15,7 +25,7 @@ const deleteButton = x =>
 
 const commentFmt = x =>
   `<div class='comment' id='comment${x.id}'>${x.content}<br/>${x.created_at}`+
-    `${x.deletion_key  ? deleteButton(x) :''}</div>`;
+    `${getDeletionKeys()[x.id] ? deleteButton(x) :''}</div>`;
 
 function commentsRender() {
   commentsthread.innerHTML =
@@ -24,7 +34,6 @@ function commentsRender() {
                 </div>`;
 }
 
-
 /* API calls */
 
 // GET comments
@@ -39,11 +48,16 @@ function fetchComments() {
     })
 }
 
-// POST new comment
-function createComment(comment) {
+// only 64 bits so not very strong
+function generateRandomKey() {
   const xs = new BigUint64Array(1);
   crypto.getRandomValues(xs);
-  comment.deletion_key = xs[0].toString();
+  return xs[0].toString();
+}
+
+// POST new comment
+function createComment(comment) {
+  comment.deletion_key = generateRandomKey();
   fetch(baseUrl, {
     method: 'POST',
     body: JSON.stringify(comment),
@@ -52,6 +66,7 @@ function createComment(comment) {
     .then(id => {
       const newComment = {id, created_at: 'just now', ...comment}
       comments = [newComment, ...comments];
+      setDeletionKey(id, comment.deletion_key);
       commentsRender();
     })
 }
@@ -60,14 +75,17 @@ function createComment(comment) {
 
 function handleCommentFormSubmit() {
   if (commentcontent.value !== "") {
-    createComment({page_url: pageId, content: commentcontent.value});
+    createComment({
+      page_url: pageId,
+      content: `${commentcontent.value}\n - ${username.value}`,
+      bot: bot.value
+    });
     commentcontent.value = '';
   }
 }
 
 // DELETE comment
 function handleDelete(commentId, deletionKey) {
-  console.log('deleting:',{commentId,deletionKey});
   fetch(
     `${baseUrl}?comment=${commentId}&deletion_key=${deletionKey}`,
     {method: 'DELETE'}
@@ -79,6 +97,5 @@ function handleDelete(commentId, deletionKey) {
   });
 }
 
-
 /* init */
 fetchComments();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b0796c2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,40 @@
+.comment-form {
+    margin-top: 1em;
+}
+
+.comment-form #commentcontent {
+    width: 100%;
+}
+
+.comment-form #submit {
+    border: 0;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: #fff;
+    text-shadow: 1px 1px 1px #000;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 220, 1);
+    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
+    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
+    margin-top:2px;
+    cursor: pointer;
+}
+
+@media only screen and (max-width: 450px) {
+    #submit {
+        width: 100%;
+    }
+}
+
+.comment {
+    white-space: pre-wrap;
+    border:solid;
+    margin-bottom:0.25em;
+    padding:0.5em;
+}
+
+#commentsthreadinner {
+    margin-top:0.5em;
+}