Added section in channel settings to update description and thumbnail.

www/css/adminPanel.css

@@ -68,8 +68,16 @@ img.admin-list-entry-item{
     margin: 0;
 }
 
+#channel-info-thumbnail {
+    max-width: 8em;
+    max-height: 8em;
+    align-self: center;
+}
+
 #channel-info-thumbnail-span div{
     position: relative;
+    display: flex;
+    flex-direction: column;
 }
 
 #channel-info-description-span{
@@ -83,12 +91,12 @@ img.admin-list-entry-item{
     left: calc(50% - 4.5em);
 }
 
-
 #channel-info-description-prompt{
     resize: vertical;
     width: 100%;
     min-height: 2em;
     max-height: 8em;
+    height: 8em;
 }
 
 #channel-rank-title{

www/js/channelSettings.js

@@ -41,6 +41,7 @@ class chanInfo{
         //Create description prompt
         this.descriptionInput = document.createElement("textarea");
         this.descriptionInput.id = "channel-info-description-prompt";
+        this.descriptionInput.value = this.description.textContent;
 
         //Setup Input Event Handlers
         this.setupInput();
@@ -58,50 +59,71 @@ class chanInfo{
         this.thumbnailInput.style.display = enabled ? "" : "none";
 
         if(enabled){
+            //focus thumbnail input
+            this.thumbnailInput.focus();
+
+            //Remove interactive class from thumby
             this.thumbnail.classList.remove('interactive');
         }else{
+            //add interactive class to thumby
             this.thumbnail.classList.add('interactive');
         }
     }
 
-    submitThumbnail(event){
+    async submitThumbnail(event){
         //If we hit didnt hit enter or escape
         if(!(event.key == "Enter" || event.key == "Escape") && event.key != null){
             //bail!
             return;
+        //Only returns w/ content after this point
+        }else if(event.key == "Escape" && event.key != null){
+            //Toggle prompt
+            this.toggleThumbnailPrompt(false);
+            return;
         }
 
+        //Send update off to server and wait for response
+        const data = await utils.ajax.setChannelThumbnail(this.channel, this.thumbnailInput.value);
+
+        //Set new image from updated thumby 
+        this.thumbnail.src = data.thumbnail;
+
         //Toggle prompt
         this.toggleThumbnailPrompt(false);
-
-        //Only returns after this point
-        if(event.key != "Enter" && event.key != null){
-            return;
-        }
     }
 
     toggleDescriptionPrompt(enabled){
         if(enabled){
             this.description.replaceWith(this.descriptionInput);
+            this.descriptionInput.focus()
         }else{
             this.descriptionInput.replaceWith(this.description);
         }
     }
 
-    submitDescription(event){
+    async submitDescription(event){
         //If we hit didnt hit enter (without shift) or escape
         if(!((event.key == "Enter" && !event.shiftKey) || event.key == "Escape") && event.key != null){
             //bail!
             return;
+        }else if(event.key == "Escape" && event.key != null){
+            //Toggle prompt
+            this.toggleDescriptionPrompt(false);
+            return;
         }
 
+        //Stop newline from being processed
+        event.preventDefault();
+
+        //Set Description
+        const data = await utils.ajax.setChannelDescription(this.channel, this.descriptionInput.value);
+
+        //Unescape entities from server-side sanatization and safely put the newly made un-safe text inside of the element via .textContent.
+        //Ensuring sanatized content displays proper, and that any unsanatized content that some how made it through is still safe.
+        this.description.textContent = utils.unescapeEntities(data.description);
+
         //Toggle prompt
         this.toggleDescriptionPrompt(false);
-
-        //Only returns after this point
-        if(event.key != "Enter" && !event.shiftKey && event.key != null){
-            return;
-        }
     }
 }
 

www/js/utils.js

@@ -690,7 +690,7 @@ class canopyAjaxUtils{
 
     constructor(){
 
-    } 
+    }
 
     //Account
     async register(user, pass, passConfirm, email, verification){
@@ -872,6 +872,40 @@ class canopyAjaxUtils{
         }
     }
 
+    async setChannelThumbnail(chanName, thumbnail){
+        var response = await fetch(`/api/channel/thumbnail`,{
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "x-csrf-token": utils.ajax.getCSRFToken()
+            },
+            body: JSON.stringify({chanName, thumbnail})
+        });
+
+        if(response.ok){
+            return await response.json();
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
+
+    async setChannelDescription(chanName, description){
+        var response = await fetch(`/api/channel/description`,{
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "x-csrf-token": utils.ajax.getCSRFToken()
+            },
+            body: JSON.stringify({chanName, description})
+        });
+
+        if(response.ok){
+            return await response.json();
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
+
     async setChannelSetting(chanName, settingsMap){
         var response = await fetch(`/api/channel/settings`,{
             method: "POST",