smallwat3r/shhh

{% extends 'base.html' %}

{% block container %}
  <form
    id="readSecretForm"
    action="{{ url_for('api.secret') }}"
    method="GET"
    autocomplete="off"
  >
    <fieldset id="readSecretFs">
      <legend class="has-text-left is-size-4 mb-1">
        <span class="feather mr-2" data-feather="lock"></span>
        This secret is protected by a passphrase
      </legend>
      <p class="has-text-justified help mb-4">
        As soon as the message gets decrypted, it gets deleted forever, hence you will only be able
        to see it once. Make sure to save it in a secure place before leaving this page.
      </p>
      <div class="field is-grouped">
        <p class="control is-expanded has-icons-left">
          <input
            class="input is-family-monospace"
            name="passphrase"
            id="passphrase"
            type="text"
            placeholder="Passphrase"
            autocomplete="off"
            required
          />
          <span class="icon is-small is-left">
            <span class="feather" data-feather="key"></span>
          </span>
        </p>
        <input type="hidden" name="external_id" id="externalId" value="{{ external_id }}" />
        <p class="control">
          <button type="submit" class="button is-primary" id="decryptBtn">Decrypt</button>
        </p>
      </div>
    </fieldset>
  </form>

  <div id="notification"></div>

  <template id="notificationSecretTemplate">
    <p class="has-text-justified help mt-4">Secret decrypted!</p>
    <div class="notification has-text-left is-primary is-family-monospace pop mt-2">
      <span id="copy" class="feather copy" data-feather="copy"></span>
      <span class="secret-message" id="notificationSecretContent"></span>
    </div>
  </template>

  <template id="notificationTemplate">
    <div class="notification has-text-weight-bold pop mt-4">
      <span id="notificationContent"></span>
    </div>
  </template>
{% endblock %}

{% block js %}
  {% assets "read" %}
    <script type="module" src="{{ ASSET_URL }}"></script>
  {% endassets %}
{% endblock %}