feat: show customer branding on login page
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:
@@ -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">
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user