Improved CSS and JS a bit more

src/main.rs

@@ -23,6 +23,7 @@ fn head(page_title: &str) -> Markup {
         title { (page_title) }
         // Javascript stuff for client side handling
         script src="request.js" { }
+        link rel="stylesheet" href="main.css";
     }
 }
 
@@ -43,12 +44,13 @@ fn home() -> Markup {
     html! {
         (head("Mochi"))
 
+        center {
             div id="durationOptions" {
 
             }
 
             form id="uploadForm" {
-            label for="fileUpload" class="file-upload" onclick="document.getElementById('fileInput').click()" {
+                label for="fileUpload" class="file_upload" onclick="document.getElementById('fileInput').click()" {
                     "Upload File"
                 }
                 input id="fileInput" type="file" name="fileUpload" onchange="formSubmit(this.parentNode)" style="display:none;";
@@ -56,15 +58,16 @@ fn home() -> Markup {
                 input type="text" name="duration" minlength="2" maxlength="4";
             }
 
-        div class="progress-box" {
+            div class="progress_box" {
                 progress id="uploadProgress" value="0" max="100" {}
-            p id="uploadProgressValue" class="progress-value" { "" }
+                p id="uploadProgressValue" class="progress_value" { "" }
             }
 
             div id="uploadedFilesDisplay" {
                 h2 class="sep center" { "Uploaded Files" }
             }
         }
+    }
 }
 
 #[derive(FromForm)]
@@ -223,11 +226,11 @@ async fn main() {
 
     let rocket = rocket::build()
         .mount(
-            config.root_path.clone() + "/",
+            config.server.root_path.clone() + "/",
             routes![home, handle_upload, form_handler_js, stylesheet, server_info]
         )
         .mount(
-            config.root_path.clone() + "/files",
+            config.server.root_path.clone() + "/files",
             FileServer::new("files/", Options::Missing | Options::NormalizeDirs)
         )
         .manage(database)

src/settings.rs

@@ -13,10 +13,6 @@ pub struct Settings {
     /// Settings pertaining to duration information
     pub duration: DurationSettings,
 
-    /// The path to the root directory of the program, ex `/filehost/`
-    #[serde(default)]
-    pub root_path: String,
-
     /// The path to the database file
     #[serde(default)]
     pub database_path: PathBuf,
@@ -38,7 +34,6 @@ impl Default for Settings {
         Self {
             max_filesize: 128_000_000,  // 128 MB
             duration: DurationSettings::default(),
-            root_path: "/".into(),
             server: ServerSettings::default(),
             path: "./settings.toml".into(),
             database_path: "./database.mochi".into(),
@@ -84,12 +79,16 @@ impl Settings {
 pub struct ServerSettings {
     pub address: String,
     pub port: u16,
+
+    /// The path to the root directory of the program, ex `/filehost/`
+    pub root_path: String,
 }
 
 impl Default for ServerSettings {
     fn default() -> Self {
         Self {
             address: "127.0.0.1".into(),
+            root_path: "/".into(),
             port: 8955
         }
     }

src/static/main.css

@@ -1,2 +1,16 @@
 @import url('https://g2games.dev/assets/fonts/fonts.css');
 
+body {
+    background-color: black;
+    color: white;
+}
+
+.file_upload {
+    display: block;
+    width: fit-content;
+    padding: 5px;
+    border: 1px solid grey;
+    cursor: pointer;
+    margin: 10px;
+    border-radius: 5px;
+}

src/static/request.js

@@ -9,6 +9,11 @@ const TOO_LARGE_TEXT = "File is too large!";
 const ERROR_TEXT = "An error occured!";
 
 let CAPABILITIES;
+async function getServerCapabilities() {
+    CAPABILITIES = await fetch("info").then((response) => response.json());
+    console.log(CAPABILITIES);
+}
+getServerCapabilities();
 
 async function formSubmit(form) {
     if (uploadInProgress) {
@@ -20,7 +25,10 @@ async function formSubmit(form) {
     let file = file_upload.files[0];
     if (file.size > CAPABILITIES.max_filesize) {
         progressValue.textContent = TOO_LARGE_TEXT;
-        console.error("Provided file is too large", file.size, "bytes; max", CAPABILITIES.max_filesize, "bytes");
+        console.error(
+            "Provided file is too large", file.size, "bytes; max",
+            CAPABILITIES.max_filesize, "bytes"
+        );
         return;
     }
 
@@ -28,6 +36,7 @@ async function formSubmit(form) {
     let request = new XMLHttpRequest();
     request.open('POST', url, true);
 
+    // Set up the listeners
     request.addEventListener('load', uploadComplete, false);
     request.addEventListener('error', networkErrorHandler, false);
     request.upload.addEventListener('progress', uploadProgress, false);
@@ -40,7 +49,7 @@ async function formSubmit(form) {
         console.error("An error occured while uploading", e);
     }
 
-    // Reset the form data since we've successfully submitted it
+    // Reset the form file data since we've successfully submitted it
     form.elements["fileUpload"].value = "";
 }
 
@@ -88,11 +97,6 @@ function uploadProgress(progress) {
     }
 }
 
-async function getServerCapabilities() {
-    CAPABILITIES = await fetch("info").then((response) => response.json());
-    console.log(CAPABILITIES);
-}
-
 document.addEventListener("DOMContentLoaded", function(_event){
     document.getElementById("uploadForm").addEventListener("submit", formSubmit);
     progressBar = document.getElementById("uploadProgress");
@@ -100,5 +104,3 @@ document.addEventListener("DOMContentLoaded", function(_event){
     statusNotifier = document.getElementById("uploadStatus");
     uploadedFilesDisplay = document.getElementById("uploadedFilesDisplay");
 });
-
-getServerCapabilities();