Vi har byggt om vår inloggningssida, och tekniken under den
Inloggningssidan är den enda skärm som alla PixelUnion-användare ser, oftast flera gånger i veckan. Hittills var det Keycloaks standardutseende med vår logotyp ovanpå. Det fungerade. Det såg också ut som företagsprogramvara från 2014, och det sa ingenting om var dina foton faktiskt finns. Så vi byggde om den, tillsammans med kontosidan bakom.
En kort påminnelse: sedan vår flytt till Keycloak är Keycloak vår identitetsleverantör (IdP). Den hanterar ditt lösenord, tvåfaktorsautentisering, passkeys och “Logga in med Google”, så att Immich aldrig behöver göra det själv. Den delen är exakt densamma. Det som har ändrats är allt du ser medan det arbetet görs.
Varför vi använde Keycloakify
Keycloak-teman skrivs i FreeMarker, ett mallspråk för servern från Java-världen. Du kopierar Keycloaks mallar, redigerar dem, startar om servern och kontrollerar resultatet genom att klicka dig igenom det riktiga inloggningsflödet. För att byta logotyp räcker det. För en omdesign är det jobbigt, eftersom vissa sidor bara visas i ovanliga situationer: en sida som har gått ut, en andra autentiserare, ett Google-konto som matchar en befintlig e-postadress.
Keycloakify löser det. Det är ett open source-projekt, startat av Joseph Garrone, som låter dig skriva Keycloak-teman som React-komponenter. De kompileras till en vanlig tema-jar som Keycloak laddar som vilket annat plugin som helst. Startmallen publiceras under codegouvfr, den franska regeringens open source-organisation, vilket vi tycker är en fin detalj för ett europeiskt projekt. Källkoden finns på GitHub.
Det som sparade oss mest tid var Storybook. Keycloakify har exempeldata för varje Keycloak-sida, så vi kunde visa alla sidor, i alla lägen, utan en Keycloak-server igång. Det blev 112 sidlägen, som vi kontrollerade i dator- och mobilbredd, i ljust och mörkt läge.
En regel höll vi strikt: vi ändrade bara markeringen och utseendet. Varje fältnamn, id och dolt fält är detsamma som på Keycloaks egna sidor. Keycloak vet inte att något har ändrats, och dess säkerhetslogik fungerar exakt som förut. Avvägningen bär vi själva. Varje sida vi har gjort om är nu kod som vi underhåller och måste kontrollera igen vid varje ny version av Keycloak. För de viktigaste sidorna tycker vi att det är värt det.
Vad som ändrades för integritet och tillgänglighet
En inloggningssida är ett konstigt ställe att snåla med integriteten på, så vi försökte låta bli.
- Inga typsnitt från tredje part. Båda typsnitten ingår i temat och levereras av oss. Din webbläsare kontaktar inte Google Fonts eller något annat typsnitts-CDN (content delivery network).
- Egna kopior av fotona. Fotona på inloggningssidan lagras och levereras av oss, de hämtas inte direkt från fotosajten. Varje besök laddar en uppsättning med fyra foton, ungefär 60 till 120 KB. Mobiler laddar dem inte alls, eftersom fotopanelen inte visas där.
När det gäller tillgänglighet är varje knapp och länk minst 44 pixlar hög, så att den är lätt att träffa med tummen. Textfält använder 16 pixlar stor text, vilket gör att iPhone inte zoomar in när du trycker på dem. All text når ett kontrastförhållande på 4.5:1 mot bakgrunden, även i mörkt läge. På en dator följer inloggningssidan systemets ljusa eller mörka inställning, och på en mobil är den alltid mörk.
Är inloggningssidan den viktigaste delen av en fototjänst? Nej. Det är dina foton. Men det är ytterdörren, och den ska se ut som att någon bryr sig om huset. Vi kommer att fortsätta förbättra båda.
Fotografer
Fotona på inloggningssidan kommer från Unsplash och används enligt Unsplash-licensen. Det krävs ingen namnangivelse, men de här fotograferna har gett sidan dess utseende, så här är de. Tack.