Finished up with email verification system and profile page redux.

www/js/profile.js

@@ -37,7 +37,7 @@ class profileUpdatePrompt{
 
     closePrompt(event){
         //Check if we're finished
-        const fin = event.key == "Escape" || event.key == "Enter";
+        const fin = event.key == "Escape" || (event.key == "Enter" && !event.shiftKey);
 
         //IF we are
         if(fin){
@@ -63,6 +63,12 @@ class profileUpdateTextPrompt extends profileUpdatePrompt{
         //Call derived method
         super.popPrompt();
 
+        //For each line break
+        this.contentNode.querySelectorAll('br').forEach((br)=>{
+            //Replace the linenreaks with newlines to get the text area to play nice
+            br.outerHTML = "\n"
+        });
+
         //If we're filling the prompt
         if(this.fillPrompt){
             //Fill the prompt content and placeholder
@@ -85,7 +91,7 @@ class profileUpdateTextPrompt extends profileUpdatePrompt{
             this.contentNode.style.display = 'inline-block';
 
             //If we're not cancelling
-            if(event.key == "Enter"){
+            if(event.key == "Enter" && !event.shiftKey){
                 //Create empty update object
                 let updateObj = {};
 
@@ -95,8 +101,8 @@ class profileUpdateTextPrompt extends profileUpdatePrompt{
                 //Send er' off
                 const update = await utils.ajax.updateProfile(updateObj);
 
-                //Fill content from update
-                this.contentNode.innerHTML = update[this.field];
+                //Fill content from update, make sure to add line breaks for the bio
+                this.contentNode.innerHTML = update[this.field].replaceAll('\n','<br>');
             }
         }
     }
@@ -200,9 +206,10 @@ class tokeList{
     }
 }
 
-class deleteAccountButton{
-    constructor(){
-        this.deleteLink = document.querySelector('#account-settings-delete-button');
+class accountSettingsButton{
+    constructor(field, popupClass){
+        this.deleteLink = document.querySelector(`#account-settings-${field}-button`);
+        this.popupClass = popupClass;
 
         if(this.deleteLink != null){
             this.setupInput();
@@ -210,11 +217,74 @@ class deleteAccountButton{
     }
 
     setupInput(){
-        this.deleteLink.addEventListener("click",this.deletePrompt.bind(this));
+        this.deleteLink.addEventListener("click",this.showPopup.bind(this));
     }
 
-    async deletePrompt(event){
-        this.popup = new deleteAccountPopup();
+    async showPopup(event){
+        this.popup = new this.popupClass();
+    }
+}
+
+class changeEmailPopup{
+    constructor(){
+        this.popup = new canopyUXUtils.popup("changeEmail", true, this.asyncConstructor.bind(this), this.asyncConstructor);
+    }
+
+    asyncConstructor(){
+        this.emailPrompt = document.querySelector('#email-change-popup-email');
+        this.passPrompt = document.querySelector('#email-change-popup-password');
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.emailPrompt.addEventListener('keydown', this.emailRequest.bind(this));
+        this.passPrompt.addEventListener('keydown', this.emailRequest.bind(this));
+    }
+
+    async emailRequest(event){
+        if(event.key == "Enter"){
+            await utils.ajax.requestEmailChange(this.emailPrompt.value, this.passPrompt.value); 
+        }
+    }
+}
+
+class changePasswordPopup{
+    constructor(){
+        this.popup = new canopyUXUtils.popup("changePassword", true, this.asyncConstructor.bind(this), this.asyncConstructor);
+    }
+
+    asyncConstructor(){
+        this.oldPassPrompt = document.querySelector('#password-change-popup-old-password');
+        this.newPassPrompt = document.querySelector('#password-change-popup-new-password');
+        this.confirmPassPrompt = document.querySelector('#password-change-popup-confirm-new-password');
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.oldPassPrompt.addEventListener('keydown', this.emailRequest.bind(this));
+        this.newPassPrompt.addEventListener('keydown', this.emailRequest.bind(this));
+        this.confirmPassPrompt.addEventListener('keydown', this.emailRequest.bind(this));
+    }
+
+    async emailRequest(event){
+        if(event.key == "Enter"){
+            const updateObj = {};
+
+            updateObj.passChange = {
+                oldPass: this.oldPassPrompt.value,
+                newPass: this.newPassPrompt.value,
+                confirmPass: this.confirmPassPrompt.value
+            };
+
+            const response = await utils.ajax.updateProfile(updateObj);
+
+            if(response != null){
+                //Return user homepage after good pass change, as we've probably been logged out by the server for security.
+                window.location.pathname = '/';
+            }
+        }
     }
 }
 
@@ -246,5 +316,6 @@ const pronounsPrompt = new profileUpdateTextPrompt('pronouns');
 const signaturePrompt = new profileUpdateTextPrompt('signature');
 const bioPrompt = new profileUpdateTextPrompt('bio', true);
 const profileTokeList = new tokeList();
-const accountPassResetPrompt = new passwordResetPrompt();
-const accountDeleteButton = new deleteAccountButton();
+const accountEmailChange = new accountSettingsButton('update-email', changeEmailPopup);
+const accountPasswordChange = new accountSettingsButton('change-password', changePasswordPopup);
+const accountDeleteButton = new accountSettingsButton('delete', deleteAccountPopup);