send message

email-client-app/app.py

@@ -29,6 +29,22 @@
 Session(app)
 
 
+@app.route('/send_email', methods=['POST'])
+def send_email():
+    """ Send an email """
+    recipient = request.form['to']
+    subject = request.form.get('subject', '')
+    body = request.form.get('text', '')
+    attachments = request.form.get('attachments', [])
+    send(recipient, subject, body, attachments)    
+    return jsonify({'success': True})
+
+
+@app.route('/save_draft', methods=['POST'])
+def save_draft():
+    return
+
+
 @app.route('/query_the_server', methods=['POST'])
 def query_the_server():
     """ 
@@ -60,10 +76,10 @@ def query_the_server():
             folder = request.form['folder']
             return move_to(mailbox, uid, folder)
         elif command == 'save_draft':
-            recipient = request.form['recipient']
-            subject = request.form['subject']
-            body = request.form['body']
-            attachments = []
+            recipient = request.form.get('recipient')
+            subject = request.form.get('subject')
+            body = request.form.get('body')
+            attachments = request.form.get('body')
             # for file in files:
             #     with app.open_resource("logo.png") as fp:
             #         attachments.append(flask_mail.Attachment(
@@ -201,21 +217,23 @@ def smpt_to_imap_type(smtp_msg):
     # return imap_msg
 
 
+# Must be run with app context:
 def create_smtp_msg(recipient, subject, body, attachments):
     """ 
+    Can use only after `mail = flask_mail.Mail(app)`.
     Receives input fields needed for the email, and creates it 
     using `Flask-Mail`: smtp (for sending).
     """
-    msg = flask_mail.Message()
-    msg.subject = subject
-    msg.recipients = [recipient]
-    msg.body = body
-    msg.attachments = attachments
-    return msg
+    smtp_msg = flask_mail.Message()
+    smtp_msg.subject = subject
+    smtp_msg.recipients = [recipient]
+    smtp_msg.body = body
+    smtp_msg.attachments = attachments
+    return smtp_msg
 
 
 # Must be run with app context:
-def send(msg):
+def send(recipient, subject, body, attachments):
     email = session.get('email')
     password = session.get('password')
     email_provider = email.split('@')[-1]
@@ -225,7 +243,8 @@ def send(msg):
                    "MAIL_PASSWORD": password}
     app.config.update(user_config)
     mail = flask_mail.Mail(app)
-    mail.send(msg)
+    smtp_msg = create_smtp_msg(recipient, subject, body, attachments)
+    mail.send(smtp_msg)
 
 
 

email-client-app/static/mailbox.css

@@ -22,7 +22,6 @@ body {
 * Header
 */
 
-
 .header {
   background-color: var(--header-bg-color);
   box-shadow: 0 1px 3px var(--shadow-color);
@@ -97,6 +96,20 @@ body {
   scrollbar-width: none;  /* Firefox */
 }
 
+/* Buttons */
+#header-tools .action {
+  border-color: transparent;
+  color: #333; 
+  padding-top: 0.1rem;
+  padding-bottom: 0.2rem;
+  margin: 0.4rem 0.1rem 0;
+}
+#header-tools .action:hover {
+  border-color: #2471dc90;
+  background-color: #2471dc25;
+  color: inherit;
+}
+
 /* Logout */
 
 #header-logo {
@@ -124,37 +137,26 @@ body {
   height: 16px;
 }
 
-.sidebars-container {
+#area-below-header {
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100; /* Behind the header */
+  top: calc(var(--header-height));
 }
 
 .sidebar-sticky {
-  position: relative;
-  top: 0;
   height: calc(100vh - var(--header-height));
-  padding-top: .5rem;
+  padding-top: 1rem;
   overflow-x: hidden;
-  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-@supports ((position: -webkit-sticky) or (position: sticky)) {
-  .sidebar-sticky {
-    position: -webkit-sticky;
-    position: sticky;
-  }
+  overflow-y: auto;  /* Scrollable contents if viewport is shorter than content. */
 }
 
 .sidebar {
-  padding: var(--header-height) 0 0;  /* Height of header */
   box-shadow: inset -1px 0 0 var(--shadow-color);  /* Vertical line on the right */
+  padding: 0;
 }
 
-/* First .sidebar child of the .sidebars .row class: */
-.sidebars-container .row > .sidebar:first-child {
+/* First child of this element: #area-below-header .row > .sidebar
+* (`space` means any child, `>` means direct child) */
+#area-below-header .row > .sidebar:first-child {
   background-color: rgba(108, 117, 125, 0.15); /* light grey background */
 }
 
@@ -188,6 +190,18 @@ body {
   font-style: italic;
 }
 
+#new-folder:hover {
+  cursor: pointer;
+  background-color: #cde1face;
+  border-radius: 2rem;
+  color: black !important;
+}
+/* To make the background color larger than the button #new-folder itself: */
+#new-folder {
+  padding: 0.3rem 0.8rem;
+  margin: -0.3rem -0.5rem;
+}
+
 
 /* 
 * Middle column
@@ -206,7 +220,7 @@ body {
 }
 
 .message-list-item:not(.active):hover {
-  /* Remove the change of color on hover: */
+  /* To remove change of color on hover: */
   color: inherit;
 }
 
@@ -244,12 +258,13 @@ body {
 */
 
 main {
-  padding-top: var(--header-height);
+  height: calc(100vh - var(--header-height));
+  overflow-y: auto; 
+
   overflow-wrap: anywhere;  /* Break words if needed */
 }
 
 
-
 /* Other helpful classes */
 
 /* Text is replaced by ellipsis after n lines: */