Ability to edit comments

3 files changed, 57 insertions, 1 deletions

diff --git a/blog/urls.py b/blog/urls.py
index 2b4f8b6d..09161c16 100644
--- a/blog/urls.py
+++ b/blog/urls.py
@@ -12,5 +12,6 @@ urlpatterns = [
     path('register/refresh_captcha/', name='refresh_captcha', view=views.refresh_captcha),
     path('post/<str:slug>', views.post, name='post'),
     path('post/<str:slug>/comment', views.comment, name='comment'),
+    path('post/<str:slug>/edit_comment', views.edit_comment, name='edit_comment'),
     # path('my/homepage', views.homepage, name='homepage'),
 ]
diff --git a/blog/views.py b/blog/views.py
index e8206ce2..6930e6b4 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -1,3 +1,4 @@
+from datetime import datetime
 from django.shortcuts import render, redirect
 from django.http import HttpResponse
 from users.models import UserProfile, CaptchaStore
@@ -117,3 +118,28 @@ def comment(request, slug):
                         return HttpResponse('Post not found!', status=404)
             except Post.DoesNotExist:
                 return HttpResponse('Post not found!', status=404)
+
+        else:
+            return redirect('blog:home')
+    else:
+        return redirect('blog:home')
+
+def edit_comment(request, slug):
+    if request.method == 'POST':
+        if request.user.is_authenticated:
+            try:
+                comment = Comment.objects.get(id=request.POST.get('comment_id'))
+                if comment.user == request.user:
+                    comment.body = request.POST.get('body')
+                    comment.edited = True
+                    comment.edited_at = datetime.now()
+                    comment.save()
+                    return redirect('blog:post', slug=slug)
+                else:
+                    return HttpResponse('Unauthorized!', status=401)
+            except Comment.DoesNotExist:
+                return HttpResponse('Comment not found!', status=404)
+        else:
+            return redirect('blog:home')
+    else:
+        return redirect('blog:home')
diff --git a/templates/blog/post.html b/templates/blog/post.html
index 9116daeb..712d7168 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -28,8 +28,26 @@
                 <div>
                     <p class="comment-header">
                         <a href="#">{{ comment.user.username }}</a> on <em>{{ comment.created_at | date:"M d, Y" }}</em>
+                        {% if comment.edited %}
+                            <em>(Edited)</em>
+                        {% endif %}
+                        {% if comment.user == user %}
+                            &nbsp;&nbsp;•&nbsp;&nbsp;
+                            <a href="javascript:;" onclick="editComment({{ comment.id }})">Edit</a>
+                            &nbsp;&nbsp;•&nbsp;&nbsp;
+                            <a href="javascript:;">Delete</a>
+                        {% endif %}
+                    </p>
+                    <p class="comment-body">
+                        <span id="comment-body-{{ comment.id }}">{{ comment.body }}</span>
+                        <form action="{% url 'blog:edit_comment' post.slug %}" method="POST" id="edit-form-{{ comment.id }}" style="display: none;">
+                            {% csrf_token %}
+                            <input type = "hidden" name="comment_id" value="{{ comment.id }}">
+                            <textarea name="body" id="body" cols="30" rows="10">{{ comment.body }}</textarea>
+                            <input type="submit" value="Update" style="display:inline-block;">
+                            <input type="button" value="Cancel" onclick="cancelEdit({{ comment.id }})" style="display:inline-block;">
+                        </form>
                     </p>
-                    <p class="comment-body">{{ comment.body }}</p>
                 </div>
             </div>
         {% endfor %}
@@ -50,5 +68,16 @@
     </div>
 </article>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <script>
+    function editComment(id) {
+        document.getElementById('comment-body-' + id).style.display = 'none';
+        document.getElementById('edit-form-' + id).style.display = 'block';
+    }
+
+    function cancelEdit(id) {
+        document.getElementById('comment-body-' + id).style.display = 'block';
+        document.getElementById('edit-form-' + id).style.display = 'none';
+    }
+    </script>
 </div>
 {% endblock %}