Implementation WTF form for user Register

store/forms.py

-import wtforms
 from flask_wtf import FlaskForm
-from wtforms import StringField  # Basic example.
-from wtforms.validators import DataRequired  # Basic example.
+from wtforms import BooleanField, StringField, PasswordField, SubmitField, validators
+from wtforms.validators import DataRequired  # Basic example.#
+
+
+class RegistrationForm(FlaskForm):
+    username = StringField("Username", [validators.Length(min=4, max=25)])
+    email = StringField("Email Address", [validators.Length(min=6, max=320)])
+    securityQ1 = StringField("securityQ1", [validators.Length(min=6, max=35)])
+    phone_number = StringField("phone_number", [validators.Length(min=6, max=35)])
+    password = PasswordField(
+        "New Password",
+        [
+            validators.DataRequired(),
+            validators.EqualTo("confirm", message="Passwords must match"),
+            validators.Length(min=6),
+        ],
+    )
+    confirm = PasswordField("Repeat Password")
+    accept_tos = BooleanField("I accept the TOS", [validators.DataRequired()])
+    submit = SubmitField("Sign Up")

store/routes.py

@@ -2,6 +2,8 @@ from store import app, db
 from flask import render_template, request, flash, redirect, url_for, Flask, session
 import json
 from store.utility import *
+from store.forms import *
+
 
 # Official flask-login doc free liecense
 # https://flask-login.readthedocs.io/en/latest/
@@ -85,32 +87,20 @@ def itemSets():
 
 @app.route("/register", methods=["POST", "GET"])
 def register():
-    if request.method == "POST":
-        error = None  # errors
-        username = request.form["username"]
-        password = request.form["password"]
-        securityQ1 = request.form["securityQ1"]
-        email = request.form["email"]
-        phone_number = request.form["phone_number"]
-        # user_exists = User.query.filter_by(username=username).first()
-        if User.checkIfUserExist(User, username):
-            error = "The username you chose is already taken."
-            return render_template(
-                "userContent/register.html", title="Register", error=error
-            )
-        else:
-            new_user = User.create_user(
-                username=username,
-                password=password,
-                email=email,
-                phone_number=phone_number,
-                securityQ1=securityQ1,
-            )
-            flash(
-                "Your account has been created! You are now able to log in.", "success"
+    form = RegistrationForm()
+
+    if form.validate_on_submit():
+        flash("RAN")
+        user = User.create_user(
+            form.username.data,
+            form.password.data,
+            form.email.data,
+            form.phone_number.data,
+            form.securityQ1.data,
         )
+
         return redirect(url_for("index"))
-    return render_template("userContent/register.html", title="Register")
+    return render_template("userContent/register.html", form=form)
 
 
 @app.route("/login", methods=["POST", "GET"])

store/templates/_formhelpers.html

+<!-- 
+Macro file that renders a field with label and a list of errors if there are any
+https://flask.palletsprojects.com/en/2.2.x/patterns/wtforms/#forms-in-templates 
+-->
+
+{% macro render_field(field) %}
+<dt>{{ field.label }}
+<dd>{{ field(**kwargs)|safe }}
+    {% if field.errors %}
+    <ul class=errors>
+        {% for error in field.errors %}
+        <li>{{ error }}</li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+</dd>
+{% endmacro %}
\ No newline at end of file

store/templates/userContent/register.html

+{% from "_formhelpers.html" import render_field %}
 {%extends 'base.html' %}
 {% block title %} Register | Antiques Online {% endblock %}
 {% block content %}
-<form method="POST" action="{{ url_for('register') }}" style="float: center; text-align: center;">
-  <div class="container">
-    <h1>Register</h1>
-
-    {% if error %}
-    <p class=error><strong>Error:</strong> {{ error }}
-      {% endif %}
-
+<form method="POST">
+  {{form.hidden_tag()}}
+  <dl>
     <table class="loginTable">
       <tr>
-        <td><label for="username">Username:</label></td>
-        <td><input type="username" placeholder="Enter Username..." name="username" id="username" required></td>
+        <td>{{ render_field(form.username) }} </td>
       </tr>
       <tr>
-        <td><label for="email">E-mail Address:</label></td>
-        <td><input type="email" placeholder="Enter E-mail..." name="email" id="email" required></td>
+        <td>{{ render_field(form.password) }}</td>
       </tr>
       <tr>
-        <td><label for="phone_number">Phone Number:</label></td>
-        <td><input type="phone_number" placeholder="Enter Phone Number..." name="phone_number" id="phone_number"
-            required></td>
+        <td>{{ render_field(form.email) }} </td>
       </tr>
       <tr>
-        <td><label for="securityQ1">Favourite Color:</label></td>
-        <td><input type="securityQ1" placeholder="Enter a Colour..." name="securityQ1" id="securityQ1" required></td>
+        <td>{{ render_field(form.phone_number) }}</td>
       </tr>
       <tr>
-        <td><label for="password">Password:</label></td>
-        <td><input type="password" placeholder="Enter Password..." name="password" id="password" required></td>
+        <td> {{ render_field(form.securityQ1) }}</td>
+      </tr>
+      <tr>
+        <td>{{ render_field(form.confirm) }}</td>
+      </tr>
+      <tr>
+        <td>{{ render_field(form.accept_tos) }}</td>
       </tr>
     </table>
-
-    <input class="button" type="submit" value="Register">
-  </div>
+  </dl>
+  {{form.submit()}}
 </form>
+
+
 {% endblock %}
\ No newline at end of file