@proveanything/smartlinks-auth-ui
Version:
Lightweight React authentication UI components with bearer token support and Smartlinks SDK integration
47 lines (46 loc) • 3.75 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect } from 'react';
import './AuthContainer.css';
export const AuthContainer = ({ children, theme = 'light', className = '', config, }) => {
// Apply CSS variables for customization
useEffect(() => {
if (!config?.branding)
return;
const root = document.documentElement;
const { branding } = config;
if (branding.primaryColor) {
root.style.setProperty('--auth-primary-color', branding.primaryColor);
}
if (branding.secondaryColor) {
root.style.setProperty('--auth-secondary-color', branding.secondaryColor);
}
if (branding.backgroundColor) {
root.style.setProperty('--auth-bg-color', branding.backgroundColor);
}
if (branding.fontFamily) {
root.style.setProperty('--auth-font-family', branding.fontFamily);
}
// Inject custom CSS if provided
if (branding.customCss) {
const styleId = 'auth-custom-styles';
let styleEl = document.getElementById(styleId);
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
document.head.appendChild(styleEl);
}
styleEl.textContent = branding.customCss;
}
return () => {
// Cleanup on unmount
root.style.removeProperty('--auth-primary-color');
root.style.removeProperty('--auth-secondary-color');
root.style.removeProperty('--auth-bg-color');
root.style.removeProperty('--auth-font-family');
};
}, [config]);
const title = config?.branding?.title || 'Smartlinks Auth';
const subtitle = config?.branding?.subtitle || 'Sign in to your account';
const logoUrl = config?.branding?.logoUrl;
return (_jsx("div", { className: `auth-container auth-theme-${theme} ${className}`, children: _jsxs("div", { className: "auth-card", style: { borderRadius: config?.branding?.buttonStyle === 'square' ? '4px' : '12px' }, children: [_jsxs("div", { className: "auth-header", children: [_jsx("div", { className: "auth-logo", children: logoUrl ? (_jsx("img", { src: logoUrl, alt: "Logo", style: { width: 40, height: 40, objectFit: 'contain' } })) : (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "40", height: "40", rx: "8", fill: "url(#gradient)" }), _jsx("path", { d: "M20 10L12 18L20 26L28 18L20 10Z", fill: "white", fillOpacity: "0.9" }), _jsx("path", { d: "M20 18L16 22L20 26L24 22L20 18Z", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "40", y2: "40", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "var(--auth-primary-color, #3B82F6)" }), _jsx("stop", { offset: "1", stopColor: "var(--auth-secondary-color, #1D4ED8)" })] }) })] })) }), _jsx("h1", { className: "auth-title", children: title }), subtitle && _jsx("p", { className: "auth-subtitle", children: subtitle })] }), _jsx("div", { className: "auth-content", children: children }), (config?.branding?.termsUrl || config?.branding?.privacyUrl) && (_jsxs("div", { className: "auth-footer", children: [config.branding.termsUrl && _jsx("a", { href: config.branding.termsUrl, target: "_blank", rel: "noopener noreferrer", children: "Terms" }), config.branding.termsUrl && config.branding.privacyUrl && _jsx("span", { children: "\u2022" }), config.branding.privacyUrl && _jsx("a", { href: config.branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", children: "Privacy" })] }))] }) }));
};