Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix blank white pages by adding Nord theme styling to auth endpoints
Some checks failed
CI / update (push) Has been cancelled
Details

Browse Source 
- Add Nord theme CSS variables to login and logout pages
- Use --nord1 background and --nord4 text colors to match site theme
- Eliminates jarring white flash during authentication flow
- Maintains professional appearance and brand consistency
- Endpoints now blend seamlessly with site's dark theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Alexander Bocken
2025-08-31 22:06:37 +02:00
parent 44bfb09245
commit d2a0cf9a24
2 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/routes/login/+server.ts
View File

@@ -3,12 +3,27 @@ import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => { export const GET: RequestHandler = async ({ url }) => {
const callbackUrl = url.searchParams.get('callbackUrl') || '/'; const callbackUrl = url.searchParams.get('callbackUrl') || '/';
// Create a minimal page that immediately triggers auth in the same window // Create a minimal page with site styling that immediately triggers auth
const html = ` const html = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Login</title> <title>Login</title>
<style>
:root{
--nord0: #2E3440;
--nord1: #3B4252;
--nord4: #D8DEE9;
}
body {
background-color: var(--nord1);
color: var(--nord4);
font-family: sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
</style>
</head> </head>
<body> <body>
<form id="signin-form" method="POST" action="/auth/signin/authentik"> <form id="signin-form" method="POST" action="/auth/signin/authentik">

17
src/routes/logout/+server.ts
View File

@@ -3,12 +3,27 @@ import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => { export const GET: RequestHandler = async ({ url }) => {
const callbackUrl = url.searchParams.get('callbackUrl') || '/'; const callbackUrl = url.searchParams.get('callbackUrl') || '/';
// Create a minimal page that immediately triggers logout in the same window // Create a minimal page with site styling that immediately triggers logout
const html = ` const html = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Logout</title> <title>Logout</title>
<style>
:root{
--nord0: #2E3440;
--nord1: #3B4252;
--nord4: #D8DEE9;
}
body {
background-color: var(--nord1);
color: var(--nord4);
font-family: sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
</style>
</head> </head>
<body> <body>
<form id="signout-form" method="POST" action="/auth/signout"> <form id="signout-form" method="POST" action="/auth/signout">