@proveanything/smartlinks-auth-ui
Version:
Lightweight React authentication UI components with bearer token support and Smartlinks SDK integration
11 lines (10 loc) • 3.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { AuthContainer } from './AuthContainer';
export const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], theme = 'light', className, }) => {
const showEmail = enabledProviders.includes('email');
const showGoogle = enabledProviders.includes('google');
const showPhone = enabledProviders.includes('phone');
const hasProviders = showGoogle || showPhone;
return (_jsxs(AuthContainer, { theme: theme, className: className, config: customization, children: [showEmail && (_jsxs("div", { className: "auth-form", children: [_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { className: "auth-label", children: "Email" }), _jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { className: "auth-label", children: "Password" }), _jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), _jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), _jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: _jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), _jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', _jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasProviders && (_jsxs(_Fragment, { children: [showEmail && (_jsx("div", { className: "auth-or-divider", children: _jsx("span", { children: "or continue with" }) })), _jsxs("div", { className: "auth-provider-buttons", children: [showGoogle && (_jsxs("button", { className: "auth-provider-button", disabled: true, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [_jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), _jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), _jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), _jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), _jsx("span", { children: "Google" })] })), showPhone && (_jsxs("button", { className: "auth-provider-button", disabled: true, children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), _jsx("span", { children: "Phone" })] }))] })] }))] }));
};