hack4impact/flask-base

{% extends 'layouts/base.html' %}
{% import 'macros/form_macros.html' as f %}

{% set deletion_endpoint = 'admin.delete_user_request' %}

{% set endpoints = [
    ('admin.user_info', 'User information'),
    ('admin.change_user_email', 'Change email address'),
    ('admin.change_account_type', 'Change account type'),
    (deletion_endpoint, 'Delete user')
] %}

{% macro navigation(items) %}
    <div class="ui vertical fluid secondary menu">
        {% for route, name in items %}
            {% set href = url_for(route, user_id=user.id) %}
            <a class="item {% if request.endpoint == route %}active{% endif %}" href="{{ href }}">
                {{ name }}
            </a>
        {% endfor %}
    </div>
{% endmacro %}

{% macro user_info(user) %}
    <table class="ui compact definition table">
        <tr><td>Full name</td><td>{{ '%s %s' % (user.first_name, user.last_name) }}</td></tr>
        <tr><td>Email address</td><td>{{ user.email }}</td></tr>
        <tr><td>Account type</td><td>{{ user.role.name }}</td></tr>
    </table>
{% endmacro %}

{% block content %}
    <div class="ui stackable centered grid container">
        <div class="twelve wide column">
            <a class="ui basic compact button" href="{{ url_for('admin.registered_users') }}">
                <i class="caret left icon"></i>
                Back to all users
            </a>
            <h2 class="ui header">
                {{ user.full_name() }}
                <div class="sub header">View and manage {{ user.first_name }}’s account.</div>
            </h2>
        </div>
        <div class="stretched divided very relaxed row">
            <div class="four wide column">
                {{ navigation(endpoints) }}
            </div>
            <div class="eight wide column">
                {% if request.endpoint == deletion_endpoint %}
                    <h3 class="ui red block header">
                        <i class="warning circle icon"></i>
                        <div class="content">
                            This action is permanent
                            <div class="sub header">
                                Deleting a user account is not a reversible change. Any information associated
                                with this account will be removed, and cannot be recovered.
                            </div>
                        </div>
                    </h3>

                    <div class="ui form">
                        <div class="inline field">
                            <div class="ui deletion checkbox">
                                <input type="checkbox" tabindex="0" class="hidden">
                                <label>I understand that this action cannot be undone.</label>
                            </div>
                        </div>
                        <a class="ui disabled negative deletion button">
                            Delete this user
                        </a>
                    </div>
                    </div>
                {% elif form %}
                    {{ f.render_form(form) }}
                {% else %}
                    {{ user_info(user) }}
                {% endif %}
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $('.deletion.checkbox').checkbox({
            onChecked: function() {
                $('.deletion.button').removeClass('disabled')
                        .attr('href', '{{ url_for('admin.delete_user', user_id=user.id) }}');
            },
            onUnchecked: function() {
                $('.deletion.button').addClass('disabled').removeAttr('href');
            }
        });
    </script>
{% endblock %}