Work on MessageComposer

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

@@ -2,40 +2,46 @@
 <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:"
-      label-for="input-to-recipient"
-      class="mb-4"
-      >
-      <b-form-input
-	id="input-to-recipient"
-	v-model="form.torecipient"
-	type="email"
-	required
-	placeholder="Enter main recipient's email"
-	>
-      </b-form-input>
-    </b-form-group>
+    <b-row>
+      <b-col class="col-lg-6">
+	<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-col>
+      <b-col class="col-lg-6">
+	<b-form-group
+	  id="to-recipient"
+	  label="To:"
+	  label-for="input-to-recipient"
+	  class="mb-4"
+	  >
+	  <b-form-input
+	    id="input-to-recipient"
+	    v-model="form.torecipient"
+	    type="email"
+	    required
+	    placeholder="Enter main recipient's email"
+	    >
+	  </b-form-input>
+	</b-form-group>
+      </b-col>
+    </b-row>
     <b-form-group
       id="cc"
       label="cc:"
       label-for="input-cc"
-      class="mb-4"
+      class="mb-2"
       >
       <b-form-input
 	id="input-cc"
@@ -86,7 +92,10 @@
       </b-col>
       <b-col class="col-lg-6">
 	<h3>Preview:</h3>
-	<span v-html="sanitized_body_html"></span>
+	<span
+	  v-html="sanitized_body_html"
+	  class="white-space-pre-wrap"
+	  ></span>
       </b-col>
     </b-row>
     <b-button type="savedraft" variant="warning">Save draft</b-button>
@@ -102,7 +111,11 @@
 	  originalmessage: {
 	      type: Object,
 	      required: false,
-	  }
+	  },
+	  action: {
+	      type: String,
+	      required: true,
+	  },
       },
       data () {
 	  return {
@@ -125,15 +138,35 @@
       mounted () {
       	  if (this.originalmessage) {
 	      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>')
+      	      this.form.body = ('\n\n<blockquote>\n')
+	      if (this.action == 'reply') {
+      		  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 += ('On ' + this.originalmessage.datetimestamp +
+				     ', ' + this.originalmessage.data.from +
+				     ' wrote:\n\n')
+	      }
+	      if (this.action == 'forward') {
+		  this.form.subject = 'Fwd: ' + this.originalmessage.data.subject
+		  this.form.body += ('Begin forwarded message:\n\n' +
+				     'From: ' + this.originalmessage.data.sender +
+				     '\nSubject: ' + this.originalmessage.subject +
+				     '\nDate: ' + this.originalmessage.datetimestamp +
+				     '\nTo: ' + this.originalmessage.data.To +
+				     '\n\n')
+	      }
+	      this.form.body += (this.originalmessage.data["body-plain"] +
+				 '\n</blockquote>')
       	  }
       }
   }
 </script>
+
+<style scoped>
+
+  .white-space-pre-wrap {
+  white-space: pre-wrap;
+  }
+
+</style>

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

 <template>
 <div>
-  <b-card header-tag="header" footer-tag="footer" class="overflow-x-auto">
+  <b-card
+    border-variant="primary"
+    class="overflow-x-auto"
+    header-tag="header"
+    footer-tag="footer"
+    >
     <template v-slot:header>
-      <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
-	no-close-on-backdrop
-	>
-	<message-composer :originalmessage="message"></message-composer>
-	<template v-slot:modal-footer="{ cancel, }">
-	  <b-button size="sm" variant="danger" @click="cancel()">
-	    Cancel
+
+      <ul class="list-inline m-2">
+	<li class="list-inline-item">
+	  <b-button
+	    v-b-modal.modal-reply
+	    variant="primary"
+	    >
+	    Reply
+	  </b-button>
+	  <b-modal
+	    id="modal-reply"
+	    size="xl"
+	    title="Reply"
+	    hide-header-close
+	    no-close-on-escape
+	    no-close-on-backdrop
+	    >
+	    <message-composer :originalmessage="message" action="reply"></message-composer>
+	    <template v-slot:modal-footer="{ cancel, }">
+	      <b-button size="sm" variant="danger" @click="cancel()">
+		Cancel
+	      </b-button>
+	    </template>
+	  </b-modal>
+	</li>
+	<li class="list-inline-item">
+	  <b-button
+	    v-b-modal.modal-forward
+	    variant="dark"
+	    text-variant="white"
+	    >
+	    Forward
 	  </b-button>
-	</template>
-      </b-modal>
+	  <b-modal
+	    id="modal-forward"
+	    size="xl"
+	    title="Forward"
+	    hide-header-close
+	    no-close-on-escape
+	    no-close-on-backdrop
+	    >
+	    <message-composer :originalmessage="message" action="forward"></message-composer>
+	    <template v-slot:modal-footer="{ cancel, }">
+	      <b-button variant="danger" @click="cancel()">
+		Cancel
+	      </b-button>
+	    </template>
+	  </b-modal>
+	</li>
+	<li class="list-inline-item">
+	</li>
+      </ul>
+      <hr>
       <div class="text-dark">
 	<b-row>
 	<b-col class="col-lg-8">