powerdns-admin/powerdnsadmin/templates/user_profile.html

{% extends "base.html" %}

{% block title %}
  <title>
    My Profile - {{ SITE_NAME }}
  </title>
{% endblock %}

{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">
            User
            <small>My Profile</small>
          </h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">My Profile</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
<section class="content">
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title">Edit my profile{%  if session['authentication_type'] != 'LOCAL' %} [Disabled -
                        Authenticated externally]{% endif %}</h3>
                </div>
                <div class="card-body">
                    <!-- Custom Tabs -->
                    <div class="nav-tabs-custom" id="tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tabs-personal" data-toggle="tab">Personal
                                    Info</a></li>
                            {%  if session['authentication_type'] == 'LOCAL' %}
                            <li><a href="#tabs-password" data-toggle="tab">Change Password</a></li>
                            {% endif %}
                            {%  if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
                            <li><a href="#tabs-authentication" data-toggle="tab">Authentication</a></li>
                            {% endif %}
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabs-personal">
                                <form role="form" method="post" action="{{ user_profile }}">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                    <div class="form-group">
                                        <label for="firstname">First Name</label> <input type="text"
                                            class="form-control" name="firstname" id="firstname"
                                            placeholder="{{ current_user.firstname }}"
                                            {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastname">Last Name</label> <input type="text" class="form-control"
                                            name="lastname" id="lastname" placeholder="{{ current_user.lastname }}"
                                            {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                                    </div>
                                    <div class="form-group">
                                        <label for="email">E-mail</label> <input type="email" class="form-control"
                                            name="email" id="email" placeholder="{{ current_user.email }}"
                                            {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
                                    </div>{%  if session['authentication_type'] == 'LOCAL' %}
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-flat btn-primary">Submit</button>
                                    </div>{% endif %}
                                </form>
                            </div>
                            {% if session['authentication_type'] == 'LOCAL' %}
                            <div class="tab-pane" id="tabs-password">
                                {% if not current_user.password %}
                                Your account password is managed via LDAP which isn't supported to change here.
                                {% else %}
                                <form action="{{ user_profile }}" method="post">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                    <div class="form-group">
                                        <label for="password">New Password</label> <input type="password"
                                            class="form-control" name="password" id="newpassword" />
                                    </div>
                                    <div class="form-group">
                                        <label for="rpassword">Re-type New Password</label> <input type="password"
                                            class="form-control" name="rpassword" id="rpassword" />
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-flat btn-primary">Change Password</button>
                                    </div>
                                </form>
                                {% endif %}
                            </div>
                            {% endif %}
                            <!-- {% if session['authentication_type'] in ['LOCAL', 'LDAP'] %} -->
                            <div class="tab-pane" id="tabs-authentication">
                                <form action="{{ user_profile }}" method="post">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                                    <div class="form-group">
                                        <input type="checkbox" id="otp_toggle" class="otp_toggle"
                                            {% if current_user.otp_secret %}checked{% endif %}>
                                        <label for="otp_toggle">Enable Two Factor Authentication</label>
                                        {% if current_user.otp_secret %}
                                        <div id="token_information">
                                            <p><img id="qrcode" src="{{ url_for('user.qrcode') }}"></p>
                                            <div style="position: relative; left: 15px">
                                                Your secret key is: <br />
                                                <form>
                                                    <input type=text id="otp_secret" value={{current_user.otp_secret}} readonly>
                                                    <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()"> <i class="fa fa-clipboard"></i> </button>
                                                    <br /><font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
                                                </form>
                                            </div>
                                            You can use Google Authenticator (<a target="_blank"
                                                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
                                            - <a target="_blank"
                                                href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>)
                                            or FreeOTP (<a target="_blank"
                                                href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a>
                                            - <a target="_blank"
                                                href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>)
                                            on your smartphone to scan the QR code.
                                            <br />
                                            <font color="red"><strong><i>Make sure only you can see this QR Code and secret key and
                                                        nobody can capture them.</i></strong></font>
                                        </div>
                                        {% endif %}
                                    </div>
                                </form>
                            </div>
                            <!-- {% endif %} -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block extrascripts %}
<!-- TODO: add password and password confirmation comparison check -->
<script>
    $(function () {
        $('#tabs').tabs({
            // add url anchor tags
            activate: function (event, ui) {
                window.location.hash = ui.newPanel.attr('id');
            }
        });
        // re-set active tab (ui)
        var activeTabIdx = $('#tabs').tabs('option', 'active');
        $('#tabs li:eq(' + activeTabIdx + ')').tab('show')
    });

    // initialize pretty checkboxes
    $('.otp_toggle').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        increaseArea: '20%'
    });

    // handle checkbox toggling
    $('.otp_toggle').on('ifToggled', function (event) {
        var enable_otp = $(this).prop('checked');
        var postdata = {
            'action': 'enable_otp',
            'data': {
                'enable_otp': enable_otp
            },
            '_csrf_token': '{{ csrf_token() }}'
        };
        applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true);
    });
</script>
{% endblock %}