Add editable preview screen for leaving comments

rophako/modules/comment.py

@@ -23,7 +23,8 @@ def index():
 @mod.route("/preview", methods=["POST"])
 def preview():
     # Get the form fields.
-    form = get_comment_form(request.form)
+    form   = get_comment_form(request.form)
+    thread = sanitize_name(form["thread"])
 
     # Trap fields.
     trap1 = request.form.get("website", "x") != "http://"
@@ -37,51 +38,42 @@ def preview():
         flash("You must provide a message with your comment.")
         return redirect(form["url"])
 
+    # Gravatar?
+    gravatar = Comment.gravatar(form["contact"])
+
+    # Are they submitting?
+    if form["action"] == "submit":
+        Comment.add_comment(
+            thread=thread,
+            uid=g.info["session"]["uid"],
+            ip=request.remote_addr,
+            time=int(time.time()),
+            image=gravatar,
+            name=form["name"],
+            subject=form["subject"],
+            message=form["message"],
+            url=form["url"],
+        )
+
+        # Are we subscribing to the thread?
+        if form["subscribe"] == "true":
+            email = form["contact"]
+            if "@" in email:
+                Comment.add_subscriber(thread, email)
+                flash("You have been subscribed to future comments on this page.")
+
+        flash("Your comment has been added!")
+        return redirect(form["url"])
+
     # Gravatar.
-    g.info["gravatar"] = Comment.gravatar(form.get("contact", ""))
-    g.info["preview"] = Comment.format_message(form.get("message", ""))
+    g.info["gravatar"]    = gravatar
+    g.info["preview"]     = Comment.format_message(form["message"])
+    g.info["pretty_time"] = pretty_time(COMMENT_TIME_FORMAT, time.time())
 
     g.info.update(form)
     return template("comment/preview.html")
 
 
-@mod.route("/post", methods=["POST"])
-def post():
-    # Get the form fields.
-    form = get_comment_form(request.form)
-    thread = sanitize_name(form["thread"])
-
-    # Gravatar?
-    gravatar = Comment.gravatar(form.get("contact"))
-
-    # Validate things.
-    if len(form["message"]) == 0:
-        flash("You must provide a message with your comment.")
-        return redirect(form["url"])
-
-    Comment.add_comment(
-        thread=thread,
-        uid=g.info["session"]["uid"],
-        ip=request.remote_addr,
-        time=int(time.time()),
-        image=gravatar,
-        name=form["name"],
-        subject=form["subject"],
-        message=form["message"],
-        url=form["url"],
-    )
-
-    # Are we subscribing to the thread?
-    if form.get("subscribe", "false") == "true":
-        email = form.get("contact", "")
-        if "@" in email:
-            Comment.add_subscriber(thread, email)
-            flash("You have been subscribed to future comments on this page.")
-
-    flash("Your comment has been added!")
-    return redirect(form["url"])
-
-
 @mod.route("/delete/<thread>/<cid>")
 @login_required
 def delete(thread, cid):
@@ -175,6 +167,7 @@ def partial_index(thread, subject, header=True):
 
 def get_comment_form(form):
     return dict(
+        action  = request.form.get("action", ""),
         thread  = request.form.get("thread", ""),
         url     = request.form.get("url", ""),
         subject = request.form.get("subject", "[No Subject]"),

rophako/www/comment/form.inc.html

@@ -0,0 +1,65 @@
+{# Common template for leaving a comment/updating the comment preview. #}
+
+<form name="comment" action="{{ url_for('comment.preview') }}" method="POST">
+<input type="hidden" name="token" value="{{ csrf_token() }}">
+<input type="hidden" name="thread" value="{{ thread }}">
+<input type="hidden" name="url" value="{{ url }}">
+<input type="hidden" name="subject" value="{{ subject }}">
+<table border="0" cellspacing="2" cellpadding="2">
+    <tr>
+        <td align="left" valign="middle">
+            Your name:
+        </td>
+        <td align="left" valign="middle">
+            {% if session["login"] %}
+                <strong>{{ session["name"] }}</strong>
+            {% else %}
+                <input type="text" size="40" name="name" value="{{ name }}">
+            {% endif %}
+        </td>
+    </tr>
+    <tr>
+        <td align="left" valign="middle">
+            Your Email:
+        </td>
+        <td align="left" valign="middle">
+            <input type="text" size="40" name="contact" value="{{ contact }}">
+            <small>(optional)</small>
+        </td>
+    </tr>
+    <tr>
+        <td align="left" valign="top">
+            Message:
+        </td>
+        <td align="left" valign="top">
+            <textarea cols="40" rows="8" name="message" style="width: 100%">{{ message }}</textarea><br>
+            <small>Comments can be formatted with <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>,
+            and you can use<br><a href="{{ url_for('emoticons.index') }}" target="_blank">emoticons</a>
+            in your comment.</small>
+        </td>
+    </tr>
+    <tr>
+        <td colspan="2" align="left" valign="top">
+            <label>
+                <input type="checkbox" name="subscribe" value="true"{% if subscribe == "true" %} checked{% endif %}>
+                Notify me of future comments on this page via e-mail
+                (<a href="{{ url_for('comment.privacy') }}" target="_blank">Privacy Policy</a>)
+            </label>
+        </td>
+    </tr>
+</table><p>
+
+<div style="display: none">
+    If you can see this, don't touch the following fields.<br>
+    <input type="text" name="website" value="http://"><br>
+    <input type="text" name="email" value="">
+</div>
+
+{% if preview %}
+    <button type="submit" name="action" value="preview">Refresh Preview</button>
+    <button type="submit" name="action" value="submit">Submit Comment</button>
+{% else %}
+    <button type="submit" name="action" value="preview">Leave Comment</button>
+{% endif %}
+
+</form>

rophako/www/comment/index.inc.html

@@ -34,60 +34,4 @@ There {% if comments|length == 1 %}is{% else %}are{% endif %}
 
 <h2>Add a Comment</h2>
 
-<form name="comment" action="{{ url_for('comment.preview') }}" method="POST">
-<input type="hidden" name="token" value="{{ csrf_token() }}">
-<input type="hidden" name="thread" value="{{ thread }}">
-<input type="hidden" name="url" value="{{ url }}">
-<input type="hidden" name="subject" value="{{ subject }}">
-<table border="0" cellspacing="2" cellpadding="2">
-    <tr>
-        <td align="left" valign="middle">
-            Your name:
-        </td>
-        <td align="left" valign="middle">
-            {% if session["login"] %}
-                <strong>{{ session["name"] }}</strong>
-            {% else %}
-                <input type="text" size="40" name="name">
-            {% endif %}
-        </td>
-    </tr>
-    <tr>
-        <td align="left" valign="middle">
-            Your Email:
-        </td>
-        <td align="left" valign="middle">
-            <input type="text" size="40" name="contact">
-            <small>(optional)</small>
-        </td>
-    </tr>
-    <tr>
-        <td align="left" valign="top">
-            Message:
-        </td>
-        <td align="left" valign="top">
-            <textarea cols="40" rows="8" name="message" style="width: 100%"></textarea><br>
-            <small>Comments can be formatted with <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>,
-            and you can use<br><a href="{{ url_for('emoticons.index') }}" target="_blank">emoticons</a>
-            in your comment.</small>
-        </td>
-    </tr>
-    <tr>
-        <td colspan="2" align="left" valign="top">
-            <label>
-                <input type="checkbox" name="subscribe" value="true">
-                Notify me of future comments on this page via e-mail
-                (<a href="{{ url_for('comment.privacy') }}" target="_blank">Privacy Policy</a>)
-            </label>
-        </td>
-    </tr>
-</table><p>
-
-<div style="display: none">
-    If you can see this, don't touch the following fields.<br>
-    <input type="text" name="website" value="http://"><br>
-    <input type="text" name="email" value="">
-</div>
-
-<button type="submit">Leave Comment</button>
-</form>
+{% include "comment/form.inc.html" %}

rophako/www/comment/preview.html

@@ -6,27 +6,31 @@
 
 This is a preview of what your comment is going to look like once posted.<p>
 
-<hr><p>
+<div class="comment">
+    <div class="comment-author">
+        {% if contact %}
+            <img src="{{ gravatar }}" alt="Avatar" width="96" height="96">
+        {% else %}
+            <img src="/static/avatars/default.png" alt="guest" width="96" height="96">
+        {% endif %}<br>
+        <strong>{% if session["login"] %}{{ session["username"] }}{% else %}guest{% endif %}</strong>
+    </div>
 
-{{ preview|safe }}<p>
+    <strong>Posted on {{ pretty_time }} by {{ name or "Anonymous" }}.</strong><p>
 
-<hr><p>
+    {{ preview|safe }}
+
+    <div class="clear"></div>
+</div>
 
 {% if subscribe == "true" and contact %}
+    <p>
     You will be subscribed to future comments on this thread. Notification
     e-mails will be sent to {{ contact }}.<p>
 {% endif %}
 
-<form name="preview" action="{{ url_for('comment.post') }}" method="POST">
-<input type="hidden" name="token" value="{{ csrf_token() }}">
-<input type="hidden" name="thread" value="{{ thread }}">
-<input type="hidden" name="url" value="{{ url }}">
-<input type="hidden" name="subject" value="{{ subject }}">
-<input type="hidden" name="name" value="{{ name }}">
-<input type="hidden" name="message" value="{{ message }}">
-<input type="hidden" name="contact" value="{{ contact }}">
-<input type="hidden" name="subscribe" value="{{ subscribe }}">
-<button type="submit">Publish Comment</button>
-</form>
+<h2>Edit Comment</h2>
+
+{% include "comment/form.inc.html" %}
 
 {% endblock %}