Rebuilt register form using wtform

app.py

@@ -5,12 +5,16 @@
 from flask_pymongo import PyMongo
 from bson.objectid import ObjectId
 from werkzeug.security import generate_password_hash, check_password_hash
+from forms import RegistrationForm
+from extensions import csrf
 if os.path.exists("env.py"):
     import env
 
 
 app = Flask(__name__)
 
+csrf.init_app(app)
+
 app.config["MONGO_DBNAME"] = os.environ.get("MONGO_DBNAME")
 app.config["MONGO_URI"] = os.environ.get("MONGO_URI")
 app.secret_key = os.environ.get("SECRET_KEY")
@@ -24,32 +28,68 @@ def list_materials():
     materials = mongo.db.materials.find()
     return render_template("materials.html", materials=materials)
 
+
 @app.route("/register", methods=["GET", "POST"])
 def register():
-    if request.method == "POST":
+    name = None
+    email = None
+    password = None
+    form = RegistrationForm()
+    if form.validate_on_submit():        
+        name = form.name.data.lower()
+        email = form.email.data
+        password = generate_password_hash(form.password.data)
         existing_user = mongo.db.users.find_one(
-            {"username": request.form.get("username").lower()})
+            {"username": name})
 
         if existing_user:
             flash("Username already taken :(")
             return redirect(url_for("register"))
 
         register = {
-            "username": request.form.get("username").lower(),
-            "email": request.form.get("email"),
-            "password": generate_password_hash(request.form.get("password")),
+            "username": name,
+            "email": email,
+            "password": password,
             "admin": False
         }
-        mongo.db.users.insert_one(register)
+        mongo.db.users.insert_one(register)        
 
         # put the new user into session cookie
-        session["user"] = request.form.get("username").lower()
+        session["user"] = name
         flash("Thank you for signing up!")
-    return render_template("register.html")
+    return render_template(
+        "register.html",
+        form=form,
+        name=name,
+        email=email,
+        password=password
+    )
 
 
 if __name__ == "__main__":
     app.run(host=os.environ.get("IP"),
             port=int(os.environ.get("PORT")),
             debug=True)
 # Debug must be false on submission!
+
+
+#    if request.method == "POST":
+#        existing_user = mongo.db.users.find_one(
+#            {"username": request.form.get("username").lower()})
+#
+#        if existing_user:
+#            flash("Username already taken :(")
+#            return redirect(url_for("register"))
+#
+#        register = {
+#            "username": request.form.get("username").lower(),
+#            "email": request.form.get("email"),
+#            "password": generate_password_hash(request.form.get("password")),
+#            "admin": False
+#        }
+#        mongo.db.users.insert_one(register)
+#
+#        # put the new user into session cookie
+#        session["user"] = request.form.get("username").lower()
+#        flash("Thank you for signing up!")
+#    return render_template("register.html")

extensions.py

@@ -0,0 +1,3 @@
+from flask_wtf import CsrfProtect
+
+csrf = CsrfProtect()

forms.py

@@ -0,0 +1,39 @@
+from flask_wtf import FlaskForm
+from wtforms import (
+    StringField,
+    TextAreaField,
+    SubmitField,
+    PasswordField,
+    DateField,
+    SelectField
+)
+from wtforms.validators import (
+    DataRequired,
+    Email,
+    EqualTo,
+    Length,
+    URL
+)
+
+
+
+class RegistrationForm(FlaskForm):
+    """Sign up for a user account."""
+    name = StringField(
+        'Username',
+        [DataRequired()]
+    )
+    email = StringField(
+        'Email',
+        [
+            Email(message='Not a valid email address.'),
+            DataRequired()
+        ]
+    )
+    password = PasswordField(
+        'Password',
+        [
+            DataRequired(message="Please enter a password."),
+        ]
+    )      
+    submit = SubmitField('Submit')

requirements.txt

@@ -2,6 +2,8 @@ click==7.1.2
 dnspython==2.1.0
 Flask==1.1.2
 Flask-PyMongo==2.3.0
+Flask-WTF==0.14.3
 itsdangerous==1.1.0
 pymongo==3.11.3
 Werkzeug==1.0.1
+WTForms==2.3.3

templates/register.html

@@ -1,41 +1,82 @@
 {% extends "base.html" %}
 {% block content %}
 
+    <section>
+        <!-- Error messages-->
+        {% if form.email.errors %}            
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="alert alert-warning alert-dismissible fade show col-6 mt-5 shadow-lg p-3 mb-5 rounded"
+                        role="alert">
+                        {% for error in form.email.errors %}
+                        <strong>{{ error }}</strong>
+                        {% endfor %}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                </div>
+            </div>            
+        {% endif %}
+    </section>
+
 <div class="container">
 
     <h2 class="text-center mt-5">Register</h2>
 
     <div class="row justify-content-center">
-        <form class="card mt-5 col-10 col-md-8 text-white bg-primary shadow p-3 mb-5 rounded needs-validation" method="POST" action="{{ url_for('register') }}" novalidate>
+        <form class="card mt-5 col-10 col-md-8 text-white bg-primary shadow p-3 mb-5 rounded" method="POST" action="{{ url_for('register') }}">
+            {{ form.hidden_tag() }}
             <div class="card-body">
                 <!-- Username -->
                 <div class="input-group flex-nowrap">
                     <span class="input-group-text form-icon"><i class="fas fa-user-plus"></i></span>
-                    <input type="text" class="form-control" id="username" name="username" placeholder="Username"
-                        minlength="5" maxlength="15" pattern="^[a-zA-Z0-9]{5,15}$" aria-label="Username" aria-describedby="addon-wrapping" required>
+                    {{ form.name(class_='form-control') }}
                 </div>
                 <!-- Email -->
                 <div class="input-group mb-3 mt-3">
                     <span class="input-group-text form-icon"><i
                             class="fas fa-envelope"></i></span>
-                    <input type="email" class="form-control" id="email" name="email" placeholder="Email"
-                        aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" required>
+                    {{ form.email(class_='form-control') }}
                 </div>
                 <!-- Password -->
                 <div class="input-group mb-3">
                     <span class="input-group-text form-icon"><i class="fas fa-lock"></i></span>
-                    <input type="password" class="form-control" aria-label="Sizing example input" id="password" name="password" placeholder="Password"
-                        minlength="5" maxlength="15" aria-describedby="inputGroup-sizing-default" required>
+                    {{ form.password(class_='form-control') }}
                 </div>
                 <!-- Submit button -->
                 <div class="text-center">
-                    <button type="submit" class="btn btn-success">Sign Up <i class="fas fa-sign-in-alt"></i></button>
+                    <div>{{ form.submit(class_='btn btn-success') }} <i class="fas fa-sign-in-alt"></i></div>
                 </div>
             </div>
         </form>
     </div>
 </div>
 
-<script src="{{ url_for('static', filename='js/bootstrap-validator.js') }}"></script>
+    <!--<h2>FORM WTF</h2>
+
+    <div class="form-wrapper">
+        <h2 class="title">Register</h2>
+
+        <form method="POST" action="{{ url_for('register') }}">
+
+            <fieldset class="form-field">
+                
+            </fieldset>
+
+            <fieldset class="form-field">
+                
+            </fieldset>
+
+            <fieldset class="form-field">
+                
+            </fieldset>
+
+            <fieldset class="form-field">
+                {{ form.confirmPassword }}
+            </fieldset>
+
+            {{ form.submit }}
+
+        </form>
+    </div>-->
 
-{% endblock %}
+    {% endblock %}