Merge 790f6aa into 2add7b3

3RD-PARTY-LICENSES.md

@@ -0,0 +1,40 @@
+# License overview of included 3rd party libraries
+
+The Mailchain Web project is licensed under the terms of the [Apache 2.0](./LICENSE).
+
+However, Mailchain Web includes several third-party Open-Source libraries, which are licensed under their own respective Open-Source licenses.
+
+Click here to see [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmailchain%2Fmailchain-web.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmailchain%2Fmailchain-web?ref=badge_shield)
+
+## Other License Information For Packages Included In Mailchain Web
+
+### CKEditor 5
+
+License: LGPL / GPLv2 / MPL
+http://ckeditor.com/license
+
+Notes:
+CKEDITOR extends its license under a 'FREE FOR OPEN SOURCE LICENSE AGREEMENT' under the following conditions:
+
+#### 1 License
+
+CKSource hereby grants to the Customer a non-exclusive, revocable, royalty free, worldwide license (the “License”) to embed the Software as part of the Project, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense such Combined Software product to the Customer’s customers and sublicensees (the “Sublicensees”) and to permit the Sublicensees herein, subject to the conditions specified in the Section 2 License Conditions.
+
+All rights of any kind to the Software which are not expressly granted under this Agreement, are entirely and exclusively reserved by CKSource.
+
+For the avoidance of doubt, the Agreement does not grant to the Customer any rights to the Premium Features (Comments plug-in for CKEditor 5; Track Changes plug-in for CKEditor 5; Letters; CKEditor Cloud Services; CKEditor Cloud Services On-Premises), however both parties may enter into relevant agreement regulating granting such rights.
+
+#### 2 License Conditions
+
+(i) the Customer must provide its Sublicensees with the following legal notice:
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL CKSOURCE OR ITS LICENSORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+(ii) the Customer shall not develop any software nor provide services which may constitute a competitive product and/or services to the Software and to the Premium Features. The restriction indicated in the preceding sentence do not apply to the Sublicensees.
+
+#### 3 No Warranties and Support
+
+CKSource makes no representations or warranties, express or implied, regarding the Software. CKSource does not provide any support for the Software.
+
+UNDER THIS AGREEMENT, THE SOFTWARE IS PROVIDED “AS-IS” WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OR WARRANTIES THAT IT IS FREE OF DEFECTS OR VIRUSES. IN NO EVENT SHALL CKSOURCE OR ITS RESPECTIVE LICENSORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+The entire risk relating to the quality and performance of the Software licensed under this Agreement is borne by the Customer. The Customer has no right to claim any indemnification based on the Customer’s or Sublicensees use of the Software licensed under this Agreement.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mailchain-web",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -19,6 +19,8 @@
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
+    "@ckeditor/ckeditor5-angular": "github:mailchain/ckeditor5-angular",
+    "@ckeditor/ckeditor5-build-classic": "github:mailchain/ckeditor5-build-classic#mailchain_stable",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
     "ethereum-blockies-base64": "^1.0.2",

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { InboxComposeComponent } from './inbox/inbox-compose/inbox-compose.component';
 import { InboxMessageComponent } from './inbox/inbox-message/inbox-message.component';
 import { InboxMessagesComponent } from './inbox/inbox-messages/inbox-messages.component';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular/dist';
 
 
 const routes: Routes = [
@@ -32,6 +33,7 @@ const routes: Routes = [
     CollapseModule.forRoot(),
     ModalModule.forRoot(),
     CommonModule,
+    CKEditorModule,
     RouterModule.forRoot(routes)
   ],
   providers: [HttpHelpersService],

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

@@ -77,8 +77,30 @@ <h4>Compose <span class="fw-semi-bold">New</span></h4>
       </div>
       <!-- ./Subject Field -->
 
-      <!-- Body Field -->
+
+      <!-- Plain/HTML toggle field -->
       <div class="form-group row">
+        <div class="col-md-10 col-lg-9 offset-md-2 offset-sm-0">
+          <div class="input-group mb-2 row">
+
+            <div class="custom-control custom-switch content-type-switch">
+              <input type="checkbox" class="custom-control-input" id="contentTypeSwitch"
+                (click)="convertToPlainText()"
+                [disabled]="inputContentType == 'plaintext'"
+              >
+              <label class="custom-control-label" for="contentTypeSwitch">{{contentTypeSwitchLabel}}</label>
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <!-- ./Plain/HTML toggle field -->
+
+      <!-- Body Field -->
+      <!-- Plaintext Field -->
+      <div
+        *ngIf="inputContentType == 'plaintext' "
+        class="form-group row">
         <div class="col-md-10 col-lg-9 offset-md-2 offset-sm-0">
           <div class="input-group mb-2 row">
 
@@ -92,6 +114,28 @@ <h4>Compose <span class="fw-semi-bold">New</span></h4>
           </div>
         </div>
       </div>
+      <!-- ./Plaintext Field -->
+
+      <!-- CKeditor Field -->
+      <div
+        *ngIf="inputContentType == 'html' " 
+        class="form-group row">
+        <div class="col-md-10 col-lg-9 offset-md-2 offset-sm-0">
+          <div class="input-group mb-2 row">
+
+            <ckeditor
+              #editor
+              id="messageBody"
+              name="body"
+              [(ngModel)]="model.body"
+              (keydown.enter)="supressEnterPropagation($event)"
+              [editor]="Editor"
+              ></ckeditor>
+
+          </div>
+        </div>
+      </div>
+      <!-- ./CKeditor Field -->
       <!-- ./Body Field -->
 
       <!-- <div class="clearfix"> -->

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

@@ -14,4 +14,22 @@
 .address-box {
   padding-top: 5px;
   padding-bottom: 5px;
-}
+}
+
+.content-type-switch {
+  text-align: right;
+  width: 100%;
+}
+
+:host ::ng-deep .ck-editor__editable_inline {
+  min-height: 500px;
+}
+
+#messageBody {
+  width: 100%;
+}
+
+:host ::ng-deep .ck-editor blockquote {
+  font-style: inherit;
+}
+

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

@@ -18,6 +18,7 @@ import { NameserviceService } from 'src/app/services/mailchain/nameservice/names
 import { ModalModule, BsModalRef } from 'ngx-bootstrap/modal';
 import { ModalConnectivityErrorComponent } from '../../modals/modal-connectivity-error/modal-connectivity-error.component';
 import { NgModule } from '@angular/core';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular/dist';
 
 
 // Workaround:
@@ -82,11 +83,12 @@ describe('InboxComposeComponent', () => {
 
       ],
       imports: [
+        CKEditorModule,
+        FakeModalConnectivityErrorModule,
         FormsModule,
         HttpClientModule,
-        RouterTestingModule,
         ModalModule.forRoot(),
-        FakeModalConnectivityErrorModule,
+        RouterTestingModule,
       ] 
     })
     .compileComponents();
@@ -147,7 +149,7 @@ describe('InboxComposeComponent', () => {
         })  
       });
 
-      describe('when composing a reply', () => {
+      describe('when composing a plaintext reply', () => {
         beforeEach(()=>{
           component.currentMessage = mailchainTestService.inboundMessage();
         })
@@ -176,6 +178,37 @@ describe('InboxComposeComponent', () => {
         })  
       });
 
+      describe('when composing an html reply', () => {
+        beforeEach(()=>{
+          component.currentMessage = mailchainTestService.inboundMessage();
+          component.currentMessage.headers["content-type"] = "text/html; charset=\"UTF-8\""
+        })
+
+        it('should initialize the model "from" field with the recipient address', async() => {
+          await component.ngOnInit();
+          expect(component.model.from).toBe('0x0123456789abcdef0123456789abcdef01234567')
+        })  
+
+        it('should initialize the model "subject" field with the original message field + a prefix of "Re: "', async() => {
+          await component.ngOnInit();
+          expect(component.model.subject).toBe('Re: Mailchain Test!')
+        })  
+
+        it('should not re-initialize the model "subject" field with an extra prefix of "Re: "', async() => {
+          component.currentMessage.subject = "Re: Mailchain Test!"
+          await component.ngOnInit();
+          expect(component.model.subject).toBe('Re: Mailchain Test!')
+        })  
+
+        it('should initialize the model "body" field with the original message field and wrap the body in a `blockquote`', async() => {
+        let response = "<p></p><p><strong>From:</strong> <0x0123456789012345678901234567890123456789@testnet.ethereum><br><strong>Date:</strong> 2019-06-07T14:53:36Z<br><strong>To:</strong> <0x0123456789abcdef0123456789abcdef01234567@testnet.ethereum><br><strong>Subject:</strong> Mailchain Test!</p><blockquote>A body<br></blockquote>"
+
+          await component.ngOnInit();
+          expect(JSON.stringify(component.model.body)).toBe(JSON.stringify(response))
+        })
+
+      });
+
       describe('setFromAddressList', () => {
         it('should set the fromAddresses', async() => {
           expect(component.fromAddresses).toEqual([])
@@ -185,6 +218,13 @@ describe('InboxComposeComponent', () => {
         })  
       });
     });
+
+    describe('initEditor', () => {
+      it('should initialize the editor', async()=> {
+        await component.ngOnInit();
+        expect(component.editorComponent).toBeTruthy();
+      })
+    });
   });
 
   describe('recipientResolve', () => {
@@ -428,7 +468,7 @@ describe('InboxComposeComponent', () => {
     it('should generate a message', () => {
 
       component.onSubmit();
-      expect(mailchainService.generateMail).toHaveBeenCalledWith(mail)
+      expect(mailchainService.generateMail).toHaveBeenCalledWith(mail, 'html')
 
     })  
 
@@ -485,5 +525,16 @@ describe('InboxComposeComponent', () => {
     });
   });
 
+  describe('convertToPlainText', () => {
+    it('should convert html to plain text', () => {
+      spyOn(window, 'confirm').and.returnValue(true);
+      spyOn(document, 'getElementsByClassName').and.returnValue([ {"innerText": "Replying to a message\n\nFrom: <0xd5ab4ce3605cd590db609b6b5c8901fdb2ef7fe6@ropsten.ethereum>\nDate: 2019-12-05T21:17:04Z\nTo: <0x92d8f10248c6a3953cc3692a894655ad05d61efb@ropsten.ethereum>\nSubject: Fw: another message\n\nSending a message"} ]);
+
+      component.convertToPlainText()
+
+      expect(component.model.body).toBe("Replying to a message\n\nFrom: <0xd5ab4ce3605cd590db609b6b5c8901fdb2ef7fe6@ropsten.ethereum>\nDate: 2019-12-05T21:17:04Z\nTo: <0x92d8f10248c6a3953cc3692a894655ad05d61efb@ropsten.ethereum>\nSubject: Fw: another message\n\nSending a message")
+
+    })
+  });
 
 });