feat(landing): self-serve registration page via Drasl API (B1)
Add a static /register page (en/es/eu) that calls the Drasl REST API v2 directly from the browser: register -> login -> optional skin upload, all in the pixel design. Guests never touch Drasl's own web UI. Drasl config gains the pieces this needs: - CORSAllowOrigins scoped to the apex (the API has no CORS until set; never "*"). - [RateLimit] for the now public-facing anonymous POST /users. - [RegistrationNewPlayer] with RequireInvite driven by a new REGISTRATION_MODE (invite|open) .env flag. REGISTRATION_MODE has two consumers from one key: render-config.sh derives the TOML boolean for Drasl (drasl is TOML-only, no env), and the landing build reads it to show/hide the invite-code field. render-config.sh halts on any value other than invite/open. Security verified against drasl source: anonymous POST /users cannot set privileged fields (isAdmin/isLocked/chosenUuid/maxPlayerCount are gated on callerIsAdmin in CreateUser), so browser-direct registration is safe. Docs: plan/16-landing-registration.md captures the design + the B1 vs fork decision; build-order, deploy, and the deploy skill wire REGISTRATION_MODE and the landing-rebuild requirement (www/ is gitignored, not updated by a git pull). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
oierandClaude Opus 4.8 committed
1 parent
067e990306
commit
df8ffca53e
11 files changed
+766
-11
No files matched your search
@@ -0,0 +1,310 @@
|
||||
---
|
||||
import { site, HEAD_FONTS } from "../../data/site";
|
||||
import {
|
||||
ui,
|
||||
LANGS,
|
||||
LANG_LABEL,
|
||||
LANG_PATH,
|
||||
LANG_REGISTER_PATH,
|
||||
type Lang,
|
||||
} from "../../i18n/ui";
|
||||
import Creeper from "../../components/Creeper.astro";
|
||||
import "../../styles/main.css";
|
||||
|
||||
// One static register page per locale: /register, /es/register, /eu/register.
|
||||
export function getStaticPaths() {
|
||||
return [
|
||||
{ params: { lang: undefined }, props: { locale: "en" as Lang } },
|
||||
{ params: { lang: "es" }, props: { locale: "es" as Lang } },
|
||||
{ params: { lang: "eu" }, props: { locale: "eu" as Lang } },
|
||||
];
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const t = ui[locale];
|
||||
const r = t.register;
|
||||
const { theme } = site;
|
||||
const headFont = HEAD_FONTS[theme.headFont] ?? HEAD_FONTS.pixelify;
|
||||
const homePath = LANG_PATH[locale];
|
||||
const requiresInvite = site.registrationRequiresInvite;
|
||||
|
||||
// Strings the client script needs at runtime (kept minimal, passed via define:vars).
|
||||
const clientCfg = {
|
||||
apiUrl: site.draslApiUrl,
|
||||
requiresInvite,
|
||||
submit: r.submit,
|
||||
submitting: r.submitting,
|
||||
skinUpload: r.skinUpload,
|
||||
skinUploading: r.skinUploading,
|
||||
skinOk: r.skinOk,
|
||||
successBody: r.successBody,
|
||||
errFields: r.errFields,
|
||||
errSkinType: r.errSkinType,
|
||||
errNetwork: r.errNetwork,
|
||||
};
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html
|
||||
lang={t.htmlLang}
|
||||
data-mood={theme.mood}
|
||||
data-head={theme.headFont}
|
||||
style={`--font-head: ${headFont}`}
|
||||
>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{site.name} — {r.title}</title>
|
||||
<meta name="description" content={r.lead} />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<link rel="stylesheet" href="/fonts/fonts.css" />
|
||||
{LANGS.map((l) => <link rel="alternate" hreflang={l} href={LANG_REGISTER_PATH[l]} />)}
|
||||
</head>
|
||||
<body>
|
||||
<!-- NAV -->
|
||||
<header class="nav">
|
||||
<div class="wrap nav-in">
|
||||
<a class="brand" href={homePath}>
|
||||
<Creeper />
|
||||
<span class="name">ULICRAFT</span>
|
||||
</a>
|
||||
<nav class="nav-links">
|
||||
<a href={homePath}>{r.navHome}</a>
|
||||
</nav>
|
||||
<span class="nav-spacer"></span>
|
||||
<div class="lang-switch" aria-label="Language">
|
||||
{LANGS.map((l) => (
|
||||
<a
|
||||
href={LANG_REGISTER_PATH[l]}
|
||||
class:list={[l === locale && "on"]}
|
||||
aria-current={l === locale ? "true" : undefined}
|
||||
>{LANG_LABEL[l]}</a>
|
||||
))}
|
||||
</div>
|
||||
<a class="mc-btn primary sm" href={`${homePath}#join`}>{t.nav.play}</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<section class="pad">
|
||||
<div class="reg-wrap">
|
||||
<div class="reg-card">
|
||||
<span class="eyebrow">{r.eyebrow}</span>
|
||||
<h1>{r.title}</h1>
|
||||
<p class="lead">{r.lead}</p>
|
||||
|
||||
<!-- REGISTER FORM -->
|
||||
<form class="reg-form" id="reg-form" novalidate>
|
||||
<div class="reg-field">
|
||||
<label for="reg-username">{r.usernameLabel}</label>
|
||||
<input class="reg-input" id="reg-username" name="username"
|
||||
type="text" autocomplete="username" placeholder={r.usernamePlaceholder} required />
|
||||
</div>
|
||||
<div class="reg-field">
|
||||
<label for="reg-password">{r.passwordLabel}</label>
|
||||
<input class="reg-input" id="reg-password" name="password"
|
||||
type="password" autocomplete="new-password" placeholder={r.passwordPlaceholder} required />
|
||||
</div>
|
||||
{requiresInvite && (
|
||||
<div class="reg-field">
|
||||
<label for="reg-invite">{r.inviteLabel}</label>
|
||||
<input class="reg-input" id="reg-invite" name="invite"
|
||||
type="text" placeholder={r.invitePlaceholder} required />
|
||||
<span class="hint">{r.inviteHint}</span>
|
||||
</div>
|
||||
)}
|
||||
<div class="reg-msg err" id="reg-error" role="alert" hidden></div>
|
||||
<button class="mc-btn primary" id="reg-submit" type="submit">{r.submit}</button>
|
||||
</form>
|
||||
|
||||
<p class="reg-foot">
|
||||
{r.haveAccount} <a href={site.authUrl}>{r.loginLink}</a>
|
||||
</p>
|
||||
|
||||
<!-- SUCCESS + SKIN -->
|
||||
<div class="reg-success" id="reg-success" hidden>
|
||||
<div>
|
||||
<span class="eyebrow" style="color:var(--accent)">{r.successTitle}</span>
|
||||
<p class="lead" id="reg-success-body" style="margin-top:10px"></p>
|
||||
</div>
|
||||
<div class="reg-field">
|
||||
<label>{r.uuidLabel}</label>
|
||||
<div class="reg-uuid" id="reg-uuid"></div>
|
||||
</div>
|
||||
|
||||
<div class="reg-skin" id="reg-skin">
|
||||
<div>
|
||||
<h3>{r.skinTitle}</h3>
|
||||
<p class="lead">{r.skinLead}</p>
|
||||
</div>
|
||||
<div class="reg-field">
|
||||
<label class="mc-btn sm" for="reg-skin-file" style="align-self:flex-start">{r.skinChoose}</label>
|
||||
<input id="reg-skin-file" type="file" accept="image/png" hidden />
|
||||
<span class="reg-file-name" id="reg-skin-name"></span>
|
||||
</div>
|
||||
<div class="reg-field">
|
||||
<label>{r.modelLabel}</label>
|
||||
<div class="reg-models">
|
||||
<label><input type="radio" name="skin-model" value="classic" checked /> {r.modelClassic}</label>
|
||||
<label><input type="radio" name="skin-model" value="slim" /> {r.modelSlim}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reg-msg" id="reg-skin-msg" role="status" hidden></div>
|
||||
<button class="mc-btn" id="reg-skin-upload" type="button">{r.skinUpload}</button>
|
||||
</div>
|
||||
|
||||
<a class="mc-btn primary" href={`${homePath}#join`}>{r.finish}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="wrap footer-in">
|
||||
<a class="brand" href={homePath}>
|
||||
<Creeper />
|
||||
<span class="name">ULICRAFT</span>
|
||||
</a>
|
||||
<p class="disc">
|
||||
{t.footer.disc} {site.name} · {site.baseDomain}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script define:vars={{ cfg: clientCfg }}>
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const form = $("reg-form");
|
||||
const errBox = $("reg-error");
|
||||
const submitBtn = $("reg-submit");
|
||||
const successBox = $("reg-success");
|
||||
const headers = { "Content-Type": "application/json" };
|
||||
|
||||
let apiToken = null;
|
||||
let player = null;
|
||||
|
||||
const showErr = (box, msg) => {
|
||||
box.textContent = msg;
|
||||
box.hidden = false;
|
||||
};
|
||||
const apiMessage = async (res, fallback) => {
|
||||
try {
|
||||
const data = await res.json();
|
||||
return data && data.message ? data.message : fallback;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
};
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
errBox.hidden = true;
|
||||
const username = $("reg-username").value.trim();
|
||||
const password = $("reg-password").value;
|
||||
const inviteEl = $("reg-invite");
|
||||
const invite = inviteEl ? inviteEl.value.trim() : null;
|
||||
if (!username || !password || (cfg.requiresInvite && !invite)) {
|
||||
showErr(errBox, cfg.errFields);
|
||||
return;
|
||||
}
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = cfg.submitting;
|
||||
try {
|
||||
const body = { username, password, playerName: username };
|
||||
if (invite) body.inviteCode = invite;
|
||||
let res = await fetch(`${cfg.apiUrl}/users`, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) {
|
||||
showErr(errBox, await apiMessage(res, cfg.errNetwork));
|
||||
return;
|
||||
}
|
||||
// Log in to get an API token for the (optional) skin upload.
|
||||
res = await fetch(`${cfg.apiUrl}/login`, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
showErr(errBox, await apiMessage(res, cfg.errNetwork));
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
apiToken = data.apiToken;
|
||||
player = data.user.players[0];
|
||||
form.hidden = true;
|
||||
$("reg-uuid").textContent = player.uuid;
|
||||
$("reg-success-body").textContent = cfg.successBody.replace("{name}", player.name);
|
||||
successBox.hidden = false;
|
||||
} catch {
|
||||
showErr(errBox, cfg.errNetwork);
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = cfg.submit;
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Skin upload ----
|
||||
const fileInput = $("reg-skin-file");
|
||||
const fileName = $("reg-skin-name");
|
||||
const skinMsg = $("reg-skin-msg");
|
||||
const skinBtn = $("reg-skin-upload");
|
||||
|
||||
fileInput.addEventListener("change", () => {
|
||||
skinMsg.hidden = true;
|
||||
fileName.textContent = fileInput.files && fileInput.files[0] ? fileInput.files[0].name : "";
|
||||
});
|
||||
|
||||
const readBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const fr = new FileReader();
|
||||
fr.onload = () => resolve(String(fr.result).split(",")[1]);
|
||||
fr.onerror = reject;
|
||||
fr.readAsDataURL(file);
|
||||
});
|
||||
|
||||
skinBtn.addEventListener("click", async () => {
|
||||
skinMsg.hidden = true;
|
||||
skinMsg.classList.remove("ok", "err");
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if (!file) {
|
||||
skinMsg.classList.add("err");
|
||||
showErr(skinMsg, cfg.errSkinType);
|
||||
return;
|
||||
}
|
||||
if (file.type !== "image/png") {
|
||||
skinMsg.classList.add("err");
|
||||
showErr(skinMsg, cfg.errSkinType);
|
||||
return;
|
||||
}
|
||||
const model = document.querySelector('input[name="skin-model"]:checked').value;
|
||||
skinBtn.disabled = true;
|
||||
skinBtn.textContent = cfg.skinUploading;
|
||||
try {
|
||||
const skinBase64 = await readBase64(file);
|
||||
const res = await fetch(`${cfg.apiUrl}/players/${player.uuid}`, {
|
||||
method: "PATCH",
|
||||
headers: { ...headers, Authorization: `Bearer ${apiToken}` },
|
||||
body: JSON.stringify({ skinBase64, skinModel: model }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
skinMsg.classList.add("err");
|
||||
showErr(skinMsg, await apiMessage(res, cfg.errNetwork));
|
||||
return;
|
||||
}
|
||||
skinMsg.classList.add("ok");
|
||||
showErr(skinMsg, cfg.skinOk);
|
||||
} catch {
|
||||
skinMsg.classList.add("err");
|
||||
showErr(skinMsg, cfg.errNetwork);
|
||||
} finally {
|
||||
skinBtn.disabled = false;
|
||||
skinBtn.textContent = cfg.skinUpload;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user