{% extends "base.html" %}

{% set active_page = "user_profile" %}

{% 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-6">
        <div class="card">
          <div class="card-header">
            <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="card-body">
              <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">
                          <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
                        </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">
                            <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
                          </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-solid 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"><i class="fa-brands fa-google-play"></i>Android</a>
                          - <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605"><i class="fa-brands fa-app-store-ios"></i>iOS</a>)
                           or FreeOTP 
                           (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en"><i class="fa-brands fa-google-play"></i>Android</a>
                           - <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8"><i class="fa-brands fa-app-store-ios"></i>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 %}
<script>

    // 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, function() {
        window.location.reload();
        $('#tabs li:eq(2) a').tab('show');
    });
  });
</script>
{% endblock %}