Base template

Template Inheritance flask


Usually regular sites have parts of the page shared between all pages. It can be header, footer, head block with required page setup information, main menu and auth section. Jinja templating system should help us to implement it.

First of all let's remove standard Angular Page generated for new project. We don't need this nice page anymore. Let's replace it with simple placeholder.

./frontend/src/app/app.component.html
<div>
    <h1>Angular APP</h1>
</div>

In ./templates folder we need to create new file with base template

./backend/templates/_base.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Salesforce Backup Service</title>

    {% block header %}{% endblock %}

</head>
<body>

    <div class="main-wrapper">
        <div class="c-header">
            <h1>Salesforce Backup Service</h1>
        </div>

        <hr />

        <div class="c-body">
            {% block content %}{% endblock %}
        </div>

        <hr />

    </div>

    <footer style="text-align: center;">
        <p>&copy; 2020 - Salesforce Backup Service</p>
    </footer>

</body>
</html>

Here you can see lines:
{% block header %}{% endblock %}
and
{% block content %}{% endblock %}
It is placeholders where we should insert content from others templates.

To make it works we need to modify home.html and login.html templates

./backend/templates/home.html
{% extends "_base.html" %}

{% block header %}
    {% if is_development_mode %}
        <base href="/">
    {% else %}
        {{ resources.head | safe }}
    {% endif %}
{% endblock %}

{% block content %}
    {% if is_development_mode %}
        <div>
            <script>
                console.log('************************************');
                console.log('************************************');
                console.log('         DEVELOPMENT MODE');
                console.log('************************************');
                console.log('************************************');
            </script>
            <div style="position: fixed; top: 0; right: 0; background-color: #ef4646; color: #fff; padding: 0 7px; z-index: 99999;">DEVELOPMENT MODE</div>
        </div>
        <app-root></app-root>
        <script src="https://localhost:4200/runtime.js" type="module"></script>
        <script src="https://localhost:4200/polyfills.js" type="module"></script>
        <script src="https://localhost:4200/styles.js" type="module"></script>
        <script src="https://localhost:4200/vendor.js" type="module"></script>
        <script src="https://localhost:4200/main.js" type="module"></script>
    {% else %}
        <h2>PRODUCTION MODE</h2>
        <app-root></app-root>
        {{ resources.scripts | safe }}
    {% endif %}
{% endblock %}


./backend/templates/auth/login.html
{% extends "_base.html" %}

{% block content %}
<div>
    <h3>Login</h3>
    <div>
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                    {{ messages[0] }}
                </div>
            {% endif %}
        {% endwith %}
        <form method="POST" action="">
            <div>
                <label>Email</label>
                <input type="email" name="email" placeholder="Your Email" />
            </div>

            <div>
                <label>Password</label>
                <input type="password" name="password" placeholder="Your Password" />
            </div>

            <div>
                <label class="checkbox">
                    <input type="checkbox">
                    Remember me
                </label>
            </div>

            <button>Login</button>

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

The main pages structure remains the same instead of few new Jinja2 tags: extends and block
More about Jinja2 Templating System you can read here
https://jinja.palletsprojects.com/en/2.11.x/templates/#template-inheritance


Angular App inside Flask Jinja2 Base template





Comments

Post a Comment

Popular posts from this blog

HTTPS in local environment for Angular + Flask project.

Image
Sometimes it is important to run project in local environment with HTTPS. For example when you use third party authentication system in our app. In my case I prefer to have local instance similar as mush as possible to the production. Moreover, it’s easy to implement. First what you need is the ssl key. You can follow this article to create it https://devcenter.heroku.com/articles/ssl-certificate-self Create your ssl key in ./key project folder. Finally it should look like this [dmnbrest@~/Documents/myPython/blog2/project/key]$ ls server.crt server.csr server.key Add HTTPS support to the FLASK: Update init section in your backend server file ( ./backend/app.py ) this way if __name__ == "__main__":     context = ('./key/server.crt', './key/server.key')     app.run(ssl_context=context, host='0.0.0.0', debug=True) But now we need to run backend with other command python ./backend/app.py This time you should see this output in
Read more

Salesforce Authentication 2 (Token Validation and Refresh)

Image
In last article we added Salesforce connection setup logic to our application. Now we need to implement connection test logic and token refresh flow.  Connection test flow is a simple request to Salesforce API with access_token. If we receive valid response it means all works fine. In other case we should notify user about problems with Salesforce integration. I mentioned last time when we setup connection and receive response I save it to DB as is as it contains many useful information. And now we can use part of this response. Here is example of OAuth handshake response: { 'access_token': '00Dxxxxxxxxxx', 'refresh_token': '5Aezzzzzzzzzz', 'signature': '8KFGb34p3vMLhSRHHmJZN3Bux9tlcA1+cvgIACw2SG4=', 'scope': 'refresh_token api', 'instance_url': 'https://ap17.salesforce.com', 'id': 'https://login.salesforce.com/id/00D2x000003v71DEAQ/0052x000001S9ojAAC', 'toke
Read more

User authentification with Flask-Login

Image
One important step of project preparation is Security. We plan to publish our app to Heroku where it will be accessible by anyone in the world. Let's make it more secure with Flask-Login ( https://flask-login.readthedocs.io/en/latest/ ). There is one post I will follow. https://www.digitalocean.com/community/tutorials/how-to-add-authentication-to-your-app-with-flask-login But I will simplify it and will use login flow only at this moment as we don't need registration. But for new user creation I will add cli script. To add auth flow to our app we need to create Login View with Controller and some additional service methods for Flask-Login. Also we have to update User model a little bit. backend/models/user.py from models import db from flask_login import UserMixin class User(UserMixin, db.Model): __tablename__ = 'users' id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(255), unique=True, nullable=False) email
Read more