Work on MessageComposer

apimail/static/apimail/assets/vue/components/MessageComposer.vue

@@ -2,6 +2,20 @@
 <div>
   <h1>Compose email message</h1>
   <b-form>
+    <b-form-group
+      id="from_account"
+      label="From:"
+      label-for="input-from-account"
+      class="mb-4"
+      >
+      <b-form-input
+	id="input-from-account"
+	v-model="form.from_account"
+	type="email"
+	required
+	>
+      </b-form-input>
+    </b-form-group>
     <b-form-group
       id="to-recipient"
       label="To:"
@@ -18,17 +32,63 @@
       </b-form-input>
     </b-form-group>
     <b-form-group
-      id="message-body"
-      label="Message:"
-      label-for="input-message-body"
+      id="cc"
+      label="cc:"
+      label-for="input-cc"
+      class="mb-4"
+      >
+      <b-form-input
+	id="input-cc"
+	v-model="form.cc"
+	type="email"
+	>
+      </b-form-input>
+    </b-form-group>
+    <b-form-group
+      id="bcc"
+      label="bcc:"
+      label-for="input-bcc"
+      class="mb-4"
       >
-      <b-form-textarea
-	id="input-message-body"
-	v-model="form.body"
-	rows="10"
+      <b-form-input
+	id="input-bcc"
+	v-model="form.bcc"
+	type="email"
 	>
-      </b-form-textarea>
+      </b-form-input>
     </b-form-group>
+    <b-form-group
+      id="subject"
+      label="Subject:"
+      label-for="input-subject"
+      class="mb-4"
+      >
+      <b-form-input
+	id="input-subject"
+	v-model="form.subject"
+	>
+      </b-form-input>
+    </b-form-group>
+    <b-row>
+      <b-col class="col-lg-6">
+	<b-form-group
+	  id="message-body"
+	  label="Message:"
+	  label-for="input-message-body"
+	  >
+	  <b-form-textarea
+	    id="input-message-body"
+	    v-model="form.body"
+	    rows="10"
+	    >
+	  </b-form-textarea>
+	</b-form-group>
+      </b-col>
+      <b-col class="col-lg-6">
+	<h3>Preview:</h3>
+	<span v-html="sanitized_body_html"></span>
+      </b-col>
+    </b-row>
     <b-button type="savedraft" variant="warning">Save draft</b-button>
     <b-button type="send" variant="success">Send</b-button>
   </b-form>
@@ -47,15 +107,32 @@
       data () {
 	  return {
 	      form: {
+		  from_account: '',
 		  torecipient: '',
+		  cc: '',
+		  bcc: '',
+		  subject: '',
 		  body: '',
+		  sanitized_body_html: '',
 	      }
 	  }
       },
+      computed: {
+	  sanitized_body_html() {
+	      return this.$sanitize(this.form.body)
+	  }
+      },
       mounted () {
       	  if (this.originalmessage) {
-      	      this.form.torecipient = this.originalmessage.data.from
-      	      this.form.body = '<blockquote>\n' + this.originalmessage.data["body-plain"] + '\n</blockquote>'
+	      this.form.from_account = this.originalmessage.data.To
+      	      this.form.torecipient = this.originalmessage.data.sender
+	      this.form.cc = this.originalmessage.data.recipients
+	      this.form.subject = 'Re: ' + this.originalmessage.data.subject
+      	      this.form.body = ('\n\n<blockquote>\nOn '
+				+ this.originalmessage.datetimestamp
+				+ ', ' + this.originalmessage.data.from + ' wrote:\n'
+				+ this.originalmessage.data["body-plain"]
+				+ '\n</blockquote>')
       	  }
       }
   }

apimail/static/apimail/assets/vue/components/MessageContent.vue

@@ -5,6 +5,7 @@
       <b-button v-b-modal.modal-reply>Reply</b-button>
       <b-modal
 	id="modal-reply"
+	size="xl"
 	title="Reply"
 	hide-header-close
 	no-close-on-escape