53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
|
import { useState } from "react";
|
|||
|
|
import { api } from "./api/client";
|
|||
|
|
import "./CreateProfile.css";
|
|||
|
|
|
|||
|
|
// Shown once, right after a brand-new OIDC login, before the account has a
|
|||
|
|
// geniusrun profile at all. The only thing asked for is a display name --
|
|||
|
|
// Garmin credentials and every other tunable are filled in afterward via
|
|||
|
|
// the existing Profile screen, same as a fresh single-user install today.
|
|||
|
|
export function CreateProfile({ onCreated }: { onCreated: (displayName: string) => void }) {
|
|||
|
|
const [displayName, setDisplayName] = useState("");
|
|||
|
|
const [submitting, setSubmitting] = useState(false);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const trimmed = displayName.trim();
|
|||
|
|
if (!trimmed) {
|
|||
|
|
setError("Please enter a display name.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSubmitting(true);
|
|||
|
|
setError(null);
|
|||
|
|
try {
|
|||
|
|
const result = await api.setup(trimmed);
|
|||
|
|
onCreated(result.display_name);
|
|||
|
|
} catch (err) {
|
|||
|
|
setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="create-profile">
|
|||
|
|
<h1>🧞♀️ Welcome to geniusrun</h1>
|
|||
|
|
<p>Let's set up your profile. You can add your Garmin account afterward.</p>
|
|||
|
|
<form onSubmit={handleSubmit}>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Display name"
|
|||
|
|
value={displayName}
|
|||
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|||
|
|
disabled={submitting}
|
|||
|
|
autoFocus
|
|||
|
|
/>
|
|||
|
|
{error && <p className="create-profile-error">{error}</p>}
|
|||
|
|
<button type="submit" disabled={submitting}>
|
|||
|
|
{submitting ? "Creating…" : "Continue"}
|
|||
|
|
</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|