--- title: "Vi har bygget vores loginside om, og teknikken under den" description: "PixelUnion har en ny loginside og en ny kontoside. Her er, hvordan vi byggede dem om på Keycloak med open source-projektet Keycloakify, hvad vi ændrede for privatliv og tilgængelighed, og hvilke kompromiser vi accepterede." url: "https://pixelunion.eu/da/blog/2026/10/new-login-page/" date: "2026-10-02" author: "Marc" categories: ["deep-dive","development"] tags: ["Keycloak","Keycloakify","Identity Provider","Open Source","Privacy","Accessibility"] --- Loginsiden er den ene skærm, som alle PixelUnion-brugere ser, som regel flere gange om ugen. Indtil nu var det Keycloaks standardudseende med vores logo ovenpå. Det virkede. Det lignede også virksomhedssoftware fra 2014, og det fortalte dig intet om, hvor dine billeder faktisk ligger. Så vi byggede den om, sammen med kontosiden bagved. ![Den nye loginside hos PixelUnion](header.png) En kort påmindelse: siden vores [skifte til Keycloak](/da/blog/identity-provider-migration-keycloak/) er Keycloak vores identitetsudbyder (IdP). Den håndterer din adgangskode, totrinsbekræftelse, passkeys og "Log ind med Google", så Immich aldrig selv behøver at gøre det. Den del er præcis den samme. Det, der er ændret, er alt det, du ser, mens det arbejde foregår. ## Hvorfor vi brugte Keycloakify Keycloak-temaer skrives i FreeMarker, et skabelonsprog til serveren fra Java-verdenen. Du kopierer Keycloaks skabeloner, redigerer dem, genstarter serveren og tjekker resultatet ved at klikke dig igennem det rigtige loginforløb. Til at skifte et logo er det fint. Til et nyt design er det besværligt, fordi nogle sider kun vises i sjældne situationer: en udløbet side, en anden godkender, en Google-konto, der matcher en eksisterende e-mailadresse. [Keycloakify](https://www.keycloakify.dev) løser det. Det er et open source-projekt, startet af Joseph Garrone, som lader dig skrive Keycloak-temaer som React-komponenter. De bliver kompileret til en almindelig tema-jar, som Keycloak indlæser som ethvert andet plugin. Startskabelonen udgives under [codegouvfr](https://github.com/codegouvfr), den franske regerings open source-organisation, hvilket vi synes er en fin detalje for et europæisk projekt. Kildekoden ligger på [GitHub](https://github.com/keycloakify/keycloakify). Det, der sparede os mest tid, var Storybook. Keycloakify leverer eksempeldata til hver Keycloak-side, så vi kunne vise dem alle, i alle tilstande, uden en kørende Keycloak-server. Det blev til 112 sidetilstande, som vi tjekkede i computer- og telefonbredde, i lys og mørk tilstand. Vi holdt fast i én streng regel: vi ændrede kun opmærkningen og udseendet. Hvert feltnavn, id og skjult felt er det samme som på Keycloaks egne sider. Keycloak ved ikke, at noget er ændret, og sikkerhedslogikken kører præcis som før. Kompromiset bærer vi selv. Hver side, vi har redesignet, er nu kode, som vi vedligeholder og skal tjekke igen ved hver ny Keycloak-version. For de vigtigste sider synes vi, det er det værd. ![Den nye kontoside](account.png) ## Hvad der ændrede sig for privatliv og tilgængelighed En loginside er et mærkeligt sted at spare på privatlivet, så det prøvede vi at undgå. - **Ingen skrifttyper fra tredjeparter.** Begge skrifttyper er indbygget i temaet og leveres af os. Din browser kontakter hverken Google Fonts eller noget andet skrifttype-CDN (content delivery network). - **Vores egne kopier af billederne.** Billederne på loginsiden gemmes og leveres af os, de hentes ikke direkte fra billedsiden. Hvert besøg indlæser ét sæt på fire billeder, cirka 60 til 120 KB. Telefoner indlæser dem slet ikke, fordi billedpanelet ikke vises der. Hvad tilgængelighed angår, er hver knap og hvert link mindst 44 pixels høj, så den er nem at ramme med tommelfingeren. Tekstfelter bruger tekst på 16 pixels, så iPhones ikke zoomer ind, når du trykker på dem. Al tekst opnår et kontrastforhold på 4.5:1 mod baggrunden, også i mørk tilstand. På en computer følger loginsiden dit systems lyse eller mørke indstilling, og på en telefon er den altid mørk. Er loginsiden den vigtigste del af en billedtjeneste? Nej. Det er dine billeder. Men det er hoveddøren, og den skal se ud, som om nogen holder af huset. Vi bliver ved med at forbedre begge dele. [Se, hvad vi tilbyder →](https://pixelunion.eu) ## Fotografer Billederne på loginsiden kommer fra [Unsplash](https://unsplash.com) og bruges under [Unsplash-licensen](https://unsplash.com/license). Kreditering er ikke påkrævet, men disse fotografer har givet siden sit udseende, så her er de. Tak. - [Tim Mossholder](https://unsplash.com/photos/Gsl6YSpbc9g) - [Wagner Santos](https://unsplash.com/photos/DDLWZN03tkw) - [Leif Niemczik](https://unsplash.com/photos/xQQShnDWY-Q) - [Saara Sanamo](https://unsplash.com/photos/s_WRfcC0CBM) - [Nate](https://unsplash.com/photos/dHDUFf9ggb4) - [Nathan Dumlao](https://unsplash.com/photos/As8zq82LBpw) - [Daniel J. Schwarz](https://unsplash.com/photos/YtY724tdl7Y) - [Kevin Schmid](https://unsplash.com/photos/eIdHV6cwl9s) - [Ardian Lumi](https://unsplash.com/photos/72uqWSqAiWg) - [veronika](https://unsplash.com/photos/OwEC3vvEopU) - [Wim van 't Einde](https://unsplash.com/photos/bdDUK0q0Hw8) - [Annie Spratt](https://unsplash.com/photos/LyU1BVDAGNs) - [Jessica Hearn](https://unsplash.com/photos/M4eOZ3j5Q4g) - [Moustafa Neamatalla](https://unsplash.com/photos/peqAQReOaYI) - [Mauro Fossati](https://unsplash.com/photos/fzPCw717sPs) - [Johannes Schenk](https://unsplash.com/photos/ar2-gHCM_-g) - [Elijah Cobb](https://unsplash.com/photos/JLYw4IkR6-Y) - [Alex Tonoyan](https://unsplash.com/photos/B8RYxHB_fFw) - [Alejandra Ponce](https://unsplash.com/photos/M9E78hJWKlU) - [Max Bürgi](https://unsplash.com/photos/jKuQsF67I14) - [Kevin Schmid](https://unsplash.com/photos/Mta8r0bxhbo) - [Ale Romo](https://unsplash.com/photos/IJTqEElHBXk) - [Jael Rodriguez](https://unsplash.com/photos/L36zkjYTp14) - [Ross Sneddon](https://unsplash.com/photos/iExLjkqFf68)