Skip to content

✨ Add LoginCard layout component#23

Merged
damienlagae merged 2 commits into
mainfrom
feat/login-card-component
May 28, 2026
Merged

✨ Add LoginCard layout component#23
damienlagae merged 2 commits into
mainfrom
feat/login-card-component

Conversation

@damienlagae
Copy link
Copy Markdown
Member

Summary

  • Adds a LoginCard component to mutualise the centered-card-on-coloured-background markup recurring across Enabel apps (login, forgot password, reset password, external-login confirmation, etc.)
  • Fullscreen wrapper with either a Bootstrap theme colour (background) or a cover image (backgroundImage)
  • Bootstrap card with shadow-lg and border-radius: 1rem, optional centered logo (max-height 80 px) and h1.h3 title
  • Card width via a size preset: sm (360 px) / md (480 px, default) / lg (640 px) / xl (800 px)
  • Form goes inside {% block content %}

API

All parameters optional with sensible defaults:

Param Type Default
logo ?string null
title ?string null
background string 'primary'
backgroundImage ?string null
size string 'md'

Strict validation: background restricted to the 8 Bootstrap theme colours, size to the 4 presets.

Modal variant

The issue mentioned this should also be usable inside a Bootstrap modal. Rather than complicating the API with a fullscreen flag, the doc explains the template-override path — copy templates/layout/login_card.html.twig into the project's templates/bundles/EnabelUx/, drop the outer min-vh-100 wrapper, done. Easy to revisit if a consumer pushes back.

Test plan

  • PHPUnit: 227/227 (10 new tests: defaults, all valid backgrounds, all valid sizes, invalid value/type cases)
  • php-cs-fixer: clean
  • phpstan: no errors
  • Manual smoke test in a consumer app (Impala) — render at least the login + password reset variants and a backgroundImage variant

Closes #19.

Closes #19.

Mutualises the centered-card-on-coloured-background markup recurring
across Enabel apps (login, forgot password, reset password, etc.).

Provides a fullscreen wrapper (theme colour or background image),
a Bootstrap card with optional logo + title, and a {% block content %}
for the form. Card width is configurable through a sm/md/lg/xl
preset (360/480/640/800 px).
@damienlagae
Copy link
Copy Markdown
Member Author

Smoke-tested in Impala — rendered four variants + invalid-size sanity check.

What I verified

Variant Setup Result
login md, primary, logo + title, full form (username/password + Azure SSO button) Card 480 px, Enabel teal background, logo + h3 title centred, form pristine
password reset sm, secondary, no logo, email + button Narrower 360 px card on orange secondary, no header, single-field form
signup lg, success, logo + 6-field row layout Card 640 px on green success, Bootstrap grid (row g-3 / col-md-6) inside {% block content %} works fine
bg-image backgroundImage: 'images/enabel-symbol.png', md asset()-resolved url, cover + center, card sits crisply over the image with its shadow-lg
size: 'xxl' invalid preset InvalidOptionsException raised by OptionsResolver — strict validation works
  • card shadow-lg border-radius:1rem, centered logo (max-height 80 px) and h1.h3 all render as advertised
  • Component plays nicely inside {% extends 'base.html.twig' %} with {% block header %}{% endblock %} (no double-wrapping issues)
  • Bootstrap bg-{theme} classes pick up the Enabel theme colours from @enabel/enabel-bootstrap-theme automatically — no extra import needed in the consumer

Two small docs nudges (optional)

  • The doc's basic example uses logo: asset('images/enabel-logo.png'), but the component already wraps the value in asset() inside the template. Passing the result of asset() again technically works (Symfony's asset helper is idempotent for absolute-looking paths in most cases), but the simpler form logo: 'images/enabel-logo.png' is what actually matches the template's contract. Might be worth fixing in the example to avoid copy-paste cargo-culting.
  • For the modal variant, the doc mentions the override path. A one-liner snippet showing what to drop (d-flex align-items-center justify-content-center min-vh-100 p-3 bg-{background} → keep only the card) would save a future consumer 2 minutes.

LGTM, ready to tag.

@damienlagae
Copy link
Copy Markdown
Member Author

Both nudges addressed in 753d513:

  1. asset() redundancy — the basic-page example now uses logo: 'images/enabel-logo.png' directly, matching the template's contract (the template calls asset() internally).
  2. Modal variant snippet — the override section now shows the exact before/after diff (drop the outer d-flex … min-vh-100 … wrapper, keep the inner card), plus a call-site snippet wrapping in modal-dialog modal-lg modal-dialog-centered.

Ready for re-check / merge.

@damienlagae
Copy link
Copy Markdown
Member Author

Re-checked after 753d513. Both doc nudges addressed cleanly:

  • asset() dropped from the basic example — matches the template's contract
  • Modal-override section now shows the concrete before/after snippet, much more actionable

Component code unchanged since the previous smoke, so no need to re-run. Ready to merge.

@damienlagae damienlagae merged commit ada26e9 into main May 28, 2026
7 checks passed
@damienlagae damienlagae deleted the feat/login-card-component branch May 28, 2026 19:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a LoginCard layout component (centered card on a solid background)

1 participant