xlibs-components/dist/components/login-form.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Eye, EyeOff, Mail, Lock, ArrowRight } from "lucide-react";
import { Button } from '../components/ui/button.js';
import { ShinyButton } from '../components/magicui/shiny-button.js';
import { Input } from '../components/ui/input.js';
import { Label } from '../components/ui/label.js';
import { Checkbox } from '../components/ui/checkbox.js';
import { Separator } from '../components/ui/separator.js';
export function LoginForm({ onSubmit, isLoading: externalLoading, error: externalError, demoCredentials }) {
    const [showPassword, setShowPassword] = React.useState(false);
    const [internalLoading, setInternalLoading] = React.useState(false);
    const [email, setEmail] = React.useState("");
    const [password, setPassword] = React.useState("");
    const [internalError, setInternalError] = React.useState("");
    const isLoading = externalLoading !== undefined ? externalLoading : internalLoading;
    const error = externalError !== undefined ? externalError : internalError;
    const handleSubmit = async (e) => {
        e.preventDefault();
        if (onSubmit) {
            // Use external handler
            onSubmit({ email, password });
        }
        else {
            // Use internal handler
            setInternalLoading(true);
            setInternalError("");
            // Simulate API call
            await new Promise(resolve => setTimeout(resolve, 1000));
            setInternalLoading(false);
        }
    };
    return (_jsx("div", { className: "w-full", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsxs("div", { className: "relative", children: [_jsx(Mail, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }), _jsx(Input, { id: "email", type: "email", placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), className: "pl-10", required: true })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsxs("div", { className: "relative", children: [_jsx(Lock, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }), _jsx(Input, { id: "password", type: showPassword ? "text" : "password", placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), className: "pl-10 pr-10", required: true }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent", onClick: () => setShowPassword(!showPassword), children: showPassword ? (_jsx(EyeOff, { className: "h-4 w-4" })) : (_jsx(Eye, { className: "h-4 w-4" })) })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "remember" }), _jsx(Label, { htmlFor: "remember", className: "text-sm font-normal", children: "Remember me" })] }), _jsx(Button, { variant: "link", className: "px-0 font-normal", children: "Forgot password?" })] }), error && (_jsx("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg", children: _jsx("p", { className: "text-sm text-red-600", children: error }) })), _jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { children: "Signing in..." })] })) : (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { children: "Sign in" }), _jsx(ArrowRight, { className: "h-4 w-4" })] })) }), demoCredentials && (_jsxs("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "text-xs font-medium text-blue-900 mb-1", children: "Demo Credentials:" }), _jsxs("div", { className: "text-xs text-blue-700", children: [_jsxs("p", { children: [_jsx("strong", { children: "Email:" }), " ", demoCredentials.email] }), _jsxs("p", { children: [_jsx("strong", { children: "Password:" }), " ", demoCredentials.password] })] })] }))] }), _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx(Separator, {}) }), _jsx("div", { className: "relative flex justify-center text-xs uppercase", children: _jsx("span", { className: "bg-background px-2 text-muted-foreground", children: "Or continue with" }) })] }), _jsx("div", { className: "mt-3", children: _jsxs(ShinyButton, { variant: "primary", size: "md", className: "w-full", children: [_jsx("svg", { className: "mr-2 h-4 w-4", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }), "SSO"] }) })] })] }) }));
}