feat: roominfos in vcarddialog, improve style in vcarddialogimprove_vcard

8 files changed, 109 insertions, 11 deletions

diff --git a/locales/de.json b/locales/de.json
index 00f9b745..624a61aa 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -439,7 +439,8 @@
     "Edit_avatar": "Bearbeite Profilfoto",
     "Every_member_can_see_your_full_JID": null,
     "message_not_delivered": "Nachricht nicht zugestellt",
-    "User_media_not_readable": null
+    "User_media_not_readable": null,
+    "subject": "Thema"
   },
   "Notifications": "Benachrichtigungen"
 }
\ No newline at end of file
diff --git a/locales/en.json b/locales/en.json
index ebba0b08..c1182a5c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -439,7 +439,8 @@
     "Edit_avatar": "Edit avatar",
     "Every_member_can_see_your_full_JID": "Every member can see your full JID",
     "message_not_delivered": "Message not delivered",
-    "User_media_not_readable": "User media not readable. Is your device used by another application?"
+    "User_media_not_readable": "User media not readable. Is your device used by another application?",
+    "subject": "Subject"
   },
   "Notifications": "Notifications"
 }
\ No newline at end of file
diff --git a/scss/partials/_dialog.scss b/scss/partials/_dialog.scss
index f523c157..4e113e33 100644
--- a/scss/partials/_dialog.scss
+++ b/scss/partials/_dialog.scss
@@ -338,3 +338,19 @@ button.jsxc-page__subheadline {
     }
   }
 }
+
+.jsxc-dialog .jsxc-vcard-data {
+  margin-top: 2em;
+
+  >li {
+    border: 1px solid var(--jsxc-color-border-dark);
+    display: block;
+    margin-top: 0.5em;
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+  }
+
+  li>div {
+    float: right;
+  }
+}
diff --git a/scss/partials/_jsxc.scss b/scss/partials/_jsxc.scss
index c9ef9565..30ecdb8e 100644
--- a/scss/partials/_jsxc.scss
+++ b/scss/partials/_jsxc.scss
@@ -103,6 +103,11 @@ ul.jsxc-vcard {
   width: 100px;
 }
 
+ul.jsxc-mucinfos {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
 //  Spot which is attached to xmpp: uris
 .jsxc-spot {
   background-color: $white;
@@ -216,3 +221,10 @@ ul.jsxc-vcard {
   margin-right: 0.25em;
   padding: 0.2em 0.5em;
 }
+
+h4.jsxc-jid {
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/connection/services/Vcard.ts b/src/connection/services/Vcard.ts
index c113cea5..1f6a26e1 100644
--- a/src/connection/services/Vcard.ts
+++ b/src/connection/services/Vcard.ts
@@ -91,6 +91,10 @@ export default class Vcard extends AbstractService {
 
          if (itemName === 'PHOTO') {
             let img = item.find('BINVAL').text();
+            if (!img || img.trim().length === 0) {
+               return;
+            }
+
             let type = item.find('TYPE').text();
             let src = 'data:' + type + ';base64,' + img; //@REVIEW XSS
 
diff --git a/src/ui/dialogs/vcard.ts b/src/ui/dialogs/vcard.ts
index 88ae1839..82809543 100644
--- a/src/ui/dialogs/vcard.ts
+++ b/src/ui/dialogs/vcard.ts
@@ -3,6 +3,11 @@ import { IContact } from '../../Contact.interface';
 import Translation from '@util/Translation';
 import { Presence } from '@connection/AbstractConnection';
 import Color from '@util/Color';
+import MultiUserContact from '@src/MultiUserContact';
+import Avatar from '@src/Avatar';
+import AvatarUI from '@src/ui/AvatarSet';
+import Hash from '@util/Hash';
+import { IAvatar } from '@src/Avatar.interface';
 
 let vcardTemplate = require('../../../template/vcard.hbs');
 let vcardBodyTemplate = require('../../../template/vcard-body.hbs');
@@ -15,16 +20,20 @@ export default function (contact: IContact) {
       let presence = Presence[contact.getPresence(resource)];
 
       return {
+         resourcetype: contact.isGroupChat() ? Translation.t('Nickname') : Translation.t('Resource'),
          resource,
          client: Translation.t('loading'),
          presence: Translation.t(presence),
       };
    });
 
+   let roominfos = contact.isGroupChat() ? getRoomInfos(<MultiUserContact>contact) : undefined;
+
    let content = vcardTemplate({
       jid: contact.getJid().bare,
       name: contact.getName(),
       basic: basicData,
+      roomfeatures: roominfos,
    });
 
    dialog = new Dialog(content);
@@ -73,12 +82,32 @@ export default function (contact: IContact) {
 
    contact
       .getVcard()
-      .then(vcardSuccessCallback)
+      .then((vcard: any) => {
+         if (vcard.PHOTO) {
+            let avatar: IAvatar = new Avatar(
+               Hash.SHA1FromBase64((<any>vcard.PHOTO).src),
+               (<any>vcard.PHOTO).type,
+               (<any>vcard.PHOTO).src
+            );
+            let hash = avatar.getHash();
+
+            let storedHash = contact.getAccount().getStorage().getItem(contact.getJid().bare);
+            if (storedHash === undefined || hash !== storedHash) {
+               let avatarUI = AvatarUI.get(contact);
+               contact.getAccount().getStorage().setItem(contact.getJid().bare, hash);
+               avatarUI.reload();
+            }
+         }
+         return Promise.resolve(vcardSuccessCallback(vcard));
+      })
       .then(function (vcardData) {
-         let content = vcardBodyTemplate({
-            properties: vcardData,
-         });
+         let content = $(
+            vcardBodyTemplate({
+               properties: !contact.isGroupChat() ? vcardData : undefined,
+            })
+         );
 
+         content.addClass('jsxc-vcard-data');
          dialog.getDom().append(content);
 
          dialog.getDom().find('.jsxc-waiting').remove();
@@ -86,6 +115,28 @@ export default function (contact: IContact) {
       .catch(vcardErrorCallback);
 }
 
+function getRoomInfos(contact: MultiUserContact, first: boolean = true): any[] {
+   let result = [];
+   if (contact.getSubject() && contact.getSubject().length > 0) {
+      result.push({ label: Translation.t('subject'), description: contact.getSubject() });
+   }
+   for (let item of contact.getFeatures()) {
+      let itemname = 'muc_' + item;
+      result.push({
+         label: '> ',
+         description: Translation.t(`${itemname}.keyword`) + ' (' + Translation.t(`${itemname}.description`) + ')',
+      });
+   }
+   if (result.length === 0 && first) {
+      let refresh = async function () {
+         await (<MultiUserContact>contact).refreshFeatures();
+      };
+      refresh();
+      result = getRoomInfos(contact, false);
+   }
+   return result;
+}
+
 function vcardSuccessCallback(vCardData): Promise<any> {
    let dialogElement = dialog.getDom();
 
@@ -104,8 +155,12 @@ function vcardSuccessCallback(vCardData): Promise<any> {
    }
 
    delete vCardData.PHOTO;
-
-   return Promise.resolve(convertToTemplateData(vCardData));
+   let result = convertToTemplateData(vCardData);
+   if (result !== undefined && result !== null && result.length > 0) {
+      return Promise.resolve(result);
+   } else {
+      return Promise.resolve([]);
+   }
 }
 
 function vcardErrorCallback() {
diff --git a/template/vcard-body.hbs b/template/vcard-body.hbs
index 8bedc9b1..3d452104 100644
--- a/template/vcard-body.hbs
+++ b/template/vcard-body.hbs
@@ -2,7 +2,7 @@
 <ul>
    {{#each properties}}
       <li>
-         <strong>{{name}}</strong> {{value}}
+         <strong>{{name}}</strong><div>{{value}}</div>
          {{#if properties}}
             {{> list}}
          {{/if}}
diff --git a/template/vcard.hbs b/template/vcard.hbs
index 946c2308..25bc0f88 100644
--- a/template/vcard.hbs
+++ b/template/vcard.hbs
@@ -1,10 +1,19 @@
-<h3>{{t "Info_about"}} {{name}} ({{jid}})</h3>
+<h3>{{t "Info_about"}} {{name}}</h3>
+<h4 class="jsxc-jid">{{jid}}</h4>
 <div class="jsxc-vcard-tags"></div>
 
+<ul class="jsxc-mucinfos">
+   {{#each roomfeatures}}
+   <li>
+      <strong>{{label}}</strong> {{description}}
+   </li>
+   {{/each}}
+</ul>
+
 <ul class="jsxc-vcard">
    {{#each basic}}
    <li>
-      <strong>{{t "Resource"}}</strong> {{resource}}
+      <strong>{{{resourcetype}}}</strong> {{resource}}
    </li>
    <li data-resource="{{resource}}">
       <strong>{{t "Client"}}</strong> <span class="jsxc-client">{{client}}</span>