From d954ecb28cc43d8deb122e0f55afb80e0ba63ffa Mon Sep 17 00:00:00 2001
From: Peter Hebden <peterhebden6@gmail.com>
Date: Sat, 27 Jan 2024 16:36:25 +0000
Subject: [PATCH] Image submissions

---
 client/package.json                           |  2 +-
 client/src/routes/+page.svelte                |  1 +
 client/src/routes/add/+page.svelte            | 71 +++++++++++++++++--
 client/src/routes/login/+page.svelte          |  1 -
 client/src/routes/review/+page.svelte         | 49 +++++++++++--
 client/vite.config.ts                         |  9 +++
 server/Cargo.lock                             | 27 ++++++-
 server/Cargo.toml                             |  4 +-
 .../2024-01-26-171232_accept_images/down.sql  |  5 ++
 .../2024-01-26-171232_accept_images/up.sql    |  5 ++
 server/src/auth.rs                            |  2 +-
 server/src/main.rs                            | 64 +++++++++++++----
 server/src/models.rs                          | 10 ++-
 server/src/schema.rs                          |  6 +-
 14 files changed, 221 insertions(+), 35 deletions(-)
 create mode 100644 server/migrations/2024-01-26-171232_accept_images/down.sql
 create mode 100644 server/migrations/2024-01-26-171232_accept_images/up.sql

diff --git a/client/package.json b/client/package.json
index e635e63..f925e06 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",
diff --git a/client/src/routes/+page.svelte b/client/src/routes/+page.svelte
index dfa6f3c..9c60ec6 100644
--- a/client/src/routes/+page.svelte
+++ b/client/src/routes/+page.svelte
@@ -80,6 +80,7 @@
       <a href="/review" class="btn btn-white">Review</a>
       <a href="/add" class="btn btn-white">Add problems</a>
     </Box>
+    <p class="text-xs mt-1">Watson client v{PKG.version}</p>
   </div>
   <div class="bg-coal border border-dust p-6 mr-10 h-full">
     <h1 class="text-lg font-bold mb-5">Contributions Leaderboard</h1>
diff --git a/client/src/routes/add/+page.svelte b/client/src/routes/add/+page.svelte
index b5024d0..835ff07 100644
--- a/client/src/routes/add/+page.svelte
+++ b/client/src/routes/add/+page.svelte
@@ -3,6 +3,7 @@
   import { axios, exampleProblem } from "$lib";
   import TexBox from "$lib/TexBox.svelte";
   import Box from "$lib/Box.svelte";
+  import { PUBLIC_WATSON_MEDIA_BASE } from "$env/static/public";
   let { body, soln } = exampleProblem;
   let source = "";
   let author = "";
@@ -35,7 +36,8 @@
     errors = [];
     if (selectedModule < -1) errors = ["Please select a module", ...errors];
     if (selectedTopic < -1) errors = ["Please select a topic", ...errors];
-    if (body.replaceAll(/\s+/g, "") === "") errors = ["Please enter a problem", ...errors];
+    if (problemImg === null && body.replaceAll(/\s+/g, "") === "")
+      errors = ["Please enter a problem", ...errors];
     if (errors.length > 0) return;
 
     waiting = true;
@@ -45,13 +47,17 @@
         author,
         body,
         soln: soln.replaceAll(/\s+/g, "") === "" ? null : soln,
+        soln_img: solnImg,
         solnlink: solnLink,
+        img_path: problemImg,
         module: selectedModule === -1 ? newModule : selectedModule,
         topic: selectedTopic === -1 ? newTopic : selectedTopic,
       })
       .then(() => {
         body = "";
         soln = "";
+        problemImg = null;
+        solnImg = null;
         if (selectedModule === -1) selectedModule = -2;
         if (selectedTopic === -1) selectedTopic = -2;
         waiting = false;
@@ -61,6 +67,39 @@
         waiting = false;
       });
   }
+
+  // Srcs for images relative to the media base URL.
+  let problemImg: string | null = null;
+  let solnImg: string | null = null;
+
+  type ImgSrc = "problem" | "solution";
+
+  const uploadClipboardImg = (imgData, src: ImgSrc) => {
+    if (imgData !== undefined && imgData.type.startsWith("image/")) {
+      axios
+        .post("/upload", { file: imgData }, { headers: { "content-type": "multipart/form-data" } })
+        .then((res) => {
+          if (src === "problem") {
+            problemImg = res.data;
+          } else {
+            solnImg = res.data;
+          }
+        })
+        .catch((e) => console.log(e));
+    }
+  };
+
+  const onloadProblem = (el) => {
+    el.addEventListener("paste", (ev) => {
+      uploadClipboardImg(ev.clipboardData.files[0], "problem");
+    });
+  };
+
+  const onloadSolution = (el) => {
+    el.addEventListener("paste", (ev) => {
+      uploadClipboardImg(ev.clipboardData.files[0], "solution");
+    });
+  };
 </script>
 
 <form class="flex flex-col items-center p-12">
@@ -100,14 +139,28 @@
         class="p-2 w-full bg-midnight text-white"
       />
       <div>
-        <label class="block text-white">Problem statement</label>
-        <textarea bind:value={body} class="h-36 w-full p-1 font-mono bg-midnight text-white" />
+        <label class="block text-white">
+          Problem statement
+          <span class="text-xs">(you may also paste an image)</span>
+        </label>
+        <textarea
+          use:onloadProblem
+          bind:value={body}
+          class="h-36 w-full p-1 font-mono bg-midnight text-white"
+        />
       </div>
       <div>
-        <label class="block text-white">Solution</label>
-        <textarea bind:value={soln} class="h-56 w-full p-1 font-mono bg-midnight text-white" />
+        <label class="block text-white">
+          Solution
+          <span class="text-xs">(you may also paste an image)</span>
+        </label>
+        <textarea
+          use:onloadSolution
+          bind:value={soln}
+          class="h-56 w-full p-1 font-mono bg-midnight text-white"
+        />
       </div>
-      {#if soln === ""}
+      {#if soln === "" && solnImg === null}
         <div>
           <label class="block text-white"
             >Where can the solution be found? (e.g. URL or textbook)</label
@@ -122,9 +175,15 @@
       </div>
     </div>
     <Box>
+      {#if problemImg !== null}
+        <img class="rounded-md" src={`${PUBLIC_WATSON_MEDIA_BASE}/${problemImg}`} />
+      {/if}
       {#if body !== ""}
         <TexBox content={body} />
       {/if}
+      {#if solnImg !== null}
+        <img class="rounded-md" src={`${PUBLIC_WATSON_MEDIA_BASE}/${solnImg}`} />
+      {/if}
       {#if soln !== ""}
         <TexBox content={soln} />
       {/if}
diff --git a/client/src/routes/login/+page.svelte b/client/src/routes/login/+page.svelte
index 4974769..e713d56 100644
--- a/client/src/routes/login/+page.svelte
+++ b/client/src/routes/login/+page.svelte
@@ -2,7 +2,6 @@
   import Box from "$lib/Box.svelte";
   import { axios } from "$lib";
   import { goto } from "$app/navigation";
-  import { PUBLIC_WATSON_CLIENT_ID } from "$env/static/public";
   const urlParams = new URLSearchParams(window.location.search);
   const redirect = urlParams.get("to");
 
diff --git a/client/src/routes/review/+page.svelte b/client/src/routes/review/+page.svelte
index 12c2ff7..0639dc9 100644
--- a/client/src/routes/review/+page.svelte
+++ b/client/src/routes/review/+page.svelte
@@ -5,11 +5,17 @@
   import { get } from "svelte/store";
   import { selected_topic_ids } from "$lib/stores";
   import { onMount } from "svelte";
+  import { PUBLIC_WATSON_MEDIA_BASE } from "$env/static/public";
 
   let showSoln = false;
 
-  let problem: { id: number; body: string; solnlink: string } = { id: -1, body: "", solnlink: "" };
-  let soln = "";
+  let problem: { id: number; body: string | null; solnlink: string; img_path: string | null } = {
+    id: -1,
+    body: "",
+    solnlink: "",
+  };
+  let soln: string | null = null;
+  let soln_img: string | null = null;
 
   let noProblem = false;
   function getProblem() {
@@ -21,6 +27,7 @@
         else {
           problem = data.problem;
           soln = data.solution;
+          soln_img = data.solution_img;
           submitSoln = "";
         }
       })
@@ -40,22 +47,47 @@
   function handleSolnSubmit() {
     if (problem.id === -1) return;
     axios
-      .post("/solutions", { problem_id: problem.id, body: submitSoln })
+      .post("/solutions", { problem_id: problem.id, body: submitSoln, img_path: solnImg })
       .then(() => {
         soln = submitSoln;
         submitSoln = "";
       })
       .catch((err) => console.warn(err));
   }
+
+  let solnImg: string | null = null;
+  const onloadSolution = (el) => {
+    el.addEventListener("paste", (ev) => {
+      const imgData = ev.clipboardData.files[0];
+      if (imgData !== undefined && imgData.type.startsWith("image/")) {
+        axios
+          .post(
+            "/upload",
+            { file: imgData },
+            { headers: { "content-type": "multipart/form-data" } },
+          )
+          .then((res) => (solnImg = res.data))
+          .catch((e) => console.log(e));
+      }
+    });
+  };
 </script>
 
 <div class="grid grid-cols-1 p-12 w-[959px] m-auto gap-6">
   {#if !noProblem}
     <Box>
-      <TexBox content={`${problem.id}. ` + problem.body} />
+      {#if problem.img_path !== null}
+        <img class="rounded-md" src={`${PUBLIC_WATSON_MEDIA_BASE}/${problem.img_path}`} />
+      {/if}
+      {#if problem.body !== null}
+        <TexBox content={`${problem.id}. ` + problem.body} />
+      {/if}
     </Box>
     {#if showSoln}
       <Box>
+        {#if soln_img !== null}
+          <img class="rounded-md" src={`${PUBLIC_WATSON_MEDIA_BASE}/${problem.soln_img}`} />
+        {/if}
         {#if soln !== null}
           <TexBox content={soln} />
         {:else}
@@ -68,14 +100,21 @@
               >
             </p>
           {/if}
-          <p>If you know the answer, you can submit the solution below:</p>
+          <p>
+            If you know the answer, you can submit the solution below:
+            <span class="text-xs">(you may also paste an image)</span>
+          </p>
           <textarea
+            use:onloadSolution
             bind:value={submitSoln}
             class="h-56 w-full p-1 font-mono bg-midnight text-white"
           />
           {#if submitSoln !== ""}
             <TexBox content={submitSoln} />
           {/if}
+          {#if solnImg !== null}
+            <img class="rounded-md" src={`${PUBLIC_WATSON_MEDIA_BASE}/${solnImg}`} />
+          {/if}
         {/if}
       </Box>
       <div class="flex flex-row-reverse w-full gap-4">
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 80864b9..157b5a2 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,6 +1,15 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
+import { fileURLToPath } from "url";
+import { readFileSync } from "fs";
+
+const file = fileURLToPath(new URL("package.json", import.meta.url));
+const json = readFileSync(file, "utf8");
+const pkg = JSON.parse(json);
 
 export default defineConfig({
   plugins: [sveltekit()],
+  define: {
+    PKG: pkg,
+  },
 });
diff --git a/server/Cargo.lock b/server/Cargo.lock
index 630e61c..6bd25f7 100644
--- a/server/Cargo.lock
+++ b/server/Cargo.lock
@@ -80,6 +80,7 @@ dependencies = [
  "matchit",
  "memchr",
  "mime",
+ "multer",
  "percent-encoding",
  "pin-project-lite",
  "rustversion",
@@ -809,6 +810,24 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "multer"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "01acbdc23469fd8fe07ab135923371d5f5a422fbf9c522158677c8eb15bc51c2"
+dependencies = [
+ "bytes",
+ "encoding_rs",
+ "futures-util",
+ "http 0.2.11",
+ "httparse",
+ "log",
+ "memchr",
+ "mime",
+ "spin",
+ "version_check",
+]
+
 [[package]]
 name = "native-tls"
 version = "0.2.11"
@@ -1268,6 +1287,12 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "spin"
+version = "0.9.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6980e8d7511241f8acf4aebddbb1ff938df5eebe98691418c4468d0b72a96a67"
+
 [[package]]
 name = "subtle"
 version = "2.5.0"
@@ -1641,7 +1666,7 @@ checksum = "7ab9b36309365056cd639da3134bf87fa8f3d86008abf99e612384a6eecd459f"
 
 [[package]]
 name = "watson-server"
-version = "0.1.0"
+version = "0.1.1"
 dependencies = [
  "argon2",
  "axum",
diff --git a/server/Cargo.toml b/server/Cargo.toml
index ff586a4..8a38578 100644
--- a/server/Cargo.toml
+++ b/server/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "watson-server"
-version = "0.1.0"
+version = "0.1.1"
 edition = "2021"
 
 [profile.release]
@@ -13,7 +13,7 @@ dotenv = ["dep:dotenvy"]
 
 [dependencies]
 argon2 = "0.5.3"
-axum = "0.7.2"
+axum = { version = "0.7.2", features = ["multipart"] }
 chrono = { version = "0.4.31", features = ["serde"] }
 diesel = { version = "2.1.0", features = ["postgres", "chrono", "uuid"] }
 diesel_migrations = "2.1.0"
diff --git a/server/migrations/2024-01-26-171232_accept_images/down.sql b/server/migrations/2024-01-26-171232_accept_images/down.sql
new file mode 100644
index 0000000..0fed6cb
--- /dev/null
+++ b/server/migrations/2024-01-26-171232_accept_images/down.sql
@@ -0,0 +1,5 @@
+ALTER TABLE problems ALTER COLUMN body SET NOT NULL;
+ALTER TABLE solutions ALTER COLUMN body SET NOT NULL;
+
+ALTER TABLE problems DROP COLUMN img_path;
+ALTER TABLE solutions DROP COLUMN img_path;
diff --git a/server/migrations/2024-01-26-171232_accept_images/up.sql b/server/migrations/2024-01-26-171232_accept_images/up.sql
new file mode 100644
index 0000000..7ef5019
--- /dev/null
+++ b/server/migrations/2024-01-26-171232_accept_images/up.sql
@@ -0,0 +1,5 @@
+ALTER TABLE problems ALTER COLUMN body DROP NOT NULL;
+ALTER TABLE solutions ALTER COLUMN body DROP NOT NULL;
+
+ALTER TABLE problems ADD COLUMN img_path VARCHAR;
+ALTER TABLE solutions ADD COLUMN img_path VARCHAR;
diff --git a/server/src/auth.rs b/server/src/auth.rs
index c7bd14e..fefb064 100644
--- a/server/src/auth.rs
+++ b/server/src/auth.rs
@@ -114,7 +114,7 @@ pub async fn register(
         ))
         .execute(&mut conn)
         .map_err(internal_error)?;
-    todo!()
+    Ok(())
 }
 
 #[derive(Deserialize)]
diff --git a/server/src/main.rs b/server/src/main.rs
index 90c5ea4..df1cfda 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -2,10 +2,17 @@ mod auth;
 mod models;
 mod schema;
 
-use std::{cmp::Ordering, collections::HashMap, env, error::Error, net::SocketAddr, sync::Arc};
+use std::{
+    cmp::Ordering, collections::HashMap, env, error::Error, fs, net::SocketAddr, path::PathBuf,
+    sync::Arc,
+};
 
 use axum::{
-    http::{HeaderMap, StatusCode},
+    extract::Multipart,
+    http::{
+        header::{AUTHORIZATION, CONTENT_TYPE},
+        HeaderMap, StatusCode,
+    },
     middleware,
     response::Json,
     routing::{get, post, put},
@@ -70,6 +77,7 @@ async fn main() {
         .route("/solutions", post(submit_solution))
         .route("/modules", get(get_modules))
         .route("/leaderboard", get(get_leaderboard))
+        .route("/upload", post(upload))
         .route_layer(middleware::from_fn_with_state(
             Arc::clone(&sessions),
             auth::auth,
@@ -79,7 +87,7 @@ async fn main() {
         .layer(
             CorsLayer::new()
                 .allow_methods(Any)
-                .allow_headers(Any)
+                .allow_headers([CONTENT_TYPE, AUTHORIZATION])
                 .allow_origin(origins),
         )
         .with_state(sessions);
@@ -89,6 +97,28 @@ async fn main() {
     axum::serve(listener, app).await.unwrap();
 }
 
+/// Endpoint to upload a file (image) which is then stored on the server.
+async fn upload(mut multipart: Multipart) -> Result<String, (StatusCode, String)> {
+    // For now, you can only upload one file at a time.
+    let Some(field) = multipart.next_field().await.map_err(internal_error)? else {
+        return Err((StatusCode::BAD_REQUEST, "No file uploaded.".to_string()));
+    };
+
+    let name = Uuid::new_v4().to_string() + field.file_name().unwrap_or("");
+    let data = field.bytes().await.map_err(internal_error)?;
+
+    let store_path: PathBuf = [
+        env::var("MEDIA_PATH").expect("MEDIA_PATH must be set"),
+        name.clone(),
+    ]
+    .iter()
+    .collect();
+
+    fs::write(store_path.clone(), data).map_err(internal_error)?;
+
+    Ok(name)
+}
+
 async fn get_modules() -> Result<Json<ModulesView>, (StatusCode, String)> {
     use schema::{modules, topics};
     let mut conn = establish_connection();
@@ -164,7 +194,8 @@ async fn get_leaderboard() -> Result<Json<Vec<LeaderboardEntry>>, (StatusCode, S
 #[diesel(table_name = schema::solutions)]
 struct SubmitSolution {
     problem_id: i32,
-    body: String,
+    body: Option<String>,
+    img_path: Option<String>,
 }
 
 async fn submit_solution(
@@ -189,6 +220,8 @@ async fn create_problem(
     let user_id = extract_user_id(&headers)?;
     let mut conn = establish_connection();
 
+    assert!(new_problem.problem.body.is_some() || new_problem.problem.img_path.is_some());
+
     let module_id = match new_problem.module {
         AddModule::Existing(id) => id,
         AddModule::New(title) => diesel::insert_into(modules::table)
@@ -212,10 +245,11 @@ async fn create_problem(
         .get_result(&mut conn)
         .map_err(internal_error)?;
 
-    if let Some(soln) = new_problem.soln {
+    if new_problem.soln.is_some() || new_problem.soln_img.is_some() {
         diesel::insert_into(solutions::table)
             .values((
-                solutions::body.eq(soln),
+                solutions::body.eq(new_problem.soln),
+                solutions::img_path.eq(new_problem.soln_img),
                 solutions::problem_id.eq(result.id),
                 solutions::user_id.eq(user_id),
             ))
@@ -278,6 +312,7 @@ struct ProblemRequest {
 struct ProblemResponse {
     problem: Option<Problem>,
     solution: Option<String>,
+    solution_img: Option<String>,
 }
 
 async fn request_problem(
@@ -299,7 +334,6 @@ async fn request_problem(
         ProblemTopic::belonging_to(&selected_topics)
             .inner_join(problems::table.left_join(user_problem::table.inner_join(users::table)))
             .filter(users::id.eq(user_id).or(users::id.is_null()))
-            //.distinct_on(problems::id)
             .select((
                 problem_topic::topic_id,
                 (
@@ -405,16 +439,20 @@ async fn request_problem(
         }
     };
 
-    let solution: Option<String> = next_problem.as_ref().and_then(|problem| {
-        Solution::belonging_to(problem)
-            .select(solutions::body)
-            .first(&mut conn)
-            .ok()
-    });
+    let (solution, solution_img): (Option<String>, Option<String>) = next_problem
+        .as_ref()
+        .and_then(|problem| {
+            Solution::belonging_to(problem)
+                .select((solutions::body.nullable(), solutions::img_path.nullable()))
+                .first(&mut conn)
+                .ok()
+        })
+        .unwrap_or((None, None));
 
     Ok(Json(ProblemResponse {
         problem: next_problem,
         solution,
+        solution_img,
     }))
 }
 
diff --git a/server/src/models.rs b/server/src/models.rs
index daf2678..917e5d7 100644
--- a/server/src/models.rs
+++ b/server/src/models.rs
@@ -22,12 +22,13 @@ pub struct AccessToken {
 #[diesel(check_for_backend(diesel::pg::Pg))]
 pub struct Problem {
     pub id: i32,
-    pub body: String,
+    pub body: Option<String>,
     pub author: Option<String>,
     pub source: Option<String>,
     pub solnlink: Option<String>,
     pub submitted_at: NaiveDateTime,
     pub user_id: Option<Uuid>,
+    pub img_path: Option<String>,
 }
 
 #[derive(
@@ -40,9 +41,10 @@ pub struct Problem {
 pub struct Solution {
     pub id: i32,
     pub problem_id: i32,
-    pub body: String,
+    pub body: Option<String>,
     pub submitted_at: NaiveDateTime,
     pub user_id: Option<Uuid>,
+    pub img_path: Option<String>,
 }
 
 #[derive(Identifiable, Queryable, Selectable, Associations, Debug)]
@@ -100,6 +102,7 @@ pub struct NewProblem {
     pub module: AddModule,
     pub topic: AddTopic,
     pub soln: Option<String>,
+    pub soln_img: Option<String>,
     #[serde(flatten)]
     pub problem: InsertProblem,
 }
@@ -107,10 +110,11 @@ pub struct NewProblem {
 #[derive(Insertable, Deserialize)]
 #[diesel(table_name = problems)]
 pub struct InsertProblem {
-    pub body: String,
+    pub body: Option<String>,
     pub author: Option<String>,
     pub source: Option<String>,
     pub solnlink: Option<String>,
+    pub img_path: Option<String>,
 }
 
 #[derive(Insertable)]
diff --git a/server/src/schema.rs b/server/src/schema.rs
index a139d4b..08f7df2 100644
--- a/server/src/schema.rs
+++ b/server/src/schema.rs
@@ -25,12 +25,13 @@ diesel::table! {
 diesel::table! {
     problems (id) {
         id -> Int4,
-        body -> Text,
+        body -> Nullable<Text>,
         author -> Nullable<Varchar>,
         source -> Nullable<Varchar>,
         solnlink -> Nullable<Varchar>,
         submitted_at -> Timestamp,
         user_id -> Nullable<Uuid>,
+        img_path -> Nullable<Varchar>,
     }
 }
 
@@ -38,10 +39,11 @@ diesel::table! {
     solutions (id) {
         id -> Int4,
         problem_id -> Int4,
-        body -> Text,
+        body -> Nullable<Text>,
         author -> Nullable<Varchar>,
         submitted_at -> Timestamp,
         user_id -> Nullable<Uuid>,
+        img_path -> Nullable<Varchar>,
     }
 }