sea-dev 1.0.0

package/apps/main/src/routes/_authed/settings/workspace.tsx

@@ -0,0 +1,206 @@
+import { Container } from "@/components/header/container";
+import { getSession } from "@/lib/auth";
+import { membershipMiddleware } from "@/middleware";
+import { db, schema } from "@sea/db";
+import { Button } from "@sea/ui/components/ui/button";
+import { Input } from "@sea/ui/components/ui/input";
+import { H1, H2 } from "@sea/ui/components/ui/typography";
+import { formatFullDate } from "@sea/util/fmt";
+import { invariant } from "@sea/util/invariant";
+import { createFileRoute, useNavigate, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import { and, asc, eq } from "drizzle-orm";
+import { useState, type FormEvent } from "react";
+import { toast } from "sonner";
+
+const getOrganizationFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const organization = await db.query.organization.findFirst({
+      where: eq(schema.organization.id, member.organizationId),
+      with: { members: true },
+    });
+    invariant(organization);
+    return organization;
+  });
+
+const saveOrganizationNameFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((formData: FormData) => {
+    if (!(formData instanceof FormData)) {
+      throw new Error("Invalid form data");
+    }
+    const name = formData.get("name")!.toString();
+    return { name };
+  })
+  .handler(async ({ context: { member }, data: { name } }) => {
+    await db
+      .update(schema.organization)
+      .set({ name })
+      .where(eq(schema.organization.id, member.organizationId));
+  });
+
+const leaveOrganizationFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const request = getWebRequest();
+    const { session } = await getSession(request);
+    const currentSessionId = session.id;
+
+    const result = await db.transaction(async (tx) => {
+      // Remove membership for this organization
+      await tx.delete(schema.member).where(eq(schema.member.id, member.id));
+
+      // Pick a deterministic next organization (earliest membership by createdAt)
+      const nextMembership = await tx.query.member.findFirst({
+        where: eq(schema.member.userId, member.userId),
+        columns: { organizationId: true },
+        orderBy: [asc(schema.member.createdAt)],
+      });
+
+      // Update all sessions that still point to the org being left
+      const nextOrgId = nextMembership?.organizationId ?? null;
+      await tx
+        .update(schema.session)
+        .set({ activeOrganizationId: nextOrgId })
+        .where(
+          and(
+            eq(schema.session.userId, member.userId),
+            eq(schema.session.activeOrganizationId, member.organizationId),
+          ),
+        );
+
+      // Ensure the current session is explicitly updated as well
+      await tx
+        .update(schema.session)
+        .set({ activeOrganizationId: nextOrgId })
+        .where(
+          and(eq(schema.session.userId, member.userId), eq(schema.session.id, currentSessionId)),
+        );
+
+      return { nextOrganizationId: nextOrgId };
+    });
+
+    return result;
+  });
+
+export const Route = createFileRoute("/_authed/settings/workspace")({
+  component: WorkspaceSettingsComponent,
+  loader: () => getOrganizationFn(),
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "workspace", label: "Workspace" },
+];
+
+function WorkspaceSettingsComponent() {
+  const organization = Route.useLoaderData();
+  const router = useRouter();
+  const navigate = useNavigate();
+  const [isLeaving, setIsLeaving] = useState(false);
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    await saveOrganizationNameFn({ data: formData });
+    router.invalidate();
+    toast.success("Name saved");
+  };
+  const leaveOrganization = async () => {
+    if (isLeaving) return;
+    const confirmed = window.confirm(
+      "Are you sure you want to leave this workspace? You will lose access to all of its data.",
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      setIsLeaving(true);
+      const result = await leaveOrganizationFn();
+      const nextOrganizationId = result?.nextOrganizationId ?? null;
+
+      toast.success("You left the workspace");
+
+      if (nextOrganizationId) {
+        await router.invalidate();
+        navigate({ to: "/" });
+      } else {
+        await router.invalidate();
+        navigate({ to: "/" }); // Will redirect to /no-access if no membership
+      }
+    } catch (_error) {
+      toast.error("Unable to leave the workspace");
+    } finally {
+      setIsLeaving(false);
+    }
+  };
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="max-w-3xl space-y-6">
+        <H1>Workspace Settings</H1>
+
+        <div className="space-y-6 rounded-lg border p-6">
+          <form onSubmit={onSubmit} className="space-y-6">
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="name" className="mb-1 block text-sm font-medium">
+                  Workspace Name
+                </label>
+                <Input
+                  id="name"
+                  name="name"
+                  defaultValue={organization.name}
+                  className="max-w-md"
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-2 pt-4">
+              <Button type="submit">Save Changes</Button>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </div>
+
+        <div className="space-y-4 rounded-lg border p-6">
+          <H2>Workspace Information</H2>
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <div className="text-muted-foreground">Created</div>
+              <div>{formatFullDate(organization.createdAt)}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Current Plan</div>
+              <div>Free</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Users</div>
+              <div>{organization.members.length} active users</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-destructive/40 bg-destructive/5 space-y-4 rounded-lg border p-6">
+          <div>
+            <H2>Leave workspace</H2>
+            <p className="text-muted-foreground mt-2 text-sm">
+              Leaving removes your access to this workspace. You will need an invitation to return.
+            </p>
+          </div>
+          <Button
+            variant="destructive"
+            onClick={leaveOrganization}
+            disabled={isLeaving}
+            aria-busy={isLeaving}
+          >
+            Leave this workspace
+          </Button>
+        </div>
+      </div>
+    </Container>
+  );
+}

package/apps/main/src/routes/_public/-components/sign-in-up.tsx

@@ -0,0 +1,96 @@
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { Button } from "@sea/ui/components/ui/button";
+import { Input } from "@sea/ui/components/ui/input";
+import { Link } from "@tanstack/react-router";
+import type { FormEvent } from "react";
+
+export function SignInUp({
+  variant,
+  onClickSocial,
+  onSubmitDevOnly,
+  onSubmitOtp,
+  error,
+  showEmail,
+  inviteId,
+}: {
+  variant: "in" | "up";
+  onClickSocial: (p: "google") => void;
+  onSubmitDevOnly: (f: FormEvent<HTMLFormElement>) => void;
+  onSubmitOtp: (f: FormEvent<HTMLFormElement>) => void;
+  showEmail: boolean;
+  error?: string;
+  inviteId: string | undefined;
+}) {
+  const buttonText = variant === "in" ? "Sign in" : "Sign up";
+  return (
+    <div className="h-full">
+      {showEmail && (
+        <form
+          className="bg-background absolute inset-4 flex h-fit w-60 flex-col gap-2"
+          onSubmit={onSubmitDevOnly}
+        >
+          <div className="text-status-warning font-bold">DEV ONLY</div>
+          <Input
+            name="email"
+            type="email"
+            required={true}
+            placeholder="you@yours.com"
+            data-testid="input-email"
+          />
+          <Input
+            name="password"
+            type="password"
+            required={true}
+            placeholder="password"
+            data-testid="input-password"
+          />
+          <Button data-testid="btn-submit">{buttonText}</Button>
+        </form>
+      )}
+      <div className="flex h-full flex-col items-center justify-between gap-4 py-4">
+        {error && (
+          <div>
+            <div className="text-xl text-red-500">Error!</div>
+          </div>
+        )}
+
+        <div className="flex items-center justify-center">
+          <span className="overflow-hidden rounded-2xl text-[8rem] leading-none">
+            <img src="/wave-emoji.png" alt="logo" className="h-24 w-24" />
+          </span>
+        </div>
+        <div className="grid w-60 gap-4">
+          <Button type="button" onClick={onClickSocial.bind(null, "google")} className="w-full">
+            Continue with Google
+          </Button>
+
+          <div className="after:border-border relative w-full text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
+            <span className="bg-background text-muted-foreground relative z-10 px-2">Or</span>
+          </div>
+
+          <form className="flex h-fit w-full flex-col gap-2" onSubmit={onSubmitOtp}>
+            <Input name="email" type="email" required={true} placeholder="you@company.com" />
+            <Button variant="outline" className="w-full">
+              Send OTP
+            </Button>
+          </form>
+        </div>
+        {variant === "in" ? (
+          <div>
+            Need an account?{" "}
+            <Link className={styledLinkClassName} to="/sign-up" search={{ inviteId }}>
+              Sign up!
+            </Link>
+          </div>
+        ) : (
+          <div>
+            Have an account?{" "}
+            <Link className={styledLinkClassName} to="/sign-in" search={{ inviteId }}>
+              Sign in!
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/main/src/routes/_public/embedded.tsx

@@ -0,0 +1,57 @@
+import { auth } from "@/lib/auth";
+import { getConfigIso } from "@/lib/config-iso";
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import { useEffect } from "react";
+
+const getSessionServerFn = createServerFn().handler(async () => {
+  const request = getWebRequest();
+  if (!request) {
+    return { hasSession: false };
+  }
+  const { headers } = request;
+  const session = await auth.api.getSession({ headers });
+  return { hasSession: !!session };
+});
+
+export const Route = createFileRoute("/_public/embedded")({
+  beforeLoad: async () => {
+    const { hasSession } = await getSessionServerFn();
+    console.log("hasSession", hasSession);
+    if (hasSession) {
+      throw redirect({ to: "/" });
+    }
+  },
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const navigate = useNavigate();
+  const { baseUrl } = getConfigIso();
+
+  useEffect(() => {
+    window.open(`${baseUrl}/sign-in`, "loginWindow", "width=500,height=600");
+
+    const handleMessage = async (event: MessageEvent) => {
+      const expectedOrigin = new URL(baseUrl).origin;
+      if (event.origin !== expectedOrigin) {
+        return;
+      }
+
+      if (event.data.status === "loggedIn") {
+        try {
+          await document.requestStorageAccess();
+          await navigate({ to: "/" });
+        } catch (_err) {
+          await navigate({ to: "/" });
+        }
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [navigate, baseUrl]);
+
+  return <div>Authenticating...</div>;
+}

package/apps/main/src/routes/_public/invite.$inviteId.tsx

@@ -0,0 +1,143 @@
+import { auth } from "@/lib/auth";
+import { authClient } from "@/lib/auth-client";
+import { acceptInvite, getInvite, rejectInvite } from "@sea/dal/invitation";
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { Button } from "@sea/ui/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "@sea/ui/components/ui/card";
+import { H2, H3, Lead } from "@sea/ui/components/ui/typography";
+import { createFileRoute, invariant, Link, redirect, useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+
+const getInviteFn = createServerFn({ method: "GET" })
+  .validator((data: { inviteId: string }) => data)
+  .handler(async ({ data: { inviteId } }) => {
+    const { headers } = getWebRequest()!;
+    const rawSession = await auth.api.getSession({ headers });
+    if (!rawSession) {
+      throw redirect({ to: "/sign-up", search: { inviteId } });
+    }
+    const { user } = rawSession;
+
+    const inviteResult = await getInvite({ user, inviteId });
+
+    if (inviteResult.type === "not-found") {
+      throw redirect({ to: "/no-invite" });
+    }
+
+    if (inviteResult.type === "email-mismatch") {
+      return { type: "email-mismatch" as const, userEmail: user.email };
+    }
+
+    return { type: "valid" as const, invitation: inviteResult.invitation };
+  });
+
+const acceptInviteFn = createServerFn({ method: "POST" })
+  .validator((data: { inviteId: string }) => data)
+  .handler(async ({ data: { inviteId } }) => {
+    const { headers } = getWebRequest()!;
+    const rawSession = await auth.api.getSession({ headers });
+    invariant(rawSession);
+    const { user, session } = rawSession;
+
+    await acceptInvite({ inviteId, session, user });
+  });
+
+const rejectInviteFn = createServerFn({ method: "POST" })
+  .validator((data: { inviteId: string }) => data)
+  .handler(async ({ data: { inviteId } }) => {
+    const { headers } = getWebRequest()!;
+    const rawSession = await auth.api.getSession({ headers });
+    invariant(rawSession);
+    const { user } = rawSession;
+
+    const maybeExistingMember = await rejectInvite({ inviteId, user });
+    return maybeExistingMember;
+  });
+
+export const Route = createFileRoute("/_public/invite/$inviteId")({
+  loader: ({ params: { inviteId } }) => getInviteFn({ data: { inviteId } }),
+  component: RouteComponent,
+});
+
+function EmailMismatchView({ userEmail }: { userEmail: string }) {
+  const navigate = useNavigate();
+  const signout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          navigate({ to: "/sign-in" });
+        },
+      },
+    });
+  };
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6">
+      <H3>Email address mismatch</H3>
+      <div className="flex flex-col items-center gap-2">
+        <Lead>This invite doesn't match your current account ({userEmail}).</Lead>
+        <div className="text-muted-foreground mt-2 flex flex-col gap-1 text-sm">
+          <p>Please either:</p>
+          <ul className="ml-4 list-disc">
+            <li>Sign out and log in with the email address that received the invite</li>
+            <li>Contact the organization admin to send a new invite to your current email</li>
+          </ul>
+        </div>
+      </div>
+      <div className="flex w-full items-center justify-between gap-2">
+        <span onClick={signout} className={styledLinkClassName}>
+          Sign out
+        </span>
+        <Button variant="outline" extra="action" asChild>
+          <Link to="/">Continue to your organization</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function RouteComponent() {
+  const loaderData = Route.useLoaderData();
+  const navigate = useNavigate();
+
+  if (loaderData.type === "email-mismatch") {
+    return <EmailMismatchView userEmail={loaderData.userEmail} />;
+  }
+
+  const { invitation } = loaderData;
+  const { id: inviteId } = invitation;
+
+  const accept = async () => {
+    await acceptInviteFn({ data: { inviteId } });
+    navigate({ to: "/" });
+  };
+  const reject = async () => {
+    const maybeMember = await rejectInviteFn({ data: { inviteId } });
+    if (maybeMember) {
+      navigate({ to: "/" });
+    } else {
+      navigate({ to: "/" }); // Will redirect to /no-access if no membership
+    }
+  };
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <Card>
+        <CardHeader>
+          <H2>Accept invitation?</H2>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-2">
+          <p>
+            You will be added to the <strong>{invitation.organization.name}</strong> organization.
+          </p>
+        </CardContent>
+        <CardFooter className="flex justify-end gap-2">
+          <Button onClick={reject} variant="secondary">
+            Reject
+          </Button>
+          <Button onClick={accept}>Accept</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/apps/main/src/routes/_public/no-access.tsx

@@ -0,0 +1,38 @@
+import { authClient } from "@/lib/auth-client";
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { H3, Lead } from "@sea/ui/components/ui/typography";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_public/no-access")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const navigate = useNavigate();
+  const signout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          navigate({ to: "/sign-in" });
+        },
+      },
+    });
+  };
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6">
+      <H3>No organization access</H3>
+      <div className="flex flex-col items-center gap-2 text-center">
+        <Lead>You are not a member of any organization.</Lead>
+        <div className="text-muted-foreground mt-2 text-sm">
+          <p>This application is invite-only.</p>
+          <p>Please ask someone from your organization to send you an invite.</p>
+        </div>
+      </div>
+      <div className="flex w-full items-center justify-center gap-2">
+        <span onClick={signout} className={styledLinkClassName}>
+          Sign out
+        </span>
+      </div>
+    </div>
+  );
+}

package/apps/main/src/routes/_public/no-invite.tsx

@@ -0,0 +1,39 @@
+import { authClient } from "@/lib/auth-client";
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { Button } from "@sea/ui/components/ui/button";
+import { H3, Lead } from "@sea/ui/components/ui/typography";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_public/no-invite")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const navigate = useNavigate();
+  const signout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          navigate({ to: "/sign-in" });
+        },
+      },
+    });
+  };
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6">
+      <H3>Hmm, no invite here...</H3>
+      <div className="flex flex-col items-center">
+        <Lead>That invite does not exist.</Lead>
+        <Lead>Continue to your own organization?</Lead>
+      </div>
+      <div className="flex w-full items-center justify-between gap-2">
+        <span onClick={signout} className={styledLinkClassName}>
+          Sign out
+        </span>
+        <Button variant="outline" extra="action" asChild>
+          <Link to="/">Yes please</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/apps/main/src/routes/_public/otp.tsx

@@ -0,0 +1,103 @@
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@sea/ui/components/ui/button";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@sea/ui/components/ui/input-otp";
+import { H3, Lead } from "@sea/ui/components/ui/typography";
+import { createFileRoute, Link, redirect, useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getCookie } from "@tanstack/react-start/server";
+import { useState, type FormEvent } from "react";
+import * as z from "zod/v4";
+
+const getOtpEmailFn = createServerFn().handler(async () => {
+  const email = getCookie("seadev_otp_email");
+  if (!email) {
+    throw redirect({ to: "/sign-up" });
+  }
+  return { email };
+});
+
+const searchSchema = z.object({
+  error: z.string().optional(),
+  inviteId: z.string().optional(),
+});
+export const Route = createFileRoute("/_public/otp")({
+  validateSearch: searchSchema,
+  loader: () => getOtpEmailFn(),
+  component: RouteComponent,
+});
+
+function getErrorMessage(error: "INVALID_OTP" | string): string {
+  if (error === "INVALID_OTP") {
+    return "Invalid OTP";
+  }
+  return "Unknown error";
+}
+
+function RouteComponent() {
+  const navigate = useNavigate();
+  const { error, inviteId } = Route.useSearch();
+  const { email } = Route.useLoaderData();
+  const [value, setValue] = useState<string>("");
+
+  const onSubmitOtpCheck = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const otp = formData.get("otp") as string;
+
+    await authClient.signIn.emailOtp(
+      { email, otp },
+      {
+        onError: async (ctx) => {
+          await navigate({ to: "/otp", search: { error: ctx.error.code } });
+        },
+        onSuccess: async () => {
+          if (inviteId) {
+            await navigate({ to: "/invite/$inviteId", params: { inviteId } });
+          } else {
+            await navigate({ to: "/" });
+          }
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6">
+      {error && (
+        <div className="text-center">
+          <div className="text-lg text-red-600">{getErrorMessage(error)}</div>
+          <div className="text-red-400">
+            Please try again or go back and enter your email again.
+          </div>
+        </div>
+      )}
+      <div className="flex flex-col items-center">
+        <H3>Enter Verification Code</H3>
+        <Lead>Please enter the 6-digit code sent to your email</Lead>
+      </div>
+      <form className="space-y-4" onSubmit={onSubmitOtpCheck}>
+        <div className="flex justify-center">
+          <InputOTP maxLength={6} name="otp" value={value} onChange={(value) => setValue(value)}>
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+        </div>
+
+        <div className="flex gap-3">
+          <Button type="button" variant="outline" className="flex-1 bg-transparent" asChild>
+            <Link to="/sign-up">Back</Link>
+          </Button>
+          <Button className="flex-1" disabled={value.length !== 6}>
+            Continue
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}