@lastbrain/module-auth 0.1.1 → 0.1.3

package/src/web/auth/reglage.tsx

@@ -0,0 +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() {
+  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>
+  );
+}

package/src/web/public/ResetPassword.tsx

@@ -0,0 +1,3 @@
+export function ResetPassword() {
+  return <div>Reset Password Page</div>;
+}

package/src/web/public/SignInPage.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import type { FormEvent } from "react";
+import { Suspense, useState } from "react";
+import { supabaseBrowserClient } from "@lastbrain/core";
+import {
+  addToast,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Chip,
+  Input,
+  Link,
+} from "@lastbrain/ui";
+import { ArrowRight, Lock, Mail, Sparkles } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+function SignInForm() {
+  const searchParams = useSearchParams();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const redirectUrl = searchParams.get("redirect");
+  const router = useRouter();
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const { data, error } =
+        await supabaseBrowserClient.auth.signInWithPassword({
+          email,
+          password,
+        });
+
+      if (error) {
+        addToast({
+          color: "danger",
+          title: "Erreur de connexion",
+          description: error.message,
+        });
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(false);
+      console.log("Signed in user:", data.user);
+      addToast({
+        color: "success",
+        title: "Connecté avec succès !",
+        description: `Bienvenue ${data.user?.email}`,
+      });
+      router.push(redirectUrl || "/auth/dashboard");
+    } catch (err) {
+      setIsLoading(false);
+      addToast({
+        color: "danger",
+        title: "Erreur de connexion",
+        description: `${err instanceof Error ? err.message : String(err)}`,
+      });
+    }
+  };
+
+  // return (
+  //   <div className=" min-h-screen h-full  flex flex-col justify-center items-center p-4">
+  //     <Card className="w-full max-w-md">
+  //       <CardHeader className="flex flex-col">
+  //         <h1 className="text-2xl font-semibold text-slate-900 dark:text-white">
+  //           Connexion
+  //         </h1>
+  //         <p className="mt-1 text-sm text-slate-500">
+  //           Utilisez votre adresse email pour vous connecter.
+  //         </p>
+  //       </CardHeader>
+  //       <CardBody>
+  //         <form onSubmit={handleSubmit}>
+  //           <div className="space-y-6">
+  //             <Input
+  //               label="Email"
+  //               type="email"
+  //               className="mb-6"
+  //               required
+  //               value={email}
+  //               onChange={(event) => setEmail(event.target.value)}
+  //             />
+
+  //             <Input
+  //               label="Mot de passe"
+  //               type="password"
+  //               required
+  //               placeholder="Password"
+  //               className="mb-6"
+  //               value={password}
+  //               onChange={(event) => setPassword(event.target.value)}
+  //             />
+
+  //             <Button
+  //               size="lg"
+  //               type="submit"
+  //               className="w-full"
+  //               isLoading={isLoading}
+  //             >
+  //               Se connecter
+  //             </Button>
+  //           </div>
+  //         </form>
+  //       </CardBody>
+  //     </Card>
+  //   </div>
+  // );
+
+  return (
+    <div className="pt-12 relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-primary-50/30 to-secondary-50/30 dark:from-primary-950/50 dark:to-secondary-950/50">
+      {/* Background decoration */}
+      <div className="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800/20 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" />
+
+      <div className="relative flex min-h-[60vh] items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md">
+          {/* Header */}
+          <div className="mb-8 text-center">
+            <Chip
+              color="primary"
+              variant="flat"
+              startContent={<Sparkles className="w-4 h-4" />}
+              className="mb-4 p-2"
+            >
+              Espace membre
+            </Chip>
+            <h1 className="mb-3 text-4xl font-bold">
+              <span className="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
+                Bon retour
+              </span>
+            </h1>
+            <p className="text-default-600 dark:text-default-400">
+              Connectez-vous pour accéder à votre espace
+            </p>
+          </div>
+
+          {/* Form Card */}
+          <Card className="border border-default-200/60 bg-background/60 backdrop-blur-md backdrop-saturate-150 shadow-xl">
+            <CardBody className="gap-6 p-8">
+              <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+                <Input
+                  label="Email"
+                  type="email"
+                  placeholder="votre@email.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  startContent={<Mail className="h-4 w-4 text-default-400" />}
+                  classNames={{
+                    input: "text-base",
+                    inputWrapper:
+                      "border border-default-200/60 hover:border-primary-400 focus-within:border-primary-500",
+                  }}
+                />
+
+                <div className="flex flex-col gap-2">
+                  <Input
+                    label="Mot de passe"
+                    type="password"
+                    placeholder="••••••••"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    minLength={6}
+                    startContent={<Lock className="h-4 w-4 text-default-400" />}
+                    classNames={{
+                      input: "text-base",
+                      inputWrapper:
+                        "border border-default-200/60 hover:border-primary-400 focus-within:border-primary-500",
+                    }}
+                  />
+                  <Link
+                    href="/forgot-password"
+                    className="text-xs text-default-500 hover:text-primary-500 self-end"
+                  >
+                    Mot de passe oublié ?
+                  </Link>
+                </div>
+
+                {error && (
+                  <div className="rounded-lg border border-danger-200 bg-danger-50/50 px-4 py-3 dark:border-danger-800 dark:bg-danger-950/50">
+                    <p className="text-sm text-danger-600 dark:text-danger-400">
+                      {error}
+                    </p>
+                  </div>
+                )}
+
+                <Button
+                  type="submit"
+                  color="primary"
+                  size="lg"
+                  className="w-full font-semibold"
+                  endContent={
+                    isLoading ? null : <ArrowRight className="h-5 w-5" />
+                  }
+                  isLoading={isLoading}
+                >
+                  Se connecter
+                </Button>
+              </form>
+
+              {/* Divider */}
+              <div className="relative flex items-center gap-4 py-2">
+                <div className="h-px flex-1 bg-default-200" />
+                <span className="text-xs text-default-400">OU</span>
+                <div className="h-px flex-1 bg-default-200" />
+              </div>
+
+              {/* Sign up link */}
+              <div className="text-center">
+                <p className="text-sm text-default-600">
+                  Pas encore de compte ?{" "}
+                  <Link
+                    href={
+                      redirectUrl
+                        ? `/signup?redirect=${encodeURIComponent(redirectUrl)}`
+                        : "/signup"
+                    }
+                    className="font-semibold text-primary-600 hover:text-primary-700"
+                  >
+                    Créer un compte
+                  </Link>
+                </p>
+              </div>
+            </CardBody>
+          </Card>
+
+          {/* Footer */}
+          <p className="mt-8 text-center text-xs text-default-400">
+            En vous connectant, vous acceptez nos{" "}
+            <Link
+              href="/legal/terms"
+              className="underline hover:text-primary-500"
+            >
+              conditions d'utilisation
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SignInPage() {
+  return (
+    <Suspense fallback={<div>Chargement...</div>}>
+      <SignInForm />
+    </Suspense>
+  );
+}