orcheo-canvas 0.0.1

package/src/features/account/pages/profile/components/profile-security-tab.tsx

@@ -0,0 +1,114 @@
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import type { ProfileUser } from "../types";
+
+interface ProfileSecurityTabProps {
+  user: ProfileUser;
+}
+
+export function ProfileSecurityTab({ user }: ProfileSecurityTabProps) {
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here. After saving, you'll be logged out.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="current">
+              Current Password
+            </label>
+            <Input id="current" type="password" />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="new">
+              New Password
+            </label>
+            <Input id="new" type="password" />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium" htmlFor="confirm">
+              Confirm Password
+            </label>
+            <Input id="confirm" type="password" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Change Password</Button>
+        </CardFooter>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Two-Factor Authentication</CardTitle>
+          <CardDescription>
+            Add an extra layer of security to your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <div className="font-medium">Two-Factor Authentication (2FA)</div>
+              <div className="text-sm text-muted-foreground">
+                {user.twoFactorEnabled
+                  ? "Two-factor authentication is enabled."
+                  : "Two-factor authentication is not enabled yet."}
+              </div>
+            </div>
+            <Button variant={user.twoFactorEnabled ? "destructive" : "default"}>
+              {user.twoFactorEnabled ? "Disable" : "Enable"}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Active Sessions</CardTitle>
+          <CardDescription>
+            Manage your active sessions across devices.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <div className="font-medium">Current Session</div>
+                <div className="text-sm text-muted-foreground">
+                  Chrome on macOS • San Francisco, CA • Active now
+                </div>
+              </div>
+              <Badge>Current</Badge>
+            </div>
+            <div className="flex items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <div className="font-medium">Mobile App</div>
+                <div className="text-sm text-muted-foreground">
+                  iOS • New York, NY • Active 2 days ago
+                </div>
+              </div>
+              <Button variant="outline" size="sm">
+                Revoke
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="destructive">Sign Out All Devices</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/features/account/pages/profile/types.ts

@@ -0,0 +1,8 @@
+export interface ProfileUser {
+  name: string;
+  email: string;
+  avatar: string;
+  role: string;
+  joinDate: string;
+  twoFactorEnabled: boolean;
+}

package/src/features/account/pages/profile.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import TopNavigation from "@features/shared/components/top-navigation";
+import useCredentialVault from "@/hooks/use-credential-vault";
+import type { ProfileUser } from "./profile/types";
+import { ProfileGeneralTab } from "./profile/components/profile-general-tab";
+import { ProfileSecurityTab } from "./profile/components/profile-security-tab";
+import { ProfileApiKeysTab } from "./profile/components/profile-api-keys-tab";
+
+export default function Profile() {
+  const [user] = useState<ProfileUser>({
+    name: "Avery Chen",
+    email: "avery@orcheo.dev",
+    avatar: "https://avatar.vercel.sh/avery",
+    role: "Admin",
+    joinDate: "January 2023",
+    twoFactorEnabled: false,
+  });
+
+  const {
+    credentials,
+    isLoading: isCredentialsLoading,
+    onAddCredential,
+    onDeleteCredential,
+  } = useCredentialVault({ actorName: user.name });
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <TopNavigation
+        credentials={credentials}
+        isCredentialsLoading={isCredentialsLoading}
+        onAddCredential={onAddCredential}
+        onDeleteCredential={onDeleteCredential}
+      />
+
+      <div className="flex-1 space-y-4 p-8 pt-6 mx-auto w-full max-w-7xl">
+        <div className="flex items-center justify-between space-y-2">
+          <h2 className="text-3xl font-bold tracking-tight">Profile</h2>
+        </div>
+        <Tabs defaultValue="general" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="security">Security</TabsTrigger>
+            <TabsTrigger value="api-keys">API Keys</TabsTrigger>
+          </TabsList>
+          <TabsContent value="general" className="space-y-4">
+            <ProfileGeneralTab user={user} />
+          </TabsContent>
+          <TabsContent value="security" className="space-y-4">
+            <ProfileSecurityTab user={user} />
+          </TabsContent>
+          <TabsContent value="api-keys" className="space-y-4">
+            <ProfileApiKeysTab />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

package/src/features/account/pages/settings.tsx

@@ -0,0 +1,58 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import useCredentialVault from "@/hooks/use-credential-vault";
+import AppearanceSettingsTab from "@features/account/components/settings/appearance-settings-tab";
+import ApplicationSettingsTab from "@features/account/components/settings/application-settings-tab";
+import NotificationSettingsTab from "@features/account/components/settings/notification-settings-tab";
+import TeamBillingSettingsTab from "@features/account/components/settings/team-billing-settings-tab";
+import TopNavigation from "@features/shared/components/top-navigation";
+
+export default function Settings() {
+  const {
+    credentials,
+    isLoading: isCredentialsLoading,
+    onAddCredential,
+    onDeleteCredential,
+  } = useCredentialVault();
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <TopNavigation
+        credentials={credentials}
+        isCredentialsLoading={isCredentialsLoading}
+        onAddCredential={onAddCredential}
+        onDeleteCredential={onDeleteCredential}
+      />
+
+      <div className="flex-1 space-y-4 p-8 pt-6 mx-auto w-full max-w-7xl">
+        <div className="flex items-center justify-between space-y-2">
+          <h2 className="text-3xl font-bold tracking-tight">Settings</h2>
+        </div>
+        <Tabs defaultValue="appearance" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="appearance">Appearance</TabsTrigger>
+            <TabsTrigger value="notifications">Notifications</TabsTrigger>
+            <TabsTrigger value="application">Application</TabsTrigger>
+            <TabsTrigger value="teams">Teams & Billing</TabsTrigger>
+          </TabsList>
+          <TabsContent value="appearance" className="space-y-4">
+            <AppearanceSettingsTab />
+          </TabsContent>
+          <TabsContent value="notifications" className="space-y-4">
+            <NotificationSettingsTab />
+          </TabsContent>
+          <TabsContent value="application" className="space-y-4">
+            <ApplicationSettingsTab />
+          </TabsContent>
+          <TabsContent value="teams" className="space-y-4">
+            <TeamBillingSettingsTab />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

package/src/features/auth/components/auth-logos.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils";
+
+type LogoProps = {
+  className?: string;
+};
+
+export const GoogleLogo: React.FC<LogoProps> = ({ className }) => (
+  <svg
+    className={cn("w-5 h-5", className)}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.2856 13.4546V18.8764H23.974C23.6364 20.62 22.6233 22.0964 21.1038 23.0891L25.7402 26.6146C28.4415 24.1711 30 20.582 30 16.3184C30 15.3257 29.9091 14.371 29.7402 13.4547L16.2856 13.4546Z"
+      fill="#4285F4"
+    />
+
+    <path
+      d="M8.27956 18.6646L7.23387 19.449L3.53247 22.2744C5.88314 26.8434 10.701 29.9998 16.2855 29.9998C20.1425 29.9998 23.3763 28.7525 25.74 26.6144L21.1036 23.089C19.8309 23.9289 18.2075 24.4381 16.2855 24.4381C12.5711 24.4381 9.41536 21.9817 8.2854 18.6726L8.27956 18.6646Z"
+      fill="#34A853"
+    />
+
+    <path
+      d="M3.53237 9.72559C2.55839 11.6091 2 13.7346 2 16C2 18.2654 2.55839 20.3909 3.53237 22.2745C3.53237 22.2871 8.28576 18.6599 8.28576 18.6599C8.00004 17.8199 7.83116 16.9291 7.83116 15.9999C7.83116 15.0707 8.00004 14.1798 8.28576 13.3398L3.53237 9.72559Z"
+      fill="#FBBC05"
+    />
+
+    <path
+      d="M16.2858 7.57452C18.3897 7.57452 20.2598 8.28723 21.7533 9.66179L25.8443 5.65276C23.3637 3.38735 20.143 2 16.2858 2C10.7013 2 5.88314 5.14362 3.53247 9.72544L8.28571 13.34C9.41552 10.0309 12.5714 7.57452 16.2858 7.57452Z"
+      fill="#EA4335"
+    />
+  </svg>
+);
+
+export const AppleLogo: React.FC<LogoProps> = ({ className }) => (
+  <svg
+    className={cn("w-5 h-5 fill-black dark:fill-white", className)}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M22.5475 16.0837C22.5813 19.7157 25.7337 20.9243 25.7687 20.9397C25.742 21.0249 25.2649 22.6621 24.1078 24.3532C23.1074 25.8152 22.0693 27.2718 20.4338 27.302C18.8268 27.3316 18.3101 26.3491 16.4728 26.3491C14.6361 26.3491 14.062 27.2719 12.5408 27.3317C10.9622 27.3914 9.76003 25.7507 8.75145 24.294C6.69045 21.3143 5.11542 15.8742 7.23028 12.202C8.2809 10.3784 10.1584 9.22356 12.1963 9.19394C13.7465 9.16437 15.2097 10.2368 16.1573 10.2368C17.1044 10.2368 18.8825 8.9471 20.7517 9.13652C21.5342 9.16909 23.7308 9.45261 25.1412 11.5172C25.0276 11.5876 22.5203 13.0472 22.5475 16.0837ZM19.5274 7.16521C20.3655 6.15072 20.9296 4.73845 20.7757 3.33325C19.5676 3.38181 18.1068 4.13827 17.2403 5.15221C16.4637 6.0501 15.7836 7.48722 15.9671 8.86461C17.3136 8.96879 18.6892 8.18035 19.5274 7.16521Z" />
+  </svg>
+);
+
+export const GithubLogo: React.FC<LogoProps> = ({ className }) => (
+  <svg
+    className={cn("w-5 h-5 dark:fill-white", className)}
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.0099 4C9.36875 4 4 9.49998 4 16.3042C4 21.7432 7.43994 26.3472 12.2121 27.9767C12.8087 28.0991 13.0272 27.7119 13.0272 27.3862C13.0272 27.1009 13.0076 26.1232 13.0076 25.1044C9.6667 25.8379 8.97099 23.6377 8.97099 23.6377C8.43409 22.2117 7.63858 21.8452 7.63858 21.8452C6.54511 21.0914 7.71823 21.0914 7.71823 21.0914C8.93117 21.1729 9.56763 22.3544 9.56763 22.3544C10.6412 24.2284 12.3711 23.6989 13.0671 23.3729C13.1664 22.5784 13.4847 22.0284 13.8228 21.7229C11.1582 21.4377 8.35469 20.3784 8.35469 15.6522C8.35469 14.3077 8.8316 13.2077 9.58729 12.3522C9.46807 12.0467 9.0504 10.7835 9.70677 9.09273C9.70677 9.09273 10.7208 8.76673 13.0073 10.3557C13.9863 10.0864 14.9958 9.94938 16.0099 9.94823C17.024 9.94823 18.0577 10.091 19.0123 10.3557C21.299 8.76673 22.3131 9.09273 22.3131 9.09273C22.9695 10.7835 22.5515 12.0467 22.4323 12.3522C23.2079 13.2077 23.6652 14.3077 23.6652 15.6522C23.6652 20.3784 20.8617 21.4172 18.1772 21.7229C18.6148 22.1099 18.9924 22.8432 18.9924 24.0044C18.9924 25.6544 18.9727 26.9787 18.9727 27.3859C18.9727 27.7119 19.1915 28.0991 19.7879 27.9769C24.56 26.3469 27.9999 21.7432 27.9999 16.3042C28.0196 9.49998 22.6312 4 16.0099 4Z"
+    />
+  </svg>
+);

package/src/features/auth/components/auth-page.tsx

@@ -0,0 +1,213 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { Separator } from "@/design-system/ui/separator";
+import { Loader2 } from "lucide-react";
+import { GoogleLogo, GithubLogo } from "@features/auth/components/auth-logos";
+import { toast } from "@/hooks/use-toast";
+import { buildBackendHttpUrl } from "@/lib/config";
+
+interface AuthPageProps {
+  type?: "login" | "signup";
+}
+
+export default function AuthPage({ type = "login" }: AuthPageProps) {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [providerLoading, setProviderLoading] = useState<
+    "google" | "github" | null
+  >(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    toast({
+      title: "Authentication coming soon",
+      description:
+        "The canvas prototype does not include authentication yet. Your credentials were not sent anywhere.",
+    });
+
+    // In a real app, this would handle authentication
+  };
+
+  const startDevLogin = async (provider: "google" | "github") => {
+    setProviderLoading(provider);
+    try {
+      const response = await fetch(buildBackendHttpUrl("/api/auth/dev/login"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({
+          provider,
+          email: email || undefined,
+          name: email ? email.split("@")[0] : undefined,
+        }),
+      });
+
+      if (!response.ok) {
+        const detail = await response.json().catch(() => null);
+        const message =
+          detail?.message ||
+          detail?.detail?.message ||
+          "Developer login is disabled for this environment. Set ORCHEO_AUTH_DEV_LOGIN_ENABLED=true on the backend.";
+        throw new Error(message);
+      }
+
+      toast({
+        title: "Signed in",
+        description: `Authenticated via ${provider} (dev mode).`,
+      });
+      navigate("/");
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Unable to start the login flow.";
+      toast({
+        title: "Login failed",
+        description: message,
+        variant: "destructive",
+      });
+    } finally {
+      setProviderLoading(null);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-cover bg-center bg-[url('https://picsum.photos/seed/orcheocanvas/1920/1080')] dark:bg-[url('https://picsum.photos/seed/orcheocanvasdark/1920/1080')]">
+      <Card className="mx-auto min-w-80 max-w-md backdrop-blur-xl bg-primary/5 border-primary/25">
+        <CardHeader className="space-y-1">
+          <div className="flex items-center justify-center mb-2">
+            <Link to="/" className="flex items-center gap-2 font-semibold">
+              <img src="/favicon.png" alt="Orcheo Logo" className="h-8 w-8" />
+              <span className="text-xl font-bold">Orcheo Canvas</span>
+            </Link>
+          </div>
+          <CardTitle className="text-2xl">
+            {type === "login" ? "Login" : "Create an account"}
+          </CardTitle>
+          <CardDescription>
+            {type === "login"
+              ? "Enter your email below to login to your account"
+              : "Enter your information below to create your account"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4">
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => startDevLogin("google")}
+              disabled={providerLoading !== null}
+            >
+              {providerLoading === "google" ? (
+                <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+              ) : (
+                <GoogleLogo className="h-5 w-5 mr-2" />
+              )}
+              {providerLoading === "google" ? "Signing in…" : "Google"}
+            </Button>
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => startDevLogin("github")}
+              disabled={providerLoading !== null}
+            >
+              {providerLoading === "github" ? (
+                <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+              ) : (
+                <GithubLogo className="h-5 w-5 mr-2" />
+              )}
+              {providerLoading === "github" ? "Signing in…" : "GitHub"}
+            </Button>
+          </div>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <Separator className="w-full" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="you@orcheo.dev"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password">Password</Label>
+                  {type === "login" && (
+                    <Link
+                      to="/forgot-password"
+                      className="text-sm text-primary underline-offset-4 hover:underline"
+                    >
+                      Forgot password?
+                    </Link>
+                  )}
+                </div>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <Button className="w-full" type="submit">
+                {type === "login" ? "Login" : "Create account"}
+              </Button>
+            </div>
+          </form>
+
+          <div className="mt-4 text-center text-sm">
+            {type === "login" ? (
+              <div>
+                Don&apos;t have an account?{" "}
+                <Link
+                  to="/signup"
+                  className="text-primary underline-offset-4 hover:underline"
+                >
+                  Sign up
+                </Link>
+              </div>
+            ) : (
+              <div>
+                Already have an account?{" "}
+                <Link
+                  to="/login"
+                  className="text-primary underline-offset-4 hover:underline"
+                >
+                  Login
+                </Link>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/features/auth/pages/login.tsx

@@ -0,0 +1,5 @@
+import AuthPage from "@features/auth/components/auth-page";
+
+export default function Login() {
+  return <AuthPage type="login" />;
+}

package/src/features/auth/pages/signup.tsx

@@ -0,0 +1,5 @@
+import AuthPage from "@features/auth/components/auth-page";
+
+export default function Signup() {
+  return <AuthPage type="signup" />;
+}