added user avatars

.gitignore

@@ -4,3 +4,4 @@ node_modules/*
 *output*
 *secret*
 ignore/*
+avatars/*

createSchema.sql

@@ -11,11 +11,11 @@ CREATE TABLE `users` (
   `User_CreationIP` varchar(45) NOT NULL DEFAULT 'None',
   `User_LastIP` varchar(45) NOT NULL DEFAULT 'None',
   `User_Bio` varchar(100) DEFAULT 'wow such empty',
+  `User_Avatar` varchar(100) DEFAULT NULL,
   PRIMARY KEY (`User_ID`,`User_Name`),
   UNIQUE KEY `User_Name_UNIQUE` (`User_Name`)
 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
 
-
 CREATE TABLE `posts` (
   `post_id` bigint NOT NULL AUTO_INCREMENT,
   `post_user_name` varchar(100) NOT NULL,

js/user.js

@@ -1,15 +1,59 @@
+async function uploadFile() {
+  let file = document.getElementById("avatarUpl").files[0];
+  console.log(file);
+  let formdata = new FormData();
+  formdata.append("avatar", file);
+  let ajax = new XMLHttpRequest();
+  ajax.upload.addEventListener("progress", progressHandler, false);
+  ajax.addEventListener("load", completeHandler, false);
+  ajax.addEventListener("error", errorHandler, false);
+  ajax.addEventListener("abort", errorHandler, false);
+  ajax.open("POST", "/api/setavatar");
+  ajax.send(formdata);
+
+  document.getElementById("avatarUplButton").style = "display:none;";
+}
+
+function completeHandler(event) {
+  console.log("completed upload");
+  console.log(event.target.responseText);
+  setuser()
+}
+
+function errorHandler(event) {
+  console.log("error during upload");
+  console.log(event.target.responseText);
+}
+
+function progressHandler(event) {
+  console.log("progressing upload");
+  console.log("Uploaded " + event.loaded + " bytes of " + event.total);
+  console.log(event.target.responseText);
+}
+
 async function setuser() {
   let user = await (await fetch("/api/getuser")).json();
   let username
   let bio
+  let avatar
   username = user["username"];
   bio = user["bio"]
+  avatar = user["avatar"]
   if(user["error"])username=user["error"];
   if(user["error"])bio=user["error"];
   if(!bio)bio="wow such empty"
+  if(avatar) {
+    avatar = "/avatars/"+avatar
+  } else {
+    avatar = "default_avatar.png"
+  }
   document.getElementById("user").innerText = `User: ${username}`;
   document.getElementById("bio").placeholder = decodeURIComponent(bio);
-
+  document.getElementById("avatarimg").src = avatar;
+  document.getElementById("avatarUpl").addEventListener("change", function(){
+    document.getElementById("avatarUplButton").style = "";
+  })
+  document.getElementById("avatarUplButton").addEventListener("click",uploadFile);
 }
 
 async function bioChanger() {

package.json

@@ -7,6 +7,7 @@
     "express-fileupload": "^1.3.1",
     "express-useragent": "^1.0.15",
     "helmet": "^5.1.0",
+    "jimp": "^0.16.1",
     "mysql": "^2.18.1",
     "ws": "^8.6.0"
   }

server.js

@@ -58,6 +58,7 @@ const signature = require('cookie-signature')
 const mysql = require('mysql');
 const csurf = require("csurf");
 const WebSocket = require("ws").Server;
+const Jimp = require('jimp');
 
 const router = express.Router();
 const app = express();
@@ -105,7 +106,10 @@ function RNG(seed) {
 
   this.random = function(min,max) {
     if(!min)min=0
-    if(!max)max=1
+    if(!max){
+      max=min
+      min=0
+    }
     this.seed += Math.log(Math.abs(Math.sin(this.seed))*100)
     return Math.abs(Math.sin(this.seed))*max + min
   }
@@ -330,15 +334,17 @@ router.use("/api/*",async function(req,res,next) {
 
     res.set("Access-Control-Allow-Origin","*") //we'll allow it for now
   }
-  let sql = `select User_Name,User_Bio from zerotwohub.users where User_Name=? and User_PW=?;`
+  let sql = `select User_Name,User_Bio,User_Avatar from zerotwohub.users where User_Name=? and User_PW=?;`
   let values = unsigned.split(" ")
   values[1] = SHA256(values[1],values[0],HASHES_DIFF)
   res.locals.bio = ""
+  res.locals.avatar = ""
   con.query(sql, values, function (err, result) {
     if (err) throw err;
     if(result[0] && result[0].User_Name && result[0].User_Name == values[0]) {
       res.locals.username = values[0];
       res.locals.bio = result[0].User_Bio || ""
+      res.locals.avatar = result[0].User_Avatar || ""
       next()
     } else {
       res.status(400)
@@ -351,7 +357,7 @@ router.get("/api/search", async function(req,res) {
   let type = req.query.type
   let arg = encodeURIComponent(req.query.selector)
   if(type=="user") {
-    let sql = `select User_Name,User_Bio from zerotwohub.users where User_Name like ?;`
+    let sql = `select User_Name,User_Bio,User_Avatar from zerotwohub.users where User_Name like ?;`
     con.query(sql, [`%${arg}%`], function (err, result) {
       if (err) throw err;
       if(result[0] && result[0].User_Name) {
@@ -375,9 +381,55 @@ router.get("/api/search", async function(req,res) {
   }
 })
 
+router.post("/api/setavatar",function(req,res) {
+  if (!req.files || Object.keys(req.files).length === 0) {
+    return res.status(400).send('No files were uploaded. (req.files)');
+  }
+  let avatar = req.files.avatar;
+  if(!avatar) {
+    return res.status(400).send('No files were uploaded. (req.files.)');
+  }
+  const avatars = __dirname + '/avatars/'
+  ensureExists(avatars, function(err) {
+    if(err) {
+      return res.status(500).json({"error":"there's been an internal server error."})
+    }
+    if(res.locals.avatar) {
+      fs.unlinkSync(avatars + res.locals.avatar)
+    }
+    let filename = genstring(96) + ".png"
+    while(fs.existsSync(avatars + "/" + filename) || filename == ".png") {
+      console.log(5,"already have file: ",filename);
+      original_log("already have file: ",filename)
+      filename = genstring(96) + ".png"
+    }
+    avatar.mv(avatars+"temp_"+filename,function(err) {
+      if(err) {
+        return res.status(500).json({"error":"there's been an internal server error."})
+      }
+      Jimp.read(avatars+"temp_"+filename).then(function(image){
+        image.resize(100, 100)
+        image.write(avatars+filename)
+        let sql = `update zerotwohub.users set User_Avatar=? where User_Name=?`
+        con.query(sql, [filename,encodeURIComponent(res.locals.username)], function (err, result) {
+          if (err) throw err;
+          res.json({"success":"updated avatar"})
+        });
+      })
+    })
+    // gm(avatar,"avatar.png").resize(100, 100,'!').noProfile().write(avatars + filename, function (err) {
+    //   if (err) throw err;
+    //   let sql = `update zerotwohub.users set User_Avatar=? where User_Name=?`
+    //   con.query(sql, [filename,encodeURIComponent(res.locals.username)], function (err, result) {
+    //     if (err) throw err;
+    //     res.json({"success":"updated avatar"})
+    //   });
+    // });
+  })
+})
 
 router.get("/api/getuser",async function(req,res) {
-  res.json({"username":res.locals.username,"bio":res.locals.bio})
+  res.json({"username":res.locals.username,"bio":res.locals.bio,"avatar":res.locals.avatar})
 })
 
 router.get("/api/getalluserinformation",async function(req,res) {
@@ -402,11 +454,11 @@ router.get("/api/getalluserinformation",async function(req,res) {
 router.get("/api/getotheruser",async function(req,res) {
   let username = req.query.user
 
-  let sql = `select User_Name,User_Bio from zerotwohub.users where User_Name=?;`
+  let sql = `select User_Name,User_Bio,User_Avatar from zerotwohub.users where User_Name=?;`
   con.query(sql, [username], function (err, result) {
     if (err) throw err;
     if(result[0] && result[0].User_Name && result[0].User_Name == username) {
-      res.json({"username":username,"bio":result[0].User_Bio})
+      res.json({"username":username,"bio":result[0].User_Bio,"avatar":result[0].User_Avatar})
     } else {
       res.json({"error":"there is no such user!"})
     }
@@ -596,6 +648,18 @@ router.get("/js/*", (request, response) => {
   return;
 });
 
+router.get("/avatars/*", (request, response, next) => {
+  if(!increaseUSERCall(request,response))return
+  let originalUrl = request.originalUrl.split("?").shift()
+  if(fs.existsSync(dir + originalUrl + ".png")) {
+    return response.sendFile(dir + originalUrl + ".png");
+  }
+  if(fs.existsSync(dir + originalUrl)) {
+    return response.sendFile(dir + originalUrl);
+  }
+  response.status(404).send("No avatar with that name found")
+})
+
 router.get("/*", (request, response, next) => {
   if(!increaseUSERCall(request,response))return
   let originalUrl = request.originalUrl.split("?").shift()

views/otheruser.html

@@ -15,6 +15,7 @@
     </header>
     <main>
         <div class="info_div">
+          <img id="avatar" width=100 height=100> <br>
           <h4 id="userBio">Bio: </h4>
           <button id="mentionClick" onclick="mention()">Mention this User in Posts!</button>
         </div>
@@ -31,6 +32,13 @@
         document.getElementById('userName').innerText = `${(!user["error"] && "User: "+user.username) || "Error: "+user["error"]}`
         document.getElementById('userBio').innerText = `${(!user["error"] && "Bio: " + decodeURIComponent(user.bio)) || ""}`
         document.title = `${(!user["error"] && user.username+"'s Page") || "No such User!"}`
+        let avatar = user["avatar"]
+        if(avatar) {
+          avatar = "/avatars/"+avatar
+        } else {
+          avatar = "/default_avatar.png"
+        }
+        document.getElementById("avatar").src = avatar
         if(user["error"]) {
           document.body.removeChild(document.getElementById("mentionClick"))
         }

views/user.html

@@ -16,18 +16,25 @@
       <h1>Welcome Back!</h1>
   </header>
   <main>
-      <div class="info_div">
-        <h2 id="user">User: USER</h2>
-        <br>
-        <span class="bio">Bio: <input type="text" id="bio" disabled placeholder="wow such empty"></span>
-        <button id="changeBio" onclick="bioChanger()">Change Bio</button>
-        <br>
-        <button onclick="location.assign('/changePW')">Want to change your password?</button>
-        <br>
-        <button onclick="location.assign('/changeUsername')">Want to change your username?</button>
-        <br>
-        <button onclick="location.assign('/posts')">Want to chat with some cool fellas?</button>
-      </div>
+    <div class="form_class info_div">
+      <h2 id="user">User: USER</h2>
+      <br>
+      <img id="avatarimg" width=100 height=100>
+      <br>
+      <input name="avatar" class="avatar" id="avatarUpl" type="file" accept="image/png, image/jpeg">
+      <br>
+      <button type="submit" style="display:none;" id="avatarUplButton">Save avatar</button>
+      <br>
+      <br>
+      <span class="bio">Bio: <input type="text" id="bio" disabled placeholder="wow such empty"></span>
+      <button id="changeBio" onclick="bioChanger()">Change Bio</button>
+      <br>
+      <button onclick="location.assign('/changePW')">Want to change your password?</button>
+      <br>
+      <button onclick="location.assign('/changeUsername')">Want to change your username?</button>
+      <br>
+      <button onclick="location.assign('/posts')">Want to chat with some cool fellas?</button>
+    </div>
   </main>
 </body>
 </html>