Portal Tagline Moved When Saved - edmozley/freeitsm GitHub Wiki

The portal tagline moved when you saved it

Reported in #150 · Fixed in #1982 · Ships in 2.7.0

What you saw

On System → Branding → Portal sign-in, typing a Tagline showed it in the preview under "Sign in to view your tickets". After saving, the real sign-in page showed it above that line, and pressed right up against the title with no gap.

The staff sign-in page (ITSM Login) looked fine throughout, which made it easy to miss: the fault was only on the customer page.

What was actually wrong

Two separate faults, and it took both to produce what you saw.

1. The preview guessed where the tagline goes

The live preview is shared by every sign-in page. When a page had no tagline yet, the preview created one and added it after the page's header block:

if (!tag) { tag = document.createElement('p'); tag.className = 'login-tagline';
            document.querySelector('.login-header').after(tag); }

On the staff page that is exactly where the saved page puts it. On the portal, the header block also contains "Sign in to view your tickets" - so "after the header" meant after that line. The saved portal page puts the tagline straight after the title, inside the header. Two pieces of code decided the position, and they decided differently.

That is why the reporter's steps start with clear the tagline and save: the preview only guessed when there was no tagline on the page already.

2. A margin copied from the other page

The portal's tagline style was copied from the staff page:

.login-tagline { margin: -14px 0 22px; ... }

On the staff page the tagline sits outside the header, after its 30px bottom margin, so pulling it up 14px leaves a sensible gap. On the portal it sits inside the header, straight under the title, so the same -14px pulled it up into the title. That is the "no spacing".

🔑 Both faults are the same mistake in two forms: something written for one page and reused on another whose layout is different. The preview's position was right for the staff page; the margin was right for the staff page. Neither was ever right for the portal.

How it was fixed

The preview no longer decides where anything goes. Each page now prints its tagline lines every time, with empty ones hidden, and marks them data-tagline="1" and data-tagline="2". The preview just fills in those elements. The position lives in one place, the page itself, so the preview cannot disagree with it.

document.querySelectorAll('[data-tagline]').forEach(function (el) {
    var v = TAGLINE[el.getAttribute('data-tagline')];
    ...
    el.textContent = v !== '' ? v : (fallback || '');
    el.hidden = el.textContent === '';
});

The portal's tagline has its own spacing, with no negative margin.

And a second tagline

The report also asked whether "Sign in to view your tickets" should give way to the tagline, since the staff page has no such line. Rather than choose for everyone, there are now two tagline fields:

	Staff sign-in	Portal sign-in
Tagline 1	under the title	under the title
Tagline 2	under Tagline 1	replaces "Sign in to view your tickets"
Tagline 2 empty	nothing	"Sign in to view your tickets" stays

So an install that never touches the new field looks exactly as before, and one that wants a single line of its own puts it in Tagline 2.

⚠️ One detail to get right: on the portal, the two-step verification step borrows that same line for its own instruction, then puts it back when you go back. It used to put back the built-in text, which would have quietly dropped a custom Tagline 2. It now restores whatever the page opened with.

The landing page has room for one line under its welcome heading, so it keeps a single tagline. Its preview had the same fault as #1, and in fact worse: it looked for a header the landing page does not have, and failed. It now uses the same data-tagline mechanism.

Files changed

File	What changed
`includes/branding.php`	new `subheading2` field (not on the landing page)
`includes/branding_preview.php`	fills in `[data-tagline]` elements instead of creating one
`self-service/login.php`	both lines always printed; Tagline 2 in the "Sign in…" slot; spacing; two-step step restores the page's own line
`auth/login.php`	both lines always printed under the title
`index.php`	landing tagline marked for the preview
`system/branding/index.php`	the Tagline 2 box, and sends it to the preview
`lang/en/system.php`	Tagline 1 / Tagline 2 labels

How it was proved

On a test install, in Chrome, against the broken version first:

Reproduced: the preview showed the tagline below "Sign in to view your tickets"; the saved page showed it above and touching the title.
Then fixed, comparing the preview with the saved page for both sign-in pages with both taglines set: identical positions on each.
Portal with only Tagline 1: "Sign in to view your tickets" still shows under it.
Saved through the real save endpoint, not by writing to the database, and read back from the sign-in page.

Not proved: the two-step verification path was checked by reading the code, not by signing in with a second factor.