Gave profile page a facelift in perperation for email/password update pop-ups.

2024-12-31 06:50:34 -05:00 · 2024-12-31 06:50:34 -05:00 · c32f3df3f3
parent a51152a89d
commit c32f3df3f3
16 changed files with 316 additions and 157 deletions
--- a/src/controllers/api/account/updateController.js
+++ b/src/controllers/api/account/updateController.js
@ -27,6 +27,7 @@ module.exports.post = async function(req, res){
    const data = matchedData(req);
    var tempResult = [];

+    //This is gross and quite honestly password changes should be their own endpoint anyways
    //if we're not chaning the password
    if(data.passChange == null){
        //go through validation errors
@ -48,6 +49,7 @@ module.exports.post = async function(req, res){
            const userDB = await userModel.findOne(user);
            const update = {};

+
            if(userDB){
                if(data.img){
                    userDB.img = data.img;
@ -64,6 +66,15 @@ module.exports.post = async function(req, res){
                    update.signature = data.signature;
                }

+                if(data.pronouns != null){
+                    userDB.pronouns = data.pronouns;
+                    if(data.pronouns == ''){
+                        update.pronouns = "Unset/Hidden";
+                    }else{
+                        update.pronouns = data.pronouns;
+                    }
+                }
+
                if(data.passChange){
                    //kill active session to prevent connect-mongo from freaking out
                    accountUtils.killSession(req.session);
--- a/src/routers/api/accountRouter.js
+++ b/src/routers/api/accountRouter.js
@ -46,6 +46,7 @@ router.post('/register', accountValidator.user(),
 router.post('/update', accountValidator.img(),
    accountValidator.bio(),
    accountValidator.signature(),
+    accountValidator.pronouns(),
    accountValidator.pass('passChange.oldPass'),
    accountValidator.securePass('passChange.newPass'),
    accountValidator.pass('passChange.confirmPass'), updateController.post);
--- a/src/schemas/user/userSchema.js
+++ b/src/schemas/user/userSchema.js
@ -435,6 +435,7 @@ userSchema.methods.getProfile = function(){
        tokeCount: this.getTokeCount(),
        img: this.img,
        signature: this.signature,
+        pronouns: this.pronouns,
        bio: this.bio
    };

--- a/src/validators/accountValidator.js
+++ b/src/validators/accountValidator.js
@ -32,6 +32,8 @@ module.exports = {

    img: (field = 'img') => body(field).optional().isURL({require_tld: false, require_host: false}).trim(),

+    pronouns: (field = 'pronouns') => body(field).optional().escape().trim().isLength({min: 0, max: 15}),
+
    signature: (field = 'signature') => body(field).optional().escape().trim().isLength({min: 1, max: 150}),

    bio: (field = 'bio') => body(field).optional().escape().trim().isLength({min: 1, max: 1000}),
--- a/src/views/partial/profile/bio.ejs
+++ b/src/views/partial/profile/bio.ejs
@ -13,9 +13,12 @@ GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<span class="profile-item" id="profile-bio">
-<p class="profile-item profile-item-label" id="profile-bio-label">Bio: <span class="profile-content" id="profile-bio-content"><%- profile.bio %></span></p>
+<span class="profile-bio-span">
+        <h4 id="profile-bio-label" class="profile-item-label">Bio:</h4>
    <% if(selfProfile){ %>
-    <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-bio-edit" href="javascript:">edit</a>)</p>
+        <p class="profile-item interactive" id="profile-bio-content"><%- profile.bio %></p>
+        <textarea class="profile-item-prompt" id="profile-bio-prompt"></textarea>
+    <% }else{ %>
+        <p class="profile-item" id="profile-bio-content"><%- profile.bio %></p>
    <% } %>
 </span>
--- a/src/views/partial/profile/date.ejs
+++ b/src/views/partial/profile/date.ejs
@ -13,4 +13,6 @@ GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<p class="profile-item" id="profile-creation-date">Joined: <%- profile.date.toUTCString(); %></p>
+<span class="profile-item">
+    <p class="profile-item" id="profile-creation-date" title="<%- profile.date.toUTCString() %>">Joined: <%- profile.date.toLocaleDateString(); %></p>
+</span>
--- a/src/views/partial/profile/image.ejs
+++ b/src/views/partial/profile/image.ejs
@ -13,7 +13,9 @@ GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<img class="profile-item" id="profile-img" src="<%- profile.img  %>">
+<div class="profile-item" id="profile-img">
+    <img class="profile-item" id="profile-img-content" src="<%- profile.img  %>">
    <% if(selfProfile){ %>
-    <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-img-edit" href="javascript:">edit</a>)</p>
+            <input class="profile-item-prompt" id="profile-img-prompt">
    <% } %>
+</div>
--- a/src/views/partial/profile/pronouns.ejs
+++ b/src/views/partial/profile/pronouns.ejs
@ -0,0 +1,33 @@
+<%# Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
+
+<%# If pronons are unset and the user is viewing their own profile %>
+<% if((profile.pronouns == null || profile.pronouns == "") && selfProfile){ %>
+    <span class="profile-item profile-item-oneliner">
+        <p class="profile-item profile-item-oneliner" id="profile-pronouns">Pronouns: <span class="profile-content interactive" id="profile-pronouns-content">Unset/Hidden</span></p> 
+        <input class="profile-item-prompt" id="profile-pronouns-prompt">
+    </span>
+<%# If pronons are set regardless of who's profile %>
+<% }else if(profile.pronouns != null && profile.pronouns != ""){ %>
+    <span class="profile-item profile-item-oneliner">
+        <% if(selfProfile){ %>
+            <p class="profile-item profile-item-oneliner" id="profile-pronouns">Pronouns: <span class="profile-content interactive" id="profile-pronouns-content"><%- profile.pronouns %></span></p> 
+            <input class="profile-item-prompt" id="profile-pronouns-prompt">
+        <% }else{ %>
+            <p class="profile-item profile-item-oneliner" id="profile-pronouns">Pronouns: <span class="profile-content" id="profile-pronouns-content"><%- profile.pronouns %></span></p> 
+        <% } %>
+    </span>
+<% } %>
--- a/src/views/partial/profile/settings.ejs
+++ b/src/views/partial/profile/settings.ejs
@ -13,15 +13,11 @@ GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<div class="account-settings" id="account-settings-div">
+<div class="account-settings dynamic-container" id="account-settings-div">
    <h3 class="account-settings" id="account-settings-label">Account Settings</h3>
-    <span class="account-settings-password-reset" id="account-settings-password-reset-div">
-        <h4 class="account-settings-password-reset" id="account-settings-password-reset-label">Password Reset:</h4>
-        <input class="account-settings-password-reset" id="account-settings-password-reset-old" placeholder="Current Password" type="password">
-        <input class="account-settings-password-reset" id="account-settings-password-reset-new" placeholder="New Password" type="password">
-        <input class="account-settings-password-reset" id="account-settings-password-reset-confirm" placeholder="Confirm New Password" type="password">
-    </span>
-    <span class="account-settings" id="account-settings-delete">
+    <span class="account-settings" id="account-settings-buttons">
+        <button href="javascript:" class="account-settings positive-button" id="account-settings-update-email-button">Update Email</button>
+        <button href="javascript:" class="account-settings positive-button" id="account-settings-change-password-button">Change Password</button>
        <button href="javascript:" class="account-settings danger-button" id="account-settings-delete-button">Delete Account</button>
    </span>
 </div>
--- a/src/views/partial/profile/signature.ejs
+++ b/src/views/partial/profile/signature.ejs
@ -13,9 +13,11 @@ GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
-<span class="profile-item" id="profile-signature">
-    <p class="profile-item profile-item-label" id="profile-signature-label">Signature: <span class="profile-content" id="profile-signature-content"><%- profile.signature %></span></p> 
+<span class="profile-item">
    <% if(selfProfile){ %>
-        <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-signature-edit" href="javascript:">edit</a>)</p>
+        <p class="profile-item profile-item-oneliner" id="profile-signature">Signature: <span class="profile-content interactive" id="profile-signature-content"><%- profile.signature %></span></p> 
+        <input class="profile-item-prompt" id="profile-signature-prompt">
+    <% }else{ %>
+        <p class="profile-item profile-item-oneliner" id="profile-signature">Signature: <span class="profile-content" id="profile-signature-content"><%- profile.signature %></span></p> 
    <% } %>
 </span>
--- a/src/views/partial/profile/tokeCount.ejs
+++ b/src/views/partial/profile/tokeCount.ejs
@ -14,10 +14,10 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
 <span class="profile-item profile-toke-count">
-    <p class="profile-item profile-toke-count">tokes: <%- profile.tokeCount %> </p>
-    <i class="profile-item bi-caret-left-fill profile-toke-count" id="toggle-toke-list"></i>
+    <p class="profile-item profile-toke-count interactive">Toke Count: (<%- profile.tokeCount %> Total) </p>
+    <i class="-item bi-caret-left-fill profile-toke-count" id="toggle-toke-list"></i>
 </span>
-<div class="profile-item dynamic-container" id="profile-tokes">
+<div class="profile-item nested-dynamic-container" id="profile-tokes">
    <% profile.tokes.forEach((count, toke) => { %>
        <p class="profile-item profile-toke" id='profile-tokes<%-toke%>'>!<%- toke %>: <%- count %></p>
    <% }); %>
--- a/src/views/profile.ejs
+++ b/src/views/profile.ejs
@ -29,18 +29,25 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
    <body>
        <%- include('partial/navbar', {user}); %>
        <% if(profile){ %>
-            <div class="profile" id="profile-div">
+            <div id="account">
+                <div class="profile dynamic-container" id="profile-div">
+                    <span id="profile-info" class="profile">
                        <h1 class="profile-item" id="profile-username"><%- profile.user %></h1>
                        <%- include('partial/profile/image', {profile, selfProfile}); %>
-                <%- include('partial/profile/tokeCount', {profile, selfProfile}); %>
+                        <%- include('partial/profile/pronouns', {profile, selfProfile}); %> 
                        <%- include('partial/profile/signature', {profile, selfProfile}); %> 
-                <%- include('partial/profile/bio', {profile, selfProfile}); %> 
+                        <%- include('partial/profile/tokeCount', {profile, selfProfile}); %>
                        <%- include('partial/profile/date', {profile, selfProfile}); %> 
+                    </span>
+                    <span id="profile-info-aux" class="profile">
+                        <%- include('partial/profile/bio', {profile, selfProfile}); %> 
                        <%- include('partial/profile/badges', {profile, selfProfile}); %> 
+                    </span>
                </div>
                <% if(selfProfile){ %>
                    <%- include('partial/profile/settings', {profile, selfProfile}); %> 
                <% } %>
+            </div>
        <% }else if(user){ %>
            <h1 class="profile-item" id="profile-error-label">Profile not found!</h1>
        <% } else {%>
--- a/www/css/global.css
+++ b/www/css/global.css
@ -65,7 +65,7 @@ input.control-prompt{
    flex: 1;
 }

-div.dynamic-container{
+div.dynamic-container, div.nested-dynamic-container{
    overflow: auto;
 }

--- a/www/css/profile.css
+++ b/www/css/profile.css
@ -13,53 +13,96 @@ GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+#account{
+    display: flex;
+    margin-top: 2em;
+    justify-content: space-evenly;
+}

-p.profile-item-edit{
-    display: inline;
+#profile-div{
+    display: flex;
+    padding: 1em;
+    flex-direction: row;
+    overflow-y: hidden;
+}
+
+#profile-info{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+}
+
+#profile-info-aux{
+    flex: 2;
+    margin: 0 1em;
+}
+
+#account-settings-div{
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+}
+
+#account-settings-buttons{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex: 1;
+}
+
+#profile-username{
+    margin: 0;
+}
+
+#profile-img{
+    position: relative;
+}
+
+#profile-img-content{
+    margin: 1em 0;
+}
+
+#profile-img-prompt{
+    position: absolute;
+    left: -2em;
+    right: -2em;
+    top: calc(50% - 1.3em);
+}
+
+.profile-toke-count{
+    margin: 0;
 }

 span.profile-item{
-    display: block;
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
-p.profile-item-label{
-    display: inline;
-}
-
-span.account-settings{
-    display: block;
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
-input.account-settings-password-reset{
-    display: block;
-}
-
-a#account-settings-delete-button{
-    font-weight: bold;
-}
-
-span.profile-toke-count{
    display: flex;
    flex-direction: row;
    width: fit-content;
+    margin: 0.2em;
 }

-p.profile-toke-count{
+p.profile-item{
    margin: 0;
 }

+span.profile-item-oneliner{
+    text-wrap: nowrap
+}
+
+.profile-item-prompt{
+    display: none;
+}
+
 #profile-tokes{
    resize: vertical;
-    max-width: fit-content;
+    width: fit-content;
    height: fit-content;
    min-height: 1.5em;
    max-height: 5.8em;
-    display: none;
+    padding: 0.5em 0;
    border-bottom-right-radius: 0;
+    text-wrap: nowrap;
+    visibility: collapse;
 }

 /*Little hacky but this keeps initial max-height from fucking up resizing*/
@ -70,3 +113,22 @@ p.profile-toke-count{
 .profile-toke{
    margin: 0.2em 1em;
 }
+
+#profile-bio-label{
+    margin-bottom: 0.2em;
+}
+
+#profile-bio-content{
+    width: 30VW;
+}
+
+#profile-bio-prompt{
+    width: 30VW;
+    height: 11em;
+    resize: vertical;
+}
+
+/* temp */
+input:not([type="checkbox"]):not(.navbar-item):not(.profile-item-prompt){
+    display: block;
+}
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@ -187,10 +187,23 @@ textarea{
 .dynamic-container{
    background-color: var(--bg1);
    color: var(--accent1);
+}
+
+.nested-dynamic-container{
+    border: 1px var(--accent1) solid;
+    background-color: var(--bg0);
+    color: var(--accent0);
+}
+
+.dynamic-container, .nested-dynamic-container{
    box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
    border-radius: 1em;
 }

+.dynamic-container a{
+    color: var(--accent1);
+}
+

 tr{
    box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
--- a/www/js/profile.js
+++ b/www/js/profile.js
@ -14,104 +14,125 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/

-//Base Class
-class profileEditPrompt{
-    constructor(field, content, useTextArea = false){
+class profileUpdatePrompt{
+    constructor(field){
        this.field = field;
-        this.useTextArea = useTextArea;
-        this.content = content;
-        this.link = document.querySelector(`#profile-${field}-edit`);
+        this.contentNode =  document.querySelector(`#profile-${field}-content`);
+        this.promptNode = document.querySelector(`#profile-${field}-prompt`);

-        //Bail out if something ain't right
-        if(!this.link || !this.content){
-            return;
-        }
-
-        this.setupPrompt();
-    }
-
-    setupPrompt(){
-        if(this.link != null){
-            this.link.addEventListener("click", this.prompt.bind(this));
+        if(this.promptNode != null){
+            this.setupInput();
        }
    }
    
-    prompt(){
-        //Create input element
-        if(this.useTextArea){
-            this.prompt = document.createElement("textArea");
+    setupInput(){
+        this.contentNode.addEventListener('click', this.popPrompt.bind(this));
+        this.promptNode.addEventListener('keydown', this.closePrompt.bind(this));
+    }
+
+    popPrompt(){
+        this.promptNode.style.display = 'inline';
+        this.promptNode.focus();
+    }
+
+    closePrompt(event){
+        //Check if we're finished
+        const fin = event.key == "Escape" || event.key == "Enter";
+
+        //IF we are
+        if(fin){
+            //Display the prompt
+            this.promptNode.style.display = 'none';
+        }
+
+        //Return whether or not we're done
+        return fin;
+    }
+}
+
+class profileUpdateTextPrompt extends profileUpdatePrompt{
+    constructor(field, fillPrompt = false){
+        //call derived constructor
+        super(field);
+
+        //Set fill prompt
+        this.fillPrompt = fillPrompt;
+    }
+
+    popPrompt(){
+        //Call derived method
+        super.popPrompt();
+
+        //If we're filling the prompt
+        if(this.fillPrompt){
+            //Fill the prompt content and placeholder
+            this.promptNode.value = this.contentNode.textContent;
+            this.promptNode.placeholder = this.field;
+        //otherwise
        }else{
-            this.prompt = document.createElement("input");
+            //Just fill the placeholder
+            this.promptNode.placeholder = this.contentNode.textContent;
        }

-        //Setup properties
-        this.prompt.id = `profile-${this.field}-prompt`;
-        this.prompt.classList.add("profile-edit-prompt");
-        if(this.field == "img"){
-            this.prompt.placeholder = this.content.src;
-        }else{
-            this.prompt.placeholder = this.content.innerHTML;
+        //Hide content
+        this.contentNode.style.display = 'none';
    }

-        //Setup event listener
-        this.prompt.addEventListener("keydown", this.update.bind(this));
+    async closePrompt(event){
+        //Call derived constructor and check if we're finished, assuming we're finished...
+        if(super.closePrompt(event)){
+            //Display
+            this.contentNode.style.display = 'inline-block';

-        //replace label
-        this.content.replaceWith(this.prompt);
-    }
+            //If we're not cancelling
+            if(event.key == "Enter"){
+                //Create empty update object
+                let updateObj = {};

-    async update(event){
-        if((!event || event.key == "Enter") && this.prompt.value){
-            //setup object
-            var updateObj = {};
-            updateObj[this.field] = this.prompt.value;
+                //Fill field
+                updateObj[this.field] = this.promptNode.value;

-            //contact server, and collect response
-            var updated_content = (await utils.ajax.updateProfile(updateObj))[this.field];
+                //Send er' off
+                const update = await utils.ajax.updateProfile(updateObj);

-            //Update label
-            if(updated_content != null){
-                if(this.field == "img"){
-                    this.content.src = updated_content;
-                }else{
-                    this.content.innerHTML = updated_content;
+                //Fill content from update
+                this.contentNode.innerHTML = update[this.field];
            }
        }
-            this.finish();
-        }else if(event.key == "Escape" || event.key == "Enter"){
-            this.finish();
    }
 }

-    finish(){
-        this.prompt.replaceWith(this.content);
-    }
-}
-
-class profileTextEditPrompt extends profileEditPrompt{
-    constructor(field, useTextArea = false){
-        //Get content based on field name
-        var content = document.querySelector(`#profile-${field}-content`);
-        //Derived Constructor
-        super(field, content, useTextArea);
-    }
-
-    prompt(){
-        super.prompt();
-    }
-
-    async update(event){
-        await super.update(event)
-    }
-}
-
-//Child Classes
-class profileImgEditPrompt extends profileEditPrompt{
+class profileUpdateImagePrompt extends profileUpdatePrompt{
    constructor(){
-        //Get content based on field name
-        var content = document.querySelector(`#profile-img`);
-        //Derived constructor
-        super("img", content, false);
+        //call derived constructor
+        super('img');
+    }
+
+    popPrompt(){
+        //Call derived method
+        super.popPrompt();
+
+        this.promptNode.placeholder = this.contentNode.src;
+    }
+
+    async closePrompt(event){
+        //Call derived constructor
+        super.closePrompt(event);
+
+        //If we're not cancelling
+        if(event.key == "Enter"){
+            //Create empty update object
+            let updateObj = {};
+
+            //Fill field
+            updateObj[this.field] = this.promptNode.value;
+
+            //Send er' off
+            const update = await utils.ajax.updateProfile(updateObj);
+
+            //Fill content from update
+            this.contentNode.src = update[this.field];
+        }
    }
 }

@ -169,11 +190,11 @@ class tokeList{
    }

    toggleTokeList(){
-        if(this.tokeList.checkVisibility()){
-            this.tokeList.style.display = "none";
+        if(this.tokeList.style.visibility == "visible"){
+            this.tokeList.style.visibility = "collapse";
            this.tokeListToggleIcon.classList.replace("bi-caret-down-fill","bi-caret-left-fill");
        }else{
-            this.tokeList.style.display = "block";
+            this.tokeList.style.visibility = "visible";
            this.tokeListToggleIcon.classList.replace("bi-caret-left-fill","bi-caret-down-fill");
        }
    }
@ -183,8 +204,10 @@ class deleteAccountButton{
    constructor(){
        this.deleteLink = document.querySelector('#account-settings-delete-button');

+        if(this.deleteLink != null){
            this.setupInput();
        }
+    }

    setupInput(){
        this.deleteLink.addEventListener("click",this.deletePrompt.bind(this));
@ -218,9 +241,10 @@ class deleteAccountPopup{
 }

 //Object Instantiation
-new profileTextEditPrompt("signature");
-new profileTextEditPrompt("bio", true);
-new profileImgEditPrompt();
-new tokeList();
-new passwordResetPrompt();
-new deleteAccountButton();
+const imgPrompt = new profileUpdateImagePrompt();
+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();