@lastbrain/module-auth 0.1.1 → 0.1.3

package/src/web/auth/dashboard.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Spinner,
+  Chip,
+  Divider,
+  Avatar,
+} from "@lastbrain/ui";
+import { User, Mail, Calendar, Shield } from "lucide-react";
+
+interface UserData {
+  id: string;
+  email: string;
+  created_at: string;
+  profile: {
+    first_name?: string;
+    last_name?: string;
+    avatar_url?: string;
+    bio?: string;
+    company?: string;
+    location?: string;
+  } | null;
+}
+
+export function DashboardPage() {
+  const [userData, setUserData] = useState<UserData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchUserData();
+  }, []);
+
+  const fetchUserData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/auth/me");
+      
+      if (!response.ok) {
+        throw new Error("Failed to fetch user data");
+      }
+
+      const result = await response.json();
+      setUserData(result.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <Spinner size="lg" label="Loading dashboard..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="pt-12">
+        <Card className="max-w-2xl mx-auto">
+          <CardBody>
+            <p className="text-danger">Error: {error}</p>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!userData) {
+    return null;
+  }
+
+  const fullName = userData.profile?.first_name && userData.profile?.last_name
+    ? `${userData.profile.first_name} ${userData.profile.last_name}`
+    : "User";
+
+  return (
+    <div className="pt-12 pb-12 max-w-6xl mx-auto px-4">
+      <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Profile Summary Card */}
+        <Card className="col-span-full md:col-span-1">
+          <CardHeader className="flex gap-3">
+            <Avatar
+              src={userData.profile?.avatar_url}
+              icon={<User />}
+              size="lg"
+              className="flex-shrink-0"
+            />
+            <div className="flex flex-col">
+              <p className="text-xl font-semibold">{fullName}</p>
+              <p className="text-small text-default-500">{userData.email}</p>
+            </div>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4 text-default-400" />
+                <span className="text-small">{userData.email}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Calendar className="w-4 h-4 text-default-400" />
+                <span className="text-small">
+                  Member since {new Date(userData.created_at).toLocaleDateString()}
+                </span>
+              </div>
+              {userData.profile?.company && (
+                <div className="flex items-center gap-2">
+                  <Shield className="w-4 h-4 text-default-400" />
+                  <span className="text-small">{userData.profile.company}</span>
+                </div>
+              )}
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Account Status Card */}
+        <Card>
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Account Status</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-small">Status</span>
+                <Chip color="success" size="sm" variant="flat">
+                  Active
+                </Chip>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-small">Profile</span>
+                <Chip
+                  color={userData.profile ? "success" : "warning"}
+                  size="sm"
+                  variant="flat"
+                >
+                  {userData.profile ? "Complete" : "Incomplete"}
+                </Chip>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Bio Card (if available) */}
+        {userData.profile?.bio && (
+          <Card className="col-span-full">
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Bio</h3>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+              <p className="text-small text-default-600">{userData.profile.bio}</p>
+            </CardBody>
+          </Card>
+        )}
+
+        {/* Quick Stats */}
+        <Card className="col-span-full">
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Quick Stats</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center">
+                <p className="text-2xl font-bold text-primary">0</p>
+                <p className="text-small text-default-500">Projects</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-success">0</p>
+                <p className="text-small text-default-500">Tasks</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-warning">0</p>
+                <p className="text-small text-default-500">Notifications</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-secondary">
+                  {Math.floor(
+                    (Date.now() - new Date(userData.created_at).getTime()) /
+                      (1000 * 60 * 60 * 24)
+                  )}
+                </p>
+                <p className="text-small text-default-500">Days active</p>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/web/auth/profile.tsx

@@ -0,0 +1,381 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Input,
+  Textarea,
+  Button,
+  Spinner,
+  Divider,
+  addToast,
+  AvatarUploader,
+} from "@lastbrain/ui";
+import { Save, User } from "lucide-react";
+import { uploadFile, deleteFilesWithPrefix } from "../../api/storage.js";
+import { supabaseBrowserClient } from "@lastbrain/core";
+
+interface ProfileData {
+  first_name?: string;
+  last_name?: string;
+  avatar_url?: string;
+  bio?: string;
+  phone?: string;
+  company?: string;
+  website?: string;
+  location?: string;
+  language?: string;
+  timezone?: string;
+}
+
+interface UserMetadata {
+  avatar?: string | null;
+  avatar_sizes?: {
+    small?: string | null;
+    medium?: string | null;
+    large?: string | null;
+  } | null;
+}
+
+export function ProfilePage() {
+  const [profile, setProfile] = useState<ProfileData>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [currentUser, setCurrentUser] = useState<any>(null);
+
+  useEffect(() => {
+    fetchProfile();
+    fetchCurrentUser();
+  }, []);
+
+  const fetchCurrentUser = async () => {
+    try {
+      const {
+        data: { user },
+      } = await supabaseBrowserClient.auth.getUser();
+      setCurrentUser(user);
+    } catch (err) {
+      console.error("Error fetching current user:", err);
+    }
+  };
+
+  const fetchProfile = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/auth/profile");
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch profile");
+      }
+
+      const result = await response.json();
+      if (result.data) {
+        setProfile(result.data);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+      addToast({
+        title: "Error",
+        description: "Failed to load profile",
+        color: "danger",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+
+    try {
+      const response = await fetch("/api/auth/profile", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(profile),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to update profile");
+      }
+
+      addToast({
+        title: "Success",
+        description: "Profile updated successfully",
+        color: "success",
+      });
+    } catch (err) {
+      console.error("Error updating profile:", err);
+      setError(err instanceof Error ? err.message : "An error occurred");
+      addToast({
+        title: "Error",
+        description: "Failed to update profile",
+        color: "danger",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleChange = (field: keyof ProfileData, value: string) => {
+    setProfile((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleAvatarUpload = async (files: {
+    small: Blob;
+    medium: Blob;
+    large: Blob;
+  }) => {
+    if (!currentUser) throw new Error("User not authenticated");
+
+    const version = Date.now();
+    const urls = {
+      small: "",
+      medium: "",
+      large: "",
+    };
+
+    // Upload all three sizes
+    urls.small = await uploadFile(
+      "avatar",
+      `${currentUser.id}_32_${version}.webp`,
+      files.small,
+      "image/webp"
+    );
+    urls.medium = await uploadFile(
+      "avatar",
+      `${currentUser.id}_64_${version}.webp`,
+      files.medium,
+      "image/webp"
+    );
+    urls.large = await uploadFile(
+      "avatar",
+      `${currentUser.id}_128_${version}.webp`,
+      files.large,
+      "image/webp"
+    );
+
+    // Update user metadata
+    await supabaseBrowserClient.auth.updateUser({
+      data: {
+        avatar: `avatar/${currentUser.id}_128_${version}.webp`,
+        avatar_sizes: {
+          small: `avatar/${currentUser.id}_32_${version}.webp`,
+          medium: `avatar/${currentUser.id}_64_${version}.webp`,
+          large: `avatar/${currentUser.id}_128_${version}.webp`,
+        },
+      },
+    });
+
+    // Update profile avatar_url
+    setProfile((prev) => ({ ...prev, avatar_url: urls.large }));
+
+    return urls;
+  };
+
+  const handleAvatarDelete = async () => {
+    if (!currentUser) throw new Error("User not authenticated");
+
+    // Delete old files
+    await deleteFilesWithPrefix("avatar", currentUser.id);
+
+    // Update user metadata
+    await supabaseBrowserClient.auth.updateUser({
+      data: {
+        avatar: null,
+        avatar_sizes: {
+          small: null,
+          medium: null,
+          large: null,
+        },
+      },
+    });
+
+    // Update profile
+    setProfile((prev) => ({ ...prev, avatar_url: "" }));
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <Spinner size="lg" label="Loading profile..." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-12 pb-12 max-w-4xl mx-auto px-4">
+      <div className="flex items-center gap-2 mb-8">
+        <User className="w-8 h-8" />
+        <h1 className="text-3xl font-bold">Edit Profile</h1>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="space-y-6">
+          {/* Avatar Section */}
+          <Card>
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Photo de profil</h3>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+              <div className="flex justify-center">
+                <AvatarUploader
+                  userId={currentUser?.id}
+                  bucket="avatar"
+                  shape="circle"
+                  onUpload={handleAvatarUpload}
+                  onDelete={handleAvatarDelete}
+                  initialAvatarPath={
+                    (currentUser?.user_metadata as UserMetadata)?.avatar ||
+                    profile.avatar_url ||
+                    null
+                  }
+                  initialAvatarSizes={(() => {
+                    const sizes = (currentUser?.user_metadata as UserMetadata)
+                      ?.avatar_sizes;
+                    if (!sizes) return null;
+                    return {
+                      small: sizes.small ?? null,
+                      medium: sizes.medium ?? null,
+                      large: sizes.large ?? null,
+                    };
+                  })()}
+                  onUploaded={(urls) => {
+                    setProfile((prev) => ({ ...prev, avatar_url: urls.large }));
+                  }}
+                  onDeleted={() => {
+                    setProfile((prev) => ({ ...prev, avatar_url: "" }));
+                  }}
+                />
+              </div>
+            </CardBody>
+          </Card>
+
+          {/* Personal Information */}
+          <Card>
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Personal Information</h3>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+              <div className="grid gap-4 md:grid-cols-2">
+                <Input
+                  label="First Name"
+                  placeholder="Enter your first name"
+                  value={profile.first_name || ""}
+                  onChange={(e) => handleChange("first_name", e.target.value)}
+                />
+                <Input
+                  label="Last Name"
+                  placeholder="Enter your last name"
+                  value={profile.last_name || ""}
+                  onChange={(e) => handleChange("last_name", e.target.value)}
+                />
+                <Input
+                  label="Phone"
+                  placeholder="Enter your phone number"
+                  type="tel"
+                  value={profile.phone || ""}
+                  onChange={(e) => handleChange("phone", e.target.value)}
+                  className="md:col-span-2"
+                />
+                <Textarea
+                  label="Bio"
+                  placeholder="Tell us about yourself"
+                  value={profile.bio || ""}
+                  onChange={(e) => handleChange("bio", e.target.value)}
+                  minRows={3}
+                  className="md:col-span-2"
+                />
+              </div>
+            </CardBody>
+          </Card>
+
+          {/* Professional Information */}
+          <Card>
+            <CardHeader>
+              <h3 className="text-lg font-semibold">
+                Professional Information
+              </h3>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+              <div className="grid gap-4 md:grid-cols-2">
+                <Input
+                  label="Company"
+                  placeholder="Enter your company name"
+                  value={profile.company || ""}
+                  onChange={(e) => handleChange("company", e.target.value)}
+                />
+                <Input
+                  label="Website"
+                  placeholder="https://example.com"
+                  type="url"
+                  value={profile.website || ""}
+                  onChange={(e) => handleChange("website", e.target.value)}
+                />
+                <Input
+                  label="Location"
+                  placeholder="City, Country"
+                  value={profile.location || ""}
+                  onChange={(e) => handleChange("location", e.target.value)}
+                  className="md:col-span-2"
+                />
+              </div>
+            </CardBody>
+          </Card>
+
+          {/* Preferences */}
+          <Card>
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Preferences</h3>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+              <div className="grid gap-4 md:grid-cols-2">
+                <Input
+                  label="Language"
+                  placeholder="en, fr, es..."
+                  value={profile.language || ""}
+                  onChange={(e) => handleChange("language", e.target.value)}
+                />
+                <Input
+                  label="Timezone"
+                  placeholder="Europe/Paris, America/New_York..."
+                  value={profile.timezone || ""}
+                  onChange={(e) => handleChange("timezone", e.target.value)}
+                />
+              </div>
+            </CardBody>
+          </Card>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="flat"
+              onPress={() => fetchProfile()}
+              isDisabled={isSaving}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              color="primary"
+              isLoading={isSaving}
+              startContent={!isSaving && <Save className="w-4 h-4" />}
+            >
+              {isSaving ? "Saving..." : "Save Changes"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}