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

{% extends "base.html" %}
{% block title %}Autentificare — ROMFAST AUTOPASS{% endblock %}
{% block content %}
{# US-010 (PRD 5.16): /login — layout 2 coloane branduit.
   Stanga: logo + tagline + puncte de incredere.
   Dreapta: formular de autentificare (neschimbat: CSRF, POST /login, link signup).
   Pe mobil (<640px): se stivuiesc, partea dreapta (formular) iese prima. #}
<div class="login-2col" style="max-width:860px; margin:32px auto;">
  {# Antet minimal deja randat in base.html (fara RAR dot, fara burger, fara account_name) #}
  <div class="login-shell">
    {# === Coloana stanga: brand + trust === #}
    <aside class="login-aside" aria-label="Despre ROMFAST AUTOPASS">
      <div class="login-brand-row">
        <img src="/static/romfast_logo.png" alt="ROMFAST" style="height:36px; width:auto;">
      </div>
      <h2 class="login-headline">ROMFAST <span style="color:var(--accent);">AUTOPASS</span></h2>
      <p class="login-tagline">Declara prestatiile de service-auto la RAR AUTOPASS, automat.
        Conform Legii 142/2023 si OMTI 210/2024.</p>
      <ul class="login-trust">
        <li>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
          Conform Legii 142/2023 si OMTI 210/2024
        </li>
        <li>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
          Datele criptate, sterse la 3 luni
        </li>
        <li>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
          Parte din familia ROA — Romfast Applications
        </li>
      </ul>
    </aside>

    {# === Coloana dreapta: formular (NESCHIMBAT — CSRF, POST /login, link signup) === #}
    <div class="login-form-col">
      <h3 style="font-size:var(--fs-xl); margin:0 0 4px;">Autentificare</h3>
      <p style="font-size:var(--fs-sm); color:var(--muted); margin:0 0 22px;">
        Intra in contul service-ului tau.
      </p>

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

      <form method="post" action="/login">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="camp-slim">
          <label for="lf-email">Email</label>
          <input id="lf-email" type="email" name="email" required autocomplete="email">
        </div>
        <div class="camp-slim" style="margin-bottom:14px;">
          <label for="lf-parola">Parola</label>
          <input id="lf-parola" type="password" name="parola" required autocomplete="current-password">
        </div>
        <button type="submit" class="btn-primary-full">Intra in cont</button>
      </form>

      <p class="login-foot">
        Cont nou? <a href="/signup" style="color:var(--accent);">Inregistreaza service-ul</a>
      </p>
    </div>
  </div>
</div>

<style>
  /* US-010 PRD 5.16: layout /login profesional 2 coloane. */
  .login-shell {
    display:grid; grid-template-columns:1.1fr 0.9fr;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:var(--card); min-height:480px;
  }
  .login-aside {
    padding:40px 38px;
    background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 12%,var(--card)), var(--card));
    border-right:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:center;
  }
  .login-brand-row { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
  .login-headline { font-size:var(--fs-2xl); line-height:var(--lh-tight); margin:0 0 12px; letter-spacing:-.02em; }
  .login-tagline { font-size:var(--fs-md); color:var(--muted); line-height:1.6; margin:0 0 20px; max-width:340px; }
  .login-trust { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .login-trust li { display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); color:var(--ink); }
  .login-trust svg { flex-shrink:0; color:var(--ok); }
  .login-form-col { padding:40px 38px; display:flex; flex-direction:column; justify-content:center; }
  .btn-primary-full { width:100%; min-height:46px; font-family:var(--font-ui); font-size:var(--fs-md);
                      font-weight:600; background:var(--accent); color:#fff; border:none;
                      border-radius:8px; cursor:pointer; margin-top:4px; }
  .btn-primary-full:hover { filter:brightness(1.08); }
  .login-foot { text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-top:18px; }
  /* Mobil: stivuire verticala, formular sus */
  @media (max-width:640px) {
    .login-shell { grid-template-columns:1fr; grid-template-rows:auto auto; }
    .login-aside { order:2; border-right:none; border-top:1px solid var(--line); padding:28px 22px; }
    .login-form-col { order:1; padding:28px 22px; }
  }
</style>
{% endblock %}