107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import Link from 'next/link'
|
|
import { getTenantSlug } from '@/lib/tenant'
|
|
import { prisma } from '@innungsapp/shared'
|
|
import { LoginForm } from '@/components/auth/LoginForm'
|
|
|
|
export default async function LoginPage() {
|
|
const slug = await getTenantSlug()
|
|
|
|
let org = null
|
|
if (slug) {
|
|
org = await prisma.organization.findUnique({
|
|
where: { slug }
|
|
})
|
|
}
|
|
|
|
const primaryColor = org?.primaryColor || '#C99738'
|
|
const orgName = org?.name || 'InnungsApp'
|
|
const logoUrl = org?.logoUrl || '/logo.png'
|
|
const secondaryText = org ? `Verwaltungsportal für die ${org.name}` : 'Verwaltungsportal für Innungen'
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex flex-col">
|
|
<main className="flex-1 flex items-center justify-center p-4">
|
|
<div className="w-full max-w-sm">
|
|
<div className="mb-4">
|
|
<Link
|
|
href={slug ? `/${slug}` : "/"}
|
|
aria-label="Zur Startseite"
|
|
className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 shadow-sm transition-colors hover:text-gray-900 hover:border-gray-300"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="h-5 w-5"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M3 11.5 12 4l9 7.5" />
|
|
<path d="M5.5 10.5V20h13V10.5" />
|
|
<path d="M10 20v-5h4v5" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-white shadow-md border border-gray-100 overflow-hidden">
|
|
<img
|
|
src={logoUrl}
|
|
alt={orgName}
|
|
className={`h-10 w-10 object-contain ${!org?.logoUrl ? 'brightness-110 scale-[1.6]' : ''}`}
|
|
/>
|
|
</div>
|
|
<h1
|
|
className="text-3xl font-bold text-gray-900 tracking-tight"
|
|
style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
|
|
>
|
|
{org ? (
|
|
<>
|
|
<span style={{ color: primaryColor }}>{org.name.split(' ')[0]}</span>
|
|
{org.name.includes(' ') ? ` ${org.name.split(' ').slice(1).join(' ')}` : ''}
|
|
</>
|
|
) : (
|
|
<>
|
|
Innungs<span className="text-brand-500">App</span>
|
|
</>
|
|
)}
|
|
</h1>
|
|
<p className="text-sm text-gray-500 mt-1">{secondaryText}</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg border p-8">
|
|
<h2
|
|
className="text-lg font-semibold text-gray-900 mb-5"
|
|
style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
|
|
>
|
|
Anmelden
|
|
</h2>
|
|
|
|
<LoginForm primaryColor={primaryColor} />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer className="border-t border-gray-200 bg-white/80 backdrop-blur">
|
|
<div className="max-w-4xl mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-3 text-xs text-gray-500">
|
|
<p>(c) {new Date().getFullYear()} InnungsApp</p>
|
|
<div className="flex items-center gap-4">
|
|
<Link href={slug ? `/${slug}` : "/"} className="hover:text-gray-700">
|
|
Home
|
|
</Link>
|
|
<Link href="/impressum" className="hover:text-gray-700">
|
|
Impressum
|
|
</Link>
|
|
<Link href="/datenschutz" className="hover:text-gray-700">
|
|
Datenschutz
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|