@proveanything/smartlinks-auth-ui
Version:
Lightweight React authentication UI components with bearer token support and Smartlinks SDK integration
38 lines (37 loc) • 4.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState } from 'react';
import './AuthForm.css';
export const PasswordResetForm = ({ onSubmit, onBack, loading, error, success, token, }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [passwordError, setPasswordError] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
if (token) {
// Reset password with token
if (password !== confirmPassword) {
setPasswordError('Passwords do not match');
return;
}
if (password.length < 6) {
setPasswordError('Password must be at least 6 characters');
return;
}
setPasswordError('');
await onSubmit(password, confirmPassword);
}
else {
// Request password reset
await onSubmit(email);
}
};
if (success) {
return (_jsxs("div", { className: "auth-form", children: [_jsxs("div", { className: "auth-form-header", children: [_jsx("div", { style: { textAlign: 'center', marginBottom: '1rem' }, children: _jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", style: { margin: '0 auto' }, children: [_jsx("circle", { cx: "32", cy: "32", r: "32", fill: "#10b981", fillOpacity: "0.1" }), _jsx("path", { d: "M20 32l8 8 16-16", stroke: "#10b981", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), _jsx("h2", { className: "auth-form-title", children: token ? 'Password reset!' : 'Check your email' }), _jsx("p", { className: "auth-form-subtitle", children: token
? 'Your password has been successfully reset. You can now sign in with your new password.'
: `We've sent password reset instructions to ${email}` })] }), _jsx("button", { type: "button", className: "auth-button auth-button-primary", onClick: onBack, children: "Back to Sign in" })] }));
}
return (_jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [_jsxs("div", { className: "auth-form-header", children: [_jsx("h2", { className: "auth-form-title", children: token ? 'Set new password' : 'Reset your password' }), _jsx("p", { className: "auth-form-subtitle", children: token
? 'Enter your new password below.'
: "Enter your email address and we'll send you instructions to reset your password." })] }), (error || passwordError) && (_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 || passwordError] })), token ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "password", className: "auth-label", children: "New Password" }), _jsx("input", { type: "password", id: "password", className: "auth-input", value: password, onChange: (e) => setPassword(e.target.value), required: true, disabled: loading, placeholder: "Enter new password", autoComplete: "new-password", minLength: 6 })] }), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "confirmPassword", className: "auth-label", children: "Confirm Password" }), _jsx("input", { type: "password", id: "confirmPassword", className: "auth-input", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, disabled: loading, placeholder: "Confirm new password", autoComplete: "new-password", minLength: 6 })] })] })) : (_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: email, onChange: (e) => setEmail(e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] })), _jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (_jsx("span", { className: "auth-spinner" })) : token ? ('Reset password') : ('Send reset instructions') }), _jsx("div", { className: "auth-divider", children: _jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onBack, disabled: loading, children: "\u2190 Back to Sign in" }) })] }));
};