Change picture from about page

app/lib/express.js

@@ -11,14 +11,13 @@ const {
   nextIdentityFilename,
   reconstructKeys,
   readKey,
+  uploadPicture,
 } = require("./utils");
 const queries = require("./queries");
 const serveBlobs = require("./serve-blobs");
 const cookieParser = require("cookie-parser");
 const debug = require("debug")("express");
 const fileUpload = require("express-fileupload");
-const pull = require("pull-stream");
-const split = require("split-buffer");
 
 let ssbServer;
 let mode = process.env.MODE || "server";
@@ -163,21 +162,7 @@ router.post("/signup", async (req, res) => {
   const name = req.body.name;
   const picture = req.files && req.files.pic;
 
-  let pictureLink;
-  if (picture) {
-    const maxSize = 5 * 1024 * 1024; // 5 MB
-    if (picture.size > maxSize) throw "Max size exceeded";
-
-    pictureLink = await new Promise((resolve, reject) =>
-      pull(
-        pull.values(split(picture.data, 64 * 1024)),
-        ssbServer.blobs.add((err, result) => {
-          if (err) return reject(err);
-          return resolve(result);
-        })
-      )
-    );
-  }
+  const pictureLink = picture && (await uploadPicture(ssbServer, picture));
 
   const filename = await nextIdentityFilename(ssbServer);
   const profileId = await ssbServer.identities.create();
@@ -303,18 +288,29 @@ router.get("/about", (_req, res) => {
 
 router.post("/about", async (req, res) => {
   const name = req.body.name;
+  const picture = req.files && req.files.pic;
 
-  if (name != req.context.profile.name) {
+  const pictureLink = picture && (await uploadPicture(ssbServer, picture));
+
+  let update = {
+    type: "about",
+    about: req.context.profile.id,
+  };
+  if (name && name != req.context.profile.name) {
+    update.name = name;
+  }
+  if (pictureLink) {
+    update.image = pictureLink;
+  }
+
+  if (update.name || update.image) {
     await ssbServer.identities.publishAs({
       id: req.context.profile.id,
       private: false,
-      content: {
-        type: "about",
-        about: req.context.profile.id,
-        name: name,
-      },
+      content: update,
     });
-    req.context.profile.name = name;
+
+    delete queries.profileCache[req.context.profile.id];
   }
 
   res.redirect("/");

app/lib/queries.js

@@ -332,4 +332,5 @@ module.exports = {
   getAllEntries,
   getProfile,
   getVanishingMessages,
+  profileCache,
 };

app/lib/utils.js

@@ -1,5 +1,7 @@
 const fs = require("fs");
 const leftpad = require("left-pad"); // I don't believe I'm depending on this
+const pull = require("pull-stream");
+const split = require("split-buffer");
 
 module.exports.asyncRouter = (app) => {
   const debug = require("debug")("router");
@@ -63,3 +65,18 @@ module.exports.readKey = (path) => {
   let keyfile = fs.readFileSync(secretPath, "utf8");
   return module.exports.reconstructKeys(keyfile);
 };
+
+module.exports.uploadPicture = async (ssbServer, picture) => {
+  const maxSize = 5 * 1024 * 1024; // 5 MB
+  if (picture.size > maxSize) throw "Max size exceeded";
+
+  return await new Promise((resolve, reject) =>
+    pull(
+      pull.values(split(picture.data, 64 * 1024)),
+      ssbServer.blobs.add((err, result) => {
+        if (err) return reject(err);
+        return resolve(result);
+      })
+    )
+  );
+};

app/package.json

@@ -7,7 +7,8 @@
     "start": "SSB_PORT=8009 EXPRESS_PORT=3000 electron .",
     "start:user-2": "SSB_PORT=8010 EXPRESS_PORT=3001 CONFIG_FOLDER=social-user2 electron .",
     "start:user-3": "SSB_PORT=8011 EXPRESS_PORT=3002 CONFIG_FOLDER=social-user3 electron .",
-    "clear": "rm -rf ~/.social; rm -rf ~/.social-user2; rm -rf ~/.social-user3"
+    "clear": "rm -rf ~/.social; rm -rf ~/.social-user2; rm -rf ~/.social-user3",
+    "start:prod": "NODE_ENV=production electron ."
   },
   "author": "",
   "license": "ISC",

app/views/about.ejs

@@ -2,7 +2,18 @@
 
 <h1>About me</h1>
 
-<form action="about" method="POST">
+<form action="about" method="POST" enctype="multipart/form-data">
+  <div style="padding-top: 30px">
+    <label>
+      Profile picture:
+      <div class="columns" style="margin-top: 20px; align-items: center;">
+        <div class="profile-pic-placeholder" style="margin-right: 15px; height: auto">
+          <img src="<%= profileImageUrl(context.profile) %>" class="js-profile-pic-placeholder">
+        </div>
+        <input type="file" name="pic" class="js-profile-pic-upload" />
+      </div>
+    </label>
+  </div>
   <p>
     Name: <input type="text" name="name" value="<%= context.profile.name %>">
   </p>

app/views/signup.ejs

@@ -8,7 +8,7 @@
       <label>
         Profile picture:
         <div class="columns" style="margin-top: 20px; align-items: center;">
-          <div class="profile-pic-placeholder">
+          <div class="profile-pic-placeholder" style="margin-right: 15px">
             <img class="js-profile-pic-placeholder">
           </div>
           <input type="file" name="pic" class="js-profile-pic-upload" />