feat: show customer branding on login page
Some checks failed
CI / ci (pull_request) Failing after 20s
CI / e2e (pull_request) Has been skipped

Adds public /v1/store/branding and /v1/store/logo endpoints so the
login page can display the customer's name and logo without auth,
with "Powered by LunarFront" underneath — matching the sidebar style.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ryan
2026-04-05 16:14:07 +00:00
parent 326b30161b
commit da4b765b14
2 changed files with 58 additions and 3 deletions

View File

@@ -1,8 +1,13 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
import { useAuthStore } from '@/stores/auth.store'
import { login } from '@/api/auth'
interface Branding {
name: string | null
hasLogo: boolean
}
export const Route = createFileRoute('/login')({
beforeLoad: () => {
const { token } = useAuthStore.getState()
@@ -20,6 +25,14 @@ function LoginPage() {
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const [branding, setBranding] = useState<Branding | null>(null)
useEffect(() => {
fetch('/v1/store/branding')
.then((r) => r.ok ? r.json() : null)
.then((data) => { if (data) setBranding(data) })
.catch(() => {})
}, [])
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
@@ -48,8 +61,16 @@ function LoginPage() {
style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }}
>
<div className="text-center mb-8">
<h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>LunarFront</h1>
<p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
{branding?.hasLogo ? (
<img src="/v1/store/logo" alt={branding.name ?? 'Store'} className="max-h-14 max-w-[220px] object-contain mx-auto" />
) : (
<h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>{branding?.name ?? 'LunarFront'}</h1>
)}
{branding?.name ? (
<p className="text-[10px] mt-2" style={{ color: '#4a5568' }}>Powered by <span style={{ color: '#6b7a8d' }}>LunarFront</span></p>
) : (
<p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
)}
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">

View File

@@ -1,9 +1,43 @@
import type { FastifyPluginAsync } from 'fastify'
import { eq } from 'drizzle-orm'
import { companies, locations } from '../../db/schema/stores.js'
import { files } from '../../db/schema/files.js'
import { ValidationError } from '../../lib/errors.js'
export const storeRoutes: FastifyPluginAsync = async (app) => {
// --- Public branding (no auth — used on login page) ---
app.get('/store/branding', async (_request, reply) => {
const [store] = await app.db.select({
name: companies.name,
logoFileId: companies.logoFileId,
}).from(companies).limit(1)
if (!store) return reply.send({ name: null, hasLogo: false })
return reply.send({ name: store.name, hasLogo: !!store.logoFileId })
})
app.get('/store/logo', async (_request, reply) => {
const [store] = await app.db.select({ logoFileId: companies.logoFileId }).from(companies).limit(1)
if (!store?.logoFileId) return reply.status(404).send({ error: { message: 'No logo configured', statusCode: 404 } })
const [file] = await app.db.select().from(files).where(eq(files.id, store.logoFileId)).limit(1)
if (!file) return reply.status(404).send({ error: { message: 'Logo file not found', statusCode: 404 } })
try {
const data = await app.storage.get(file.path)
const ext = file.path.split('.').pop()?.toLowerCase()
const contentTypeMap: Record<string, string> = {
jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml',
}
return reply
.header('Content-Type', contentTypeMap[ext ?? ''] ?? 'application/octet-stream')
.header('Cache-Control', 'public, max-age=3600')
.send(data)
} catch {
return reply.status(404).send({ error: { message: 'Logo file not readable', statusCode: 404 } })
}
})
// --- Company / Store Settings ---
app.get('/store', { preHandler: [app.authenticate, app.requirePermission('settings.view')] }, async (request, reply) => {