vcard4reseller/backend/templates/public/wallet.html.twig
Thomas Peterson 3dfb0b2831 Wallet: QR auf Profilseite → Apple/Google Wallet-Pass
- WalletService (dependency-frei): Google signierter RS256-„Save"-JWT-Link;
  Apple .pkpass (pass.json + GD-Icons + manifest + PKCS#7 via openssl + zip).
  Konfigurationsgesteuert (env), ohne Zugangsdaten deaktiviert.
- WalletController: /w/{code} Landing (Geräteerkennung + Buttons),
  /w/{code}/qr.png, /apple.pkpass, /google (302). Adressierung via shortCode.
- Öffentliche Profilseite: QR-Bereich „Zur Wallet hinzufügen" (nur wenn
  Provider konfiguriert + shortCode vorhanden).
- .env Wallet-Block (leer=aus), KONZEPT §12 + deploy/README dokumentiert.

Verifiziert: not-configured → ausgeblendet/404; mit Test-Zertifikaten valides
signiertes .pkpass + Google-Save-JWT. Produktiv: echte Apple-/Google-Creds nötig.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-03 22:28:14 +02:00

58 lines
2.9 KiB
Twig
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'base.html.twig' %}
{% set fullName = (e.firstName ~ ' ' ~ e.lastName)|trim %}
{% set b = e.company.brandingConfig %}
{% set primary = (b.primaryColor is defined and b.primaryColor matches '/^#[0-9a-fA-F]{6}$/') ? b.primaryColor : '#f58220' %}
{% block title %}{{ fullName }} zur Wallet hinzufügen{% endblock %}
{% block stylesheets %}
<style>
.wrap { max-width: 420px; margin: 0 auto; padding: 2rem 1.2rem; }
.wcard { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem 1.6rem; text-align: center; }
.wcard .badge-name { display: inline-block; padding: .3rem .9rem; border-radius: 999px; background: {{ primary }}; color: #fff; font-weight: 700; font-size: .92rem; }
.wcard h1 { font-size: 1.25rem; margin: 1rem 0 .2rem; }
.wcard .muted { color: var(--muted); font-size: .9rem; margin: 0 0 1.4rem; }
.wbtns { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.wbtn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; max-width: 280px;
padding: .85rem 1.2rem; border-radius: 12px; font-weight: 700; font-size: .98rem; text-decoration: none; }
.wbtn--apple { background: #000; color: #fff; }
.wbtn--google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.wbtn:hover { opacity: .92; text-decoration: none; }
.wbtn .ic { font-size: 1.1rem; }
.whint { color: var(--muted); font-size: .82rem; margin-top: 1.4rem; }
.wback { display: inline-block; margin-top: 1.2rem; color: var(--muted); font-size: .85rem; }
.order { order: 2; }
</style>
{% endblock %}
{% block body %}
<div class="wrap">
<div class="wcard">
<span class="badge-name">{{ e.company.name }}</span>
<h1>{{ fullName }}</h1>
<p class="muted">{% if e.position %}{{ e.position }} · {% endif %}Digitale Visitenkarte zur Wallet hinzufügen</p>
{% if appleEnabled or googleEnabled %}
<div class="wbtns">
{% if appleEnabled %}
<a class="wbtn wbtn--apple {{ preferApple ? '' : 'order' }}" href="{{ path('wallet_apple', {code: code}) }}">
<span class="ic"></span> Zu Apple Wallet
</a>
{% endif %}
{% if googleEnabled %}
<a class="wbtn wbtn--google {{ preferApple ? 'order' : '' }}" href="{{ path('wallet_google', {code: code}) }}">
<span class="ic">🅖</span> Zu Google Wallet
</a>
{% endif %}
</div>
<p class="whint">Öffne diesen Link auf deinem Smartphone, um die Karte zu speichern.</p>
{% else %}
<p class="whint">Wallet-Pässe sind für diesen Anbieter noch nicht aktiviert.</p>
{% endif %}
<a class="wback" href="{{ path('public_profile', {companySlug: e.company.slug, slug: e.slug}) }}">← zum Profil</a>
</div>
</div>
{% endblock %}