Improve style and user friendliness

src/web/controllers/group_index.nim

@@ -20,13 +20,16 @@ proc group_index*(req: Request, sess: Session[News], news: News, group: string,
         jroots.add(%root)
       resp %{"threads": jroots}
     else:
+      let from_name = req.cookies.getOrDefault("from_name", "")
       let list = await news.group_list()
       resp layout(
         title = group,
+        from_name = from_name,
         login = news.authenticated_user,
         nav = group_list(list),
         main = group_index(
           post_form  = sess.data.authenticated,
           group      = group,
+          from_name  = from_name,
           articles   = article_list(group, roots)))
 

src/web/controllers/group_post.nim

@@ -21,15 +21,19 @@ proc group_post*(req: Request, sess: Session[News], group: string): Future[Respo
     if not sess.data.authenticated:
       redirect(&"/group/{group}/?post=0")
       return
-    let fromEmail = sess.data.user
+    let from_name = req.params.getOrDefault("from_name", "")
+    if from_name != "":
+      setCookie("from_name", from_name)
+    let from_email = sess.data.user
+    let from_full = if from_name == "": from_email else: &"{from_name} <{from_email}>"
     let date = serialize_date(now())
     let redirect_path = req.params.getOrDefault("redirect", &"/group/{group}/")
     let redirect_failed_path = req.params.getOrDefault("redirect_failed", &"{redirect_path}?post=0")
     let subject = req.params["subject"]
     let references = req.params.getOrDefault("references", "")
     let body = req.params["body"]
     var article = "" &
-      &"From: {fromEmail}{CRLF}" &
+      &"From: {from_full}{CRLF}" &
       &"Subject: {subject}{CRLF}" &
       &"Newsgroups: {group}{CRLF}"
     if references != "": article = article & &"References: {references}{CRLF}"

src/web/controllers/group_thread.nim

@@ -17,6 +17,7 @@ proc group_thread*(req: Request, sess: Session[News], news: News, group: string,
   let roots = make_tree(arts).filterIt(it.num == num)
   let post_num = req.params.getOrDefault("post_num", "")
   let subject = roots[0].article.subject.decoded()
+  let from_name = req.cookies.getOrDefault("from_name", "")
   await news.fetch_body(roots)
   block route:
     if json:
@@ -25,9 +26,11 @@ proc group_thread*(req: Request, sess: Session[News], news: News, group: string,
       let list = await news.group_list()
       resp layout(
         title = subject,
+        from_name = from_name,
         login = news.authenticated_user,
         nav = group_list(list),
         main = group_index(
           post_form  = false,
           group      = group,
-          articles   = thread(group, roots, post_num, sess.data.authenticated)))
+          from_name  = from_name,
+          articles   = thread(group, from_name, roots, post_num, sess.data.authenticated)))

src/web/controllers/index.nim

@@ -15,8 +15,10 @@ proc index*(req: Request, sess: Session[News], news: News, json: bool = false):
         res.add(%{"name": %name, "description": %descr})
       resp res
     else:
+      let from_name = req.cookies.getOrDefault("from_name", "")
       resp layout(
         title = "Groups",
+        from_name = from_name,
         login = news.authenticated_user,
         nav = group_list(list),
         main = "")

src/web/controllers/login.nim

@@ -9,6 +9,9 @@ proc login*(req: Request, sessions: SessionList, anon_news: News): Future[Respon
   session.data.pass = req.params.getOrDefault("pass", "")
   await session.data.connect()
   block route:
+    let from_name = req.params.getOrDefault("from_name", "")
+    if from_name != "":
+      setCookie("from_name", from_name)
     if session.data.authenticated():
       setCookie("sid", session.sid)
       if req.headers.has_key("referer"):

src/web/views/article_list.nim

@@ -12,9 +12,9 @@ proc article_list_children(root: ArticleTree, include_root: bool, link: string):
     $if root.children.len > 1 {
       <ul>
         $for child in root.children[1..^1].reversed {
-          <li>
+          <li class="thread">
             $(article_list_children(child, true, link))
-            <hr/>
+            <hr class="article-separation"/>
           </li>
         }
       </ul>
@@ -27,9 +27,9 @@ proc article_list*(group: string, articles: seq[ArticleTree]): string = tmpli ht
   <div class="article-list">
     <ul>
       $for art in articles {
-        <li>
+        <li class="thread">
           $(article_list_children(art, true, &"/group/{group}/thread/{art.num}-{art.first}-{art.last}-{art.endnum}"))
-          <hr/>
+          <hr class="article-separation"/>
         </li>
       }
     </ul>

src/web/views/article_thread.nim

@@ -3,11 +3,12 @@ import templates
 import ../data/article
 import ./name_address
 
-proc reply_form(article: ArticleOver, post_num, group, link: string): string = tmpli html"""
+proc reply_form(article: ArticleOver, post_num, group, from_name, link: string): string = tmpli html"""
   <form id="post-$(post_num)" method="post" action="/group/$group/" class="reply-post">
     <input name="redirect" type="hidden" value="$(link)#article-num-$(article.num)" />
     <input name="references" type="hidden" value="$(article.message_id)" />
-    <input name="subject" type="text" placeholder="subject" />
+    <input name="from_name" type="text" placeholder="Your name" value="$from_name" />
+    <input name="subject" type="text" placeholder="Subject" />
     <textarea name="body"></textarea>
     <div>
       <input type="submit" value="Post" />
@@ -16,7 +17,7 @@ proc reply_form(article: ArticleOver, post_num, group, link: string): string = t
   </form>
   """
 
-proc thread_children(root: ArticleTree, include_root: bool, post_num: string, show_reply: bool, lvl: int, group, link: string): string = tmpli html"""
+proc thread_children(root: ArticleTree, include_root: bool, post_num: string, show_reply: bool, lvl: int, group, from_name, link: string): string = tmpli html"""
   <article id="article-num-$(root.article.num)" data-message-id="$(root.article.message_id)" data-num="$(root.article.num)">
     <p>
       <a href="$link#article-num-$(root.article.num)">$(root.article.subject)</a>
@@ -31,37 +32,42 @@ proc thread_children(root: ArticleTree, include_root: bool, post_num: string, sh
     $if root.children.len > 1 or post_num == root.article.num {
       <ul>
         $if post_num == root.article.num {
-          <li>
-            $(reply_form(root.article, post_num, group, link))
+          <li class="thread">
+            <article>
+              $(reply_form(root.article, post_num, group, from_name, link))
+            </article>
+            <hr class="article-separation"/>
           </li>
         }
         $for child in root.children[1..^1].reversed {
-          <li>
-            $(thread_children(child, true, post_num, show_reply, 0, group, link))
-            <hr/>
+          <li class="thread">
+            $(thread_children(child, true, post_num, show_reply, 0, group, from_name, link))
+            <hr class="article-separation"/>
           </li>
         }
       </ul>
     }
-    $(thread_children(root.children[0], true, post_num, show_reply, lvl+1, group, link))
+    $(thread_children(root.children[0], true, post_num, show_reply, lvl+1, group, from_name, link))
   }
   $if root.children.len == 0 and post_num == root.article.num {
-    $(reply_form(root.article, post_num, group, link))
+    <article>
+      $(reply_form(root.article, post_num, group, from_name, link))
+    </article>
   }
-  $if show_reply and root.children.len == 0 and lvl > 0 {
-    <p>
+  $if show_reply and root.children.len == 0 and lvl > 0 and post_num != root.article.num {
+    <article>
       <a href="?post_num=$(root.article.num)#post-$(root.article.num)">Continue discussion</a>
-    </p>
+    </article>
   }
   """
 
-proc thread*(group: string, articles: seq[ArticleTree], post_num: string, show_reply: bool): string = tmpli html"""
-  <div class="article-list">
+proc thread*(group: string, from_name: string, articles: seq[ArticleTree], post_num: string, show_reply: bool): string = tmpli html"""
+  <div class="article-thread">
     <ul>
       $for art in articles {
-        <li>
-          $(thread_children(art, true, post_num, show_reply, 0, group, &"/group/{group}/thread/{art.num}-{art.first}-{art.last}-{art.endnum}"))
-          <hr/>
+        <li class="thread">
+          $(thread_children(art, true, post_num, show_reply, 0, group, from_name, &"/group/{group}/thread/{art.num}-{art.first}-{art.last}-{art.endnum}"))
+          <hr class="article-separation"/>
         </li>
       }
     </ul>

src/web/views/group_index.nim

@@ -2,16 +2,18 @@ import tables
 import templates
 import ./layout
 
-proc group_index*(group, articles: string, post_form: bool): string = tmpli html"""
+proc group_index*(group, from_name, articles: string, post_form: bool): string = tmpli html"""
   <h1>$group</h1>
   $if post_form {
-    <div>
+    <div class="post-form">
       <a href="#post">Post</a>
       <form id="post" method="post" action="/group/$group/">
-        <input name="subject" type="text" placeholder="subject" />
+        <input name="from_name" type="text" placeholder="Your name" value="$from_name" />
+        <input name="subject" type="text" placeholder="Subject" />
         <textarea name="body"></textarea>
         <div>
           <input type="submit" value="Post" />
+          <a href="#">Cancel</a>
         </div>
       </form>
     </div>

src/web/views/layout.nim

@@ -1,6 +1,6 @@
 import templates
 
-proc layout*(main, nav, title, login: string): string = tmpli html"""
+proc layout*(main, nav, title, login, from_name: string): string = tmpli html"""
   <html>
     <head>
       <link rel=stylesheet href="/style.css" />
@@ -17,6 +17,9 @@ proc layout*(main, nav, title, login: string): string = tmpli html"""
               <form id="login-form" action="/login">
                 <input type="text" placeholder="email" name="email" />
                 <input type="password" placeholder="password" name="pass" />
+                $if from_name == "" {
+                  <input name="from_name" type="text" placeholder="Your name (optional)" value="$from_name" />
+                }
                 <input type="submit" value="Log-In" />
                 <a href="#">Cancel</a>
               </form>

src/web/views/style.nim

@@ -35,6 +35,56 @@ proc style*(): string = """
   #login-form > *, #register-form > *, form#post > *, form.reply-post > * {
     display: block;
     width: 100%;
+    max-width: 40rem;
   }
 
+  textarea {
+    height: 10em;
+  }
+
+  /***** Style articles *****/
+
+  .article-list, .article-thread, .post-form {
+    --border-color: rgba(1, 1, 1, 0.1);
+    --article-color: rgba(1, 1, 1, 0.05);
+  }
+
+  hr.article-separation {
+    display: none;
+  }
+
+  .article-list > ul, .article-thread > ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li.thread, div.post-form {
+    border: thin solid var(--border-color);
+    list-style-type: none;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--article-color);
+  }
+
+  li.thread {
+    padding: 0
+  }
+
+  .article-thread li.thread > article {
+    margin: 0;
+    padding: 0.5rem;
+  }
+
+  .article-thread li.thread > article:not(:first-child) {
+    border-top: thin solid var(--border-color);
+  }
+
+  .article-list li.thread > p {
+    margin: 0;
+    padding: 0.5rem;
+  }
+
+  .article-list li.thread > p:not(:first-child) {
+    border-top: thin solid var(--border-color);
+  }
   """