ti-account-app/accounts/templates/login.j2

{% import "bootstrap/wtf.html" as wtf %}
{% extends "bootstrap/base.html" %}
{% block title %}Manage your Technical Incompetence account{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
{% include "fragments/navbar.j2" %}
{% endblock %}

{% block content %}
    <iframe id="apps" src="http://localhost:5000/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
    <div id="overlay" style="display: none;" onclick="showApps();"></div>
    <div class="container" style="margin-top: 15px">
        <div class="jumbotron">
            <h1>Sign in for our awesome service</h1>
            <p>Forgot your password? Too bad! We don't have emails working yet!</p>
        </div>
        <div class="col-md-12">

        {% if error is defined %}
        <div id="error-alert" class="alert alert-danger" role="alert">
            {{ error }}
        </div>
        {% endif %}

        {{wtf.quick_form(form, novalidate=True)}}
    </div>
{% endblock %}

{% block scripts %}
{{ super () }}
<script>
function showApps () {
    $("#apps").toggle();
    $("#overlay").toggle();
}
</script>
{% endblock %}