From 06fedb43876d5fae4c5f7ce5f07bcd7fc09934ab Mon Sep 17 00:00:00 2001
From: tdgmdev <tdgmdev@gmail.com>
Date: Mon, 6 Mar 2023 16:15:27 -0500
Subject: [PATCH] Added profile pictures

---
 src/lib/components/Area.svelte       |  1 +
 src/lib/components/FileUpload.svelte | 10 ++--
 src/lib/db/db.js                     | 74 +++++++++++++++++-----------
 src/routes/pfp/[img]/+server.js      | 24 +++++++++
 src/routes/user/[user]/+page.js      |  5 +-
 src/routes/user/[user]/+page.svelte  | 30 +++++++++--
 6 files changed, 108 insertions(+), 36 deletions(-)
 create mode 100644 src/routes/pfp/[img]/+server.js

diff --git a/src/lib/components/Area.svelte b/src/lib/components/Area.svelte
index bc0c3f0..ac8aaec 100644
--- a/src/lib/components/Area.svelte
+++ b/src/lib/components/Area.svelte
@@ -30,6 +30,7 @@
     #header {
         border-bottom: var(--dark-2) solid 2px;
         width: calc(100% - 30px);
+
     }
 
     #main {
diff --git a/src/lib/components/FileUpload.svelte b/src/lib/components/FileUpload.svelte
index ed7b988..1f9d10d 100644
--- a/src/lib/components/FileUpload.svelte
+++ b/src/lib/components/FileUpload.svelte
@@ -1,7 +1,7 @@
 <script>
     import Button from '$lib/components/Button.svelte';
 
-    export let form;
+    export let form, apiUrl, type;
 
     let fileInput;
     let files;
@@ -41,7 +41,7 @@
             fData.append('last',i == (images.length - 1));
             fData.append('id',rId);
 
-            form = await fetch(`/api/fileCreate`, {
+            form = await fetch(apiUrl || `/api/fileCreate`, {
                 method: 'POST',
                 body: fData,
             }).then(x => x.json());
@@ -62,9 +62,13 @@
     img {
         max-width: 250px;
     }
+
+    .small img {
+        max-width: 50px;
+    }
 </style>
 
-<form action='#' method='GET' >
+<form action='#' method='GET' class='{type || ''}' >
     {#if preview}
         <img src={preview} alt="Image preview"/>
     {:else}
diff --git a/src/lib/db/db.js b/src/lib/db/db.js
index 4dbb38a..61d93f7 100644
--- a/src/lib/db/db.js
+++ b/src/lib/db/db.js
@@ -5,6 +5,7 @@ const AUTH_ACTIONS = [
     'fileCreate',
     'vote',
     'postDelete',
+    'pfp',
     'follow'
 ];
 
@@ -349,39 +350,54 @@ backend.follow = async ({target, user}) => {
     return {'success': 'User followed/unfollowed.', 'data': {following, followers}};
 };
 
-backend.fileCreate = async({img, extension,id, last }) => {
-    if (ridArray[id] !== '' && !(ridArray[id])) {
-        ridArray[id] = img;
-    } else {
-        ridArray[id] += img;
-    }
+let fileCreate = (type) => {
+    return async ({img, extension,id, last, user }) => {
+        let validExtensions = VALID_EXTENSIONS;
 
-    const imgData = ridArray[id];
+        if (type == 'pfp') validExtensions = ['png'];
 
-    if (last != 'true') {
-        return {'success': 'Image still proccessing...'}
-    } else {
-        ridArray[id] = false;
-    }
+        if (ridArray[id] !== '' && !(ridArray[id])) {
+            ridArray[id] = img;
+        } else {
+            ridArray[id] += img;
+        }
+    
+        const imgData = ridArray[id];
+    
+        if (last != 'true') {
+            return {'success': 'Image still proccessing...'}
+        } else {
+            ridArray[id] = false;
+        }
+    
+        const imgHash = createHash('md5').update(imgData).digest('hex');
+    
+        if (!imgHash)
+            return {'success': 'Image not provided.'}
+    
+        if (imgHash.length > FILE_SIZE_LIMIT)
+            return {'success': 'Image too big.'}
+    
+        const extensionSafe = safePath(extension);
+    
+        if (validExtensions.indexOf(extensionSafe) == -1)
+            return { success: 'Illegal file extension. Permitted file extensions are: ' + validExtensions.join(', ') };
+    
+        if (type == 'post') {
+            writeFile(`${process.cwd()}/db/post-${imgHash}.${extensionSafe}`,imgData,{encoding: 'base64'});
+        } else {
+            writeFile(`${process.cwd()}/db/pfp-${user}.png`,imgData,{encoding: 'base64'});
+        }
+    
+        return { success: 'Successfully uploaded file.', 'href': `/img/${imgHash}.${extensionSafe}`};
+    }    
+} 
+backend.fileCreate = fileCreate('post');
+backend.pfp = fileCreate('pfp');
 
-    const imgHash = createHash('md5').update(imgData).digest('hex');
 
-    if (!imgHash)
-        return {'success': 'Image not provided.'}
-
-    if (imgHash.length > FILE_SIZE_LIMIT)
-        return {'success': 'Image too big.'}
-
-    const extensionSafe = safePath(extension);
-
-    if (VALID_EXTENSIONS.indexOf(extensionSafe) == -1)
-        return { success: 'Illegal file extension. Permitted file extensions are: ' + VALID_EXTENSIONS.join(', ') };
-
-    writeFile(`${process.cwd()}/db/post-${imgHash}.${extensionSafe}`,imgData,{encoding: 'base64'});
-
-    return { success: 'Successfully uploaded file.', 'href': `/img/${imgHash}.${extensionSafe}`};
-}
 export {
     backendProxy,
-    backend
+    backend,
+    VALID_EXTENSIONS
 }
\ No newline at end of file
diff --git a/src/routes/pfp/[img]/+server.js b/src/routes/pfp/[img]/+server.js
new file mode 100644
index 0000000..d442b67
--- /dev/null
+++ b/src/routes/pfp/[img]/+server.js
@@ -0,0 +1,24 @@
+import { VALID_EXTENSIONS } from '../../../lib/db/db.js';
+
+import { readFile } from 'node:fs/promises';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies, params }) {
+    var imgName = params['img'];
+
+    imgName = imgName.replace(/(\s+)/g, '\\$1');
+
+    var res;
+
+    var res = await readFile(`${process.cwd()}/db/pfp-${imgName}`);
+
+    var response = new Response(res);
+    var extension = imgName.split('.').pop();
+
+    if (extension == 'svg') {
+        response = new Response(res, {'headers': {
+            'Content-Type':  'image/png'
+        }});
+    }
+    return response;
+}
diff --git a/src/routes/user/[user]/+page.js b/src/routes/user/[user]/+page.js
index 5b1da46..f580b3a 100644
--- a/src/routes/user/[user]/+page.js
+++ b/src/routes/user/[user]/+page.js
@@ -20,5 +20,8 @@ export async function load({ fetch, params, url }) {
     const resUserBio = await fetch(`/api/userBio?user=${user}`);
     const postJsonUserBio = (await resUserBio.json()) || {};
 
-    return { postJson, id, postJsonUser, postJsonUserBio, user };
+    const resAccData = await fetch(`/api/token`);
+    const resAcc = (await resAccData.json()) || {};
+
+    return { resAcc, postJson, id, postJsonUser, postJsonUserBio, user };
 }
\ No newline at end of file
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index c474591..c8b4e74 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -2,10 +2,13 @@
     import Button from '$lib/components/Button.svelte'
     import Area from '$lib/components/Area.svelte';
     import PostList from '$lib/components/PostList.svelte';
+    import FileUpload from '$lib/components/FileUpload.svelte';
 
     /** @type {import('./$types').PageData} */
     export let data;
 
+    let uploadForm = {};
+
     let userData = data.postJsonUser.data;
     let userBio = data.postJsonUserBio.data;
 
@@ -32,16 +35,29 @@
     .follower {
         margin-right: 1.5rem;
     }
+
+    .pfp {
+        width: 50px;
+        height: 50px;
+        margin-right: 10px;
+    }
+
+    #header {
+        display: flex;
+        align-content: center;
+    }
 </style>
 
 {#if userData}
     <Area>
-        <span slot="header">
+        <span slot="header" id='header'>
+            <img class='pfp' src='/pfp/{userData.username}.png'/>
             <a href='/users/{userData.username}'>
                 {userData.username}
             </a>
         </span>
         <span slot="main">
+            <div class='left'></div>
             <p>
                 <b>Reputation:</b> {userData.reputation}
             </p>
@@ -57,13 +73,21 @@
 
             <h2>Following</h2>
             {#each following as user}
-                <a class='follower' href='/user/{user.following}'>{user.following}</a>
+                <a class='follower' href='/user/{user.following}'>
+                    <img class='pfp' src='/pfp/{user.following}.png'/> 
+                </a>
             {/each}
 
             <h2>Followers</h2>
             {#each followers as user}
-                <a class='follower' href='/user/{user.username}'>{user.username}</a>
+                <a class='follower' href='/user/{user.username}'>
+                    <img class='pfp' src='/pfp/{user.username}.png'/>    
+                </a>
             {/each}
+            {#if data.resAcc.data == userData.username}
+                <h2>Set PFP</h2>
+                <FileUpload bind:form={uploadForm} type='small' apiUrl={'/api/pfp'}/>
+            {/if}
         </span>
         <span slot="footer">
             <Button clickFunc={follow}>