rar-autopass/app/web/templates/_cont.html

<div class="card" id="card-cont">
  <h2 style="font-size:15px; margin:0 0 16px;">Contul meu</h2>

  <!-- Sectiunea: Date firma (US-002) -->
  <div style="margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line);">
    <h3 style="font-size:13px; color:var(--muted); font-weight:500; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em;">Date firma</h3>

    {% if date_firma_mesaj %}
      <div class="flash" style="margin-bottom:12px;">{{ date_firma_mesaj }}</div>
    {% endif %}

    {% if date_firma_eroare %}
      <div class="banner" style="margin-bottom:12px; padding:8px 12px;">{{ date_firma_eroare }}</div>
    {% endif %}

    <form hx-post="/cont/date-firma"
          hx-target="#card-cont"
          hx-swap="outerHTML">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <p style="margin:0 0 8px;">
        <label style="font-size:13px; color:var(--muted);">Companie</label><br>
        <input type="text" name="companie" required
               value="{{ account_meta.name or '' }}"
               style="width:100%; max-width:340px;"
               placeholder="Numele firmei (ex. Service Auto SRL)">
      </p>
      <p style="margin:0 0 8px;">
        <label style="font-size:13px; color:var(--muted);">Email contact</label><br>
        <input type="email" name="email" required
               value="{{ account_meta.email or '' }}"
               style="width:100%; max-width:340px;"
               placeholder="contact@firma.ro">
      </p>
      <p style="margin:0 0 12px;">
        <label style="font-size:13px; color:var(--muted);">CUI (cod unic de identificare)</label><br>
        <input type="text" name="cui" required
               value="{{ account_meta.cui or '' }}"
               style="width:100%; max-width:340px;"
               placeholder="RO12345678">
      </p>
      <button type="submit">Salveaza datele firmei</button>
    </form>
  </div>

  <!-- Sectiunea: Cheia mea API -->
  <div style="margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line);">
    <h3 style="font-size:13px; color:var(--muted); font-weight:500; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em;">Cheia mea API</h3>

    {% if api_key %}
      <div class="flash" style="margin-bottom:12px;">Cheia a fost rotita. Salveaz-o acum — nu o vei mai putea vedea.</div>

      <div class="card" style="font-family:monospace; word-break:break-all; font-size:14px; background:#0f1115; margin:0 0 8px;">
        {{ api_key }}
      </div>

      <button type="button"
              data-key="{{ api_key }}"
              onclick="navigator.clipboard.writeText(this.dataset.key).then(()=>this.textContent='Copiat!')">
        Copiaza cheia
      </button>

      <p style="font-size:13px; color:var(--warn); margin:10px 0 0;">
        Atentie: la urmatoarea vizita aceasta cheie dispare. Daca o pierzi, roteste din nou.
      </p>
    {% endif %}

    {% if rot_eroare %}
      <div class="banner" style="margin-bottom:12px; padding:8px 12px;">{{ rot_eroare }}</div>
    {% endif %}

    <form hx-post="/cont/roteste-cheie"
          hx-target="#card-cont"
          hx-swap="outerHTML"
          style="margin-top:{% if api_key %}12px{% else %}0{% endif %};">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" style="background:var(--card); color:var(--warn); border-color:var(--warn);">
        Roteste cheia API
      </button>
      <span style="font-size:12px; color:var(--muted); margin-left:8px;">Cheia veche se revoca imediat.</span>
    </form>
  </div>

  <!-- Sectiunea: Credentiale RAR -->
  <div>
    <h3 style="font-size:13px; color:var(--muted); font-weight:500; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em;">Credentiale RAR (portal AUTOPASS)</h3>

    {% if are_creds %}
      <div class="flash" style="margin-bottom:12px;">Credentiale RAR configurate.</div>
    {% endif %}

    {% if creds_mesaj %}
      <div class="flash" style="margin-bottom:12px;">{{ creds_mesaj }}</div>
    {% endif %}

    {% if creds_eroare %}
      <div class="banner" style="margin-bottom:12px; padding:8px 12px;">{{ creds_eroare }}</div>
    {% endif %}

    <form hx-post="/cont/rar-creds"
          hx-target="#card-cont"
          hx-swap="outerHTML">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <p style="margin:0 0 8px;">
        <label style="font-size:13px; color:var(--muted);">Email RAR</label><br>
        <input type="email" name="rar_email" required style="width:100%; max-width:340px;"
               placeholder="email@service.ro">
      </p>
      <p style="margin:0 0 12px;">
        <label style="font-size:13px; color:var(--muted);">Parola RAR</label><br>
        <input type="password" name="rar_parola" required style="width:100%; max-width:340px;"
               autocomplete="new-password">
      </p>
      <button type="submit">Salveaza credentiale RAR</button>
      <span style="font-size:12px; color:var(--muted); margin-left:8px;">Parola stocata criptat, niciodata in clar.</span>
    </form>
  </div>
</div>