Add post creation with modals, make XSS responses 400 http code

app.py

@@ -5,7 +5,7 @@ from datetime import datetime
 
 from pattern import Pattern
 
-import sqlite3, os, flask_login, dotenv, secrets, html
+import sqlite3, os, flask_login, dotenv, secrets, html, time
 
 if os.path.exists(".env"):
     dotenv.load_dotenv(".env")
@@ -132,7 +132,7 @@ def register():
     
     elif request.method == "POST":
         if request.form["username"] != html.escape(request.form["username"], quote=True):
-            return "No XSS please"
+            return Response("No XSS please", 400)
 
         username = html.escape(request.form["username"], quote=True)
         pattern = Pattern.from_str(request.form["pattern"])
@@ -161,13 +161,31 @@ def profile():
 def profile_external(username):
     return render_template("profile.jinja2", username=username, grid_size=os.getenv("GRID_SIZE", 15), logged_in_account=False)
 
+@app.route("/submit_post", methods=["POST"])
+@login_required
+def submit_post():
+    username = flask_login.current_user.id
+    pattern, comment = Pattern.from_str(request.form["pattern"]), request.form["comment"]
+
+    if comment != html.escape(comment, quote=True):
+        return Response("No XSS please", 400)
+
+    cur = get_db().cursor()
+
+    cur.execute("INSERT INTO Posts (username, comment, pattern, creation_time) VALUES (?, ?, ?, ?)", (username, comment, pattern.to_json_str(), int(time.time())))
+
+    get_db().commit()
+    cur.close()
+
+    return "success"
+
 @app.route("/change_username", methods=["POST"])
 @login_required
 def change_username():
     username = flask_login.current_user.id
 
     if request.form["new_username"] != html.escape(request.form["new_username"], quote=True):
-        return "No XSS please"
+        return Response("No XSS please", 400)
 
     new_username = html.escape(request.form["new_username"], quote=True)
 

static/pumpkin.js

@@ -153,7 +153,6 @@ function unlight_pumpkin(ctx, cell_size, currentPattern) {
 
 function setup_lightbtn(ctx, cell_size, lightbtn_id, pattern) {
     let lit = { value: false };
-    
     document.getElementById(lightbtn_id).addEventListener('click', function(event) {
         if (lit.value) {
             lit.value = false;

templates/index.jinja2

@@ -20,6 +20,7 @@
 {% block body %}
 <div class="text-center mt-3">
     <h1>Posts</h1>
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPostModal">Create a post</button>
 </div>
 <div class="container mt-4">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
@@ -38,12 +39,41 @@
     </div>
 </div>
 
+<div class="modal fade" id="createPostModal" tabindex="-1" aria-labelledby="createPostModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="createPostModalLabel">Create a post</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form id="modal-form" method="POST">
+                <div class="modal-body">
+                    <h4>Your carved pumpkin:</h4>
+                    <input type="hidden" name="pattern" id="pattern_field">
+                    <canvas id="modal-pumpkin-canvas" width="400" height="400"></canvas>
+                    
+                    <div>
+                        <button type="button" id="modallightBtn" class="mt-3 btn btn-warning">Light!</button>
+                        <button type="button" id="modalclearBtn" class="mt-3 btn btn-danger">Clear</button>
+                    </div>
+
+                    <div class="input-group mt-3">
+                        <input name="comment" type="text" class="form-control" placeholder="Comment" aria-label="Comment">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
 <script>
 let CELL_SIZE = 0;
 
 {% for post in posts %}
 const [ctx_{{ post.0 }}, canvas_{{ post.0 }}, img_{{ post.0 }}] = setup_pumpkin("pumpkin-canvas-{{ post.0 }}", null, null, null, null, {{ grid_size }}, false);
-let lit_{{ post.0 }} = false;
 let pattern_{{ post.0 }} = {{ post.3 }};
 
 CELL_SIZE = canvas_{{ post.0 }}.width / 15;
@@ -53,5 +83,25 @@ img_{{ post.0 }}.addEventListener('load', function() {
 });
 setup_lightbtn(ctx_{{ post.0 }}, CELL_SIZE, "lightBtn-{{ post.0 }}", pattern_{{ post.0 }})
 {% endfor %}
+
+setup_pumpkin("modal-pumpkin-canvas", "modalclearBtn", "modallightBtn", "modal-form", "pattern_field", {{ grid_size }});
+
+document.getElementById('modal-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const formData = new FormData(this);
+    
+    fetch('/submit_post', {
+        method: 'POST',
+        body: formData
+    }).then(response => {
+        location.reload();
+    })
+    .catch(error => {
+        alert(`Error during submitting post: ${error}`);
+    });
+
+    
+});
 </script>
 {% endblock body %}