Auth menu in Base template


Some things we need to see in all pages are global navigation and information and links from authentication system. Let's create second one. With Flask-Login it is pretty simple. It offers us current_user  variable accessible in all templates. To show current user information in all pages we need to modify our base template.

Here is a part of code I've added to header and with some style improvements.
        ...
        <div class="c-header">
            <div class="slds-grid">
                <div class="slds-col">
                    <span class="slds-icon_container slds-icon-custom-custom5" title="Description of icon when needed">
                        <svg style="width: 50px; height:50px;" class="slds-icon" aria-hidden="true">
                            <use xlink:href="/static/slds/icons/custom-sprite/svg/symbols.svg#custom5"></use>
                        </svg>
                    </span>
                    <h1 class="c-header-title">Salesforce Backup Service</h1>
                </div>
                <div class="slds-col">
                    <div class="c-auth-subheader">
                        {% if current_user.is_authenticated %}
                            <span>You are logged in as <b>{{ current_user.username }}</b> | <a href="/auth/logout">Logout</a></span>
                        {% else %}
                            <a href="/auth/login">Login</a></span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        ...







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

Task schedule configuration (Cron-like)

Image
I've rethink schedule run flow and decide to focus on Cron like style. User can still select from simple options like 10 mins, 1 hour, 1 day but they will be stored in Cron format. I found great python lib to simplify this work - Croniter ( https://github.com/kiorky/croniter ). It allows us to validate cron expression and calculate next run time. In scheduler we will check next run time and start task processing if time is less or equal and task status is "waiting". ./backend/controllers/task.py ... @task_bp.route('/start', methods=['POST']) @login_required def start_tasks(): task_payload = request.get_json() task = Task.query.filter(Task.id == task_payload['id'], Task.user_id == current_user.id).first_or_404() if not task.config or not croniter.is_valid(task.config['trigger_value']) : abort(400, 'Invalid Trigger Setup') task.status = 'waiting' base = datetime.now...
Read more

Salesforce Lightning Design System (SLDS)

Image
At this moment our UI looks ugly without any styles. To make it looks better we can to use any of existing CSS frameworks. I tried Bootstrap ( https://getbootstrap.com/ ), Foundation ( https://get.foundation/ ), UIkit ( https://getuikit.com/ ). But as a Salesforce developer I found SLDS ( https://www.lightningdesignsystem.com/ ) is closer to my heart. Let's add it to our project. Download last SLDS (current version is 2.11.6) from https://www.lightningdesignsystem.com/downloads/ Extract it to the ./backend/static/slds folder. There are few other ways to add SLDS to the project: - from NPM in the Angular subproject. But in this case it can be accessible by Angular only and is compiled as part of the result bundle. But we have Flask project as global playground and few pages (like /auth/login) should work out of the angular context but have the same look. - external CDN (like  https://cdnjs.com/ ). I like this approach and use it often during development time, but ...
Read more