@authdog/react-elements 0.0.50 → 0.2.0

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

@@ -1,521 +0,0 @@
-"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 {
-  Card,
-  CardHeader,
-  CardTitle,
-  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";
-
-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>;
-}
-
-export const UserProfile = ({
-  loading,
-  user,
-  handleAuthenticated,
-  onRequestEmailVerification,
-  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>("");
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (!loading && handleAuthenticated) {
-      handleAuthenticated();
-    }
-  }, [loading, user, handleAuthenticated]);
-
-  const iconProps: LucideProps = {
-    className: "mr-2 h-4 w-4",
-    "aria-hidden": "true",
-  };
-
-  const renderIcon = (Icon: any) => {
-    if (!isMounted) return null;
-    return <Icon {...iconProps} />;
-  };
-
-  if (!isMounted || loading) {
-    return <div>Loading...</div>;
-  }
-
-  if (!user) {
-    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>
-        </div>
-
-        <nav className="space-y-1 flex-1">
-          <button
-            onClick={() => setActiveTab("profile")}
-            className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
-              activeTab === "profile"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
-          >
-            {renderIcon(User)}
-            Profile
-          </button>
-
-          {/* <button
-            onClick={() => setActiveTab("security")}
-            className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
-              activeTab === "security"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
-          >
-            {renderIcon(Shield)}
-            Security
-          </button>
-          <button
-            onClick={() => setActiveTab("preferences")}
-            className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
-              activeTab === "preferences"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
-          >
-            {renderIcon(SlidersHorizontal)}
-            Preferences
-          </button> */}
-        </nav>
-      </div>
-
-      <div className="h-full p-3 md:p-5 min-w-0 bg-transparent">
-        <div className="flex justify-between items-center mb-3 md:mb-4">
-          <h2 className="text-xl font-semibold text-foreground">
-            {activeTab === "profile"
-              ? "Profile details"
-              : activeTab === "security"
-                ? "Security settings"
-                : "Preferences"}
-          </h2>
-          {/* <button className="text-gray-500 hover:text-gray-700">
-            {renderIcon(X)}
-          </button> */}
-        </div>
-
-        {activeTab === "profile" ? (
-          <div className="space-y-5 md:space-y-6">
-            {/* Profile Section */}
-            <div>
-              <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>
-                  </Avatar>
-                  <span className="font-medium text-foreground">
-                    {user.displayName}
-                  </span>
-                </div>
-                {/* <Button variant="outline" size="sm">
-                  Edit profile
-                </Button> */}
-              </div>
-            </div>
-
-            {/* Email Addresses Section */}
-            <div>
-              <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) => (
-                  <div className="flex items-center justify-between" key={email.address}>
-                    <span>{email.address}</span>
-                    {email.isPrimary && (
-                      <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
-                        Primary
-                      </Badge>
-                    )}
-                  </div>
-                ))} */}
-
-                {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] || "";
-                  return (
-                    <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">
-                          {isVerified ? (
-                            <Badge className="text-xs rounded-full px-2.5 py-0.5 bg-green-100 text-green-800 border border-green-300 dark:bg-green-500/20 dark:text-green-200 dark:border-green-400/40">
-                              Verified
-                            </Badge>
-                          ) : (
-                            <Badge className="text-xs rounded-full px-2.5 py-0.5 bg-amber-100 text-amber-800 border border-amber-300 dark:bg-amber-500/20 dark:text-amber-200 dark:border-amber-400/40">
-                              Not verified
-                            </Badge>
-                          )}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {idx === 0 && (
-                          <Badge
-                            variant="outline"
-                            className="text-xs bg-muted text-foreground hover:bg-muted"
-                          >
-                            Primary
-                          </Badge>
-                        )}
-                        {!isVerified && (
-                          <>
-                            {verifyingEmail === email.value ? (
-                              <div className="flex items-center gap-1">
-                                <input
-                                  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,
-                                    }))
-                                  }
-                                />
-                                <button
-                                  className="h-7 rounded-md border border-border px-2 text-xs"
-                                  onClick={async () => {
-                                    if (!onVerifyEmail) return;
-                                    await onVerifyEmail(email.value, codeInput);
-                                  }}
-                                >
-                                  Verify
-                                </button>
-                                <button
-                                  className="h-7 rounded-md border border-border px-2 text-xs"
-                                  onClick={() => setVerifyingEmail(null)}
-                                >
-                                  Cancel
-                                </button>
-                              </div>
-                            ) : (
-                              <>
-                                <button
-                                  className="h-7 rounded-md border border-border px-2 text-xs"
-                                  onClick={async () => {
-                                    if (onRequestEmailVerification)
-                                      await onRequestEmailVerification(
-                                        email.value,
-                                      );
-                                    setVerifyingEmail(email.value);
-                                  }}
-                                >
-                                  Send code
-                                </button>
-                              </>
-                            )}
-                          </>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-                <div className="mt-2">
-                  {addingEmail ? (
-                    <div className="max-w-md">
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>Add email address</CardTitle>
-                          <CardDescription>
-                            You'll need to verify this email address before it
-                            can be added to your account.
-                          </CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="space-y-2">
-                            <Label htmlFor="new-email">Email address</Label>
-                            <Input
-                              id="new-email"
-                              placeholder="Enter your email address"
-                              value={newEmail}
-                              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("");
-                                }
-                              }}
-                            />
-                          </div>
-                        </CardContent>
-                        <CardFooter className="justify-end gap-2">
-                          <Button
-                            variant="ghost"
-                            onClick={() => {
-                              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("");
-                            }}
-                          >
-                            Add
-                          </Button>
-                        </CardFooter>
-                      </Card>
-                    </div>
-                  ) : (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="text-xs"
-                      onClick={() => setAddingEmail(true)}
-                    >
-                      Add email
-                    </Button>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Phone Number Section */}
-            {/* <div>
-              <h3 className="text-sm font-medium mb-3">Phone number</h3>
-              <div className="space-y-2.5">
-                <div className="flex items-center justify-between">
-                  <span>+1 (555) 123-4567</span>
-                  <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
-                    Primary
-                  </Badge>
-                </div>
-                <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
-                  {renderIcon(PlusCircle)}
-                  Add phone number
-                </Button>
-              </div>
-            </div> */}
-
-            {/* Connected Accounts Section */}
-            <div>
-              <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>
-                  <span className="text-sm text-gray-500 dark:text-gray-400">
-                    {user?.emails?.[0]?.value}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : activeTab === "security" ? (
-          <div className="space-y-5 md:space-y-6">
-            {/* 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>
-            </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>
-            </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>
-            </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="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>
-                  </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>
-
-            {/* 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>
-            </div>
-          </div>
-        ) : (
-          <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>
-              <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-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>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* <div className="absolute bottom-4 text-xs text-gray-500 flex items-center">
-        Secured by
-        <span className="ml-1 font-medium flex items-center">
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="mr-1"
-          >
-            <path d="M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z" fill="#6C47FF" />
-          </svg>
-          Authdog
-        </span>
-      </div> */}
-    </div>
-  );
-};

package/src/components/flow/login.tsx

@@ -1,167 +0,0 @@
-"use client";
-
-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";
-
-export const LoginForm = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleEmailLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError("");
-
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    } catch (err) {
-      setError("Invalid email or password");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleOAuthLogin = async (provider: string) => {
-    setIsLoading(true);
-    setError("");
-
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    } catch (err) {
-      setError(`Failed to login with ${provider}`);
-    } finally {
-      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>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {error && (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          <div className="space-y-2">
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={() => handleOAuthLogin("google")}
-              disabled={isLoading}
-            >
-              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
-                <path
-                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                  fill="#4285F4"
-                />
-                <path
-                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                  fill="#34A853"
-                />
-                <path
-                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                  fill="#FBBC05"
-                />
-                <path
-                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                  fill="#EA4335"
-                />
-                <path d="M1 1h22v22H1z" fill="none" />
-              </svg>
-              Continue with Google
-            </Button>
-
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={() => handleOAuthLogin("github")}
-              disabled={isLoading}
-            >
-              <Github className="mr-2 h-4 w-4" />
-              Continue with GitHub
-            </Button>
-          </div>
-
-          <div className="flex items-center">
-            <Separator className="flex-1" />
-            <span className="mx-2 text-xs text-muted-foreground">OR</span>
-            <Separator className="flex-1" />
-          </div>
-
-          <form onSubmit={handleEmailLogin} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="m@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                disabled={isLoading}
-              />
-            </div>
-            <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"
-                >
-                  Forgot password?
-                </a>
-              </div>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                disabled={isLoading}
-              />
-            </div>
-            <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Loading..." : "Sign in with Email"}
-            </Button>
-          </form>
-        </CardContent>
-        <CardFooter className="flex justify-center">
-          <p className="text-xs text-muted-foreground">
-            Don't have an account?{" "}
-            <a href="/signup" className="text-primary hover:underline">
-              Sign up
-            </a>
-          </p>
-        </CardFooter>
-      </Card>
-    </div>
-  );
-};