Registration Form submission

Registration Page

We have registration route but there no registration page. Lets create registration page "register.html"

{% extends 'layout.html' %}
{% block content %}

    <form>
        {{ form.username.label }}
        {{ form.username }}
        
    </form>
{% endblock content %}

Now, when we try to navigate to url "localhost:5000/registration", we run into an error. WTForms requires a secret key which we can set by adding this line in _init_.py file of our blog

.
.
app.config['SECRET_KEY'] = 'mysecretkey'
.
.

all we need to do is add all the fields that we need in our form inside the form tag. So after adding remaining fields and some divs ,our registration form will look like this

{% extends 'layout.html' %}
{% block content %}
<div class="content-section">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Join Today</legend>
            <div class="form-group">
                {{ form.username.label(class="form-control-label") }}
                {{ form.username(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {{ form.email(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.password.label(class="form-control-label") }}
                {{ form.password(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.confirm_password.label(class="form-control-label") }}
                {{ form.confirm_password(class="form-control form-control-lg") }}
            </div>

        </fieldset>
        <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>

    </form>
</div>
{% endblock content %}

here , form.hidden_tag() returns a csrf token which is required by flask when submitting form to flask server.

Our form is now ready to be submitted. Once the user submits the form, we need to handle the form submission logic in our server. we will modify the registration route as follows:

from blog import app, db
from flask import render_template, redirect, flash

from blog.forms import RegistrationForm
from blog.models import User
.
.
@app.route("/registration", methods=["GET", "POST"])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data, password=form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('your account has been created! you can now log in', 'success')
        return redirect("/")
    return render_template('register.html', form=form)

we need to import database instance(db) and User model to add new user in our database. We will user flash to display one time message upon successful registration.

form.validate_on_submit() validates whether or not the data entered by the user is with form definition that we defined in class RegistrationForm in forms.py

Once the user completes the registration process we will redirect the user to the home page using redirect function.

• redirect function take location(url) of route that we want to redirect to

We have created a flash message , now we need to display it our page. Since we are redirecting the user to home page, we will update our home page to show flash messages. Add these codes at the beginning of block content.

templates/home.htm

{% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-success">
            {{ messages }}
        </div>
        {% endfor %}
    {% endif%}
{% endwith %}

our home.html will now look like

{% extends 'layout.html' %}
{% block content %}
{% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-success">
            {{ messages }}
        </div>
        {% endfor %}
    {% endif%}
{% endwith %}

{% for post in posts %}
<article class="media content-section">
    <div class="media-body">
        <div class="article-metadata">
            <a class="mr-2" href="#">{{ post.author }}</a>
            <small class="text-muted">{{ post.date_posted }}</small>
        </div>
        <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
        <p class="article-content">{{ post.content }}</p>
    </div>
</article>
{% endfor %}
{% endblock content %}

here,

• get_flashed_messages() - returns list of all the flashed messages
• so we loop through those messages and display them

we can view the all the users created by opening python terminal and entering these commands

from blog.models import User
User.query.all()

Implementation can be found over this commit