@backmatter/studio 0.0.1

package/src/pages/LoginPage.tsx

@@ -0,0 +1,335 @@
+// packages/studio/src/pages/LoginPage.tsx
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { fetchAuthConfig } from "../api";
+import { authClient } from "../auth-client";
+import { GithubIcon } from "../chrome/icons";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { darkTheme } from "../styles/themes";
+import { Text } from "../ui/Text";
+
+const hover = "@media (hover: hover)";
+
+export function LoginPage() {
+  const [params] = useSearchParams();
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [github, setGithub] = useState<boolean | null>(null);
+  const invitedEmail = params.get("token") ? (params.get("email") ?? "") : "";
+  const [email, setEmail] = useState(invitedEmail || (params.get("email") ?? ""));
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [mode, setMode] = useState<"signin" | "signup">("signin");
+
+  useEffect(() => {
+    void fetchAuthConfig()
+      .then((config) => setGithub(config.github))
+      .catch(() => setGithub(false));
+  }, []);
+
+  const callbackURL = window.location.href;
+
+  async function onGithub() {
+    setBusy(true);
+    setError(null);
+    try {
+      await authClient().signIn.social({
+        provider: "github",
+        callbackURL,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "GitHub sign-in failed");
+      setBusy(false);
+    }
+  }
+
+  async function onMagicLink() {
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    const result = await authClient().signIn.magicLink({ email, callbackURL });
+    setBusy(false);
+    if (result.error) {
+      setError(result.error.message ?? "Could not send the magic link");
+      return;
+    }
+    setNotice("Check your email for a sign-in link.");
+  }
+
+  async function onPassword(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    const result =
+      mode === "signup"
+        ? await authClient().signUp.email({ email, password, name, callbackURL })
+        : await authClient().signIn.email({ email, password, callbackURL });
+    if (result.error) {
+      setError(result.error.message ?? "Sign-in failed");
+      setBusy(false);
+      return;
+    }
+    window.location.assign(callbackURL);
+  }
+
+  return (
+    <main {...stylex.props(darkTheme, styles.main)}>
+      <div {...stylex.props(styles.glow)} aria-hidden />
+      <div {...stylex.props(styles.panel)}>
+        <div {...stylex.props(styles.markWrap)}>
+          <LoginMark />
+        </div>
+        <h1 {...stylex.props(styles.heading)}>
+          {invitedEmail ? "Join this workspace" : "Welcome back"}
+        </h1>
+        <div {...stylex.props(styles.lead)}>
+          <Text tone="muted">
+            {invitedEmail
+              ? `Sign in as ${invitedEmail}. A password or GitHub stays on this page. A magic link sends one more email.`
+              : "Sign in with email or GitHub."}
+          </Text>
+        </div>
+
+        <div {...stylex.props(styles.actions)}>
+          {error ? <Text tone="danger">{error}</Text> : null}
+          {notice ? <Text tone="muted">{notice}</Text> : null}
+          <form onSubmit={(e) => void onPassword(e)} {...stylex.props(styles.form)}>
+            {mode === "signup" ? (
+              <input
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Name"
+                autoComplete="name"
+                {...stylex.props(styles.field)}
+              />
+            ) : null}
+            <input
+              required
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Email"
+              autoComplete="email"
+              readOnly={Boolean(invitedEmail)}
+              {...stylex.props(styles.field, Boolean(invitedEmail) && styles.fieldLocked)}
+            />
+            <input
+              required
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Password"
+              autoComplete={mode === "signup" ? "new-password" : "current-password"}
+              {...stylex.props(styles.field)}
+            />
+            <button type="submit" disabled={busy} {...stylex.props(styles.cta, busy && styles.ctaDisabled)}>
+              {mode === "signup" ? "Create account" : "Sign in"}
+            </button>
+          </form>
+          <button
+            type="button"
+            disabled={busy || !email}
+            onClick={() => void onMagicLink()}
+            {...stylex.props(styles.secondary, (busy || !email) && styles.ctaDisabled)}
+          >
+            Email me a magic link
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => setMode(mode === "signup" ? "signin" : "signup")}
+            {...stylex.props(styles.secondary)}
+          >
+            {mode === "signup" ? "I already have an account" : "Create an account"}
+          </button>
+          <button
+            type="button"
+            disabled={busy || github !== true}
+            onClick={() => void onGithub()}
+            {...stylex.props(styles.cta, (busy || github !== true) && styles.ctaDisabled)}
+          >
+            <GithubIcon size={18} />
+            Continue with GitHub
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function LoginMark() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      aria-hidden
+    >
+      <circle
+        cx="24"
+        cy="24"
+        r="18.25"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        opacity="0.28"
+      />
+      <circle
+        cx="24"
+        cy="24"
+        r="11.25"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        opacity="0.55"
+      />
+      <circle cx="24" cy="24" r="4" fill="currentColor" />
+    </svg>
+  );
+}
+
+const styles = stylex.create({
+  main: {
+    position: "relative",
+    display: "flex",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    minHeight: "100dvh",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingInline: space.xxl,
+    paddingTop: "max(24px, env(safe-area-inset-top))",
+    paddingBottom: "max(24px, env(safe-area-inset-bottom))",
+    backgroundColor: "#0a0a0b",
+    color: colors.text,
+  },
+  glow: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    userSelect: "none",
+    backgroundImage:
+      "radial-gradient(ellipse 90% 62% at 50% -8%, rgba(255,255,255,0.16), transparent 60%)",
+  },
+  panel: {
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    maxWidth: "360px",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center",
+  },
+  markWrap: {
+    display: "grid",
+    placeItems: "center",
+    width: "48px",
+    height: "48px",
+    marginBottom: space.xxl,
+    color: "#d4d4d8",
+  },
+  heading: {
+    margin: 0,
+    color: colors.text,
+    fontSize: "28px",
+    fontWeight: 600,
+    letterSpacing: "-0.03em",
+    lineHeight: 1.2,
+    textWrap: "balance",
+  },
+  lead: {
+    marginTop: space.md,
+  },
+  actions: {
+    display: "flex",
+    width: "100%",
+    marginTop: "40px",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: space.lg,
+  },
+  cta: {
+    display: "inline-flex",
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: "44px",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: space.sm,
+    paddingInline: space.xl,
+    borderWidth: 0,
+    borderRadius: "999px",
+    backgroundColor: "#fafafa",
+    color: "#18181b",
+    fontSize: type.lg,
+    fontWeight: 500,
+    lineHeight: 1.2,
+    touchAction: "manipulation",
+    transitionProperty: "background-color, opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease",
+    [hover]: {
+      ":hover": {
+        backgroundColor: "#e4e4e7",
+      },
+    },
+    ":active": {
+      transform: "scale(0.97)",
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+      ":active": {
+        transform: "none",
+      },
+    },
+  },
+  form: {
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+    gap: space.md,
+  },
+  field: {
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: "44px",
+    paddingInline: space.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "#3f3f46",
+    borderRadius: "12px",
+    backgroundColor: "#18181b",
+    color: "#fafafa",
+    fontSize: type.lg,
+  },
+  fieldLocked: {
+    color: "#a1a1aa",
+  },
+  secondary: {
+    display: "inline-flex",
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: "44px",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 0,
+    borderRadius: "999px",
+    backgroundColor: "transparent",
+    color: "#d4d4d8",
+    fontSize: type.sm,
+    cursor: "pointer",
+  },
+  ctaDisabled: {
+    opacity: 0.55,
+    cursor: "not-allowed",
+    pointerEvents: "none",
+  },
+  footnote: {
+    margin: 0,
+    marginTop: space.xxl,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+});

package/src/pages/NewWorkspacePage.tsx

@@ -0,0 +1,74 @@
+// packages/studio/src/pages/NewWorkspacePage.tsx
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { createWorkspace } from "../api";
+import { replicaStore } from "../replica/instance";
+import { BackLink } from "../ui/BackLink";
+import { Button } from "../ui/Button";
+import { Field } from "../ui/Field";
+import { Input } from "../ui/Input";
+import { PageFrame, PageHeader, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+
+export function NewWorkspacePage() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    try {
+      const { workspace } = await createWorkspace(name);
+      const control = replicaStore.getState().control;
+      if (control) {
+        replicaStore.applyControl({
+          ...control,
+          workspaces: [
+            ...control.workspaces,
+            {
+              id: workspace.id,
+              name: workspace.name,
+              slug: workspace.slug,
+              role: workspace.role,
+            },
+          ],
+        });
+      }
+      navigate(`/${workspace.slug}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create workspace");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <PageFrame>
+      <PageHeader
+        kicker={<BackLink to="/workspaces">← Workspaces</BackLink>}
+        title="Create workspace"
+      />
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <Field label="Name">
+            <Input
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Docs site"
+            />
+          </Field>
+          {error ? <Text tone="danger">{error}</Text> : null}
+          <div>
+            <Button type="submit" disabled={saving}>
+              {saving ? "Creating…" : "Create workspace"}
+            </Button>
+          </div>
+        </Stack>
+      </form>
+    </PageFrame>
+  );
+}