+85
-103
@@ -7,114 +7,96 @@ import { submitSignup, type SubmitResult } from "@/lib/submit";
|
||||
const MIN_PASSWORD = 12;
|
||||
|
||||
function slugify(value: string) {
|
||||
return value
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
return value
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
}
|
||||
|
||||
export function OrgForm() {
|
||||
const [slug, setSlug] = useState("");
|
||||
const [result, setResult] = useState<SubmitResult>({ state: "idle" });
|
||||
const sending = result.state === "sending";
|
||||
const [slug, setSlug] = useState("");
|
||||
const [result, setResult] = useState<SubmitResult>({ state: "idle" });
|
||||
const sending = result.state === "sending";
|
||||
|
||||
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
setResult({ state: "sending" });
|
||||
setResult(
|
||||
await submitSignup({
|
||||
org_name: String(data.get("org_name") ?? ""),
|
||||
email: String(data.get("email") ?? ""),
|
||||
password: String(data.get("password") ?? ""),
|
||||
website: String(data.get("website") ?? ""),
|
||||
})
|
||||
);
|
||||
}
|
||||
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
setResult({ state: "sending" });
|
||||
setResult(
|
||||
await submitSignup({
|
||||
org_name: String(data.get("org_name") ?? ""),
|
||||
email: String(data.get("email") ?? ""),
|
||||
password: String(data.get("password") ?? ""),
|
||||
website: String(data.get("website") ?? ""),
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
if (result.state === "sent") {
|
||||
return (
|
||||
<div role="status">
|
||||
<h2 style={{ fontSize: "var(--s-1)" }}>Check your email.</h2>
|
||||
<p style={{ color: "var(--ink-2)", marginTop: "0.5rem" }}>
|
||||
We sent a confirmation link. Open it and <b>{slug || "your organisation"}</b> is created with you as its owner. The link works once and expires in 24 hours.
|
||||
</p>
|
||||
<p style={{ color: "var(--ink-3)", marginTop: "0.75rem", fontSize: "0.88rem" }}>
|
||||
Nothing exists until you confirm — if the email does not arrive, start again or contact support@hostxtra.co.uk.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const fieldError = (name: string) => result.fields?.[name];
|
||||
|
||||
if (result.state === "sent") {
|
||||
return (
|
||||
<div role="status">
|
||||
<h2 style={{ fontSize: "var(--s-1)" }}>Check your email.</h2>
|
||||
<p style={{ color: "var(--ink-2)", marginTop: "0.5rem" }}>
|
||||
We sent a confirmation link. Open it and <b>{slug || "your organisation"}</b> is created with you as its
|
||||
owner. The link works once and expires in 24 hours.
|
||||
</p>
|
||||
<p style={{ color: "var(--ink-3)", marginTop: "0.75rem", fontSize: "0.88rem" }}>
|
||||
Nothing exists until you confirm — if the email does not arrive, start again or contact
|
||||
support@hostxtra.co.uk.
|
||||
</p>
|
||||
</div>
|
||||
<form className="form" onSubmit={onSubmit} noValidate>
|
||||
<Honeypot />
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="o-org">Organisation name</label>
|
||||
<input id="o-org" name="org_name" type="text" placeholder="Northgate Systems" required onChange={(e) => setSlug(slugify(e.target.value))} aria-describedby="o-org-err" />
|
||||
<span className="hostline">
|
||||
<b>{slug || "your-org"}</b>.vantage.hostxtra.co.uk
|
||||
</span>
|
||||
{fieldError("org_name") && (
|
||||
<small id="o-org-err" className="field__err">
|
||||
{fieldError("org_name")}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="o-email">Owner email</label>
|
||||
<input id="o-email" name="email" type="email" autoComplete="email" required aria-describedby="o-email-err" />
|
||||
<small>You become the first owner and can invite the rest of the team afterwards.</small>
|
||||
{fieldError("email") && (
|
||||
<small id="o-email-err" className="field__err">
|
||||
{fieldError("email")}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="o-pass">Password</label>
|
||||
<input id="o-pass" name="password" type="password" autoComplete="new-password" minLength={MIN_PASSWORD} required aria-describedby="o-pass-err" />
|
||||
<small>At least {MIN_PASSWORD} characters. Use a manager — you are about to manage SSH keys with it.</small>
|
||||
{fieldError("password") && (
|
||||
<small id="o-pass-err" className="field__err">
|
||||
{fieldError("password")}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button className="btn btn--solid" type="submit" style={{ alignSelf: "flex-start" }} disabled={sending}>
|
||||
{sending ? "Sending…" : "Create organisation"}
|
||||
</button>
|
||||
|
||||
{result.state === "error" && result.message && (
|
||||
<p className="field__err" role="alert">
|
||||
{result.message}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
const fieldError = (name: string) => result.fields?.[name];
|
||||
|
||||
return (
|
||||
<form className="form" onSubmit={onSubmit} noValidate>
|
||||
<Honeypot />
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="o-org">Organisation name</label>
|
||||
<input
|
||||
id="o-org"
|
||||
name="org_name"
|
||||
type="text"
|
||||
placeholder="Northgate Systems"
|
||||
required
|
||||
onChange={(e) => setSlug(slugify(e.target.value))}
|
||||
aria-describedby="o-org-err"
|
||||
/>
|
||||
<span className="hostline">
|
||||
<b>{slug || "your-org"}</b>.vantage.sh
|
||||
</span>
|
||||
{fieldError("org_name") && (
|
||||
<small id="o-org-err" className="field__err">
|
||||
{fieldError("org_name")}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="o-email">Owner email</label>
|
||||
<input id="o-email" name="email" type="email" autoComplete="email" required aria-describedby="o-email-err" />
|
||||
<small>You become the first owner and can invite the rest of the team afterwards.</small>
|
||||
{fieldError("email") && (
|
||||
<small id="o-email-err" className="field__err">
|
||||
{fieldError("email")}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="o-pass">Password</label>
|
||||
<input
|
||||
id="o-pass"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
minLength={MIN_PASSWORD}
|
||||
required
|
||||
aria-describedby="o-pass-err"
|
||||
/>
|
||||
<small>At least {MIN_PASSWORD} characters. Use a manager — you are about to manage SSH keys with it.</small>
|
||||
{fieldError("password") && (
|
||||
<small id="o-pass-err" className="field__err">
|
||||
{fieldError("password")}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button className="btn btn--solid" type="submit" style={{ alignSelf: "flex-start" }} disabled={sending}>
|
||||
{sending ? "Sending…" : "Create organisation"}
|
||||
</button>
|
||||
|
||||
{result.state === "error" && result.message && (
|
||||
<p className="field__err" role="alert">
|
||||
{result.message}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user