flowers/templates/show.html

{% extends "common.html" %}
{% block title %}{{ flower.organization }} · Flowers{% endblock %}
{% block menuoptions %}
  <form action="{{ url_for('flower_vase.application') }}" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="list">
    <input type="hidden" name="filter" value="{{ filter|default('') }}">
    <button class="button ghost compact" type="submit">Back to vault</button>
  </form>
{% endblock %}
{% block content %}
<section class="detail-card card">
  <div class="detail-heading">
    <span class="entry-icon large" aria-hidden="true">{{ flower.organization[:1]|upper }}</span>
    <div>
      <p class="eyebrow">Credential</p>
      <h1>{{ flower.organization }}</h1>
      {% if flower.dateCreated not in ('STORED', 'FAILED') %}<p class="muted">Version from {{ flower.dateCreated[:10] }}</p>{% endif %}
    </div>
  </div>
  <dl class="details">
    <div><dt>Name</dt><dd>{{ flower.myName or '—' }}</dd></div>
    <div><dt>Login</dt><dd>{{ flower.myID }}</dd></div>
    <div>
      <dt>Secret</dt>
      <dd class="secret-line">
        <span id="secret" data-secret="{{ flower.mySecret }}">••••••••••••</span>
        <button class="icon-button" id="reveal" type="button">Reveal</button>
        <button class="icon-button" id="copy" type="button">Copy</button>
      </dd>
    </div>
  </dl>
  {% if flower.dateCreated not in ('STORED', 'FAILED') %}
  <div class="detail-actions">
    <form action="{{ url_for('flower_vase.application') }}" method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="action" value="edit">
      <input type="hidden" name="organization" value="{{ flower.organization }}">
      <input type="hidden" name="datetime" value="{{ flower.dateCreated }}">
      <button class="button primary" type="submit">Edit entry</button>
    </form>
  </div>
  {% endif %}
</section>
<script>
  const secret = document.querySelector('#secret');
  const reveal = document.querySelector('#reveal');
  const copy = document.querySelector('#copy');
  let visible = false;
  reveal.addEventListener('click', () => {
    visible = !visible;
    secret.textContent = visible ? secret.dataset.secret : '••••••••••••';
    reveal.textContent = visible ? 'Hide' : 'Reveal';
  });
  copy.addEventListener('click', async () => {
    await navigator.clipboard.writeText(secret.dataset.secret);
    copy.textContent = 'Copied';
    window.setTimeout(() => copy.textContent = 'Copy', 1400);
  });
</script>
{% endblock %}