3 files changed, 58 insertions, 4 deletions

diff --git a/public/js/api.js b/public/js/api.js
index 9845be5..b2ea597 100644
--- a/public/js/api.js
+++ b/public/js/api.js
@@ -1,6 +1,27 @@
 const endpoint = '/api'
 
+const fileRequest = async (url, file, method) => {
+    if (method === undefined) method = 'POST'
+    const response =  await fetch(endpoint + url, {
+        method,
+        body: file,
+        headers: {}
+    });
+    if (response.status == 401) {
+        location.href = 'login'
+    }
+    const contentType = response.headers.get("content-type");
+    if (contentType && contentType.indexOf("application/json") !== -1) {
+        const json = await response.json()
+        return { status: response.status, msg: json.msg, json }
+    } else {
+        const msg = await response.text();
+        return { status: response.status, msg }
+    }
+}
+
 const request = async (url, body, method) => {
+    
     if (method === undefined) method = 'POST'
     const response =  await fetch(endpoint + url, {
         method,
@@ -88,4 +109,12 @@ const adminusers = async () => {
 
 const adminsessions = async () => {
     return await request('/admin/sessions', {})
+}
+
+const updateavatar = async (file) => {
+    return await fileRequest('/users/avatar', file, 'PUT')
+}
+
+const updatebanner = async (file) => {
+    return await fileRequest('/users/banner', file, 'PUT')
 }
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index 87dd8e0..ffbc1f3 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -33,7 +33,11 @@ function remove(id) {
 }
 
 function pfp(id) {
-    return `<img src="/img/${id % 25}.png">`
+    return `<img src="/image/avatar?user_id=${id}">`
+}
+
+function banner(id) {
+    return `<img src="/image/banner?user_id=${id}" onerror="this.remove()" >`
 }
 
 const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
diff --git a/public/js/profile.js b/public/js/profile.js
index 10eb873..90787f0 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -16,24 +16,44 @@ function swap(value) {
     }
 }
 
+function changeimage(fn) {
+
+    var input = document.createElement('input')
+    input.type = 'file'
+    input.accept= 'image/png'
+
+    input.onchange = async (e) => { 
+        var file = e.target.files[0];
+        if (file.type !== 'image/png') {
+            return
+        } 
+        let response = await fn(file);
+        alert(response.msg)
+    }
+
+    input.click();
+}
+
 function render() {
     const html = `
     <div id="top">
         <div id="banner">
-            <div>
-                    
+            <div class="bg">
+                ${banner(data.user.user_id)}
             </div>
+            ${ isself ? `<div class="changebanner" onclick="changeimage(updatebanner)"></div>` : '' }
         </div>
         <div id="info">
             <div class="face">
                 ${pfp(data.user.user_id)}
+                ${ isself ? `<div class="changeavatar" onclick="changeimage(updateavatar)"></div>` : '' }
             </div>
             <div class="infodata">
                 <span class="bold ltext">${data.user.firstname + ' ' + data.user.lastname}</span>
                 <span class="gtext">Joined ${parseDate(new Date(data.user.date))}</span>
             </div>
         </div>
-        <div class="fullline" style="width: 80em; margin-bottom: 0;"></div>
+        <div class="fullline" style="width: 80em; margin-bottom: 0; z-index: 0;"></div>
         <div class="profilebuttons">
             <button id="profilepostbutton" class="${posts ? 'selected' : ''}" onclick="swap(true)">
                 Posts
@@ -71,6 +91,7 @@ function render() {
     `
 
     append(about)
+
 }
 
 async function logout_button() {