@cosmicdrift/kumiko-bundled-features 0.1.0

package/src/auth-email-password/web/index.ts

@@ -0,0 +1,56 @@
+// @runtime client
+// Public exports für die Browser-Seite des auth-email-password Features.
+// Wird über den Sub-Path-Export `@cosmicdrift/kumiko-bundled-features/auth-email-
+// password/web` konsumiert — die Server-Seite (defineFeature) lebt in
+// `@cosmicdrift/kumiko-bundled-features/auth-email-password` und hat keine
+// React-/DOM-Deps. Trennung bleibt sauber so wie renderer vs renderer-web.
+
+export { defaultTranslations } from "../i18n";
+export type {
+  AuthTokenFailure,
+  CurrentUserProfile,
+  LoginFailure,
+  LoginRequest,
+  ResetPasswordFailure,
+  SignupConfirmSuccess,
+  TenantSummary,
+  VerifyEmailFailure,
+} from "./auth-client";
+export {
+  confirmSignup,
+  requestEmailVerification,
+  requestPasswordReset,
+  requestSignup,
+  resetPassword,
+  verifyEmail,
+} from "./auth-client";
+export { makeAuthGate } from "./auth-gate";
+export type {
+  EmailPasswordClientFeature,
+  EmailPasswordClientOptions,
+} from "./client-plugin";
+export { emailPasswordClient } from "./client-plugin";
+export type { DefaultTopbarActionsProps } from "./default-topbar-actions";
+export { DefaultTopbarActions } from "./default-topbar-actions";
+export type { ForgotPasswordScreenProps } from "./forgot-password-screen";
+export { ForgotPasswordScreen } from "./forgot-password-screen";
+export type { InviteAcceptScreenProps } from "./invite-accept-screen";
+export { InviteAcceptScreen } from "./invite-accept-screen";
+export type { LoginScreenProps } from "./login-screen";
+export { LoginScreen } from "./login-screen";
+export type { ResetPasswordScreenProps } from "./reset-password-screen";
+export { ResetPasswordScreen } from "./reset-password-screen";
+export type { SessionApi, SessionState, SessionStatus } from "./session";
+export { SessionContext, SessionProvider, useSession } from "./session";
+export type { SignupCompleteScreenProps } from "./signup-complete-screen";
+export { SignupCompleteScreen } from "./signup-complete-screen";
+export type { SignupScreenProps } from "./signup-screen";
+export { SignupScreen } from "./signup-screen";
+export type { TenantSwitcherProps } from "./tenant-switcher";
+export { TenantSwitcher } from "./tenant-switcher";
+export type { ShellUser } from "./use-shell-user";
+export { useShellUser } from "./use-shell-user";
+export type { UserMenuProps } from "./user-menu";
+export { UserMenu } from "./user-menu";
+export type { VerifyEmailScreenProps } from "./verify-email-screen";
+export { VerifyEmailScreen } from "./verify-email-screen";

package/src/auth-email-password/web/invite-accept-screen.tsx

@@ -0,0 +1,220 @@
+// @runtime client
+// InviteAcceptScreen — Magic-Link-Accept für Tenant-Invitations.
+//
+// Liest `?token=...` aus der URL und branched intern je nach session-state:
+//   - Logged-in + Email-Match: 1-click accept (Branch 1, dispatcher
+//     invite-accept). Bei Email-Mismatch zeigen wir die fehlermeldung
+//     und einen "Mit anderem Account anmelden"-Link.
+//   - Anonymous: Email + Password-Form. Toggle "Schon einen Account?"
+//     entscheidet Branch 2 (existing user, login + accept) vs Branch 3
+//     (neuer user, signup + accept).
+//
+// Anti-enumeration: invalidInviteToken collapsed alle Token/User/
+// Password-Failures auf einen Code (gleicher Trade-off wie reset).
+//
+// Auto-Login: Branch 2+3 setzen Cookies via Server, Frontend redirected
+// zu loggedInHref. Branch 1 hat schon eine Session — Frontend redirected
+// auch zu loggedInHref damit der invitee in seinem neuen Tenant landet.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { csrfHeader } from "./auth-client";
+import { AuthCard, authMutedLinkClass, parseUrlToken } from "./auth-form-primitives";
+import { useSession } from "./session";
+
+export type InviteAcceptScreenProps = {
+  readonly title?: string;
+  readonly token?: string;
+  /** Where to redirect on success. Default "/" — Apps mit Multi-Tenant-
+   *  Routing können `(data) => "/${data.tenantId}/"` setzen. */
+  readonly loggedInHref?: string | ((args: { tenantId: string }) => string);
+  /** Login-Href für "Mit anderem Account anmelden". Default "/login". */
+  readonly loginHref?: string;
+};
+
+type Mode = "loggedin" | "anon-existing" | "anon-new";
+
+export function InviteAcceptScreen({
+  title,
+  token: tokenProp,
+  loggedInHref = "/",
+  loginHref = "/login",
+}: InviteAcceptScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const session = useSession();
+  const [token] = useState(() => tokenProp ?? parseUrlToken());
+  const [mode, setMode] = useState<Mode>(() =>
+    session.status === "authenticated" ? "loggedin" : "anon-existing",
+  );
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const effectiveTitle = title ?? t("auth.inviteAccept.title");
+
+  const acceptLoggedIn = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    const res = await fetch("/api/auth/invite-accept", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json", ...csrfHeader() },
+      body: JSON.stringify({ token }),
+    });
+    setSubmitting(false);
+    if (res.ok) {
+      const data = (await res.json()) as { tenantId: string };
+      const target =
+        typeof loggedInHref === "function"
+          ? loggedInHref({ tenantId: data.tenantId })
+          : loggedInHref;
+      window.location.assign(target);
+      return;
+    }
+    setError(t("auth.errors.invalidInviteToken"));
+  };
+
+  const acceptAnonExisting = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    const res = await fetch("/api/auth/invite-accept-with-login", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json", ...csrfHeader() },
+      body: JSON.stringify({ token, email, password }),
+    });
+    setSubmitting(false);
+    if (res.ok) {
+      const data = (await res.json()) as { tenantId: string };
+      const target =
+        typeof loggedInHref === "function"
+          ? loggedInHref({ tenantId: data.tenantId })
+          : loggedInHref;
+      window.location.assign(target);
+      return;
+    }
+    setError(t("auth.errors.invalidInviteToken"));
+  };
+
+  const acceptAnonNew = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    const res = await fetch("/api/auth/invite-signup-complete", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json", ...csrfHeader() },
+      body: JSON.stringify({ token, password }),
+    });
+    setSubmitting(false);
+    if (res.ok) {
+      const data = (await res.json()) as { tenantId: string };
+      const target =
+        typeof loggedInHref === "function"
+          ? loggedInHref({ tenantId: data.tenantId })
+          : loggedInHref;
+      window.location.assign(target);
+      return;
+    }
+    setError(t("auth.errors.invalidInviteToken"));
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    if (mode === "loggedin") {
+      void acceptLoggedIn();
+      return;
+    }
+    if (mode === "anon-existing") {
+      void acceptAnonExisting();
+      return;
+    }
+    void acceptAnonNew();
+  };
+
+  if (token === "") {
+    return (
+      <AuthCard title={effectiveTitle}>
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.missingToken")}</p>
+          <a href={loginHref} className={authMutedLinkClass}>
+            {t("auth.inviteAccept.goToLogin")}
+          </a>
+        </div>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard title={effectiveTitle}>
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.intro")}</p>
+
+        {mode === "loggedin" ? (
+          <Form onSubmit={onSubmit}>
+            <p className="text-sm">{t("auth.inviteAccept.loggedInAs")}</p>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.acceptButton")}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setMode("anon-existing");
+              }}
+            >
+              {t("auth.inviteAccept.useOtherAccount")}
+            </Button>
+          </Form>
+        ) : (
+          <Form onSubmit={onSubmit}>
+            {mode === "anon-existing" && (
+              <Field id="invite-email" label={t("auth.inviteAccept.email")} required>
+                <Input
+                  kind="email"
+                  id="invite-email"
+                  name="invite-email"
+                  value={email}
+                  onChange={setEmail}
+                  disabled={submitting}
+                  required
+                  autoComplete="email"
+                />
+              </Field>
+            )}
+            <Field id="invite-password" label={t("auth.inviteAccept.password")} required>
+              <Input
+                kind="password"
+                id="invite-password"
+                name="invite-password"
+                value={password}
+                onChange={setPassword}
+                disabled={submitting}
+                required
+                autoComplete={mode === "anon-existing" ? "current-password" : "new-password"}
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.submit")}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setMode(mode === "anon-existing" ? "anon-new" : "anon-existing");
+                setError(null);
+              }}
+            >
+              {mode === "anon-existing"
+                ? t("auth.inviteAccept.toggleNew")
+                : t("auth.inviteAccept.toggleExisting")}
+            </Button>
+          </Form>
+        )}
+      </div>
+    </AuthCard>
+  );
+}

package/src/auth-email-password/web/login-screen.tsx

@@ -0,0 +1,150 @@
+// @runtime client
+// Default-LoginScreen. Reine E-Mail-+-Passwort-Form, zentriert, Card-
+// Layout. Texte kommen aus `useTranslation()` — die Default-Bundles
+// (de+en) liefert das Feature selber mit (translations.ts); Apps die
+// was anderes wollen, setzen entweder einen eigenen LocaleResolver auf
+// App-Level oder reichen Key-Overrides an `emailPasswordClient()`.
+//
+// Die Reason-Codes aus dem Login-Handler werden 1:1 auf i18n-Keys
+// gemappt (reasonToI18nKey) — neue Reason-Codes brauchen nur eine
+// neue Zeile im Bundle + hier im Mapping.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import type { LoginFailure } from "./auth-client";
+import { AuthCard, authMutedLinkClass } from "./auth-form-primitives";
+import { useSession } from "./session";
+
+export type LoginScreenProps = {
+  /** Overridet den `auth.login.title`-i18n-Key. Nur setzen wenn der
+   *  Titel stark app-branded ist und keine Translation braucht. */
+  readonly title?: string;
+  readonly subtitle?: ReactNode;
+  readonly submitLabel?: string;
+  /** Optional href zum ForgotPasswordScreen. Wenn gesetzt rendert die
+   *  LoginScreen unter dem Submit-Button einen "Passwort vergessen?"-
+   *  Link. Apps die den Reset-Flow NICHT anbieten (z.B. nur Magic-Link),
+   *  setzen das einfach nicht — Login bleibt minimalistisch. */
+  readonly forgotPasswordHref?: string;
+  /** Optional href zum SignupScreen. Wenn gesetzt rendert die LoginScreen
+   *  einen "Account erstellen"-Link. Apps die kein Self-Signup wollen
+   *  (closed-invite-only) setzen das einfach nicht. */
+  readonly signupHref?: string;
+};
+
+// Map vom Reason-Code des Login-Handlers auf einen i18n-Key plus
+// optional extrahierte Interpolations-Parameter. Ungekannte Codes
+// fallen auf `auth.errors.loginFailed` zurück.
+function reasonToKey(failure: LoginFailure): {
+  readonly key: string;
+  readonly params?: Readonly<Record<string, unknown>>;
+} {
+  switch (failure.reason) {
+    case "invalid_credentials":
+      return { key: "auth.errors.invalidCredentials" };
+    case "no_membership":
+      return { key: "auth.errors.noMembership" };
+    case "account_locked":
+      if (failure.retryAfterSeconds !== undefined) {
+        return {
+          key: "auth.errors.accountLockedRetry",
+          params: { minutes: Math.ceil(failure.retryAfterSeconds / 60) },
+        };
+      }
+      return { key: "auth.errors.accountLocked" };
+    case "email_not_verified":
+      return { key: "auth.errors.emailNotVerified" };
+    case "rate_limited":
+      return { key: "auth.errors.rateLimited" };
+    case "invalid_body":
+      return { key: "auth.errors.invalidBody" };
+    default:
+      return { key: "auth.errors.loginFailed" };
+  }
+}
+
+export function LoginScreen({
+  title,
+  subtitle,
+  submitLabel,
+  forgotPasswordHref,
+  signupHref,
+}: LoginScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const session = useSession();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<LoginFailure | null>(null);
+
+  const doSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    const res = await session.login({ email, password });
+    setSubmitting(false);
+    if (!res.ok) setError(res.error);
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  const effectiveTitle = title ?? t("auth.login.title");
+  const effectiveSubmit = submitLabel ?? t("auth.login.submit");
+
+  return (
+    <AuthCard title={effectiveTitle} subtitle={subtitle}>
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        <Form onSubmit={onSubmit}>
+          <Field id="login-email" label={t("auth.login.email")} required>
+            <Input
+              kind="email"
+              id="login-email"
+              name="login-email"
+              value={email}
+              onChange={setEmail}
+              disabled={submitting}
+              required
+              autoComplete="email"
+            />
+          </Field>
+          <Field id="login-password" label={t("auth.login.password")} required>
+            <Input
+              kind="password"
+              id="login-password"
+              name="login-password"
+              value={password}
+              onChange={setPassword}
+              disabled={submitting}
+              required
+              autoComplete="current-password"
+            />
+          </Field>
+          {error !== null && (
+            <Banner variant="error">
+              {(() => {
+                const { key, params } = reasonToKey(error);
+                return t(key, params);
+              })()}
+            </Banner>
+          )}
+          <Button type="submit" loading={submitting} disabled={submitting}>
+            {submitting ? t("auth.login.submitting") : effectiveSubmit}
+          </Button>
+        </Form>
+        {forgotPasswordHref !== undefined && (
+          <a href={forgotPasswordHref} className={`${authMutedLinkClass} self-center`}>
+            {t("auth.login.forgotPassword")}
+          </a>
+        )}
+        {signupHref !== undefined && (
+          <a href={signupHref} className={`${authMutedLinkClass} self-center`}>
+            {t("auth.signup.title")}
+          </a>
+        )}
+      </div>
+    </AuthCard>
+  );
+}

package/src/auth-email-password/web/reset-password-screen.tsx

@@ -0,0 +1,152 @@
+// @runtime client
+// ResetPasswordScreen — liest `?token=...` aus der URL, zeigt Form mit
+// new + confirm-password. Submit triggert /api/auth/reset-password mit
+// dem Token. Server collapses alle Token-Verify-Failures auf einen
+// Code (anti-enumeration); UI zeigt unified "Link ungültig oder
+// abgelaufen"-message.
+//
+// Token-Quelle ist read-once: wir lesen via parseUrlToken() einmalig
+// im useState-Initializer. Apps die das anders brauchen (server-
+// injected Token-Prop, andere Parameter-Namen) reichen einen
+// expliziten `token` als Prop durch.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { resetPassword } from "./auth-client";
+import {
+  AuthCard,
+  authButtonClass,
+  authMutedLinkClass,
+  parseUrlToken,
+} from "./auth-form-primitives";
+
+export type ResetPasswordScreenProps = {
+  readonly title?: string;
+  /** Override für den Token aus der URL — Apps die per server-side-
+   *  Render einen Token reinreichen, brauchen das. Default: parsed aus
+   *  `?token=...` in der URL. */
+  readonly token?: string;
+  /** href für "Zum Login"-Link nach Success. Default "/login". */
+  readonly loginHref?: string;
+};
+
+export function ResetPasswordScreen({
+  title,
+  token: tokenProp,
+  loginHref = "/login",
+}: ResetPasswordScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const [token] = useState(() => tokenProp ?? parseUrlToken());
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const doSubmit = async (): Promise<void> => {
+    setError(null);
+    if (newPassword.length < 8) {
+      setError(t("auth.resetPassword.tooShort"));
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError(t("auth.resetPassword.mismatch"));
+      return;
+    }
+    setSubmitting(true);
+    const res = await resetPassword(token, newPassword);
+    setSubmitting(false);
+    if (res.ok) {
+      setDone(true);
+      return;
+    }
+    if (res.error.reason === "invalid_reset_token") {
+      setError(t("auth.errors.invalidResetToken"));
+      return;
+    }
+    if (res.error.reason === "rate_limited") {
+      setError(t("auth.errors.rateLimited"));
+      return;
+    }
+    setError(t("auth.errors.unknownError"));
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  const effectiveTitle = title ?? t("auth.resetPassword.title");
+
+  // Kein Token in der URL → User soll den Link aus seiner Mail nochmal
+  // klicken oder einen neuen Reset anfordern. Form ohne Token zu
+  // submitten würde nur den invalidResetToken-Error zeigen — das ist
+  // verwirrend. Lieber upfront eine klare Message.
+  if (token === "") {
+    return (
+      <AuthCard title={effectiveTitle}>
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.resetPassword.missingToken")}</p>
+          <a href={loginHref} className={authMutedLinkClass}>
+            {t("auth.resetPassword.goToLogin")}
+          </a>
+        </div>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard title={effectiveTitle}>
+      {done ? (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <Banner variant="info">
+            <p className="font-medium text-foreground">{t("auth.resetPassword.successTitle")}</p>
+            <p className="mt-1">{t("auth.resetPassword.successBody")}</p>
+          </Banner>
+          <a href={loginHref} className={authButtonClass}>
+            {t("auth.resetPassword.goToLogin")}
+          </a>
+        </div>
+      ) : (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.resetPassword.intro")}</p>
+          <Form onSubmit={onSubmit}>
+            <Field id="reset-new-password" label={t("auth.resetPassword.newPassword")} required>
+              <Input
+                kind="password"
+                id="reset-new-password"
+                name="reset-new-password"
+                value={newPassword}
+                onChange={setNewPassword}
+                disabled={submitting}
+                required
+                autoComplete="new-password"
+              />
+            </Field>
+            <Field
+              id="reset-confirm-password"
+              label={t("auth.resetPassword.confirmPassword")}
+              required
+            >
+              <Input
+                kind="password"
+                id="reset-confirm-password"
+                name="reset-confirm-password"
+                value={confirmPassword}
+                onChange={setConfirmPassword}
+                disabled={submitting}
+                required
+                autoComplete="new-password"
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.resetPassword.submitting") : t("auth.resetPassword.submit")}
+            </Button>
+          </Form>
+        </div>
+      )}
+    </AuthCard>
+  );
+}