first pass and Flask-WTF

requirements.txt

@@ -3,3 +3,5 @@ flask
 requests_html
 beautifulsoup4
 click
+Flask-WTF
+bootstrap-flask

src/flask/pool_data.py

@@ -2,37 +2,64 @@ import mongo.build_db as pool_database
 import mongo.query_db as pool_database_query
 
 from flask import Flask, render_template, request, jsonify, redirect
+from flask_bootstrap import Bootstrap5
+from wtforms import StringField, SubmitField
+from wtforms.validators import DataRequired, Length
+
 
 app = Flask(__name__)
+app.secret_key = 'testsecret' #this value will change
+
+bootstrap = Bootstrap5(app)
+
+csrf = CSRFProtect(app)
+
+class userForm(FlaskForm):
+    username = StringField("User Name?", validators=[DataRequired()])
+    password = PasswordField("Password?", validators[DataRequired()])
+    submit = SubmitField("Letsa GO!")
+
+class dataForm(FlaskForm):
+    test_user = RadioField("Tester:", 
+        choices=[("Isabella"), ("Heather"), ("Ariah")])
+    Date = DateField("Date:")
+    PH = DecimalField("PH:")
+    total_chlorine = IntegerField("Total Chlorine:")
+    free_chlorine = IntegerField("Free Chlorine:")
+    alkalinity = DecimalField("Alkalinity:")
+    salt = IntegerField("Salt:")
+    submit = SubmitField("Write it, Write it REAAAAAAL GOOOD")
     
 @app.route("/", methods=["GET","POST"])
 def index():
-    if request.method == "POST":
+    form = userForm()
-        username = request.form["username"]
+    if form.validate_on_submit()
-        password = request.form["password"]
+        username = form.username.data
+        password = form.password.data
         db = pool_database_query.pool_query()
         if db.user_check(username, password):
             return redirect("/updater")
         else:
-            return render_template("index.html", try_again=True)
+            return render_template("index.html", try_again=True, form=form)
     else:
-        return render_template("index.html", try_again=False)
+        return render_template("index.html", try_again=False, form=form)
 
 @app.route("/updater", methods=["GET", "POST"])
 def updater():
     query_db = pool_database_query.pool_query()
     query = query_db.get_top(10, "ph")
+    form = dataForm()
 
-    if request.method == "POST":
+    if form.validate_on_submit()
         database = pool_database.pool_data()
         new_record = {
-                "ph": f'{request.form["ph"]}',
+                "ph": f'{form.PH.data}',
-                "total_chlorine" : f'{request.form["total_chlorine"]}',
+                "total_chlorine" : f'{form.total_chlorine.data}',
-                "free_chlorine": f'{request.form["free_chlorine"]}',
+                "free_chlorine": f'{form.free_chlorine.data}',
-                "alkalinity": f'{request.form["alkalinity"]}',
+                "alkalinity": f'{form.alkalinity.data}',
-                "salt": f'{request.form["salt"]}',
+                "salt": f'{form.salt.data}',
-                "date": f'{request.form["date"]}',
+                "date": f'{form.Date.data}',
-                "test_user": f'{request.form["test_user"]}',
+                "test_user": f'{form.test_user.data}',
             }
         if database.record_exists(new_record["date"], new_record["test_user"]):
             for field in database.existing_record:
@@ -45,9 +72,9 @@ def updater():
                                       new_record["alkalinity"], new_record["date"], new_record["test_user"], new_record["salt"])
 
 
-        return render_template("updater.html", list=query)
+        return render_template("updater.html", list=query, form=form)
     else:
-        return render_template("updater.html", list=query)
+        return render_template("updater.html", list=query, form=form)
 
 @app.route("/update_db", methods=["POST"])
 def pool_data_update():

src/flask/templates/index.html

@@ -1,11 +1,37 @@
+{% extends 'base.html' %}
+{% from 'bootstrap5/form.html' import render_form %}
+
+{% block title %}
+Login to Pool Data Tracker
+{% endblock %}
+{% block content %}
+
+<!--
+	TIPS about using Bootstrap-Flask:
+	https://github.com/helloflask/bootstrap-flask
+	https://bootstrap-flask.readthedocs.io/
+-->
+
 <div class="log-form">
-  <h2>Login to Pool Data Tracker</h2>
   {% if try_again %}
   <h4>Login Failed Please try Again</h4>
   {% endif %}
-  <form method="POST" actions="/">
+
-    <input type="text" id="username" name="username" title="username" placeholder="username" />
+    <div class="container">
-    <input type="password" id="password" name="password" title="username" placeholder="password" />
+        <div class="row">
-    <button type="submit" class="btn">Login</button>
+            <div class="col-md-10 col-lg-8 mx-lg-auto mx-md-auto">
-  </form>
+
+                <h1 class="pt-5 pb-2">WHOOOOOOO ARE YOU!</h1>
+
+                <p class="lead">If you know you know</p>
+
+                {{ render_form(form) }}
+
+                <p class="pt-5"><strong>{{ message }}</strong></p>
+
+            </div>
+        </div>
+    </div>
 </div><!--end log form -->
+
+{% endblock %}

src/flask/templates/updater.html

@@ -1,49 +1,25 @@
-<h2>Data Input</h2>
+{% extends 'base.html' %}
+{% from 'bootstrap5/form.html' import render_form %}
+
+{% block title %}
+    Data Input
+{% endblock %}
+{% block content %}
+
+<!--
+	TIPS about using Bootstrap-Flask:
+	https://github.com/helloflask/bootstrap-flask
+	https://bootstrap-flask.readthedocs.io/
+-->
+
 <h5>Input Data you want to store</h5>
 <div class="row">
     <div class="col-md-6">
-    <table border=6>
+    <table border=6>(
         <tr>
             <td>
-                <form method="POST" action="/updater">
+                {{ render_form(form) }}
-                <div class="form-group">
+            </td>
-                    <label for="test_user">Tester:</label>
-                    <div>
-                      <input type="radio" id="Isabella" class="form-control" name="test_user" value="Isabella" />
-                      <label for="Isabella">Isabella</label><br>
-                      <input type="radio" id="Heather" class="form-control" name="test_user" value="Heather" />
-                      <label for="Heather">Heather</label><br>
-                      <input type="radio" id="Ariah" class="form-control" name="test_user" value="Ariah" />
-                      <label for="Ariah">Ariah</label><br><br>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="date">Date:</label><br>
-                    <input type="date" id="date" class="form-control" name="date" /><br><br>
-                </div>
-                <div class="form-group">
-                    <label for="ph">PH:</label><br>
-                    <input type="number" min=0 step="0.01" id="ph" class="form-control" name="ph" required><br><br>
-                </div>
-                <div class="form-group">
-                    <label for="total_chlorine">Total Chlorine:</label><br>
-                    <input type="number" id="total_chlorine" min=0 class="form-control" name="total_chlorine" required><br><br>
-                </div>
-                <div class="form-group">
-                    <label for="free_chlorine">Free Chlorine:</label><br>
-                    <input type="number" class="form-control" min=0 id="free_chlorine" name="free_chlorine" /><br><br>
-                </div>
-                <div class="form-group">
-                    <label for="alkalinity">Alkalinity:</label><br>
-                    <input type="number" id="alkalinity" min=0 class="form-control" name="alkalinity" required><br><br>
-                </div>
-                <div class="form-group">
-                    <label for="salt">Salt:</label><br>
-                    <input type="number" id="salt" min=0 class="form-control" name="salt" ><br><br>
-                </div>
-                <input type="submit" id="submit_button" class="btn btn-primary" name="action" value="Add Data"/>
-            </form>
-        </td>
         <td>
             <table border = 1>
             {% for row in list %}
@@ -61,3 +37,4 @@
     </tr>
 
 </div>
+{% endblock %}