openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(auth)/register/page.tsx

@@ -1,10 +1,176 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { signUp } from "@/lib/auth-client";
+import { useToast } from "@/components/toast";
+import { useI18n } from "@/components/i18n-provider";
+import { AuthShell } from "@/components/auth-shell";
+import { OAuthButtons } from "@/components/oauth-buttons";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { isNetworkError } from "@/lib/api";
+
 export default function RegisterPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { toast } = useToast();
+  const { t } = useI18n();
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Desktop callback: after signup, redirect to authorize page (has state + PKCE)
+  // Self-hosted connect: after signup, redirect directly to handoff (no state)
+  const callback = searchParams.get("callback");
+  const appParam = searchParams.get("app");
+  const machineParam = searchParams.get("machine");
+  const stateParam = searchParams.get("state");
+  const codeChallengeParam = searchParams.get("code_challenge");
+  const API_URL = process.env.NEXT_PUBLIC_API_URL || "";
+
+  const postLoginUrl = callback
+    ? stateParam
+      ? `/authorize?${new URLSearchParams({
+          callback,
+          ...(appParam ? { app: appParam } : {}),
+          ...(machineParam ? { machine: machineParam } : {}),
+          ...(stateParam ? { state: stateParam } : {}),
+          ...(codeChallengeParam ? { code_challenge: codeChallengeParam } : {}),
+        }).toString()}`
+      : `${API_URL}/api/cloud/connect-handoff?redirect=${encodeURIComponent(callback)}`
+    : null;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (password.length < 8) {
+      toast("error", t.auth.errors.passwordMin);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await signUp.email({
+        name,
+        email,
+        password,
+      });
+      if (result.error) {
+        if (result.error.message?.toLowerCase().includes("verify")) {
+          router.push(`/verify-email?email=${encodeURIComponent(email)}`);
+          return;
+        }
+        toast("error", result.error.message ?? t.auth.errors.createFailed);
+      } else if (postLoginUrl) {
+        window.location.href = postLoginUrl;
+      } else {
+        router.push("/");
+      }
+    } catch (err) {
+      toast("error", isNetworkError(err)
+        ? t.auth.errors.serverUnreachable
+        : t.auth.errors.generic);
+    } finally {
+      setLoading(false);
+    }
+  }
+
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-sm rounded-lg border p-8">
-        <h1 className="mb-6 text-2xl font-bold">Create an account</h1>
-        <p className="text-sm text-gray-500">Registration coming soon.</p>
+    <AuthShell>
+      <div className="mb-6">
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">
+          {t.auth.register.title}
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {t.auth.register.subtitle}
+        </p>
       </div>
-    </div>
+
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="reg-name">{t.auth.register.nameLabel}</Label>
+          <Input
+            id="reg-name"
+            type="text"
+            autoComplete="name"
+            placeholder={t.auth.register.namePlaceholder}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="reg-email">{t.auth.register.emailLabel}</Label>
+          <Input
+            id="reg-email"
+            type="email"
+            autoComplete="email"
+            placeholder={t.auth.register.emailPlaceholder}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="reg-password">{t.auth.register.passwordLabel}</Label>
+          <div className="relative">
+            <Input
+              id="reg-password"
+              type={showPassword ? "text" : "password"}
+              autoComplete="new-password"
+              placeholder={t.auth.register.passwordPlaceholder}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={8}
+              className="pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword((v) => !v)}
+              tabIndex={-1}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={showPassword ? t.auth.hidePassword : t.auth.showPassword}
+            >
+              {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            </button>
+          </div>
+        </div>
+
+        <Button type="submit" disabled={loading} className="mt-1 w-full">
+          {loading && <Loader2 className="animate-spin" />}
+          {loading ? t.auth.register.submitting : t.auth.register.submit}
+        </Button>
+      </form>
+
+      <OAuthButtons callbackURL={postLoginUrl ?? "/"} />
+
+      <p className="mt-8 text-center text-sm text-muted-foreground">
+        {t.auth.register.hasAccount}{" "}
+        <Link
+          href={callback
+            ? `/login?${new URLSearchParams({
+                callback,
+                ...(appParam ? { app: appParam } : {}),
+                ...(machineParam ? { machine: machineParam } : {}),
+                ...(stateParam ? { state: stateParam } : {}),
+                ...(codeChallengeParam ? { code_challenge: codeChallengeParam } : {}),
+              }).toString()}`
+            : "/login"}
+          className="font-medium text-foreground transition-colors hover:underline"
+        >
+          {t.auth.register.signIn}
+        </Link>
+      </p>
+    </AuthShell>
   );
 }

package/apps/dashboard/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { resetPassword } from "@/lib/auth-client";
+import { useToast } from "@/components/toast";
+import { useI18n } from "@/components/i18n-provider";
+import { AuthShell } from "@/components/auth-shell";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { CheckCircle2, Eye, EyeOff, Loader2 } from "lucide-react";
+import { isNetworkError } from "@/lib/api";
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={
+      <AuthShell>
+        <div className="flex justify-center"><Loader2 className="size-6 animate-spin text-muted-foreground" /></div>
+      </AuthShell>
+    }>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") ?? "";
+  const { toast } = useToast();
+  const { t } = useI18n();
+
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (password.length < 8) {
+      toast("error", t.auth.errors.passwordMin);
+      return;
+    }
+    if (password !== confirm) {
+      toast("error", t.auth.errors.passwordMismatch);
+      return;
+    }
+    if (!token) {
+      toast("error", t.auth.errors.invalidToken);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await resetPassword({ newPassword: password, token });
+      if (result.error) {
+        toast("error", result.error.message ?? t.auth.errors.resetFailed);
+      } else {
+        setDone(true);
+      }
+    } catch (err) {
+      toast("error", isNetworkError(err)
+        ? t.auth.errors.serverUnreachable
+        : t.auth.errors.generic);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <AuthShell>
+        <div className="text-center">
+          <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-emerald-500/10">
+            <CheckCircle2 className="size-6 text-emerald-500" />
+          </div>
+          <h1 className="text-xl font-semibold tracking-tight text-foreground">
+            {t.auth.resetPassword.doneTitle}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t.auth.resetPassword.doneDescription}
+          </p>
+          <Button asChild className="mt-6">
+            <Link href="/login">{t.auth.resetPassword.doneAction}</Link>
+          </Button>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell>
+      <div className="mb-6">
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">
+          {t.auth.resetPassword.title}
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {t.auth.resetPassword.subtitle}
+        </p>
+      </div>
+
+      {!token && (
+        <div className="mb-4 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+          {t.auth.resetPassword.noTokenError.replace(
+            "{link}",
+            "",
+          )}
+          <Link href="/forgot-password" className="underline">
+            {t.auth.resetPassword.noTokenLink}
+          </Link>
+          .
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="reset-password">{t.auth.resetPassword.passwordLabel}</Label>
+          <div className="relative">
+            <Input
+              id="reset-password"
+              type={showPassword ? "text" : "password"}
+              autoComplete="new-password"
+              placeholder={t.auth.resetPassword.passwordPlaceholder}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={8}
+              className="pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword((v) => !v)}
+              tabIndex={-1}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={showPassword ? t.auth.hidePassword : t.auth.showPassword}
+            >
+              {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            </button>
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="reset-confirm">{t.auth.resetPassword.confirmLabel}</Label>
+          <Input
+            id="reset-confirm"
+            type={showPassword ? "text" : "password"}
+            autoComplete="new-password"
+            placeholder={t.auth.resetPassword.confirmPlaceholder}
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+
+        <Button type="submit" disabled={loading || !token} className="mt-1 w-full">
+          {loading && <Loader2 className="animate-spin" />}
+          {loading ? t.auth.resetPassword.submitting : t.auth.resetPassword.submit}
+        </Button>
+      </form>
+
+      <p className="mt-8 text-center text-sm text-muted-foreground">
+        <Link href="/login" className="font-medium text-foreground transition-colors hover:underline">
+          {t.auth.resetPassword.backToSignIn}
+        </Link>
+      </p>
+    </AuthShell>
+  );
+}

package/apps/dashboard/src/app/(auth)/verify-email/page.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { sendVerificationEmail, verifyEmail } from "@/lib/auth-client";
+import { useToast } from "@/components/toast";
+import { useI18n, interpolate } from "@/components/i18n-provider";
+import { AuthShell } from "@/components/auth-shell";
+import { Button } from "@/components/ui/button";
+import { CheckCircle2, Loader2, Mail, XCircle } from "lucide-react";
+import { isNetworkError } from "@/lib/api";
+
+export default function VerifyEmailPage() {
+  return (
+    <Suspense fallback={
+      <AuthShell>
+        <div className="flex justify-center"><Loader2 className="size-6 animate-spin text-muted-foreground" /></div>
+      </AuthShell>
+    }>
+      <VerifyEmailContent />
+    </Suspense>
+  );
+}
+
+function VerifyEmailContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+  const emailParam = searchParams.get("email") ?? "";
+  const { toast } = useToast();
+  const { t } = useI18n();
+
+  const [status, setStatus] = useState<"pending" | "verifying" | "verified" | "error">(
+    token ? "verifying" : "pending",
+  );
+  const [resending, setResending] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) return;
+
+    let cancelled = false;
+
+    async function verify() {
+      try {
+        const result = await verifyEmail({ query: { token: token! } });
+        if (cancelled) return;
+        if (result.error) {
+          setStatus("error");
+          setErrorMessage(result.error.message ?? t.auth.errors.verificationFailed);
+        } else {
+          setStatus("verified");
+        }
+      } catch (err) {
+        if (cancelled) return;
+        setStatus("error");
+        setErrorMessage(
+          isNetworkError(err)
+            ? t.auth.errors.serverUnreachable
+            : t.auth.errors.verificationExpired,
+        );
+      }
+    }
+
+    verify();
+    return () => { cancelled = true; };
+  }, [token, t]);
+
+  async function handleResend() {
+    if (!emailParam) return;
+    setResending(true);
+    try {
+      await sendVerificationEmail({
+        email: emailParam,
+        callbackURL: "/verify-email",
+      });
+      toast("success", t.auth.errors.verificationSent);
+    } catch (err) {
+      const msg = isNetworkError(err)
+        ? t.auth.errors.serverUnreachable
+        : t.auth.errors.resendFailed;
+      toast("error", msg);
+    } finally {
+      setResending(false);
+    }
+  }
+
+  if (status === "verifying") {
+    return (
+      <AuthShell>
+        <div className="flex flex-col items-center text-center">
+          <Loader2 className="mb-4 size-8 animate-spin text-muted-foreground" />
+          <h1 className="text-xl font-semibold tracking-tight text-foreground">
+            {t.auth.verifyEmail.verifyingTitle}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t.auth.verifyEmail.verifyingSubtitle}
+          </p>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  if (status === "verified") {
+    return (
+      <AuthShell>
+        <div className="text-center">
+          <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-emerald-500/10">
+            <CheckCircle2 className="size-6 text-emerald-500" />
+          </div>
+          <h1 className="text-xl font-semibold tracking-tight text-foreground">
+            {t.auth.verifyEmail.verifiedTitle}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t.auth.verifyEmail.verifiedDescription}
+          </p>
+          <Button className="mt-6" onClick={() => router.push("/login")}>
+            {t.auth.verifyEmail.verifiedAction}
+          </Button>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <AuthShell>
+        <div className="text-center">
+          <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-destructive/10">
+            <XCircle className="size-6 text-destructive" />
+          </div>
+          <h1 className="text-xl font-semibold tracking-tight text-foreground">
+            {t.auth.verifyEmail.errorTitle}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {errorMessage ?? t.auth.verifyEmail.errorDescription}
+          </p>
+          <div className="mt-6 flex items-center justify-center gap-3">
+            {emailParam && (
+              <Button variant="outline" onClick={handleResend} disabled={resending}>
+                {resending && <Loader2 className="animate-spin" />}
+                {t.auth.verifyEmail.resendEmail}
+              </Button>
+            )}
+            <Button asChild>
+              <Link href="/login">{t.auth.verifyEmail.signIn}</Link>
+            </Button>
+          </div>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell>
+      <div className="text-center">
+        <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-secondary">
+          <Mail className="size-6 text-foreground" />
+        </div>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">
+          {t.auth.verifyEmail.pendingTitle}
+        </h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {emailParam
+            ? interpolate(t.auth.verifyEmail.pendingSentTo, { email: emailParam })
+            : t.auth.verifyEmail.pendingGeneric}
+        </p>
+
+        {emailParam && (
+          <Button
+            variant="outline"
+            className="mt-6"
+            onClick={handleResend}
+            disabled={resending}
+          >
+            {resending && <Loader2 className="animate-spin" />}
+            {t.auth.verifyEmail.resendVerification}
+          </Button>
+        )}
+
+        <p className="mt-6 text-sm text-muted-foreground">
+          <Link href="/login" className="font-medium text-foreground transition-colors hover:underline">
+            {t.auth.verifyEmail.backToSignIn}
+          </Link>
+        </p>
+      </div>
+    </AuthShell>
+  );
+}