fix: inbox view (#177) (#178)

* refactor message display handling and add iframe for html messages

* add tests and remove unneed return

* bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mailchain-web",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/inbox/inbox-compose/inbox-compose.component.ts

@@ -216,7 +216,7 @@ export class InboxComposeComponent implements OnInit {
     let returnObs
 
     if (this.mailchainService.validateEnsName(value)) {
-      returnObs = this.nameserviceService.resolveName(
+      returnObs = await this.nameserviceService.resolveName(
         this.currentProtocol,
         this.currentNetwork,
         value

src/app/inbox/inbox-message/inbox-message.component.html

@@ -67,17 +67,7 @@ <h4>{{currentMessage.subject}}</h4>
 </div>
 <hr>
 
-<!-- plaintext message body -->
-<div class="message-body" *ngIf=" viewForContentType == 'plaintext' ">
-  <pre class="pre-inherit" [innerText]="currentMessage.body"></pre>
-</div>
-<!-- ./ plaintext message body -->
-
-<!-- html message body -->
-<div class="" *ngIf=" viewForContentType == 'html' ">
-  <div class="" [innerHTML]="currentMessage.body"></div>
-</div>
-<!-- ./ html message body -->
+<div id="message-frame" class="message-body-container"></div>
 
 
 <!-- modalWindowMailInfo -->

src/app/inbox/inbox-message/inbox-message.component.scss

@@ -8,6 +8,14 @@
   font-family: 'Courier New', Courier, monospace;
 }
 
+.message-body-container {
+  display: contents;
+}
+
+.message-body-html {
+   flex-grow: 1; border: none; margin: 0; padding: 0;
+}
+
 .message-identicon {
   width: 35px;
   height: 35px;

src/app/inbox/inbox-message/inbox-message.component.spec.ts

@@ -124,4 +124,84 @@ describe('InboxMessageComponent', () => {
     });
   });
 
+  describe('getViewForContentType', () => {
+    it('should call getViewForContentType when the content-type is plaintext ', () => {
+      spyOn(component, 'getViewForContentType')
+
+      component.currentMessage["headers"]["content-type"] = 'text/plain; charset="UTF-8"'
+      component.ngOnInit()
+      expect(component.getViewForContentType).toHaveBeenCalled()
+    })
+
+    it('should call getViewForContentType when the content-type is text/plain; charset="UTF-8"', () => {
+      spyOn(component, 'getViewForContentType')
+
+      component.currentMessage["headers"]["content-type"] = 'text/plain; charset="UTF-8"'
+      component.ngOnInit()
+      expect(component.getViewForContentType).toHaveBeenCalled()
+    })
+
+    it('should call getViewForContentType when the content-type is unknown', () => {
+      spyOn(component, 'getViewForContentType')
+
+      component.currentMessage["headers"]["content-type"] = 'unknown'
+      component.ngOnInit()
+      expect(component.getViewForContentType).toHaveBeenCalled()
+    })
+  })
+
+  describe('addMessageText', () => {
+    it('should call addMessageText when the content-type is plaintext ', () => {
+      spyOn(component, 'addMessageText')
+
+      component.currentMessage["headers"]["content-type"] = 'text/plain; charset="UTF-8"'
+      component.ngOnInit()
+      expect(component.addMessageText).toHaveBeenCalled()
+    })
+
+    it('should NOT call addMessageText when the content-type is text/html; charset="UTF-8" ', () => {
+      spyOn(component, 'addMessageText')
+
+      component.currentMessage["headers"]["content-type"] = 'text/html; charset="UTF-8"'
+      component.ngOnInit()
+      expect(component.addMessageText).not.toHaveBeenCalled()
+    })
+
+    it('should call addMessageText when the content-type is unknown ', () => {
+      spyOn(component, 'addMessageText')
+
+      component.currentMessage["headers"]["content-type"] = 'unknown'
+      component.ngOnInit()
+      expect(component.addMessageText).toHaveBeenCalled()
+    })
+
+  })
+  describe('addMessageIframe', () => {
+    it('should NOT call addMessageIframe when the content-type is plaintext ', () => {
+      spyOn(component, 'addMessageIframe')
+
+      component.currentMessage["headers"]["content-type"] = 'text/plain; charset="UTF-8"'
+      component.ngOnInit()
+      expect(component.addMessageIframe).not.toHaveBeenCalled()
+    })
+
+    it('should call addMessageIframe when the content-type is text/html; charset="UTF-8" ', () => {
+      spyOn(component, 'addMessageIframe')
+
+      component.currentMessage["headers"]["content-type"] = 'text/html; charset="UTF-8"'
+      component.ngOnInit()
+      expect(component.addMessageIframe).toHaveBeenCalled()
+    })
+
+    it('should NOT call addMessageIframe when the content-type is unknown ', () => {
+      spyOn(component, 'addMessageIframe')
+
+      component.currentMessage["headers"]["content-type"] = 'unknown'
+      component.ngOnInit()
+      expect(component.addMessageIframe).not.toHaveBeenCalled()
+    })
+
+  })
+
+
 });

src/app/inbox/inbox-message/inbox-message.component.ts

@@ -18,7 +18,6 @@ export class InboxMessageComponent implements OnInit {
   @Output() replyToMessage = new EventEmitter();
 
   public messageNameRecords = {}
-  public viewForContentType = "plaintext"
 
   constructor(
     private nameserviceService: NameserviceService,
@@ -33,7 +32,7 @@ export class InboxMessageComponent implements OnInit {
 
   ngOnInit() {
     this.resolveNamesFromMessage()
-    this.viewForContentType = this.getViewForContentType()
+    this.getViewForContentType()
   }
 
   /**
@@ -86,9 +85,49 @@ export class InboxMessageComponent implements OnInit {
   /**
    * getViewForContentType: Returns correct view for content-type
    */
-  private getViewForContentType() {
+  public getViewForContentType() {
     let ct = this.currentMessage.headers["content-type"]
-    return this.mailchainService.getContentTypeForView(ct)
+
+    switch (ct) {
+      case 'plaintext':
+        this.addMessageText()
+        break;
+      case 'text/html; charset="UTF-8"':
+        this.addMessageIframe()
+        break;
+      default:
+        this.addMessageText()
+        break;
+    }
+  }
+
+  /** addMessageIframe: Creates iframe containing message and adds it to message-frame */
+  public addMessageIframe() {
+    var messageFrame = document.getElementById('message-frame')
+
+    var ifrm = document.createElement("iframe");
+    ifrm.setAttribute("srcdoc", this.currentMessage.body);
+    ifrm.setAttribute("frameborder", "0");
+    ifrm.style.width = "100%";
+    ifrm.style.height = "100%";
+    ifrm.classList.add("message-body-html")
+
+    messageFrame.appendChild(ifrm);
+  }
+
+  /** Creates message div & pre containing message and adds it to message-frame */
+  public addMessageText() {
+    var messageFrame = document.getElementById('message-frame')
+
+    var divMessage = document.createElement('div')
+    divMessage.classList.add("message-body")
+
+    var preMessage = document.createElement('pre')
+    divMessage.classList.add("pre-inherit")
+    divMessage.innerText = this.currentMessage.body
+
+    divMessage.appendChild(preMessage)
+    messageFrame.appendChild(divMessage)
   }
 
 }