From e43bee9e2e4dedb42eacbb524a96554bd73051ac Mon Sep 17 00:00:00 2001
From: Tyler Murphy <tylermurphy534@gmail.com>
Date: Wed, 1 Feb 2023 20:56:09 -0500
Subject: [PATCH] image upload spinner

---
 public/css/main.css    | 51 +++++++++++++++++++++++++++++++++++++++++-
 public/css/profile.css |  1 +
 public/js/profile.js   | 33 +++++++++++++++++++++++++--
 src/public/file.rs     | 10 ++++-----
 src/types/extract.rs   |  8 +++----
 5 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 0314b3f..4819f38 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -308,6 +308,7 @@ footer {
     background-color: var(--hover);
     flex-shrink: 0;
     image-rendering: crisp-edges;
+    object-fit: cover;
 }
 
 .nb {
@@ -378,4 +379,52 @@ form {
         filter: invert(100%) !important;
         background-color: #bbbbbb !important;
     }
-}
\ No newline at end of file
+}
+
+.fullwidth {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.loading {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.loading div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 3px solid var(--text);
+    border-radius: 50%;
+    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: var(--text) transparent transparent transparent;
+}
+
+.loading div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.loading div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+  
+.loading div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+  
+@keyframes loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+}
+  
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
index 4aff91b..8f212dd 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -30,6 +30,7 @@ body {
     height: inherit;
     background-color: var(--hover);
     border-radius: 0px 0px 20px 20px;
+    object-fit: cover;
 }
 
 #info {
diff --git a/public/js/profile.js b/public/js/profile.js
index 90787f0..083464f 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -23,12 +23,27 @@ function changeimage(fn) {
     input.accept= 'image/png'
 
     input.onchange = async (e) => { 
+
+        var popup = document.getElementById("popup")
+        var loader = popup.getElementsByClassName("loading")[0]
+        var message = popup.getElementsByClassName("message")[0]
+
+        loader.classList.add("hidden")
+        message.innerHTML = '';
+        popup.classList.remove("hidden")
+
         var file = e.target.files[0];
         if (file.type !== 'image/png') {
+            message.innerHTML = 'Image must be a PNG';
             return
-        } 
+        }
+
+        loader.classList.remove("hidden")
+
         let response = await fn(file);
-        alert(response.msg)
+        
+        loader.classList.add("hidden")
+        message.innerHTML = response.msg
     }
 
     input.click();
@@ -92,6 +107,20 @@ function render() {
 
     append(about)
 
+    const popup = `
+    <div id="popup" class="hidden">
+        <div class="createpost">
+            <div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
+            <span class="ltext ctext bold">Uploading</span>
+            <div class="fullline"></div>
+            <div class="fullwidth"><div class="loading"><div></div><div></div><div></div><div></div></div></div>
+            <span class="message ctext" style="padding-top: 10px"></span>
+        </div>
+    </div>
+    `
+
+    append(popup)
+
 }
 
 async function logout_button() {
diff --git a/src/public/file.rs b/src/public/file.rs
index b54ef25..7c118a6 100644
--- a/src/public/file.rs
+++ b/src/public/file.rs
@@ -7,25 +7,23 @@ use serde::Deserialize;
 
 use crate::types::http::ResponseCode;
 
-use super::console;
-
 pub async fn js(Path(path): Path<String>) -> Response {
-    let path = format!("/js/{}", path);
+    let path = format!("/js/{path}");
     super::serve(&path).await
 }
 
 pub async fn css(Path(path): Path<String>) -> Response {
-    let path = format!("/css/{}", path);
+    let path = format!("/css/{path}");
     super::serve(&path).await
 }
 
 pub async fn fonts(Path(path): Path<String>) -> Response {
-    let path = format!("/fonts/{}", path);
+    let path = format!("/fonts/{path}");
     super::serve(&path).await
 }
 
 pub async fn image(Path(path): Path<String>) -> Response {
-    let path = format!("/image/{}", path);
+    let path = format!("/image/{path}");
     super::serve(&path).await
 }
 
diff --git a/src/types/extract.rs b/src/types/extract.rs
index 1258ef9..8292da7 100644
--- a/src/types/extract.rs
+++ b/src/types/extract.rs
@@ -48,7 +48,7 @@ where
             });
 
         if let Some(forwardedfor) = forwardedfor {
-            return Ok(RequestIp(forwardedfor));
+            return Ok(Self(forwardedfor));
         }
 
         let realip = headers
@@ -57,7 +57,7 @@ where
             .and_then(|s| s.parse::<IpAddr>().ok());
 
         if let Some(realip) = realip {
-            return Ok(RequestIp(realip));
+            return Ok(Self(realip));
         }
 
         let realip = headers
@@ -66,13 +66,13 @@ where
             .and_then(|s| s.parse::<IpAddr>().ok());
 
         if let Some(realip) = realip {
-            return Ok(RequestIp(realip));
+            return Ok(Self(realip));
         }
 
         let info = parts.extensions.get::<ConnectInfo<SocketAddr>>();
 
         if let Some(info) = info {
-            return Ok(RequestIp(info.0.ip()));
+            return Ok(Self(info.0.ip()));
         }
 
         Err(ResponseCode::Forbidden.text("You have no ip"))