implement basic functionality of contact via form->smtp

example_config.py

@@ -43,10 +43,11 @@ CONTACT_PLACEHOLDER_EMAIL="Your Email"
 CONTACT_PLACEHOLDER_SUBJECT="Subject"
 CONTACT_PLACEHOLDER_TEXTAREA="Your Message"
 
-TARGET_SMTP=None
+TARGET_SMTP          = None
-TARGET_EMAIL=None
+TARGET_EMAIL         = None
-TARGET_SMTP_USER=None
+TARGET_SMTP_USER     = None
-TARGET_SMTP_AUTH=None
+TARGET_SMTP_PASSWORD = None
+SMTP_MUST_BE_CONNECTED = False
 
 THANKS_TITLE = "Thank you for something!"
 THANKS_STRONG_TEXT = "Strong Text"

server.py

@@ -10,7 +10,6 @@ import caldav
 import datetime as dt
 import markdown2
 import PIL.Image
-import smtplib
 
 # sitemap utilities
 from werkzeug.routing import BuildError
@@ -42,6 +41,7 @@ PRIORITY_SECONDARY = 0.8
 
 # other
 HTTP_NOT_FOUND = 404
+HTTP_NO_CONTENT = 204
 EMPTY_STRING   = ""
 READ           = "r"
 WRITE          = "w"
@@ -408,22 +408,20 @@ def init():
     else:
         print("Warning: Subpage Config File not found", file=sys.stderr)
 
+    ## check if SMTP server is availiable ##
+    smtp.checkSMTPConnection(app)
+
+
 @app.route("/contact")
 def contact():
     return flask.render_template("contact.html", conf=app.config)
 
 @app.route("/contact-api", methods=['POST'])
 def contactAPI():
-    
+    '''Form Location for Contact Form to be submitted to target email'''
-    email = flask.request.form["email"]
-    name  = flask.request.form["name"]
-    subject = "Subject: {} ({})\n\n".format(flask.request.form["subject"], name)
-    message = subject + flask.request.form["message"]
-    smtpTarget = smtplib.SMTP(app.config["TARGET_SMTP"])
-    smtpTarget.sendmail(email, app.config["TARGET_EMAIL"] , message)
-    smtpTarget.quit()
 
-    return flask.redirect("/thanks")
+    smtp.sendMailFromHtmlForm(app, flask.request.form)
+    return (EMPTY_STRING, HTTP_NO_CONTENT)
 
 if __name__ == "__main__":
 

smtp.py

@@ -0,0 +1,33 @@
+import sys
+import smtplib
+import smtplib.SMTPException
+
+def checkSMTPConnection(app):
+    '''Check connection and login on SMTP server configured in app config'''
+
+    try:
+        if not all([ x in app.conf for x in ["TARGET_SMTP", "TARGET_EMAIL"]:
+            raise smtplib.SMTPException("Missing Configuration.")
+        smtpTarget = smtplib.SMTP(app.config["TARGET_SMTP"])
+        if app.config["TARGET_SMTP_USER"] and app.config["TARGET_SMTP_PASSWORD"]:
+            smtp.login(app.config["TARGET_SMTP_USER"], app.config["TARGET_SMTP_PASSWORD"])
+        smtpTarget.quit()
+    except smtplib.SMTPException as e:
+        if app.config["STMP_MUST_BE_CONNECTED"]:
+            print(e, file=sys.stderr)
+            sys.exit(1)
+        else:
+            print("Warning: SMTP unusable: {}".format(e), file=sys.stderr)
+
+def sendMailFromHtmlForm(app, htmlForm):
+    '''Take the app config and the contact HTML-form and send a mail accordingly'''
+
+    email = htmlForm["email"]
+    name  = htmlForm["name"]
+    message = htmlForm["message"]
+
+    subject = "Subject: {} ({})\n\n".format(flask.request.form["subject"], name)
+
+    smtpTarget = smtplib.SMTP(app.config["TARGET_SMTP"])
+    smtpTarget.sendmail(email, app.config["TARGET_EMAIL"] , message)
+    smtpTarget.quit()

static/contact.js

@@ -0,0 +1,35 @@
+function submitForm(){
+
+    /* show the waiting dialog */
+    dialog = document.getElementById("waiting-dialog")
+    dialog.style.disply = "block"
+    setMainBackgroundOpacity(0.5)
+
+    /* submit the form */
+    xhr = new XMLHttpRequest();
+    xhr.open("POST", "/your/url/name.php"); 
+    xhr.onload = 
+    formData = new FormData(document.getElementById("contact-form")); 
+    xhr.send(formData);
+
+    mainContainer = document.getElementById("main-container")
+    mainContainer.style.opacity = 0.5
+
+    window.location.href = "/thanks"
+    // after x seconds forward to thx
+
+}
+
+function formSubmitFinished(event){ 
+    if(event.target.status != 200){
+        showErrorMessage(); // blocking
+        setMainBackgroundOpacity(0.5)
+    }else{
+        window.location.href = "/thanks"
+    }
+}
+
+function setMainBackgroundOpacity(opacity){
+    mainContainer = document.getElementById("main-container")
+    mainContainer.style.opacity = opacity
+}

templates/contact.html

@@ -12,6 +12,7 @@
 
 <body>
   {% include 'navbar.html' %}
+  {% include 'progress_window.html' %}
   <div class="container" style="margin-top: 4vw;">
     <section class="mb-4">
       <h2 class="h1-responsive font-weight-bold text-center my-4">{{ conf['CONTACT_HEADLINE'] }}

templates/navbar.html

@@ -1,4 +1,8 @@
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <!-- TODO navbar aufklappbar:
+            subpages
+            contact
+    -->
     <a class="navbar-brand" href="#"></a>
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"

templates/progress_window.html

@@ -0,0 +1,17 @@
+<!-- Modal -->
+<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+          <h1>Processing...</h1>
+      </div>
+      <div class="modal-body">
+        <div class="progress">
+          <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+            <span class="sr-only">40% Complete (success)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>