Small quality of life change today. Until now, clicking log in sent you to a separate login page, which meant losing your place in whatever you were reading. Log in halfway through a post because you want to comment, and the site dumps you back on the front page afterwards. Rude, honestly.
So login and register now open in a small dialog on top of the page you are on. Log in, the box closes, the sidebar flips to your account, and the post you were reading has not moved a pixel. The dialog is the same frosted glass as the rest of the site, so it looks like it grew out of the page instead of being stapled on.
The part I care most about is what did not change. The full login and register pages still exist and still work. The sidebar links keep their real addresses, and a bit of script just intercepts the click to open the dialog instead. No script, no dialog, and everything behaves like before. Same for the actual login logic: the dialog has no login code of its own, it submits to the exact same server actions the full pages use. One login implementation, two front doors.
The interesting wrinkle was what happens on success. The server answers a successful login with a redirect, because that is what the full page needs. But the dialog must not follow it, following it is the exact behavior I am removing. So the dialog's submit handler catches the result and, on a redirect, treats it as a success signal instead of a destination:
return async ({ result }: { result: ActionResult }) => {
if (result.type === 'redirect') {
open = false;
await invalidateAll();
return;
}
if (result.type === 'failure') {
loginResult = result.data as typeof loginResult;
}
};The invalidateAll is what makes the sidebar update in place: it tells the app to re-read everything it knows, including who is logged in, without navigating anywhere. Wrong password stays in the box too, with the error shown inline, so a typo does not cost you your reading position either.
The mistake worth admitting came out in review: my click handler grabbed every click on the login link, including ctrl-clicks and middle-clicks. Someone who ctrl-clicks a link is saying open this in a new tab, and hijacking that into a dialog on the current page is the kind of small disrespect that makes a site feel off. The handler now steps aside for any modified or non-primary click and lets the browser do exactly what was asked.
Details that matter but nobody will notice: it is a native dialog element, so Esc closes it for free, clicking the dim backdrop closes it, focus moves into the box when it opens and back to the link that opened it when it closes. And every string in it exists in all three languages, because that is the house rule now.
One more mistake for the honesty ledger: the first version opened the box in the top left corner of the page instead of the middle. A dialog element centers itself out of the box, but this site's CSS reset zeroes every margin, and that quietly killed the browser's own margin auto centering. One rule in the shared dialog component brought it back, for this dialog and every other one on the site.
Small feature, one evening, and the site stopped throwing people out of their reading to ask who they are.