@proveanything/smartlinks-auth-ui/dist/components/EmailAuthForm.js

Lightweight React authentication UI components with bearer token support and Smartlinks SDK integration

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import './AuthForm.css';
export const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, }) => {
    const [formData, setFormData] = useState({
        email: '',
        password: '',
        displayName: '',
    });
    const handleSubmit = async (e) => {
        e.preventDefault();
        await onSubmit(formData);
    };
    const handleChange = (field, value) => {
        setFormData(prev => ({ ...prev, [field]: value }));
    };
    return (_jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [_jsxs("div", { className: "auth-form-header", children: [_jsx("h2", { className: "auth-form-title", children: mode === 'login' ? 'Sign in' : 'Create account' }), _jsx("p", { className: "auth-form-subtitle", children: mode === 'login'
                            ? 'Welcome back! Please enter your credentials.'
                            : 'Get started by creating your account.' })] }), error && (_jsxs("div", { className: "auth-error", role: "alert", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), mode === 'register' && (_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), _jsx("input", { type: "text", id: "displayName", className: "auth-input", value: formData.displayName || '', onChange: (e) => handleChange('displayName', e.target.value), required: mode === 'register', disabled: loading, placeholder: "John Doe" })] })), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), _jsx("input", { type: "email", id: "email", className: "auth-input", value: formData.email || '', onChange: (e) => handleChange('email', e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] }), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), _jsx("input", { type: "password", id: "password", className: "auth-input", value: formData.password || '', onChange: (e) => handleChange('password', e.target.value), required: true, disabled: loading, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === 'login' ? 'current-password' : 'new-password', minLength: 6 })] }), mode === 'login' && (_jsx("div", { className: "auth-form-footer", children: _jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), _jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (_jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), _jsxs("div", { className: "auth-divider", children: [_jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), _jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onModeSwitch, disabled: loading, children: mode === 'login' ? 'Sign up' : 'Sign in' })] })] }));
};