smallwat3r/shhh

{% extends 'base.html' %}

{% block container %}
  <form
    id="createSecretForm"
    action="{{ url_for('api.secret') }}"
    method="POST"
    autocomplete="off"
    data-redirect="{{ url_for('web.created') }}"
  >
    <fieldset id="createSecretFs">
      <legend class="has-text-left is-size-5">Encrypt a secret</legend>
      <p class="has-text-justified help mb-2">
        Tip: for better security, avoid writing any info on how/where to use the secret you're
        sharing (like urls, websites or emails). Instead, write this in your email or chat,
        with the link and passphrase generated from Shhh. So even if someone got access to your
        secret, there is no way for the attacker to know how and where to use it.
      </p>
      <div class="field">
        <div class="control">
          <textarea
            class="textarea is-family-monospace"
            name="secret"
            id="inputSecret"
            rows="4"
            maxlength="{{ secret_max_length }}"
            placeholder="Your secret..."
            autocomplete="off"
            required
          ></textarea>
        </div>
        <p id="counter" class="help has-text-right"></p>
      </div>

      <div class="columns is-mobile">
        <div class="column">
          <p class="has-text-left mb-1 is-size-5">Destroy in</p>
          <div class="control has-icons-left">
            <div class="select is-fullwidth">
              <select id="expiresValue" name="expire"
                      data-default="{{ default_expiration_time_value }}">
                {% for name, value in expiration_time_values.items() %}
                  <option value="{{ value }}">{{ name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="icon is-small is-left">
              <span class="feather" data-feather="activity"></span>
            </div>
          </div>
        </div>
        <div class="column">
          <p class="has-text-left mb-1 is-size-5">Destroy after</p>
          <div class="control has-icons-left">
            <div class="select is-fullwidth">
              <select id="maxTries" name="tries" data-default="{{ default_read_tries_value }}">
                {% for value in read_tries_values %}
                  <option value="{{ value }}">{{ value }} tries</option>
                {% endfor %}
              </select>
            </div>
            <div class="icon is-small is-left">
              <span class="feather" data-feather="crosshair"></span>
            </div>
          </div>
        </div>
      </div>

      <p class="has-text-left mb-1 is-size-5">Passphrase to open secret</p>
      <p class="has-text-justified help mb-2">
        This is a random passphrase for the recipient to be able to decrypt your secret. Remember
        and send this passphrase to your recipient with the link Shhh will generate (min. 8
        characters, 1 number and 1 uppercase).
      </p>
      <div class="field is-grouped">
        <p class="control is-expanded has-icons-left">
          <input
            class="input is-family-monospace"
            id="passphrase"
            name="passphrase"
            type="text"
            placeholder="Passphrase"
            autocomplete="off"
            required
          />
          <span class="icon is-small is-left">
            <span class="feather" data-feather="key"></span>
          </span>
        </p>
        <div class="control">
          <button type="submit" class="button is-primary" id="createBtn">Go</button>
        </div>
      </div>
    </fieldset>
  </form>

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

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

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