@authdog/react-elements 0.0.38 → 0.0.40

package/src/components/core/user-profile.tsx

@@ -1,9 +1,13 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
-import { Button } from "../../components/ui/button"
-import { Badge } from "../../components/ui/badge"
+import { useEffect, useState } from "react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../components/ui/avatar";
+import { Button } from "../../components/ui/button";
+import { Badge } from "../../components/ui/badge";
 import {
   Card,
   CardHeader,
@@ -11,19 +15,26 @@ import {
   CardDescription,
   CardContent,
   CardFooter,
-} from "../../components/ui/card"
-import { Input } from "../../components/ui/input"
-import { Label } from "../../components/ui/label"
-import { User, Shield, SlidersHorizontal, LucideProps } from "lucide-react"
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { User, Shield, SlidersHorizontal, LucideProps } from "lucide-react";
 
 export interface UserProfileProps {
   loading: boolean;
   user: any;
   emails?: { address: string; isPrimary?: boolean }[];
   handleAuthenticated?: () => void;
-  onRequestEmailVerification?: (email: string) => Promise<{ success: boolean; message?: string } | void>;
-  onVerifyEmail?: (email: string, code: string) => Promise<{ success: boolean; message?: string } | void>;
-  onAddEmail?: (email: string) => Promise<{ success: boolean; message?: string } | void>;
+  onRequestEmailVerification?: (
+    email: string,
+  ) => Promise<{ success: boolean; message?: string } | void>;
+  onVerifyEmail?: (
+    email: string,
+    code: string,
+  ) => Promise<{ success: boolean; message?: string } | void>;
+  onAddEmail?: (
+    email: string,
+  ) => Promise<{ success: boolean; message?: string } | void>;
 }
 
 export const UserProfile = ({
@@ -34,12 +45,14 @@ export const UserProfile = ({
   onVerifyEmail,
   onAddEmail,
 }: UserProfileProps) => {
-  const [isMounted, setIsMounted] = useState(false)
-  const [activeTab, setActiveTab] = useState<"profile" | "security" | "preferences">("profile");
-  const [verifyingEmail, setVerifyingEmail] = useState<string | null>(null)
-  const [codeByEmail, setCodeByEmail] = useState<Record<string, string>>({})
-  const [addingEmail, setAddingEmail] = useState<boolean>(false)
-  const [newEmail, setNewEmail] = useState<string>("")
+  const [isMounted, setIsMounted] = useState(false);
+  const [activeTab, setActiveTab] = useState<
+    "profile" | "security" | "preferences"
+  >("profile");
+  const [verifyingEmail, setVerifyingEmail] = useState<string | null>(null);
+  const [codeByEmail, setCodeByEmail] = useState<Record<string, string>>({});
+  const [addingEmail, setAddingEmail] = useState<boolean>(false);
+  const [newEmail, setNewEmail] = useState<string>("");
 
   useEffect(() => {
     setIsMounted(true);
@@ -53,28 +66,30 @@ export const UserProfile = ({
 
   const iconProps: LucideProps = {
     className: "mr-2 h-4 w-4",
-    "aria-hidden": "true"
-  }
+    "aria-hidden": "true",
+  };
 
   const renderIcon = (Icon: any) => {
-    if (!isMounted) return null
-    return <Icon {...iconProps} />
-  }
+    if (!isMounted) return null;
+    return <Icon {...iconProps} />;
+  };
 
   if (!isMounted || loading) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 
   if (!user) {
-    return <div>No user</div>
+    return <div>No user</div>;
   }
-  
+
   return (
     <div className="grid grid-cols-[14rem,1fr] w-full bg-transparent">
       <div className="h-full border-r border-border p-3 md:p-4 bg-transparent flex flex-col min-w-0">
         <div className="mb-3 md:mb-4">
           <h1 className="text-xl font-bold text-foreground">Account</h1>
-          <p className="text-sm text-muted-foreground">Manage your account info.</p>
+          <p className="text-sm text-muted-foreground">
+            Manage your account info.
+          </p>
         </div>
 
         <nav className="space-y-1 flex-1">
@@ -89,6 +104,7 @@ export const UserProfile = ({
             {renderIcon(User)}
             Profile
           </button>
+
           {/* <button
             onClick={() => setActiveTab("security")}
             className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
@@ -120,8 +136,8 @@ export const UserProfile = ({
             {activeTab === "profile"
               ? "Profile details"
               : activeTab === "security"
-              ? "Security settings"
-              : "Preferences"}
+                ? "Security settings"
+                : "Preferences"}
           </h2>
           {/* <button className="text-gray-500 hover:text-gray-700">
             {renderIcon(X)}
@@ -132,14 +148,26 @@ export const UserProfile = ({
           <div className="space-y-5 md:space-y-6">
             {/* Profile Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3 text-foreground">Profile</h3>
+              <h3 className="text-sm font-medium mb-3 text-foreground">
+                Profile
+              </h3>
               <div className="flex items-center justify-between">
                 <div className="flex items-center">
                   <Avatar className="h-12 w-12 mr-4 border">
-                    <AvatarImage src={user.photos?.[0]?.value} alt="Profile picture" />
-                    <AvatarFallback>{user.displayName?.split(" ").map((n: string) => n[0]).join("")}</AvatarFallback>
+                    <AvatarImage
+                      src={user.photos?.[0]?.value}
+                      alt="Profile picture"
+                    />
+                    <AvatarFallback>
+                      {user.displayName
+                        ?.split(" ")
+                        .map((n: string) => n[0])
+                        .join("")}
+                    </AvatarFallback>
                   </Avatar>
-                  <span className="font-medium text-foreground">{user.displayName}</span>
+                  <span className="font-medium text-foreground">
+                    {user.displayName}
+                  </span>
                 </div>
                 {/* <Button variant="outline" size="sm">
                   Edit profile
@@ -149,9 +177,10 @@ export const UserProfile = ({
 
             {/* Email Addresses Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3 text-foreground">Email addresses</h3>
+              <h3 className="text-sm font-medium mb-3 text-foreground">
+                Email addresses
+              </h3>
               <div className="space-y-2.5">
-
                 {/* {JSON.stringify(user)} */}
 
                 {/* {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (
@@ -166,11 +195,16 @@ export const UserProfile = ({
                 ))} */}
 
                 {user.emails.map((email: any, idx: number) => {
-                  const v = (user?.verifications || []).find((ve: any) => ve.email === email.value)
-                  const isVerified = v?.verified === true
-                  const codeInput = codeByEmail[email.value] || ""
+                  const v = (user?.verifications || []).find(
+                    (ve: any) => ve.email === email.value,
+                  );
+                  const isVerified = v?.verified === true;
+                  const codeInput = codeByEmail[email.value] || "";
                   return (
-                    <div className="flex items-start justify-between gap-2" key={email.value}>
+                    <div
+                      className="flex items-start justify-between gap-2"
+                      key={email.value}
+                    >
                       <div className="flex flex-col">
                         <span className="text-foreground">{email.value}</span>
                         <div className="mt-1">
@@ -202,13 +236,18 @@ export const UserProfile = ({
                                   className="h-7 w-24 text-sm rounded-md border border-border bg-background px-2 text-foreground"
                                   placeholder="Code"
                                   value={codeInput}
-                                  onChange={(e) => setCodeByEmail((m) => ({ ...m, [email.value]: e.target.value }))}
+                                  onChange={(e) =>
+                                    setCodeByEmail((m) => ({
+                                      ...m,
+                                      [email.value]: e.target.value,
+                                    }))
+                                  }
                                 />
                                 <button
                                   className="h-7 rounded-md border border-border px-2 text-xs"
                                   onClick={async () => {
-                                    if (!onVerifyEmail) return
-                                    await onVerifyEmail(email.value, codeInput)
+                                    if (!onVerifyEmail) return;
+                                    await onVerifyEmail(email.value, codeInput);
                                   }}
                                 >
                                   Verify
@@ -225,8 +264,11 @@ export const UserProfile = ({
                                 <button
                                   className="h-7 rounded-md border border-border px-2 text-xs"
                                   onClick={async () => {
-                                    if (onRequestEmailVerification) await onRequestEmailVerification(email.value)
-                                    setVerifyingEmail(email.value)
+                                    if (onRequestEmailVerification)
+                                      await onRequestEmailVerification(
+                                        email.value,
+                                      );
+                                    setVerifyingEmail(email.value);
                                   }}
                                 >
                                   Send code
@@ -237,7 +279,7 @@ export const UserProfile = ({
                         )}
                       </div>
                     </div>
-                  )
+                  );
                 })}
                 <div className="mt-2">
                   {addingEmail ? (
@@ -246,7 +288,8 @@ export const UserProfile = ({
                         <CardHeader>
                           <CardTitle>Add email address</CardTitle>
                           <CardDescription>
-                            You'll need to verify this email address before it can be added to your account.
+                            You'll need to verify this email address before it
+                            can be added to your account.
                           </CardDescription>
                         </CardHeader>
                         <CardContent>
@@ -259,11 +302,13 @@ export const UserProfile = ({
                               onChange={(e) => setNewEmail(e.target.value)}
                               onKeyDown={async (e) => {
                                 if (e.key === "Enter") {
-                                  const v = String(newEmail || "").trim().toLowerCase()
-                                  if (!v) return
-                                  if (onAddEmail) await onAddEmail(v)
-                                  setAddingEmail(false)
-                                  setNewEmail("")
+                                  const v = String(newEmail || "")
+                                    .trim()
+                                    .toLowerCase();
+                                  if (!v) return;
+                                  if (onAddEmail) await onAddEmail(v);
+                                  setAddingEmail(false);
+                                  setNewEmail("");
                                 }
                               }}
                             />
@@ -273,19 +318,21 @@ export const UserProfile = ({
                           <Button
                             variant="ghost"
                             onClick={() => {
-                              setAddingEmail(false)
-                              setNewEmail("")
+                              setAddingEmail(false);
+                              setNewEmail("");
                             }}
                           >
                             Cancel
                           </Button>
                           <Button
                             onClick={async () => {
-                              const v = String(newEmail || "").trim().toLowerCase()
-                              if (!v) return
-                              if (onAddEmail) await onAddEmail(v)
-                              setAddingEmail(false)
-                              setNewEmail("")
+                              const v = String(newEmail || "")
+                                .trim()
+                                .toLowerCase();
+                              if (!v) return;
+                              if (onAddEmail) await onAddEmail(v);
+                              setAddingEmail(false);
+                              setNewEmail("");
                             }}
                           >
                             Add
@@ -294,7 +341,12 @@ export const UserProfile = ({
                       </Card>
                     </div>
                   ) : (
-                    <Button variant="outline" size="sm" className="text-xs" onClick={() => setAddingEmail(true)}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="text-xs"
+                      onClick={() => setAddingEmail(true)}
+                    >
                       Add email
                     </Button>
                   )}
@@ -321,16 +373,25 @@ export const UserProfile = ({
 
             {/* Connected Accounts Section */}
             <div>
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Connected accounts</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">
+                Connected accounts
+              </h3>
               <div className="space-y-2.5">
-                <div className="flex items-center justify-between" key={user.provider}>
-                    <div className="flex items-center">
-                      <div className="mr-2">
-                        <span className="text-gray-900 dark:text-gray-100">{user.provider}</span>
-                      </div>
+                <div
+                  className="flex items-center justify-between"
+                  key={user.provider}
+                >
+                  <div className="flex items-center">
+                    <div className="mr-2">
+                      <span className="text-gray-900 dark:text-gray-100">
+                        {user.provider}
+                      </span>
                     </div>
-                    <span className="text-sm text-gray-500 dark:text-gray-400">{user?.emails?.[0]?.value}</span>
                   </div>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">
+                    {user?.emails?.[0]?.value}
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -339,40 +400,62 @@ export const UserProfile = ({
             {/* Password row */}
             <div className="border rounded-md overflow-hidden">
               <div className="flex items-center justify-between px-4 py-3">
-                <div className="text-sm text-gray-700 dark:text-gray-300">Password</div>
-                <button className="text-sm text-indigo-600 hover:underline">Set password</button>
+                <div className="text-sm text-gray-700 dark:text-gray-300">
+                  Password
+                </div>
+                <button className="text-sm text-indigo-600 hover:underline">
+                  Set password
+                </button>
               </div>
             </div>
 
             {/* Passkeys row */}
             <div className="border rounded-md overflow-hidden">
               <div className="flex items-center justify-between px-4 py-3">
-                <div className="text-sm text-gray-700 dark:text-gray-300">Passkeys</div>
-                <button className="text-sm text-indigo-600 hover:underline">+&nbsp;Add a passkey</button>
+                <div className="text-sm text-gray-700 dark:text-gray-300">
+                  Passkeys
+                </div>
+                <button className="text-sm text-indigo-600 hover:underline">
+                  +&nbsp;Add a passkey
+                </button>
               </div>
             </div>
 
             {/* Two-step verification row */}
             <div className="border rounded-md overflow-hidden">
               <div className="flex items-center justify-between px-4 py-3">
-                <div className="text-sm text-gray-700 dark:text-gray-300">Two-step verification</div>
-                <button className="text-sm text-indigo-600 hover:underline">+&nbsp;Add two-step verification</button>
+                <div className="text-sm text-gray-700 dark:text-gray-300">
+                  Two-step verification
+                </div>
+                <button className="text-sm text-indigo-600 hover:underline">
+                  +&nbsp;Add two-step verification
+                </button>
               </div>
             </div>
 
             {/* Active devices list (scaffold) */}
             <div className="border rounded-md overflow-hidden">
-              <div className="px-4 py-3 border-b text-sm font-medium text-gray-900 dark:text-gray-100">Active devices</div>
+              <div className="px-4 py-3 border-b text-sm font-medium text-gray-900 dark:text-gray-100">
+                Active devices
+              </div>
               <div className="p-4 space-y-3">
                 <div className="text-sm">
                   <div className="flex items-center gap-2">
                     <span className="inline-block h-5 w-5 rounded-sm bg-gray-900 dark:bg-white" />
                     <span className="font-medium">X11</span>
-                    <span className="text-xs rounded-md border px-2 py-0.5 text-gray-600 dark:text-gray-300">This device</span>
+                    <span className="text-xs rounded-md border px-2 py-0.5 text-gray-600 dark:text-gray-300">
+                      This device
+                    </span>
+                  </div>
+                  <div className="text-gray-600 dark:text-gray-400 mt-1">
+                    Firefox 142.0
+                  </div>
+                  <div className="text-gray-600 dark:text-gray-400">
+                    127.0.0.1 (Local), (Your City)
+                  </div>
+                  <div className="text-gray-600 dark:text-gray-400">
+                    Today at 7:08 PM
                   </div>
-                  <div className="text-gray-600 dark:text-gray-400 mt-1">Firefox 142.0</div>
-                  <div className="text-gray-600 dark:text-gray-400">127.0.0.1 (Local), (Your City)</div>
-                  <div className="text-gray-600 dark:text-gray-400">Today at 7:08 PM</div>
                 </div>
               </div>
             </div>
@@ -380,8 +463,12 @@ export const UserProfile = ({
             {/* Delete account */}
             <div className="border rounded-md overflow-hidden">
               <div className="flex items-center justify-between px-4 py-3">
-                <div className="text-sm text-gray-700 dark:text-gray-300">Delete account</div>
-                <button className="text-sm text-red-600 hover:underline">Delete account</button>
+                <div className="text-sm text-gray-700 dark:text-gray-300">
+                  Delete account
+                </div>
+                <button className="text-sm text-red-600 hover:underline">
+                  Delete account
+                </button>
               </div>
             </div>
           </div>
@@ -389,15 +476,23 @@ export const UserProfile = ({
           <div className="space-y-5 md:space-y-6">
             {/* Preferences */}
             <div>
-              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">Preferences</h3>
+              <h3 className="text-sm font-medium mb-3 text-gray-900 dark:text-gray-100">
+                Preferences
+              </h3>
               <div className="space-y-3 text-sm">
                 <div className="flex items-center justify-between">
-                  <span className="text-gray-700 dark:text-gray-300">Locale</span>
+                  <span className="text-gray-700 dark:text-gray-300">
+                    Locale
+                  </span>
                   <span className="text-gray-500 dark:text-gray-400">Auto</span>
                 </div>
                 <div className="flex items-center justify-between">
-                  <span className="text-gray-700 dark:text-gray-300">Theme</span>
-                  <span className="text-gray-500 dark:text-gray-400">System</span>
+                  <span className="text-gray-700 dark:text-gray-300">
+                    Theme
+                  </span>
+                  <span className="text-gray-500 dark:text-gray-400">
+                    System
+                  </span>
                 </div>
               </div>
             </div>
@@ -422,5 +517,5 @@ export const UserProfile = ({
         </span>
       </div> */}
     </div>
-  )
-}
+  );
+};

package/src/components/flow/login.tsx

@@ -1,15 +1,22 @@
-"use client"
+"use client";
 
-import type React from "react"
+import type React from "react";
 
-import { useState } from "react"
-import { Button } from "../../components/ui/button"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card"
-import { Input } from "../../components/ui/input"
-import { Label } from "../../components/ui/label"
-import { Separator } from "../../components/ui/separator"
-import { Github, AlertCircle } from "lucide-react"
-import { Alert, AlertDescription } from "../../components/ui/alert"
+import { useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { Separator } from "../../components/ui/separator";
+import { Github, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "../../components/ui/alert";
 
 export const LoginForm = () => {
   const [email, setEmail] = useState("");
@@ -18,39 +25,42 @@ export const LoginForm = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleEmailLogin = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-    setError("")
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
 
     try {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     } catch (err) {
-      setError("Invalid email or password")
+      setError("Invalid email or password");
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   const handleOAuthLogin = async (provider: string) => {
-    setIsLoading(true)
-    setError("")
+    setIsLoading(true);
+    setError("");
 
     try {
-
-      await new Promise((resolve) => setTimeout(resolve, 1000))
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     } catch (err) {
-      setError(`Failed to login with ${provider}`)
+      setError(`Failed to login with ${provider}`);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
       <Card className="w-full max-w-md">
         <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl font-bold text-center">Login</CardTitle>
-          <CardDescription className="text-center">Choose your preferred login method</CardDescription>
+          <CardTitle className="text-2xl font-bold text-center">
+            Login
+          </CardTitle>
+          <CardDescription className="text-center">
+            Choose your preferred login method
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           {error && (
@@ -122,7 +132,10 @@ export const LoginForm = () => {
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="password">Password</Label>
-                <a href="/forgot-password" className="text-xs text-primary hover:underline">
+                <a
+                  href="/forgot-password"
+                  className="text-xs text-primary hover:underline"
+                >
                   Forgot password?
                 </a>
               </div>
@@ -150,5 +163,5 @@ export const LoginForm = () => {
         </CardFooter>
       </Card>
     </div>
-  )
-}
+  );
+};