{% extends "base.html" %}

{% block content %}
<user-update-otp id="user-update-otp" inline-template>
  <div>
    <h1>Enable/Disable OTP</h1>

    <form @submit.prevent="submitPassword('enableOTP')" v-if="!otpEnabled && !otpPrivKey">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
      <input autocomplete="username" name="username" type="text" value="{{user.username}}" style="display:none;">
      <div>
        <label for="id_password-otp">Password:</label>
        <input autocomplete="current-password" id="id_password-otp"
               name="password" placeholder="Password" required=""
               type="password" v-model="password" ref="password">
      </div>
      <button type="submit" name="submit" value="Submit">
        Enable OTP
      </button>
    </form>

   <form @submit.prevent="submitPassword('disableOTP')" v-if="otpEnabled">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
      <input autocomplete="username" name="username" type="text" value="{{user.username}}" style="display:none;">
      <div id="otp-code" class="text-center" v-show="otpPrivKey">
        <canvas id="otp-qr-canvas"></canvas>
        <p>[[otpPrivKey]]</p>
      </div>
      <div>
        <label for="id_password-otp">Password:</label>
        <input autocomplete="current-password" id="id_password-otp"
               name="password" placeholder="Password" required=""
               type="password" v-model="password" ref="password">
      </div>
      <button type="submit" name="submit" value="Submit">
        Disable OTP
      </button>
    </form>

  </div>
</user-update-otp>
{% endblock %}

{% block users_bodyscripts %}
<script src="/static/vendor/qrcode.js" defer></script>
{% endblock %}