Claude
7a08546da6
Replace baked-in UOM/MysticMoon/UOMysticmoon branding with a BRAND_* env scheme so one prebuilt image runs as any shard; UOMysticmoon becomes the first tenant that sets these vars rather than a special case in the code. Architecture (chosen because the app ships as a prebuilt image): - server/src/config/brand.js + bot/src/brand.js read BRAND_* once at boot, with Runic Gateway defaults. - Text/colors reach the SPA at RUNTIME through the existing public settings API (settings.model.getPublic -> SiteContext), so no client rebuild. The admin-editable site title + contact email still override BRAND_NAME/email. - SiteContext applies BRAND_ACCENT_COLOR to the --accent CSS var at runtime. - Express templates the built index.html <title>/description/OG/favicon at serve time from BRAND_* (renderIndexHtml in app.js). - Server-side consumers read brand directly: emails, TOTP issuer, API docs, boot logs, HTML error page. Bot uses it for embed color + logs. Assets: logo/hero/favicon delivered from a ./brand:/app/brand bind-mount (BRAND_LOGO/HERO/FAVICON), with neutral defaults baked in; hero falls back to a built-in image when unset. Scope: also genericized package.json names (uomysticmoon-* -> runic-gateway-*) and the DB_NAME/DB_USER/COOKIE_NAME code defaults (runic_gateway/runic/ rg_token). Production keeps its real values by pinning them in .env — see .env.uomysticmoon.example, which reproduces the exact UOMysticmoon identity (proof the substitution works). Changing a deployed COOKIE_NAME invalidates existing sessions, so UOMysticmoon pins uomm_token. Verified: 193 server tests pass, client builds, app.js loads + templates the built index.html, brand transform injects title/description/OG/favicon.
73 lines
2.4 KiB
JavaScript
73 lines
2.4 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import MoonDot from '../../components/MoonDot.jsx'
|
|
import { useSite } from '../../contexts/SiteContext.jsx'
|
|
|
|
// Centered card layout shared by the player login / register pages. `subtitle`
|
|
// labels the card; `footer` is optional content under the card (e.g. cross-links).
|
|
export default function PlayerShell({ subtitle, children, footer }) {
|
|
const { siteTitle, heroImage } = useSite()
|
|
const bg = `linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('${heroImage}')`
|
|
return (
|
|
<main
|
|
style={{
|
|
minHeight: '100vh',
|
|
display: 'grid',
|
|
placeItems: 'center',
|
|
padding: '40px 18px',
|
|
overflow: 'hidden',
|
|
backgroundColor: 'var(--bg-deep)',
|
|
backgroundImage: bg,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'cover',
|
|
}}
|
|
>
|
|
<div style={{ width: '100%', maxWidth: 400 }}>
|
|
<div style={{ textAlign: 'center', marginBottom: 26 }}>
|
|
<div style={{ marginBottom: 14 }}>
|
|
<MoonDot size={15} glow={0.55} />
|
|
</div>
|
|
<h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
|
|
{siteTitle}
|
|
</h1>
|
|
<p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
border: '1px solid var(--line)',
|
|
borderRadius: 12,
|
|
padding: 28,
|
|
background: 'linear-gradient(180deg,rgba(25,34,49,0.92),rgba(20,26,33,0.92))',
|
|
backdropFilter: 'blur(6px)',
|
|
boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{footer}
|
|
|
|
<p style={{ textAlign: 'center', margin: '20px 0 0' }}>
|
|
<Link to="/" className="sans" style={{ color: 'var(--accent)', fontSize: '0.84rem', textDecoration: 'none' }}>
|
|
← Back to site
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
// Off-screen honeypot styling (matches the admin login): present for bots, never
|
|
// seen or filled by real users. Name must equal the server HONEYPOT_FIELD.
|
|
export const honeypotStyle = {
|
|
position: 'absolute',
|
|
left: '-9999px',
|
|
top: 'auto',
|
|
width: '1px',
|
|
height: '1px',
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
}
|