{% 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="container-fluid">
    <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">
            <div class="nav-tabs-custom">
              <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" href="#tabs-personal" data-toggle="tab">Personal Info</a>
                </li>
                {%  if session['authentication_type'] == 'LOCAL' %}
                  <li class="nav-item">
                    <a class="nav-link" href="#tabs-password" data-toggle="tab">Change Password</a>
                  </li>
                {% endif %}
                {%  if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
                  <li class="nav-item">
                    <a class="nav-link" href="#tabs-authentication" data-toggle="tab">Authentication</a>
                  </li>
                {% endif %}
              </ul>
              <div class="tab-content">
                <div class="tab-pane fade show 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-primary">Submit</button>
                      </div>
                    {% endif %}
                  </form>
                </div>
                {% if session['authentication_type'] == 'LOCAL' %}
                  <div class="tab-pane fade" 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-primary">Change Password</button>
                        </div>
                      </form>
                    {% endif %}
                  </div>
                {% endif %}
                <div class="tab-pane fade" 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>
              </div>
            </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 %}