auth-service/src/app/app.html

<main class="page">
  <section class="panel info">
    <h1>Telegram Login Dialog</h1>
    <p>
      Standalone extraction of the current login popup: same layout, same visual states,
      same QR flow, but with reusable neutral endpoint names for moving into a separate repo.
    </p>

    <div class="state-switcher" aria-label="Dialog state switcher">
      @for (dialogState of states; track dialogState) {
        <button
          [class.active]="state() === dialogState"
          [attr.data-state-btn]="dialogState"
          type="button"
          (click)="setState(dialogState)"
        >
          {{ dialogState === 'ready' ? 'Ready' : dialogState === 'loading' ? 'QR Loading' : dialogState === 'checking' ? 'Checking' : dialogState === 'expired' ? 'Expired' : 'Fallback' }}
        </button>
      }
    </div>

    <div class="api-grid">
      <div class="api-card">
        <strong>Start QR session</strong>
        <code>POST /userauth/qr/create</code>
        <p>Returns a one-time token and Telegram deeplink for the QR image.</p>
      </div>
      <div class="api-card">
        <strong>Poll QR confirmation</strong>
        <code>GET /userauth/qr/poll?token=...</code>
        <p>Returns pending, confirmed, or expired. On confirmed, also returns the user session.</p>
      </div>
      <div class="api-card">
        <strong>Read current session</strong>
        <code>GET /userauth/session</code>
        <p>Cookie-based session lookup used for initial auth check and fallback polling.</p>
      </div>
      <div class="api-card">
        <strong>Sync cart after login</strong>
        <code>POST /usersession/&#123;sessionId&#125;</code>
        <p>Existing cart payload is preserved. Only the namespace is generalized for reuse.</p>
      </div>
    </div>

    <div class="metadata">
      <strong>Behavior kept intact</strong>
      <ul>
        <li>Open Telegram directly from the primary button.</li>
        <li>Show QR immediately and poll every 3 seconds.</li>
        <li>Expire the QR after 100 checks and allow manual refresh.</li>
        <li>Re-check cookie session if QR creation fails.</li>
      </ul>
    </div>
  </section>

  <section class="panel">
    <div class="login-overlay">
      <div class="login-dialog">
        <button class="close-btn" type="button" aria-label="Close dialog">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg>
        </button>

        <div class="dialog-content" [attr.data-state]="state()" id="dialog-content">
          <div class="login-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
            </svg>
          </div>

          <h2>Login required</h2>
          <p class="login-desc">Please log in via Telegram to proceed with your order.</p>

          <div class="login-status checking">
            <div class="spinner"></div>
            <span>Checking...</span>
          </div>

          <div class="action-block">
            <button class="telegram-btn" type="button">
              <svg class="tg-icon" width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path>
              </svg>
              Log in with Telegram
            </button>

            <div class="qr-section">
              <p class="qr-hint">Or scan the QR code</p>

              <div class="qr-container qr-loading">
                <div class="spinner"></div>
              </div>

              <div class="qr-container qr-ready">
                <img
                  src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https%3A%2F%2Ft.me%2Fuserauth_bot%3Fstart%3Dlogin_sample_token"
                  alt="QR Code"
                  width="180"
                  height="180"
                  loading="eager"
                />
              </div>

              <div class="qr-container qr-expired" role="button" tabindex="0" aria-label="Refresh QR code">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M1 4v6h6M23 20v-6h-6"></path>
                  <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
                </svg>
                <span>QR code expired. Click to refresh</span>
              </div>
            </div>

            <p class="login-note">You will be redirected back after login.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>