How to add the data in HTML page from Flask

Question

@blueprint.route("/register/", methods=["GET", "POST"])
def register():
    """Register new user."""
    form = RegisterForm(request.form)
    print(form, form.username.data)
    if form.validate_on_submit():
        User.create(
            username=form.username.data,
            email=form.email.data,
            password=form.password.data,
            active=True,
        )
        flash("Thank you for registering. You can now log in.", "success")
        return redirect(url_for("public.home"))
    else:
        flash_errors(form)
    return render_template("public/register.html", form=form)

This is my registration code, I am facing a challenge where I have to add username to the UI page and this remains in page in all the different segments (on the website which I am building).

Since username is required everywhere, I have added the part where I need it, to the base.html and importing/ loading this in all my other pages.

Currently, I'm not able to set up the part where the username from the database is taken and added to the HTML page.

In this part on the HTML page, I want to import this

              <div class="user-card user-card--skin-dark notification-item-padding-x" style="background-image: '{{  asset_url_for("media/misc/bg-1.jpg")}}'">
                <div class="user-card__avatar">
                  <img alt="Pic" class="hidden" src="{{ asset_url_for('media/users/300_25.jpg') }}">
                   <span class="badge badge--lg badge--rounded badge--bold font-success">
        {{user.username}}
                  </span>
                </div>
                <div class="user-card__name">
                  {{user.first_name}
                </div>

              </div>

But I am not able to add this. Can anyone help me with this?

ps I am not good with the front end technologies and have said almost 0 knowledge of javascript

Answer 1

Check 'User Loader Function' function. A snap of code is given below :

In models.py

from app import login
@login.user_loader
def load_user(id):
    return User.query.get(int(id))

In routes.py

from flask_login import current_user, login_user
from app.models import User
@blueprint.route("/register/", methods=["GET", "POST"])
def register():
    """Register new user."""
    form = RegisterForm(request.form)
    print(form, form.username.data)
    if form.validate_on_submit():
        User.create(
            username=form.username.data,
            email=form.email.data,
            password=form.password.data,
            active=True,
        )
        flash("Thank you for registering. You can now log in.", "success")
        return redirect(url_for("public.home"))
    else:
        flash_errors(form)
    return render_template("public/register.html", form=form)

In html

      <div class="user-card user-card--skin-dark notification-item-padding-x" style="background-image: '{{  asset_url_for("media/misc/bg-1.jpg")}}'">
        <div class="user-card__avatar">
          <img alt="Pic" class="hidden" src="{{ asset_url_for('media/users/300_25.jpg') }}">
           <span class="badge badge--lg badge--rounded badge--bold font-success">
{{current_user.username}}
          </span>
        </div>
        <div class="user-card__name">
          {{user.first_name}
        </div>

      </div>

For better explanation check the link .