Fixed forwarding bug + add group management button

qortal-ui-core/language/us.json

@@ -565,7 +565,10 @@
       "cchange56": "Transaction Failed!",
       "cchange57": "User Info",
       "cchange58": "SEND MESSAGE",
-      "cchange59": "TIP USER"
+      "cchange59": "TIP USER",
+      "cchange60": "Group Invites Pending",
+      "cchange61": "Error when fetching group invites. Please try again!",
+      "cchange62": "Wrong Username and Address Inputted! Please try again!"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

qortal-ui-plugins/plugins/core/components/ChatGroupsManagement.js

@@ -229,9 +229,9 @@ class ChatGroupsManagement extends LitElement {
 
   render() {
     return html`
-         <vaadin-icon @click=${()=> {
+         <!-- <vaadin-icon @click=${()=> {
             this.isOpenLeaveModal = true
-         }} class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon>
+         }} class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon> -->
          <!-- Leave Group Dialog -->
          <wrapper-modal 
                 .removeImage=${() => {

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -1061,10 +1061,12 @@ class ChatPage extends LitElement {
                                     id="sendTo" 
                                     placeholder="${translate("chatpage.cchange7")}" 
                                     @keydown=${() => {
+                                        if (this.forwardActiveChatHeadUrl.selected) {
                                             this.forwardActiveChatHeadUrl = {};
                                             this.requestUpdate();
                                             } 
                                         }
+                                    }
                                 />
                                 ${this.forwardActiveChatHeadUrl.selected ? (
                                     html`
@@ -1234,7 +1236,8 @@ class ChatPage extends LitElement {
         const nameValue = this.shadowRoot.getElementById('sendTo').value;
             if (!nameValue) {
                 this.userFound = [];
-                this.userFoundModalOpen = true;
+                this.userFoundModalOpen = false;
+                this.loading = false;
                 return;
             }
             try {
@@ -1244,6 +1247,7 @@ class ChatPage extends LitElement {
                 })
                 if (result.error === 401) {
                     this.userFound = [];
+                    this.loading = false;
                 } else {
                     this.userFound = [
                         ...this.userFound, 
@@ -1252,6 +1256,7 @@ class ChatPage extends LitElement {
                 }
                 this.userFoundModalOpen = true;
             } catch (error) {
+                this.loading = false;
                 console.error(error);
                 let err4string = get("chatpage.cchange35");
                 parentEpml.request('showSnackBar', `${err4string}`)
@@ -2403,7 +2408,7 @@ async getName (recipient) {
             };
 
             if (this.forwardActiveChatHeadUrl.url) { 
-                const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1]           
+                const activeChatHeadAddress = this.forwardActiveChatHeadUrl.url.split('/')[1];        
                 try {
                     const res = await parentEpml.request('apiCall', {
                         type: 'api',
@@ -2425,21 +2430,58 @@ async getName (recipient) {
                }
             }
     
-            if (!this.forwardActiveChatHeadUrl && this.shadowRoot.getElementById("sendTo").value !== "") {
+            if (!this.forwardActiveChatHeadUrl.selected && this.shadowRoot.getElementById("sendTo").value !== "") {
+                const userInput = this.shadowRoot.getElementById("sendTo").value.trim();
                 try {
-                    const res =   await parentEpml.request('apiCall', {
+                    let userPubkey = "";
+                    const validatedAddress = await parentEpml.request('apiCall', {
                         type: 'api',
-                        url: `/addresses/publickey/${this.shadowRoot.getElementById("sendTo").value}`
+                        url: `/addresses/validate/${userInput}`
-                    })
+                    });
-                    if (res.error === 102) {
+
-                        publicKey.key = ''
+                    const validatedUsername = await parentEpml.request('apiCall', {
-                        publicKey.hasPubKey = false
+                        type: 'api',
-                    } else if (res !== false) {
+                        url: `/names/${userInput}`
-                        publicKey.key = res
+                    });
-                        publicKey.hasPubKey = true
+
+                    if (!validatedAddress && validatedUsername) {
+                        userPubkey = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/addresses/publickey/${validatedUsername.owner}`
+                        });
+                        this.forwardActiveChatHeadUrl = {
+                            ...this.forwardActiveChatHeadUrl,
+                            url: `direct/${validatedUsername.owner}`,
+                            name: validatedUsername.name,
+                            selected: true
+                        };
+                    } else if (validatedAddress && !validatedUsername.name) {
+                        userPubkey = await parentEpml.request('apiCall', {
+                            type: 'api',
+                            url: `/addresses/publickey/${userInput}`
+                        });
+                        this.forwardActiveChatHeadUrl = {
+                            ...this.forwardActiveChatHeadUrl,
+                            url: `direct/${userInput}`,
+                            name: "",
+                            selected: true
+                        };
+                    } else if (!validatedAddress && !validatedUsername.name) {
+                        let err4string = get("chatpage.cchange62");
+                        parentEpml.request('showSnackBar', `${err4string}`);
+                        getSendChatResponse(false);
+                        return;
+                    }
+
+                    if (userPubkey.error === 102) {
+                        publicKey.key = '';
+                        publicKey.hasPubKey = false;
+                    } else if (userPubkey !== false) {
+                        publicKey.key = userPubkey;
+                        publicKey.hasPubKey = true;
                     } else {
-                        publicKey.key = ''
+                        publicKey.key = '';
-                        publicKey.hasPubKey = false
+                        publicKey.hasPubKey = false;
                     }
                 } catch (error) {
                     console.error(error);
@@ -2454,9 +2496,9 @@ async getName (recipient) {
             if (isRecipient === true) {
                 if(!publicKey.hasPubKey){
                     let err4string = get("chatpage.cchange39");
-                    parentEpml.request('showSnackBar', `${err4string}`)
+                    parentEpml.request('showSnackBar', `${err4string}`);
-                    getSendChatResponse(false)
+                    getSendChatResponse(false);
-                    return
+                    return;
                 }
                 let chatResponse = await parentEpml.request('chat', {
                     type: 18,
@@ -2545,6 +2587,8 @@ async getName (recipient) {
             } else {
                 let err2string = get("chatpage.cchange21");
                 parentEpml.request('showSnackBar', `${err2string}`);
+                this.forwardActiveChatHeadUrl = {};
+                this.shadowRoot.getElementById("sendTo").value = "";
             }
 
             this.isLoading = false;

qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js

@@ -62,7 +62,7 @@ export class UserInfo extends LitElement {
 
   render() {
     let avatarImg = "";
-    if (this.selectedHead.name) {
+    if (this.selectedHead && this.selectedHead.name) {
         const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
         const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
         const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.selectedHead.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
@@ -85,7 +85,7 @@ export class UserInfo extends LitElement {
               ${avatarImg}
             </div>` : 
           html``}
-          ${!this.isImageLoaded && this.selectedHead.name ? 
+          ${!this.isImageLoaded && this.selectedHead && this.selectedHead.name ? 
             html`
             <div class="avatar-container">
               <div class="user-info-no-avatar">
@@ -94,16 +94,14 @@ export class UserInfo extends LitElement {
             </div>
             `
             : ""}
-          ${!this.isImageLoaded && !this.selectedHead.name ? 
+          ${!this.isImageLoaded && this.selectedHead && !this.selectedHead.name ? 
             html`
-              <div
+              <div class="avatar-container">
-                class="avatar-container"
-              >
                 <img src="/img/qortal-chat-logo.png" alt="avatar" />
               </div>`
             : ""}
         <div class="user-info-header">
-          ${this.selectedHead.name ? this.selectedHead.name : cropAddress(this.selectedHead.address)}
+          ${this.selectedHead && this.selectedHead.name ? this.selectedHead.name : this.selectedHead ? cropAddress(this.selectedHead.address) : null}
         </div>
         <div 
             class="send-message-button" 

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat-css.src.js

@@ -54,10 +54,103 @@ export const qchatStyles = css`
       position: absolute;
       bottom: 0;
       width: 20vw;
-      height: 60px;
       background: var(--white);
       border-top: 1px solid var(--border);
       border-right: 3px #ddd solid;
+      display: flex;
+      justify-content: space-between;
+      gap: 15px;
+      flex-direction: column;
+      padding: 5px 30px 0 30px;
+  }
+
+  .groups-button-container {
+    position: relative;
+  }
+
+  .groups-button {
+    width: 100%;
+    background-color: rgb(116, 69, 240);
+    border: none;
+    color: white;
+    font-weight: bold;
+    font-family: 'Roboto';
+    letter-spacing: 0.8px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    gap: 10px;
+    padding: 5px 8px;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .groups-button-notif {
+    position: absolute;
+    top: -10px;
+    right: -8px;
+    width: 25px;
+    border-radius: 50%;
+    height: 25px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Montserrat, sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    background-color: rgb(51, 213, 0);
+    user-select: none;
+    transition: all 0.3s ease-in-out 0s;
+  }
+
+  .groups-button-notif:hover {
+    cursor: auto;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  }
+
+  .groups-button-notif:hover + .groups-button-notif-number {
+    display: block;
+    opacity: 1;
+    animation: fadeIn 0.6s;
+}       
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        top: -10px;
+    }
+    
+    to {
+        opacity: 1;
+        top: -60px;
+    }
+}
+
+  .groups-button-notif-number {
+    position: absolute;
+    transform: translateX(-50%);
+    left: 50%;
+    width: 150px;
+    text-align: center;
+    border-radius: 3px;
+    padding: 5px 10px;
+    background-color: white;
+    color: black;
+    font-family: Roboto, sans-serif;
+    letter-spacing: 0.3px;
+    font-weight: 300;
+    display: none;
+    opacity: 0;
+    top: -60px;
+    box-shadow: rgb(216 216 216 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
+  }
+
+  .groups-button:hover {
+    cursor: pointer;
+    filter: brightness(120%);
   }
 
   .people-list .search {

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -47,7 +47,8 @@ class Chat extends LitElement {
             openPrivateMessage: { type: Boolean },
             userFound: { type: Array},
             userFoundModalOpen: { type: Boolean },
-            userSelected: { type: Object }
+            userSelected: { type: Object },
+            groupInvites: { type: Array }
         }
     }
 
@@ -86,6 +87,7 @@ class Chat extends LitElement {
         this.userFound = []
         this.userFoundModalOpen = false
         this.userSelected = {}
+        this.groupInvites = []
     }
 
   async setActiveChatHeadUrl(url) {
@@ -109,9 +111,30 @@ class Chat extends LitElement {
                         ${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
                     </ul>
                     <div class="blockedusers">
-                        <div class="center">
+                        <div class="groups-button-container">
-                            <mwc-button raised label="${translate("chatpage.cchange3")}" icon="person_off" @click=${() => this.shadowRoot.querySelector('#blockedUserDialog').show()}></mwc-button>
+                            <a href="/app/group-management">
+                                <button class="groups-button">
+                                    <mwc-icon>groups</mwc-icon>
+                                    ${translate("sidemenu.groupmanagement")}
+                                </button>
+                            </a>
+                            ${this.groupInvites.length > 0 ? (
+                                html`                                
+                                <div class="groups-button-notif">
+                                   ${this.groupInvites.length} 
                                 </div>
+                                <div class="groups-button-notif-number">
+                                    ${this.groupInvites.length} ${translate("chatpage.cchange60")}
+                                </div>
+                                `
+                            ) : null} 
+                        </div>
+                        <mwc-button 
+                            raised 
+                            label="${translate("chatpage.cchange3")}" 
+                            icon="person_off" 
+                            @click=${() => this.shadowRoot.querySelector('#blockedUserDialog').show()}>
+                        </mwc-button>
                     </div>
                 </div>
                 <div class="chat">
@@ -271,11 +294,12 @@ class Chat extends LitElement {
         `
     }
 
-    firstUpdated() {
+   async firstUpdated() {
-        this.changeLanguage()
+        this.changeLanguage();
-        this.changeTheme()
+        this.changeTheme();
-        this.getChatBlockedList()
+        this.getChatBlockedList();
-        this.getLocalBlockedList()
+        this.getLocalBlockedList();
+       await this.getPendingGroupInvites();
 
         const getBlockedUsers = async () => {
             let blockedUsers = await parentEpml.request('apiCall', {
@@ -672,6 +696,20 @@ class Chat extends LitElement {
         })
     }
 
+   async getPendingGroupInvites() {
+      const myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+        try {
+            let pendingGroupInvites = await parentEpml.request('apiCall', {
+                url: `/groups/invites/${myAddress}`
+            })
+            this.groupInvites = pendingGroupInvites;
+        } catch (error) {
+            console.error(error);
+            let err4string = get("chatpage.cchange61");
+            parentEpml.request('showSnackBar', `${err4string}`)
+        }
+    }
+
     async unblockUser(websiteObj) {
         let owner = websiteObj.owner