7 files changed, 52 insertions, 22 deletions
diff --git a/website/requirements.txt b/website/requirements.txt
index e4045e2..73f4041 100644
--- a/website/requirements.txt
+++ b/website/requirements.txt
@@ -1 +1 @@
-web.py
+web.py @ git+https://github.com/webpy/webpy@3e05bc6
diff --git a/website/run.sh b/website/run.sh
index 851c47c..75d638e 100755
--- a/website/run.sh
+++ b/website/run.sh
@@ -1,4 +1,4 @@
 #! /usr/bin/env sh
 export PYTHONDONTWRITEBYTECODE=1
 export PYTHONOPTIMIZE=2
-python3 site.py
+python3 site.py 12444
diff --git a/website/site.py b/website/site.py
index 83b34e8..7e9603e 100644
--- a/website/site.py
+++ b/website/site.py
@@ -1,5 +1,6 @@
 import re
 import web
+import struct
 
 urls = (
     '/capes',  'Capes',
@@ -12,13 +13,18 @@ class Capes():
         web.seeother('/static/index.html')
 
     def POST(self):
-        username = web.input().username
+        cape = web.input()
+        if type(cape.data) != bytes:
+            return web.notacceptable()
+        if not cape.data.startswith(bytes.fromhex('89504E470D0A1A0A')):
+            return web.notacceptable()
+        ihdr = struct.unpack('>IIBBBBB', cape.data[16:29])
+        if ihdr[0] > 1024 or ihdr[1] > 1024:
+            return web.notacceptable()
+        username = cape.username
         username = re.sub(r'[^a-zA-Z0-9_]', '', username)
         with open(f'static/capes/{username}.png', 'wb+') as f:
-            if type(web.input().data) == bytes:
-                f.write(web.input().data)
-            else:
-                print('Unsupported type')
+            f.write(cape.data)
 
-if __name__ == "__main__":
+if __name__ == '__main__':
     app.run()
diff --git a/website/static/index.html b/website/static/index.html
index 6394fcf..73d5cb9 100644
--- a/website/static/index.html
+++ b/website/static/index.html
@@ -8,13 +8,14 @@
   </head>
   <body onload="init()">
     <div id="main">
-      <img id="preview" src="">
+      <img id="preview" src="" onload="this.style.display='inherit'" onerror="this.style.display='none'"/>
+      <p id="status"/></p>
       <div id="input">
         <input id="username" type="text" placeholder="Username"/>
         <input id="file" type="file"/>
       </div>
       <div id="resources">
-        <form action="http://<IP>:12444/static/template.html" method="get">
+        <form action="/static/template.html" method="get">
           <button type="submit">Get Template</button>
         </form>
         <form action="https://api.labymod.net/capes/capecreator/" method="get" target="_blank">
diff --git a/website/static/index.js b/website/static/index.js
index 22bfc20..869eb0b 100644
--- a/website/static/index.js
+++ b/website/static/index.js
@@ -1,25 +1,39 @@
-const IP = "http://<IP>:12444";
+function onUsernameChanged(usernameInput) {
+    var preview = document.getElementById('preview');
+    if (!usernameInput.value) {
+        preview.src = '';
+        return false;
+    }
+    preview.src = '/static/capes/' + usernameInput.value + '.png?t=' + new Date().getTime();
+    return true;
+}
 
 function init() {
-    document.getElementById('file').addEventListener('change', handleFileSelect, false);
+    var filePicker = document.getElementById('file');
+    filePicker.addEventListener('change', handleFileSelect, false);
+    var usernameInput = document.getElementById('username');
+    filePicker.disabled = !onUsernameChanged(usernameInput);
+    usernameInput.addEventListener('input', (event) => {
+        filePicker.disabled = !onUsernameChanged(event.target);
+    });
 }
 
 function handleFileSelect(event) {
-    var username = document.getElementById('username').value
-    if (!username) {
-        return;
-    }
+    var username = document.getElementById('username').value;
+    if (!username) return;
     const reader = new FileReader();
-    const url = IP + '/capes';
     var formData = new FormData();
     formData.append('username', username);
     formData.append('data', event.target.files[0]);
-    fetch(url, {
-        method : "POST",
+    fetch('/capes', {
+        method : 'POST',
         body: formData
     }).then((response) => {
         if (response.ok) {
-            document.getElementById('preview').src = IP + '/static/capes/' + username + '.png';
+            document.getElementById('preview').src = '/static/capes/' + username + '.png?t=' + new Date().getTime();
+            document.getElementById('status').innerText = 'Upload success.';
+        } else {
+            document.getElementById('status').innerText = 'Failed to upload cape. Image not a .png? or greater than 1024x1024?';
         }
     });
 }
diff --git a/website/static/style.css b/website/static/style.css
index 242ced7..0bab63f 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -14,6 +14,15 @@
   image-rendering: pixelated;
 }
 
+#status {
+  margin: inherit;
+  padding: 4px;
+}
+
+#status:empty {
+  display: none;
+}
+
 #template {
   width: 100%;
   display: flex;
diff --git a/website/static/template.html b/website/static/template.html
index f7d62de..dade2f9 100644
--- a/website/static/template.html
+++ b/website/static/template.html
@@ -7,7 +7,7 @@
   </head>
   <body>
     <div id="template">
-      <img id="preview" src="http://<IP>:12444/static/template.png"/>
+      <img id="preview" src="/static/template.png"/>
       <ul>
         <div class="input-color">
           <p>Top</p>
@@ -48,7 +48,7 @@
       </ul>
     </div>
     <div id="desc">
-      <p>Right click and "Save Image As...", edit, then upload <a href="http://<IP>:12444/capes">here</a>.</p>
+      <p>Right click and "Save Image As...", edit, then upload <a href="/capes">here</a>.</p>
       <p>If you don't want to edit the Elytra texture, you can crop it out.</p>
       <p>Feel free to scale. Only use integer scaling (Multiply width/height by a whole number).</p>
     </div>