@lastbrain/module-auth 0.1.2 → 0.1.3

package/src/web/auth/profile.tsx

@@ -1,3 +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() {
-  return <div className="pt-12">Welcome to your Profile!</div>;
+  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>
+  );
 }

package/src/web/auth/reglage.tsx

@@ -1,3 +1,304 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Switch,
+  Button,
+  Spinner,
+  Divider,
+  Select,
+  SelectItem,
+  addToast,
+} from "@lastbrain/ui";
+import { Settings, Save } from "lucide-react";
+
+interface UserPreferences {
+  email_notifications?: boolean;
+  push_notifications?: boolean;
+  marketing_emails?: boolean;
+  theme?: string;
+  language?: string;
+  timezone?: string;
+}
+
+interface ProfileData {
+  language?: string;
+  timezone?: string;
+  preferences?: UserPreferences;
+}
+
 export function ReglagePage() {
-  return <div className="pt-12">Welcome to your Reglage!</div>;
+  const [preferences, setPreferences] = useState<UserPreferences>({
+    email_notifications: true,
+    push_notifications: false,
+    marketing_emails: false,
+    theme: "system",
+    language: "en",
+    timezone: "UTC",
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/auth/profile");
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch settings");
+      }
+
+      const result = await response.json();
+      if (result.data) {
+        const profile: ProfileData = result.data;
+        setPreferences((prev) => ({
+          ...prev,
+          language: profile.language || prev.language,
+          timezone: profile.timezone || prev.timezone,
+          ...(profile.preferences || {}),
+        }));
+      }
+    } catch (err) {
+      console.error("Error loading settings:", err);
+      addToast({
+        title: "Error",
+        description: "Failed to load settings",
+        color: "danger",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+
+    try {
+      const response = await fetch("/api/auth/profile", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          language: preferences.language,
+          timezone: preferences.timezone,
+          preferences: {
+            email_notifications: preferences.email_notifications,
+            push_notifications: preferences.push_notifications,
+            marketing_emails: preferences.marketing_emails,
+            theme: preferences.theme,
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to update settings");
+      }
+
+      addToast({
+        title: "Success",
+        description: "Settings updated successfully",
+        color: "success",
+      });
+    } catch (err) {
+      console.error("Error updating settings:", err);
+      addToast({
+        title: "Error",
+        description: "Failed to update settings",
+        color: "danger",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleToggle = (key: keyof UserPreferences, value: boolean) => {
+    setPreferences((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSelect = (key: keyof UserPreferences, value: string) => {
+    setPreferences((prev) => ({ ...prev, [key]: value }));
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <Spinner size="lg" label="Loading settings..." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-12 pb-12 max-w-4xl mx-auto px-4">
+      <div className="flex items-center gap-2 mb-8">
+        <Settings className="w-8 h-8" />
+        <h1 className="text-3xl font-bold">Account Settings</h1>
+      </div>
+
+      <div className="space-y-6">
+        {/* Notifications */}
+        <Card>
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Notifications</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <div>
+                  <p className="font-medium">Email Notifications</p>
+                  <p className="text-small text-default-500">
+                    Receive email notifications for important updates
+                  </p>
+                </div>
+                <Switch
+                  isSelected={preferences.email_notifications}
+                  onValueChange={(value) =>
+                    handleToggle("email_notifications", value)
+                  }
+                />
+              </div>
+              <Divider />
+              <div className="flex justify-between items-center">
+                <div>
+                  <p className="font-medium">Push Notifications</p>
+                  <p className="text-small text-default-500">
+                    Receive push notifications in your browser
+                  </p>
+                </div>
+                <Switch
+                  isSelected={preferences.push_notifications}
+                  onValueChange={(value) =>
+                    handleToggle("push_notifications", value)
+                  }
+                />
+              </div>
+              <Divider />
+              <div className="flex justify-between items-center">
+                <div>
+                  <p className="font-medium">Marketing Emails</p>
+                  <p className="text-small text-default-500">
+                    Receive emails about new features and updates
+                  </p>
+                </div>
+                <Switch
+                  isSelected={preferences.marketing_emails}
+                  onValueChange={(value) =>
+                    handleToggle("marketing_emails", value)
+                  }
+                />
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Appearance */}
+        <Card>
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Appearance</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <Select
+              label="Theme"
+              placeholder="Select a theme"
+              selectedKeys={preferences.theme ? [preferences.theme] : []}
+              onChange={(e) => handleSelect("theme", e.target.value)}
+            >
+              <SelectItem key="light">
+                Light
+              </SelectItem>
+              <SelectItem key="dark">
+                Dark
+              </SelectItem>
+              <SelectItem key="system">
+                System
+              </SelectItem>
+            </Select>
+          </CardBody>
+        </Card>
+
+        {/* Language & Region */}
+        <Card>
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Language & Region</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Select
+                label="Language"
+                placeholder="Select a language"
+                selectedKeys={preferences.language ? [preferences.language] : []}
+                onChange={(e) => handleSelect("language", e.target.value)}
+              >
+                <SelectItem key="en">
+                  English
+                </SelectItem>
+                <SelectItem key="fr">
+                  Français
+                </SelectItem>
+                <SelectItem key="es">
+                  Español
+                </SelectItem>
+                <SelectItem key="de">
+                  Deutsch
+                </SelectItem>
+              </Select>
+              <Select
+                label="Timezone"
+                placeholder="Select a timezone"
+                selectedKeys={preferences.timezone ? [preferences.timezone] : []}
+                onChange={(e) => handleSelect("timezone", e.target.value)}
+              >
+                <SelectItem key="UTC">
+                  UTC
+                </SelectItem>
+                <SelectItem key="Europe/Paris">
+                  Europe/Paris
+                </SelectItem>
+                <SelectItem key="America/New_York">
+                  America/New_York
+                </SelectItem>
+                <SelectItem key="America/Los_Angeles">
+                  America/Los_Angeles
+                </SelectItem>
+                <SelectItem key="Asia/Tokyo">
+                  Asia/Tokyo
+                </SelectItem>
+              </Select>
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3">
+          <Button
+            type="button"
+            variant="flat"
+            onPress={() => fetchSettings()}
+            isDisabled={isSaving}
+          >
+            Reset
+          </Button>
+          <Button
+            type="button"
+            color="primary"
+            isLoading={isSaving}
+            onPress={handleSave}
+            startContent={!isSaving && <Save className="w-4 h-4" />}
+          >
+            {isSaving ? "Saving..." : "Save Settings"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }