Generator podpisów w trybie jasnym i ciemnym: formularz z danymi po lewej, podgląd stopki z herbem i kodem QR po prawej

Programowanie

Generator podpisów e-mail dla urzędu

Jedna, spójna stopka pod mailem dla każdego pracownika urzędu: dane z intranetu, przełączniki dla każdego elementu, kod QR z wizytówką i eksport do HTML lub PNG, który działa w Thunderbirdzie i Outlooku.

1.09.2026

W urzędzie każdy podpis pod mailem wyglądał inaczej. Jedni mieli herb, inni sam tekst, część miała stare numery telefonów albo nie miała wcale klauzuli RODO. Ręczne ustawianie stopki w Outlooku i Thunderbirdzie to zadanie, którego nikt nie lubi.

Zbudowałem prosty generator: pracownik loguje się kontem intranetu, a formularz wypełnia się jego danymi. Wystarczy sprawdzić, co ma się pokazać, i skopiować gotową stopkę.

Generator podpisów w trybie jasnym i ciemnym: formularz z danymi po lewej, podgląd stopki z herbem i kodem QR po prawej
Edytor z podglądem stopki, motyw jasny i ciemny. Na zrzutach fikcyjna osoba

Dane z jednego miejsca

Generator nie ma własnej bazy. Wszystko czyta z intranetu na Directusie:

  • imię, nazwisko, stanowisko i referat z kartoteki pracownika,
  • dane urzędu, czyli nazwę, adres, centralę, stronę, ePUAP i e-Doręczenia, z jednego wpisu ustawień utrzymywanego przez administratora,
  • dane referatu tylko jako uzupełnienie tego, czego brakuje w ustawieniach globalnych,
  • treść klauzuli poufności i RODO, również z ustawień, więc zmiana przepisów to zmiana w jednym miejscu.

Gotowy podpis zapisuje się w osobnej kolekcji w Directusie, razem z ustawieniami. Przy następnym logowaniu pracownik wraca do swojej wersji.

Wszystko włączane i wyłączane

Każdy element stopki ma swój przełącznik:

  • zdjęcie osoby, herb gminy albo brak obrazu,
  • kod QR z wizytówką vCard, który po zeskanowaniu dodaje kontakt do telefonu,
  • telefon komórkowy, numer wewnętrzny, fax, mail osobisty i centralny, strona www,
  • adres skrzynki ePUAP i adres do e-Doręczeń,
  • klauzula poufności, klauzula RODO i dodatkowe informacje, na przykład dane łączności kryzysowej,
  • czcionka z Google Fonts i ikony przy danych kontaktowych.

Zmiany od razu widać w podglądzie obok formularza.

Dolna część edytora w trybie ciemnym: przełączniki klauzul, wybór czcionki i ikon oraz przyciski Zapisz podpis, Kopiuj HTML i Pobierz podgląd jako PNG
Klauzule, czcionka, ikony i eksport

Stopka, która działa w każdym kliencie poczty

Najwięcej pracy nie poszło w formularz, tylko w sam HTML. Klienci poczty to osobny świat, w którym nie działa połowa nowoczesnego CSS. Dlatego stopka to tabele i style wpisane bezpośrednio w elementy, jak w newsletterach.

Do wyboru są trzy formy:

  • HTML do schowka, gotowy do wklejenia w ustawieniach podpisu w Thunderbirdzie, Outlooku czy Mailspringu,
  • obraz PNG całej stopki w podwójnej rozdzielczości,
  • osobne pliki herbu, zdjęcia i kodu QR dla Outlooka, który bywa marudny.

Obrazy są osadzone w HTML-u jako base64. Stopka nie łączy się więc z serwerem plików urzędu i wygląda tak samo u odbiorcy spoza sieci urzędu. Wyjątkiem jest desktopowy Outlook, który potrafi takie obrazy ignorować. Na ten przypadek są pliki do ręcznego wstawienia, z krótką instrukcją przy przyciskach.

Wiadomość e-mail z wklejoną stopką: herb gminy, kod QR, imię i nazwisko, stanowisko, dane urzędu oraz klauzule poufności i RODO
Stopka wklejona do wiadomości. Na zrzucie fikcyjna osoba

Logowanie kontem intranetu

Aplikacja nie ma własnych kont. Pracownik loguje się tym samym kontem co w intranecie, a generator działa na jego tokenie i jego uprawnieniach w Directusie. Klucz administracyjny służy wyłącznie do skryptów i migracji schematu, nigdy do obsługi użytkowników.

Tokeny trzyma ciasteczko HttpOnly, a aplikacja sama je odświeża. Obrazy z Directusa przechodzą przez proxy na tej samej domenie. Directus nie wysyła nagłówków CORS dla plików, więc bez tego nie dałoby się ani zamienić obrazów na base64, ani wyeksportować podglądu do PNG.

Ekran logowania generatora podpisów kontem intranetu
Logowanie kontem intranetu

Stack

  • Nuxt 4 i Nuxt UI, Tailwind v4, tryb jasny i ciemny,
  • Directus SDK, dane i zapis w intranecie urzędu,
  • html-to-image do eksportu PNG, qrcode do wizytówki vCard,
  • ikony Lucide i Simple Icons przez Iconify,
  • Docker, wdrożenie na serwerze urzędu.