Litt hverdagsforbedring i dag. Frem til nå sendte et klikk på logg inn deg til en egen innloggingsside, som betydde at du mistet stedet i det du leste. Logg inn midt i et innlegg fordi du vil kommentere, og siden dumper deg tilbake på forsiden etterpå. Ufint, ærlig talt.
Så innlogging og registrering åpner nå i en liten dialog oppå siden du allerede er på. Logg inn, boksen lukkes, sidepanelet snur seg til kontoen din, og innlegget du leste har ikke flyttet seg en piksel. Dialogen er samme frostede glass som resten av siden, så den ser ut som den vokste ut av siden i stedet for å være stiftet på.
Det jeg bryr meg mest om er det som ikke endret seg. De fulle innloggings- og registreringssidene finnes fortsatt og fungerer fortsatt. Sidepanel-lenkene beholder sine ekte adresser, og et lite skript avskjærer bare klikket for å åpne dialogen i stedet. Ikke noe skript, ingen dialog, og alt oppfører seg som før. Samme med selve innloggingslogikken: dialogen har ingen egen innloggingskode, den sender til de nøyaktig samme server-handlingene de fulle sidene bruker. Én innloggingsimplementasjon, to fordører.
Den interessante krøllen var hva som skjer ved suksess. Serveren svarer på en vellykket innlogging med en redirect, fordi det er det den fulle siden trenger. Men dialogen må ikke følge den, å følge den er akkurat den oppførselen jeg fjerner. Så dialogens innsendingshåndterer fanger opp resultatet og, ved en redirect, behandler det som et suksesssignal i stedet for en destinasjon:
return async ({ result }: { result: ActionResult }) => {
if (result.type === 'redirect') {
open = false;
await invalidateAll();
return;
}
if (result.type === 'failure') {
loginResult = result.data as typeof loginResult;
}
};InvalidateAll er det som får sidepanelet til å oppdatere seg på stedet: det forteller appen å lese på nytt alt den vet, inkludert hvem som er innlogget, uten å navigere noe sted. Feil passord blir også værende i boksen, med feilen vist direkte i dialogen, så en skrivefeil koster deg ikke leseposisjonen din heller.
Feilen som er verdt å innrømme kom frem under gjennomgangen: klikk-håndtereren min grep alle klikk på innloggingslenken, inkludert ctrl-klikk og midtklikk. Noen som ctrl-klikker en lenke sier åpne dette i en ny fane, og å kapre det til en dialog på gjeldende side er den typen liten respektløshet som får en side til å føles feil. Håndtereren trer nå til side for ethvert modifisert eller ikke-primært klikk og lar nettleseren gjøre nøyaktig det som ble bedt om.
Detaljer som betyr noe men som ingen vil legge merke til: det er et nativt dialog-element, så Esc lukker det gratis, klikk på den mørke bakgrunnen lukker det, fokus flytter seg inn i boksen når den åpner og tilbake til lenken som åpnet den når den lukkes. Og hver eneste streng i den finnes på alle tre språk, fordi det er husregelen nå.
En feil til for ærlighetens skyld: den første versjonen åpnet boksen oppe i venstre hjørne i stedet for midt på siden. Et dialog-element sentrerer seg selv rett ut av boksen, men CSS-resetten på siden nuller ut alle marginer, og det tok stille livet av nettleserens egen margin auto-sentrering. Én regel i den delte dialogkomponenten hentet den tilbake, for denne dialogen og alle andre på siden.
Liten funksjon, én kveld, og siden sluttet å kaste folk ut av lesingen sin for å spørre hvem de er.