custosm avatars and banners

30 files changed, 90 insertions, 6 deletions

diff --git a/public/css/main.css b/public/css/main.css
index e15ffa6..1926ed9 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -368,4 +368,14 @@ form {
     input:focus {
         outline: none;
     }
+
+    .changeavatar {
+        filter: invert(100%) !important;
+        background-color: #bbbbbb !important;
+    }
+
+    .changebanner {
+        filter: invert(100%) !important;
+        background-color: #bbbbbb !important;
+    }
 }
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
index 62ce1d2..1077919 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -24,7 +24,7 @@ body {
     justify-content: center;
 }
 
-#banner div, #banner img {
+#banner .bg, #banner img {
     width: 80em;
     max-width: 100%;
     height: inherit;
@@ -56,6 +56,27 @@ body {
     border-radius: 7em;
 }
 
+.changeavatar, .changebanner {
+    all: unset;
+    position: absolute;
+    width: 3em;
+    height: 3em;
+    margin-left: -3em;
+    margin-top: 9em;
+    border-radius: 3em;
+    background-color: var(--secondary);
+    z-index: 10000 !important;
+    text-align: center;
+    background-image:  url('data:image/png;base64,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/TwzbKRT88RhYqHQxnIbs6KhEk8TRxRVo3x/xmWF8xZntVxlzXvyF4Zy2soy12kNIYFFLEGEABlVlFCGhSjtGikmUnQe9/APOn6RXDK5SmDkWEAFKiTHD/4Hv2dr5qcm3aRQHOh8se2PESC4CzRqtv19bNuNEyDwDFxpLX+lDsx+kl5raZEjoHcbuLhuafIecLkDDDzpkiE5UoCWP58H3s/om7JA3y3QvebOrXmO0wcgTbNK3gAHh8BogbLXPd7d1T63f3ua8/sBAv9y4GhT1LwAAA14aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA0LjQuMC1FeGl2MiI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpHSU1QPSJodHRwOi8vd3d3LmdpbXAub3JnL3htcC8iCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgeG1wTU06RG9jdW1lbnRJRD0iZ2ltcDpkb2NpZDpnaW1wOjNlYWM4M2MyLTUzMjctNDE5ZS1iMjJlLWU2YjE5M2M2ZTc2NiIKICAgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MTNkODIxZC1jMDE1LTQ1ZGQtYTAwNS04MTA2OGY3ZTg1YjEiCiAgIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4ZGRkOGY2My1iODAwLTQ1MDQtYWE3Yi1iNzAwOTRiOTg5YTgiCiAgIEdJTVA6QVBJPSIyLjAiCiAgIEdJTVA6UGxhdGZvcm09IkxpbnV4IgogICBHSU1QOlRpbWVTdGFtcD0iMTY3NTIwNTQzNTkyMzY1NCIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjMyIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjM6MDE6MzFUMTc6NTA6MzUtMDU6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzOjAxOjMxVDE3OjUwOjM1LTA1OjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGJjMjRlYWMtODdmMC00YjJjLWI2MzAtYTBhOTIxY2I1MmJmIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMy0wMS0zMVQxNzo1MDozNS0wNTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7KJrUFAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH5wEfFjIjpTMVIgAAAlFJREFUaN7t2E2ITXEYx/HPHTNehmlMGSXyMiILJBsbid2QHZZsZj8bL2WtMKLYiJWXkhVJsZLUkJeUl0JCTZJB42UwZphmxsIzdZtmxr3m3OPeOt86nc69z/n/n985z/P8n/MnIyMjIyMjI6OimYcL+IWhEh+fcAwzCnUuV6DdTDzAQjxFV4kf2mLMxV2sR19SA++LJ9WW0tufjHMx554kB76FAdSmGMr1GER7IcZVBQ46JXLjR0JOVmMp6sax6cZPTEtSSJJswzs8x0ccKiJXJ8x99CYwzkr04xvO4GXkQesY9r0xd9kJORCOb4nrxhB2Z6JC0g6tmjh/z3N0IHJmQqQt5GKcT2E/rkchuVRpOSLyoS9vFT8f60ZF5cgws7AWi/5iV7CQ6hK/yfpYD0bShZtJTlSqHJmKI+iIkls2FBNaq/Ak4n8AnWgax34JmsspR6qwN9qKbuzApmhtXmHOKPdswOcQvKschDRFYzmEG1iQ99/2aP4eRc4M0xIiO3Ev7j0bYflfhLREy9GH3WP0Ta3haDum43BcP8b8cP50/HY77+2lIqQRl/McWl7gN82HOF8dpfvdGWH2GqvTELIZ72PStnEWtJGcCBFHMWkMm2Z8QU+MXxIhtTgZznRg3T+U++YC7JbhRcyTuJB+PMtLyroSl/yGKAaJr+zVmI2tsZtSaobLsqSF9GMF3pbjXlUxLcpguYooRsib+G7YmKJvDbG+fE0ytA5GtbmCh1EeS0nOn81AMWeirMG1yJWhFI4eHM/lcjUyMjIyMjIyMiqT3wkE0qfVNfiiAAAAAElFTkSuQmCC');
+    cursor: pointer;
+}
+
+.changebanner {
+    position: relative;
+    margin-left: -4em;
+    margin-top: 26em;
+}
+
 .infodata {
     margin-top: 2em;
     display: flex;
@@ -138,5 +159,4 @@ body {
 
 .logout {
     flex: 1;
-    /* align-self: flex-end !important; */
 }
\ No newline at end of file
diff --git a/public/img/0.png b/public/image/default/0.png
index 19bbb12..19bbb12 100644
--- a/public/img/0.png
+++ b/public/image/default/0.png
diff --git a/public/img/1.png b/public/image/default/1.png
index 0466850..0466850 100644
--- a/public/img/1.png
+++ b/public/image/default/1.png
diff --git a/public/img/10.png b/public/image/default/10.png
index e181798..e181798 100644
--- a/public/img/10.png
+++ b/public/image/default/10.png
diff --git a/public/img/11.png b/public/image/default/11.png
index 10cc420..10cc420 100644
--- a/public/img/11.png
+++ b/public/image/default/11.png
diff --git a/public/img/12.png b/public/image/default/12.png
index f62a977..f62a977 100644
--- a/public/img/12.png
+++ b/public/image/default/12.png
diff --git a/public/img/13.png b/public/image/default/13.png
index c25a5db..c25a5db 100644
--- a/public/img/13.png
+++ b/public/image/default/13.png
diff --git a/public/img/14.png b/public/image/default/14.png
index b4268e0..b4268e0 100644
--- a/public/img/14.png
+++ b/public/image/default/14.png
diff --git a/public/img/15.png b/public/image/default/15.png
index 8641079..8641079 100644
--- a/public/img/15.png
+++ b/public/image/default/15.png
diff --git a/public/img/16.png b/public/image/default/16.png
index 538b8d8..538b8d8 100644
--- a/public/img/16.png
+++ b/public/image/default/16.png
diff --git a/public/img/17.png b/public/image/default/17.png
index 8fbf42a..8fbf42a 100644
--- a/public/img/17.png
+++ b/public/image/default/17.png
diff --git a/public/img/18.png b/public/image/default/18.png
index 60ddadc..60ddadc 100644
--- a/public/img/18.png
+++ b/public/image/default/18.png
diff --git a/public/img/19.png b/public/image/default/19.png
index 87e55ae..87e55ae 100644
--- a/public/img/19.png
+++ b/public/image/default/19.png
diff --git a/public/img/2.png b/public/image/default/2.png
index e3d3fd2..e3d3fd2 100644
--- a/public/img/2.png
+++ b/public/image/default/2.png
diff --git a/public/img/20.png b/public/image/default/20.png
index cad21e0..cad21e0 100644
--- a/public/img/20.png
+++ b/public/image/default/20.png
diff --git a/public/img/21.png b/public/image/default/21.png
index 951295b..951295b 100644
--- a/public/img/21.png
+++ b/public/image/default/21.png
diff --git a/public/img/22.png b/public/image/default/22.png
index 30a7517..30a7517 100644
--- a/public/img/22.png
+++ b/public/image/default/22.png
diff --git a/public/img/23.png b/public/image/default/23.png
index 386d550..386d550 100644
--- a/public/img/23.png
+++ b/public/image/default/23.png
diff --git a/public/img/24.png b/public/image/default/24.png
index fc0ce1a..fc0ce1a 100644
--- a/public/img/24.png
+++ b/public/image/default/24.png
diff --git a/public/img/3.png b/public/image/default/3.png
index aa2b68a..aa2b68a 100644
--- a/public/img/3.png
+++ b/public/image/default/3.png
diff --git a/public/img/4.png b/public/image/default/4.png
index a9ee0d0..a9ee0d0 100644
--- a/public/img/4.png
+++ b/public/image/default/4.png
diff --git a/public/img/5.png b/public/image/default/5.png
index 63e904b..63e904b 100644
--- a/public/img/5.png
+++ b/public/image/default/5.png
diff --git a/public/img/6.png b/public/image/default/6.png
index 7ba485d..7ba485d 100644
--- a/public/img/6.png
+++ b/public/image/default/6.png
diff --git a/public/img/7.png b/public/image/default/7.png
index c861dc6..c861dc6 100644
--- a/public/img/7.png
+++ b/public/image/default/7.png
diff --git a/public/img/8.png b/public/image/default/8.png
index a25833b..a25833b 100644
--- a/public/img/8.png
+++ b/public/image/default/8.png
diff --git a/public/img/9.png b/public/image/default/9.png
index 70b19fa..70b19fa 100644
--- a/public/img/9.png
+++ b/public/image/default/9.png
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() {