Merge pull request #23 from jondonas/master

Basic WebApp #17 #22
ExchangeBC · Dec 21, 2015 · 7cb1c03 · 7cb1c03
2 parents 354d142 + 133630b
commit 7cb1c03
Show file tree

Hide file tree

Showing 8 changed files with 299 additions and 0 deletions.
diff --git a/code/webapp/README.md b/code/webapp/README.md
@@ -0,0 +1,46 @@
+#Further configuration for mysql database:
+##These dependencies must be installed on machine:
+
+sudo pip install Flask
+sudo pip install Flask-Mail
+
+```
+CREATE DATABASE garbageday;
+
+CREATE TABLE users (
+ id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
+ email VARCHAR(100),
+ zone INT,
+confirmed BOOLEAN NOT NULL DEFAULT 0);
+```
+
+-------------------------------------------------------------------------
+
+```
+DELIMITER $$
+CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
+    IN p_email VARCHAR(255),
+    IN p_zone VARCHAR(255)
+)
+BEGIN
+    if ( select exists (select 1 from users where email = p_email) ) THEN
+     
+        select 'Email has already been used!';
+     
+    ELSE
+     
+        insert into users
+        (
+            email,
+            zone
+        )
+        values
+        (
+            p_email,
+            p_zone
+        );
+     
+    END IF;
+END$$
+DELIMITER ;
+````
diff --git a/code/webapp/app.py b/code/webapp/app.py
@@ -0,0 +1,67 @@
+from flask import Flask, render_template, request, json, redirect
+from flask_mail import Message, Mail
+from flask.ext.mysql import MySQL
+
+app = Flask(__name__)
+#app.config['DEBUG'] = True
+
+ADMINS = ['email']
+app.config.update(
+        #EMAIL SETTINGS
+        MAIL_SERVER='smtp.gmail.com',
+        MAIL_PORT=465,
+        MAIL_USE_SSL=True,
+        MAIL_USERNAME = ADMINS[0],
+        MAIL_PASSWORD = 'password'
+        )
+
+mail = Mail(app)
+mysql = MySQL()
+
+# MySQL configurations
+app.config['MYSQL_DATABASE_USER'] = 'root'
+app.config['MYSQL_DATABASE_PASSWORD'] = 'password'
+app.config['MYSQL_DATABASE_DB'] = 'garbageday'
+app.config['MYSQL_DATABASE_HOST'] = 'localhost'
+mysql.init_app(app)
+
+@app.route("/")
+def main():
+    return render_template('index.html')
+
+@app.route('/showSignUp')
+def showSignUp():
+    return render_template('signup.html')
+
+@app.route('/signUp', methods=['POST'])
+def signUp():
+    try:
+	# read the posted values from the UI
+	_address = request.form['inputAddress']
+	_email = request.form['inputEmail']
+        # validate the received values
+        if _address and _email:	
+	    conn = mysql.connect()
+	    cursor = conn.cursor()
+	    cursor.callproc('sp_createUser',(_email,_address))
+	    data = cursor.fetchall()
+	    if len(data) is 0:
+		msg = Message("Garbage Alert Signup", sender=ADMINS[0], recipients=[_email])
+        	msg.html = '<b>Email Confirmation Test Complete</b>'
+        	mail.send(msg)
+		conn.commit()
+	        return render_template('confirmation.html')
+	    elif str(data[0]) == "(u'Email has already been used!',)":
+                return render_template("alreadyused.html")
+	    else:
+		return json.dumps({'error1':str(data[0])})
+        else:
+            return json.dumps({'html':'<span>Enter the required fields</span>'})
+    except Exception as e:
+        return json.dumps({'error2':str(e)})
+    finally:
+        cursor.close() 
+        conn.close()
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0")
diff --git a/code/webapp/static/images/kamloops.jpg b/code/webapp/static/images/kamloops.jpg
diff --git a/code/webapp/static/signup.css b/code/webapp/static/signup.css
@@ -0,0 +1,33 @@
+body {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.form-signin {
+  max-width: 330px;
+  padding: 15px; 
+  margin: 0 auto;
+}
+.form-signin .form-signin-heading,
+.form-signin .checkbox {
+  margin-bottom: 10px;
+}
+.form-signin .checkbox {
+  font-weight: normal;
+}
+.form-signin .form-control {
+  position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 10px; 
+  font-size: 16px;
+}
+.form-signin .form-control:focus {
+  z-index: 2;
+}
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/code/webapp/templates/alreadyused.html b/code/webapp/templates/alreadyused.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>G-Day</title>
+    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="header">
+            <h3 class="text-muted">Kamloops G-Day</h3>
+        </div>
+
+        <div class="jumbotron" style="background-image: url(../static/images/kamloops.jpg); background-size: cover;">
+            <h2 style="color:white;">Email Already Registered</h2>
+            <p class="lead"></p>
+            <p><a class="btn btn-lg btn-success" href="/showSignUp" role="banner">Go Back</a></p>
+	<br><br><br><br><br>
+	</div>
+
+        <div> <br><br><br><br></div>
+<footer class="footer">
+            <p>&copy; Legal Stuff 2015</p>
+        </footer>
+
+    </div>
+</body>
+
+</html>
diff --git a/code/webapp/templates/confirmation.html b/code/webapp/templates/confirmation.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>G-Day</title>
+    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="header">
+            <h3 class="text-muted">G-Day Yo</h3>
+        </div>
+
+        <div class="jumbotron" style="background-image: url(../static/images/kamloops.jpg); background-size: cover;">
+            <h2 style="color:white;">Confirmation Email Sent</h2>
+            <p class="lead"></p>
+            <p><a class="btn btn-lg btn-success" href="/" role="banner">Home Page</a></p>
+	<br><br><br><br><br><br>
+	</div>
+
+	<div> <br><br><br><br></div>
+<footer class="footer">
+            <p>&copy; Legal Stuff 2015</p>
+        </footer>
+
+    </div>
+</body>
+
+</html>
diff --git a/code/webapp/templates/index.html b/code/webapp/templates/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>G-Day</title>
+    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="header">
+            <nav>
+                <ul class="nav nav-pills pull-right">
+                    <li role="presentation" class="active"><a href="#">Home</a>
+                    </li>
+                    <li role="presentation"><a href="showSignUp">Sign Up</a>
+                    </li>
+                </ul>
+            </nav>
+            <h3 class="text-muted">Kamloops G-Day</h3>
+        </div>
+
+        <div class="jumbotron" style="background-image: url(../static/images/kamloops.jpg); background-size: cover;">
+            <h1 style="color:white;">Garbage Day</h1>
+            <p class="lead"></p>
+            <p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a>
+            </p><br><br><br><br>
+        </div>
+
+        <div class="row marketing">
+            <div class="col-lg-6">
+                <h4>Welcome to this work in progress</h4>
+                <p>Thanks for visiting :-)</p>
+            </div>
+        </div>
+
+        <footer class="footer">
+            <p>&copy; Legal Stuff 2015</p>
+        </footer>
+
+    </div>
+</body>
+
+</html>
diff --git a/code/webapp/templates/signup.html b/code/webapp/templates/signup.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>G-Day</title>
+    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
+    <link href="../static/signup.css" rel="stylesheet">
+
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div class="header">
+        <nav>
+          <ul class="nav nav-pills pull-right">
+            <li role="presentation" ><a href="/">Home</a></li>
+            <li role="presentation" class="active"><a href="#">Sign Up</a></li>
+          </ul>
+        </nav>
+        <h3 class="text-muted">Kamloops G-Day</h3>
+      </div>
+
+      <div class="jumbotron" style="background-image: url(../static/images/kamloops.jpg); background-size: cover;">
+        <h1 style="color:white;">Garbage Day</h1>
+        <form class="form-signin" action="/signUp" method="post">
+        <label for="inputAddress" class="sr-only">Address</label>
+        <input type="address" name="inputAddress" id="inputAddress" class="form-control" placeholder="Home Address" required autofocus>
+        <label for="inputEmail" class="sr-only">Email address</label>
+        <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>      
+        <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>   
+      </form>
+      </div>
+
+      <footer class="footer">
+        <p>&copy; Legal Stuff 2015</p>
+      </footer>
+
+    </div>
+  </body>
+</html>