Add comment posting form

forms.py

@@ -41,3 +41,21 @@ def new_post():
     db.session.commit()
 
     return redirect(url_for('main.view_post', post_id=post.id))
+
+
+@blueprint.route('/feed/<post_id>/comment', methods=['POST'])
+@login_required
+def add_comment(post_id: int):
+    post = Post.query.get_or_404(post_id)
+
+    comment_text: str = request.form.get('comment-text')
+
+    if len(comment_text) > 50:
+        flash('Cannot have more than 50 characters of text.')
+        return redirect(url_for('main.view_post', post_id=post_id))
+
+    comment = Comment(post=post.id, author=current_user.id, text=comment_text)
+    db.session.add(comment)
+    db.session.commit()
+
+    return redirect(url_for('main.view_post', post_id=post.id))

static/styles.css

@@ -262,6 +262,13 @@ form button {
   border: 1px solid rgba(128, 128, 128, 0.51);
   border-radius: 3px;
 }
+.post-box .post-comments .post-comment.add-comment {
+  border: 0;
+}
+.post-box .post-comments .post-comment.add-comment button {
+  margin-left: 0.8em;
+  width: fit-content;
+}
 .post-box .post-comments .post-comment .comment-author {
   font-size: 0.9em;
   vertical-align: center;

static/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EACE;EACA;;AAIJ;EAEE;EACA;EACA","file":"styles.css"}

static/styles.scss

@@ -303,6 +303,14 @@ form {
       border: 1px solid rgba(128, 128, 128, 0.51);
       border-radius: 3px;
 
+      &.add-comment {
+        border: 0;
+        button {
+          margin-left: 0.8em;
+          width: fit-content;
+        }
+      }
+
       .comment-author {
         //margin-left: 1em;
         font-size: 0.9em;

templates/pages/post.html

@@ -8,11 +8,21 @@
                 title="{{ post.date_posted }}">{{ post.get_time_ago() }} ago</span>.
         </div>
         <div class="post-comments">
+            {% if current_user.is_authenticated %}
+                <div class="post-comment add-comment">
+                    <form method="POST" action="{{ url_for('forms.add_comment', post_id=post.id) }}">
+                        <label>
+                            <input type="text" name="comment-text">
+                        </label>
+                        <button>Add Comment</button>
+                    </form>
+                </div>
+            {% endif %}
             {% for comment, author in comments_and_authors %}
                 <div class="post-comment">
 
                     <span class="comment-text">"{{ comment.text }}"</span> — <a class="comment-author"
-                                                                              href="{{ url_for('main.user', username=author.username) }}">{{ author.name }}</a>
+                                                                                href="{{ url_for('main.user', username=author.username) }}">{{ author.name }}</a>
                 </div>
             {% endfor %}
         </div>