@envkit/nextjs
Version:
Environment variable management for Next.js applications
435 lines (416 loc) • 43.9 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultFallbackUI = DefaultFallbackUI;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const api_1 = require("../api");
function DefaultFallbackUI({ missingVars, onSubmit, logoUrl, title = 'Welcome to the team', description = 'The following environment variables are required for this application to function properly.', isLoading, maskAllEnvs = false, disableAddNew = false }) {
const [envVars, setEnvVars] = (0, react_1.useState)(missingVars.map(v => ({ ...v, value: '', masked: maskAllEnvs || v.secret })));
const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
const [error, setError] = (0, react_1.useState)(null);
const [success, setSuccess] = (0, react_1.useState)(null);
const [pasteStatus, setPasteStatus] = (0, react_1.useState)(null);
const formRef = (0, react_1.useRef)(null);
// Parse env var content from pasted text
const parseEnvVarContent = (content) => {
const result = [];
content.split('\n').forEach(line => {
// Skip comments and empty lines
if (line.trim().startsWith('#') || !line.trim()) {
return;
}
// Split by first equals sign
const equalSignIndex = line.indexOf('=');
if (equalSignIndex > 0) {
const key = line.substring(0, equalSignIndex).trim();
let value = line.substring(equalSignIndex + 1).trim();
// Remove quotes if present
if ((value.startsWith('"') && value.endsWith('"')) ||
(value.startsWith("'") && value.endsWith("'"))) {
value = value.substring(1, value.length - 1);
}
result.push({ key, value });
}
});
return result;
};
(0, react_1.useEffect)(() => {
const handleGlobalPaste = (e) => {
var _a;
// Get the clipboard data
const pastedData = ((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
if (!pastedData.trim())
return;
// Try to parse the pasted content as key=value pairs
const newEnvVars = parseEnvVarContent(pastedData);
if (newEnvVars.length > 0) {
// If we successfully parsed env vars, update the state
setEnvVars(prev => {
// Create a map of existing keys for quick lookup
const existingKeys = new Map(prev.map(env => [env.key, env]));
// Process new env vars
newEnvVars.forEach(newVar => {
// If this key already exists, update its value
if (existingKeys.has(newVar.key)) {
const existingVar = existingKeys.get(newVar.key);
if (existingVar) {
existingVar.value = newVar.value;
}
}
else {
// Otherwise add it to the map
existingKeys.set(newVar.key, newVar);
}
});
// Convert back to array
return Array.from(existingKeys.values());
});
setPasteStatus(`Successfully parsed ${newEnvVars.length} environment variables.`);
setTimeout(() => setPasteStatus(''), 3000);
}
};
// Add the global paste event listener
document.addEventListener('paste', handleGlobalPaste);
// Clean up the event listener when the component unmounts
return () => {
document.removeEventListener('paste', handleGlobalPaste);
};
}, [parseEnvVarContent]); // Add parseEnvVarContent to dependencies
const handleInputChange = (index, value) => {
const updatedVars = [...envVars];
updatedVars[index].value = value;
setEnvVars(updatedVars);
};
const handleInputPaste = (e, index) => {
// This now handles individual input field pastes, but the global handler will also fire
const pastedContent = e.clipboardData.getData('text');
// If the pasted content looks like key=value pairs (contains = or line breaks)
// let the global paste handler deal with it
if (pastedContent.includes('=') || pastedContent.includes('\n')) {
// Don't prevent default as the global handler will process this
return;
}
// Otherwise, just update this specific field's value (normal paste behavior)
const updatedEnvVars = [...envVars];
updatedEnvVars[index] = { ...updatedEnvVars[index], value: pastedContent };
setEnvVars(updatedEnvVars);
};
const handleFileUpload = async (e) => {
var _a;
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
if (!file)
return;
try {
const content = await readFileContent(file);
if (file.name.endsWith('.env')) {
// Parse .env file
const parsedVars = parseEnvFile(content);
updateEnvVarsFromParsed(parsedVars);
}
else if (file.name.endsWith('.json')) {
// Parse JSON file
try {
const parsedJson = JSON.parse(content);
updateEnvVarsFromParsed(parsedJson);
}
catch (err) {
setError('Invalid JSON file format');
}
}
else {
setError('Unsupported file format. Please upload a .env or .json file');
}
}
catch (err) {
setError('Failed to read the uploaded file');
console.error(err);
}
};
const updateEnvVarsFromParsed = (parsedVars, index) => {
// Update only the variables that are in our list
const updatedVars = [...envVars];
const existingKeys = new Set(updatedVars.map(v => v.key));
// Update existing variables
updatedVars.forEach((envVar, envVarIndex) => {
if (parsedVars[envVar.key]) {
updatedVars[envVarIndex].value = parsedVars[envVar.key];
}
});
// Add new variables that don't exist in our list
Object.entries(parsedVars).forEach(([key, value]) => {
if (!existingKeys.has(key)) {
if (index !== undefined) {
updatedVars.splice(index, 0, {
key,
label: key,
value,
secret: false,
description: `Added from paste operation`
});
}
else {
updatedVars.push({
key,
label: key,
value,
secret: false,
description: `Added from paste operation`
});
}
}
});
setEnvVars(updatedVars);
};
const parseEnvFile = (content) => {
const result = {};
content.split('\n').forEach(line => {
// Skip comments and empty lines
if (line.trim().startsWith('#') || !line.trim()) {
return;
}
// Split by first equals sign
const equalSignIndex = line.indexOf('=');
if (equalSignIndex > 0) {
const key = line.substring(0, equalSignIndex).trim();
let value = line.substring(equalSignIndex + 1).trim();
// Remove quotes if present
if ((value.startsWith('"') && value.endsWith('"')) ||
(value.startsWith("'") && value.endsWith("'"))) {
value = value.substring(1, value.length - 1);
}
result[key] = value;
}
});
return result;
};
const parseEnvVars = (content) => {
const result = {};
content.split('\n').forEach(line => {
// Skip comments and empty lines
if (line.trim().startsWith('#') || !line.trim()) {
return;
}
// Split by first equals sign
const equalSignIndex = line.indexOf('=');
if (equalSignIndex > 0) {
const key = line.substring(0, equalSignIndex).trim();
let value = line.substring(equalSignIndex + 1).trim();
// Remove quotes if present
if ((value.startsWith('"') && value.endsWith('"')) ||
(value.startsWith("'") && value.endsWith("'"))) {
value = value.substring(1, value.length - 1);
}
result[key] = value;
}
});
return result;
};
const readFileContent = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => { var _a; return resolve((_a = e.target) === null || _a === void 0 ? void 0 : _a.result); };
reader.onerror = (e) => reject(e);
reader.readAsText(file);
});
};
const addNewEnvVar = () => {
setEnvVars([
...envVars,
{
key: '',
value: '',
secret: false,
}
]);
};
const handleKeyChange = (index, newKey) => {
const updatedEnvVars = [...envVars];
updatedEnvVars[index] = {
...updatedEnvVars[index],
key: newKey
};
setEnvVars(updatedEnvVars);
};
const deleteEnvVar = (index) => {
// Check if it's a required field
const envVar = envVars[index];
if (missingVars.find(v => v.key === envVar.key)) {
// Don't allow deletion of required fields
return;
}
const updatedEnvVars = [...envVars];
updatedEnvVars.splice(index, 1);
setEnvVars(updatedEnvVars);
};
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
setSuccess(null);
try {
// Convert to key-value pairs for API
const variables = {};
envVars.forEach(v => {
variables[v.key] = v.value;
});
// Make API call to update variables
const result = await api_1.envKitApi.updateVariables(variables);
if (result.success) {
setSuccess('Environment variables updated successfully!');
setTimeout(() => {
if (onSubmit) {
onSubmit();
}
}, 1500);
}
else {
setError(result.error || 'Failed to update environment variables');
}
}
catch (err) {
setError(err instanceof Error ? err.message : 'An unknown error occurred');
}
finally {
setIsSubmitting(false);
}
};
// Function to toggle masking for a specific environment variable
const toggleMasking = (index) => {
setEnvVars(prev => {
const updated = [...prev];
updated[index] = {
...updated[index],
masked: !updated[index].masked
};
return updated;
});
};
// If still loading, show a spinner
if (isLoading) {
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-screen antialiased flex-col items-center justify-center p-24 bg-black font-normal tracking-[0.6px]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2 text-white", children: [(0, jsx_runtime_1.jsx)("div", { className: 'w-5 h-5 flex items-center justify-center', children: logoUrl ? ((0, jsx_runtime_1.jsx)("img", { src: logoUrl, alt: "Logo", className: "h-5 w-auto" })) : ((0, jsx_runtime_1.jsx)("svg", { className: "text-white w-full h-full", viewBox: "0 0 370 370", fill: "#ffffff", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M78.625 37C67.5854 37 56.9979 41.3855 49.1917 49.1917C41.3855 56.9979 37 67.5854 37 78.625V291.375C37 302.415 41.3855 313.002 49.1917 320.808C56.9979 328.615 67.5854 333 78.625 333H291.375C302.415 333 313.002 328.615 320.808 320.808C328.615 313.002 333 302.415 333 291.375V78.625C333 67.5854 328.615 56.9979 320.808 49.1917C313.002 41.3855 302.415 37 291.375 37H78.625ZM153.18 153.18C155.631 150.55 156.965 147.071 156.902 143.476C156.838 139.882 155.382 136.452 152.84 133.91C150.298 131.368 146.868 129.912 143.274 129.848C139.679 129.785 136.2 131.119 133.57 133.57L91.945 175.195C89.3467 177.797 87.8872 181.323 87.8872 185C87.8872 188.677 89.3467 192.203 91.945 194.805L133.57 236.43C136.2 238.881 139.679 240.215 143.274 240.152C146.868 240.088 150.298 238.632 152.84 236.09C155.382 233.548 156.838 230.118 156.902 226.524C156.965 222.929 155.631 219.45 153.18 216.82L121.36 185L153.18 153.18ZM236.43 133.57C235.16 132.207 233.628 131.113 231.926 130.355C230.224 129.597 228.387 129.189 226.524 129.156C224.661 129.123 222.81 129.466 221.082 130.164C219.355 130.862 217.785 131.9 216.468 133.218C215.15 134.535 214.112 136.105 213.414 137.832C212.716 139.56 212.373 141.411 212.406 143.274C212.439 145.137 212.847 146.974 213.605 148.676C214.363 150.378 215.457 151.91 216.82 153.18L248.64 185L216.82 216.82C215.457 218.09 214.363 219.622 213.605 221.324C212.847 223.026 212.439 224.863 212.406 226.726C212.373 228.589 212.716 230.44 213.414 232.168C214.112 233.895 215.15 235.465 216.468 236.782C217.785 238.1 219.355 239.138 221.082 239.836C222.81 240.534 224.661 240.877 226.524 240.844C228.387 240.811 230.224 240.403 231.926 239.645C233.628 238.887 235.16 237.793 236.43 236.43L278.055 194.805C280.653 192.203 282.113 188.677 282.113 185C282.113 181.323 280.653 177.797 278.055 175.195L236.43 133.57Z", fill: "#ffffff" }) })) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl font-semibold", children: "EnvKit" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[#888F96] text-xs", children: "The world's first Env box." })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 border-t-4 border-blue-300 border-solid rounded-full animate-spin" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-4 text-sm text-white", children: "Loading environment configuration..." })] }));
}
if (missingVars.length === 0) {
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-green-500/10 border border-green-500/15 text-green-500 px-4 py-3 rounded mb-4", children: [(0, jsx_runtime_1.jsx)("p", { children: "All required environment variables are set! You can now proceed." }), (0, jsx_runtime_1.jsx)("button", { onClick: onSubmit, className: "mt-4 w-full md:flex-1 flex justify-center min-w-fit rounded-md cursor-pointer border border-transparent bg-white px-8 py-2 text-sm font-medium leading-6 text-black hover:bg-gray-400 transition-colors", children: "Continue to application" })] }));
}
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-screen antialiased flex-col items-center justify-center p-6 md:p-24 bg-black overflow-hidden relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed top-12 right-12 pointer-events-none", children: (0, jsx_runtime_1.jsxs)("div", { className: "moon relative w-16 h-16 rounded-full bg-gradient-to-b from-[#ffffff] via-[#f4f4f4] to-[#e8e8e8]", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-3 left-3 w-2.5 h-2.5 rounded-full bg-[#00000015]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-6 right-4 w-3 h-3 rounded-full bg-[#00000010]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-4 left-5 w-2 h-2 rounded-full bg-[#00000015]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-7 w-1.5 h-1.5 rounded-full bg-[#00000008]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-8 right-7 w-2 h-2 rounded-full bg-[#00000010]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-6 right-3 w-1 h-1 rounded-full bg-[#00000012]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-7 left-8 w-1.5 h-1.5 rounded-full bg-[#00000008]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-9 left-9 w-2 h-2 rounded-full bg-[#00000010]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-full opacity-20 mix-blend-overlay", style: {
background: `radial-gradient(circle at 30% 30%, transparent 0%, rgba(0,0,0,0.2) 100%),
radial-gradient(circle at 70% 70%, transparent 0%, rgba(0,0,0,0.2) 100%)`
} }), (0, jsx_runtime_1.jsx)("div", { className: "absolute -inset-4 rounded-full opacity-30", style: {
background: 'radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 70%)'
} }), (0, jsx_runtime_1.jsx)("div", { className: "absolute -inset-6 rounded-full opacity-10", style: {
background: 'radial-gradient(circle at center, rgba(255,255,255,1) 0%, transparent 70%)'
} })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 overflow-hidden pointer-events-none", children: [(0, jsx_runtime_1.jsx)("div", { className: "star-small animate-twinkle-1", style: { top: '15%', left: '10%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-medium animate-twinkle-2", style: { top: '25%', left: '85%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-small animate-twinkle-3", style: { top: '45%', left: '15%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-large animate-twinkle-1", style: { top: '65%', left: '75%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-medium animate-twinkle-2", style: { top: '85%', left: '25%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-small animate-twinkle-3", style: { top: '10%', left: '45%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-large animate-twinkle-2", style: { top: '35%', left: '65%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-medium animate-twinkle-1", style: { top: '75%', left: '90%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-small animate-twinkle-2", style: { top: '55%', left: '5%' } }), (0, jsx_runtime_1.jsx)("div", { className: "star-large animate-twinkle-3", style: { top: '15%', left: '95%' } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -top-[40%] -left-[20%] w-[80%] h-[80%] rounded-full bg-blue-500/20 blur-[120px] animate-pulse-slow" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute -bottom-[30%] -right-[20%] w-[75%] h-[75%] rounded-full bg-purple-500/20 blur-[120px] animate-pulse-slower" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-[20%] right-[10%] w-[50%] h-[50%] rounded-full bg-cyan-500/20 blur-[100px] animate-pulse-slowest" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full max-w-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white w-full md:w-64 mx-auto text-center mb-10", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold text-6xl text-blue-300", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-block", children: "Envkit" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2 my-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 rounded-full bg-blue-300/20" }), (0, jsx_runtime_1.jsx)("div", { className: "w-12 h-0.5 bg-blue-300/30 rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 rounded-full bg-blue-300/20" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[#888F96] mt-2 relative", children: ["The world's first", (0, jsx_runtime_1.jsxs)("span", { className: "font-mono font-semibold text-white relative group inline-flex items-center mx-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "opacity-50", children: "<" }), (0, jsx_runtime_1.jsx)("span", { className: "relative inline-block", children: "Env" }), (0, jsx_runtime_1.jsx)("span", { className: "opacity-50", children: "/>" })] }), "box, powered by Onboardbase."] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "rounded-xl bg-gray-500/10 backdrop-blur-xl border-gray-500/15 border relative", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-full p-4 flex items-center space-x-6 border-b border-gray-500/15", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 flex items-center justify-center rounded-sm", children: logoUrl ? ((0, jsx_runtime_1.jsx)("img", { src: logoUrl, alt: "Logo", className: "w-full h-full object-contain object-center" })) :
((0, jsx_runtime_1.jsx)("svg", { className: "text-white w-full h-full", viewBox: "0 0 370 370", fill: "#ffffff", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M78.625 37C67.5854 37 56.9979 41.3855 49.1917 49.1917C41.3855 56.9979 37 67.5854 37 78.625V291.375C37 302.415 41.3855 313.002 49.1917 320.808C56.9979 328.615 67.5854 333 78.625 333H291.375C302.415 333 313.002 328.615 320.808 320.808C328.615 313.002 333 302.415 333 291.375V78.625C333 67.5854 328.615 56.9979 320.808 49.1917C313.002 41.3855 302.415 37 291.375 37H78.625ZM153.18 153.18C155.631 150.55 156.965 147.071 156.902 143.476C156.838 139.882 155.382 136.452 152.84 133.91C150.298 131.368 146.868 129.912 143.274 129.848C139.679 129.785 136.2 131.119 133.57 133.57L91.945 175.195C89.3467 177.797 87.8872 181.323 87.8872 185C87.8872 188.677 89.3467 192.203 91.945 194.805L133.57 236.43C136.2 238.881 139.679 240.215 143.274 240.152C146.868 240.088 150.298 238.632 152.84 236.09C155.382 233.548 156.838 230.118 156.902 226.524C156.965 222.929 155.631 219.45 153.18 216.82L121.36 185L153.18 153.18ZM236.43 133.57C235.16 132.207 233.628 131.113 231.926 130.355C230.224 129.597 228.387 129.189 226.524 129.156C224.661 129.123 222.81 129.466 221.082 130.164C219.355 130.862 217.785 131.9 216.468 133.218C215.15 134.535 214.112 136.105 213.414 137.832C212.716 139.56 212.373 141.411 212.406 143.274C212.439 145.137 212.847 146.974 213.605 148.676C214.363 150.378 215.457 151.91 216.82 153.18L248.64 185L216.82 216.82C215.457 218.09 214.363 219.622 213.605 221.324C212.847 223.026 212.439 224.863 212.406 226.726C212.373 228.589 212.716 230.44 213.414 232.168C214.112 233.895 215.15 235.465 216.468 236.782C217.785 238.1 219.355 239.138 221.082 239.836C222.81 240.534 224.661 240.877 226.524 240.844C228.387 240.811 230.224 240.403 231.926 239.645C233.628 238.887 235.16 237.793 236.43 236.43L278.055 194.805C280.653 192.203 282.113 188.677 282.113 185C282.113 181.323 280.653 177.797 278.055 175.195L236.43 133.57Z", fill: "#ffffff" }) })) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "font-semibold text-base text-white md:text-lg", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-[#888F96] text-sm leading-5", children: description })] })] }), missingVars.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-green-500/5 border border-green-500/10 text-green-300 px-4 py-3 rounded mb-4", children: [(0, jsx_runtime_1.jsx)("p", { children: "All required environment variables are set! You can now proceed." }), (0, jsx_runtime_1.jsx)("button", { onClick: onSubmit, className: "mt-4 w-full md:flex-1 flex justify-center min-w-fit rounded-md cursor-pointer border border-transparent bg-white px-8 py-2 text-sm font-medium leading-6 text-black hover:bg-gray-400 transition-colors", children: "Continue to application" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [error && ((0, jsx_runtime_1.jsx)("div", { className: "bg-red-500/5 border text-xs border-red-500/10 text-red-300 px-4 py-3 rounded mb-4", children: (0, jsx_runtime_1.jsx)("span", { className: "block sm:inline", children: error }) })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "w-full flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-full overflow-hidden border-b border-gray-500/15`, children: (0, jsx_runtime_1.jsxs)("div", { className: `p-4 relative ${envVars.length > 5 ? 'max-h-[400px] overflow-y-auto' : ''}`, children: [success && ((0, jsx_runtime_1.jsx)("div", { className: "w-full mb-4 p-2 bg-green-500/5 border border-green-500/10 rounded-md text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-green-300 text-sm", children: success }) })), pasteStatus && ((0, jsx_runtime_1.jsx)("div", { className: "w-full mb-4 p-2 bg-blue-500/5 border border-blue-500/10 rounded-md text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-blue-300 text-sm", children: pasteStatus }) })), (0, jsx_runtime_1.jsxs)("div", { className: "", children: [(0, jsx_runtime_1.jsxs)("div", { className: "header-row grid grid-cols-2 gap-3 items-center w-full text-sm text-white font-medium pb-1", children: [(0, jsx_runtime_1.jsx)("div", { children: "Key" }), (0, jsx_runtime_1.jsx)("div", { children: "Value" })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: envVars
.map((envVar, index) => ({ envVar, index, isRequired: !!missingVars.find(v => v.key === envVar.key) }))
.sort((a, b) => {
// Required vars come first
if (a.isRequired && !b.isRequired)
return -1;
if (!a.isRequired && b.isRequired)
return 1;
// Then sort by original index
return a.index - b.index;
})
.map(({ envVar, index, isRequired }) => ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3 items-center w-full group", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", id: `env-key-${index}`, value: envVar.key, onChange: (e) => handleKeyChange(index, e.target.value), className: `w-full px-3 py-1.5 font-mono border sm:leading-6 text-xs text-white bg-gray-500/5 placeholder:text-gray-500 rounded-md focus:outline-none focus:ring-0 focus:border-gray-500/15 ${isRequired ? 'border-gray-500/15' : 'border-gray-500/15'}`, placeholder: "ENV_KEY", disabled: isRequired }), isRequired && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-2 right-2 font-medium rounded-full bg-[#152b4e] text-blue-300 px-1.5 py-0.5 text-[8px] uppercase", children: "Required" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center w-full bg-gray-500/5 border-gray-500/15 border rounded-md", children: [(0, jsx_runtime_1.jsx)("input", { type: envVar.masked ? "password" : "text", id: `env-${envVar.key || `value-${index}`}`, value: envVar.value, onChange: (e) => handleInputChange(index, e.target.value), onPaste: (e) => handleInputPaste(e, index), className: `w-full px-3 py-1.5 font-mono border sm:leading-6 text-xs text-white bg-transparent placeholder:text-gray-500 border-none focus:outline-none focus:ring-0 focus:border-none ${isRequired ? 'border-gray-500/15' : 'border-gray-500/15'}`, placeholder: envVar.placeholder || `Enter value` }), envVar.value && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleMasking(index), className: "p-2.5 bg-transparent text-[#888F96] hover:text-white transition-colors rounded-tr-md rounded-br-md", "aria-label": envVar.masked ? "Show value" : "Hide value", children: envVar.masked ? ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-4 h-4", children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z", clipRule: "evenodd" })] })) : ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-4 h-4", children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.745-1.745a10.029 10.029 0 003.3-4.38 1.651 1.651 0 000-1.185A10.004 10.004 0 009.999 3a9.956 9.956 0 00-4.744 1.194L3.28 2.22zM7.752 6.69l1.092 1.092a2.5 2.5 0 013.374 3.373l1.091 1.092a4 4 0 00-5.557-5.557z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.748 13.93l2.523 2.523a9.987 9.987 0 01-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186A10.007 10.007 0 012.839 6.02L6.07 9.252a4 4 0 004.678 4.678z" })] })) }))] }), !isRequired && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => deleteEnvVar(index), className: "ml-2 p-1 rounded-md text-[#888F96] hover:text-red-400 hover:bg-red-500/10 transition-colors", "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z", clipRule: "evenodd" }) }) }))] })] }, envVar.key || `new-env-${index}`))) })] }), !disableAddNew && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: addNewEnvVar, className: "flex font-medium items-center space-x-2 text-sm text-[#888F96] hover:text-white", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-4 h-4", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Add another" })] }) }))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 py-4 flex flex-col md:flex-row items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full md:flex-1 flex items-center justify-center min-w-fit border border-gray-500/15 rounded-md cursor-pointer bg-transparent px-3 py-2 text-sm font-medium leading-6 text-white hover:bg-gray-500/10 focus:outline-0 order-3 md:order-1", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "file-upload", className: "w-full flex items-center justify-center space-x-3", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4 text-blue-300", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z", clipRule: "evenodd" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Import from .env" })] }), (0, jsx_runtime_1.jsx)("input", { id: "file-upload", type: "file", accept: ".env,.json", className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", onChange: handleFileUpload })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-400/50 font-medium text-xs my-2 md:my-0 shrink-0 order-2 md:order-2", children: "OR" }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: isSubmitting, className: `w-full md:flex-1 flex items-center space-x-3 justify-center min-w-fit rounded-md cursor-pointer border border-transparent bg-blue-300 px-8 py-2 text-sm font-medium leading-6 text-black hover:bg-blue-400 focus:outline-0 order-1 md:order-3 ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`, children: isSubmitting ? 'Saving...' : 'Continue' })] })] })] })), (0, jsx_runtime_1.jsxs)("a", { href: "https://onboardbase.com", target: "_blank", className: "flex flex-row -rotate-90 translate-y-40 items-center justify-start origin-bottom-left py-1.5 px-3 gap-1 rounded-b-none border border-gray-500/15 border-b-0 absolute left-0 -ml-[1.2px] top-4 rounded-lg bg-gray-500/10", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-semibold text-[#888F96]", children: "Powered by" }), (0, jsx_runtime_1.jsx)("div", { className: "text-blue-300 flex items-center justify-center h-[11px]", children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-full h-full", viewBox: "0 0 309 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M40.068 40.66C46.833 40.66 52.938 35.49 52.938 26.525C52.938 17.505 46.833 12.335 40.068 12.335C33.358 12.335 27.253 17.505 27.253 26.525C27.253 35.49 33.358 40.66 40.068 40.66ZM40.068 35.49C36.108 35.49 33.743 31.915 33.743 26.525C33.743 21.08 36.108 17.505 40.068 17.505C44.028 17.505 46.448 21.08 46.448 26.525C46.448 31.915 44.028 35.49 40.068 35.49ZM56.4486 40H62.7736V21.135C65.0286 18.935 66.5686 17.78 68.9336 17.78C71.9036 17.78 73.1686 19.43 73.1686 23.885V40H79.4936V23.06C79.4936 16.24 76.9636 12.335 71.1886 12.335C67.5036 12.335 64.7536 14.26 62.3336 16.625H62.1136L61.6736 12.995H56.4486V40ZM97.565 40.66C103.56 40.66 109.115 35.325 109.115 26.03C109.115 17.725 105.21 12.335 98.445 12.335C95.695 12.335 92.89 13.71 90.635 15.69L90.8 11.18V1.17H84.475V40H89.48L90.03 37.14H90.195C92.45 39.395 95.09 40.66 97.565 40.66ZM96.245 35.435C94.65 35.435 92.725 34.83 90.8 33.18V20.585C92.89 18.55 94.76 17.56 96.74 17.56C100.81 17.56 102.57 20.75 102.57 26.14C102.57 32.245 99.82 35.435 96.245 35.435ZM123.771 40.66C130.536 40.66 136.641 35.49 136.641 26.525C136.641 17.505 130.536 12.335 123.771 12.335C117.061 12.335 110.956 17.505 110.956 26.525C110.956 35.49 117.061 40.66 123.771 40.66ZM123.771 35.49C119.811 35.49 117.446 31.915 117.446 26.525C117.446 21.08 119.811 17.505 123.771 17.505C127.731 17.505 130.151 21.08 130.151 26.525C130.151 31.915 127.731 35.49 123.771 35.49ZM146.052 40.66C149.242 40.66 151.992 39.065 154.412 37.03H154.632L155.072 40H160.297V23.995C160.297 16.46 156.942 12.335 150.232 12.335C145.942 12.335 142.092 13.985 139.122 15.855L141.432 20.09C143.852 18.66 146.382 17.45 149.022 17.45C152.707 17.45 153.862 19.87 153.972 22.73C142.862 23.94 138.077 26.965 138.077 32.74C138.077 37.47 141.322 40.66 146.052 40.66ZM148.087 35.71C145.832 35.71 144.182 34.665 144.182 32.245C144.182 29.55 146.602 27.625 153.972 26.69V32.74C151.937 34.61 150.287 35.71 148.087 35.71ZM165.117 40H171.442V23.5C173.092 19.43 175.677 17.945 177.822 17.945C178.977 17.945 179.692 18.11 180.627 18.385L181.727 12.885C180.902 12.5 180.022 12.335 178.647 12.335C175.787 12.335 172.927 14.26 171.002 17.78H170.782L170.342 12.995H165.117V40ZM191.807 40.66C194.722 40.66 197.472 39.065 199.452 37.085H199.672L200.112 40H205.337V1.17H199.012V10.96L199.232 15.305C197.142 13.49 195.217 12.335 192.137 12.335C186.252 12.335 180.697 17.725 180.697 26.525C180.697 35.435 185.042 40.66 191.807 40.66ZM193.347 35.435C189.442 35.435 187.242 32.3 187.242 26.47C187.242 20.805 190.047 17.56 193.512 17.56C195.327 17.56 197.142 18.165 199.012 19.815V32.41C197.197 34.5 195.437 35.435 193.347 35.435ZM223.732 40.66C229.727 40.66 235.282 35.325 235.282 26.03C235.282 17.725 231.377 12.335 224.612 12.335C221.862 12.335 219.057 13.71 216.802 15.69L216.967 11.18V1.17H210.642V40H215.647L216.197 37.14H216.362C218.617 39.395 221.257 40.66 223.732 40.66ZM222.412 35.435C220.817 35.435 218.892 34.83 216.967 33.18V20.585C219.057 18.55 220.927 17.56 222.907 17.56C226.977 17.56 228.737 20.75 228.737 26.14C228.737 32.245 225.987 35.435 222.412 35.435ZM244.784 40.66C247.974 40.66 250.724 39.065 253.144 37.03H253.364L253.804 40H259.029V23.995C259.029 16.46 255.674 12.335 248.964 12.335C244.674 12.335 240.824 13.985 237.854 15.855L240.164 20.09C242.584 18.66 245.114 17.45 247.754 17.45C251.439 17.45 252.594 19.87 252.704 22.73C241.594 23.94 236.809 26.965 236.809 32.74C236.809 37.47 240.054 40.66 244.784 40.66ZM246.819 35.71C244.564 35.71 242.914 34.665 242.914 32.245C242.914 29.55 245.334 27.625 252.704 26.69V32.74C250.669 34.61 249.019 35.71 246.819 35.71ZM271.383 40.66C278.203 40.66 281.888 36.92 281.888 32.3C281.888 27.24 277.818 25.48 274.133 24.105C271.218 23.06 268.523 22.235 268.523 20.09C268.523 18.385 269.788 17.12 272.483 17.12C274.628 17.12 276.553 18.055 278.423 19.43L281.338 15.58C279.138 13.875 276.113 12.335 272.373 12.335C266.323 12.335 262.528 15.69 262.528 20.42C262.528 24.93 266.543 26.965 270.118 28.285C272.978 29.385 275.893 30.375 275.893 32.63C275.893 34.5 274.518 35.875 271.603 35.875C268.853 35.875 266.543 34.72 264.123 32.85L261.153 36.92C263.793 39.065 267.698 40.66 271.383 40.66ZM296.335 40.66C299.745 40.66 302.99 39.45 305.575 37.745L303.43 33.785C301.45 35.05 299.47 35.765 297.16 35.765C292.815 35.765 289.735 33.015 289.185 28.23H306.345C306.51 27.57 306.62 26.36 306.62 25.15C306.62 17.615 302.77 12.335 295.455 12.335C289.13 12.335 283.025 17.725 283.025 26.525C283.025 35.435 288.855 40.66 296.335 40.66ZM289.13 23.94C289.68 19.595 292.43 17.23 295.62 17.23C299.305 17.23 301.12 19.76 301.12 23.94H289.13Z", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { width: "5.91623", height: "30.9797", transform: "matrix(0.986269 0.165144 -0.206585 0.978429 6.40039 9)", fill: "#6772E5" }), (0, jsx_runtime_1.jsx)("rect", { width: "5.91623", height: "30.9797", transform: "matrix(0.986269 0.165144 -0.206585 0.978429 18.2744 9.88159)", fill: "#F5BE58" })] }) })] })] }), (0, jsx_runtime_1.jsx)("footer", { className: "row-start-3 flex gap-8 flex-wrap items-center justify-center mt-10", children: (0, jsx_runtime_1.jsxs)("a", { className: "flex items-center gap-1 text-[#888F96] text-sm hover:text-white", href: "https://envkit.co", target: "_blank", rel: "noopener noreferrer", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4", children: (0, jsx_runtime_1.jsx)("path", { d: "M16.555 5.412a8.028 8.028 0 0 0-3.503-2.81 14.899 14.899 0 0 1 1.663 4.472 8.547 8.547 0 0 0 1.84-1.662ZM13.326 7.825a13.43 13.43 0 0 0-2.413-5.773 8.087 8.087 0 0 0-1.826 0 13.43 13.43 0 0 0-2.413 5.773A8.473 8.473 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675ZM6.514 9.376A9.98 9.98 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 0 1-.351 3.759A13.54 13.54 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 0 1-.352-3.758ZM5.285 7.074a14.9 14.9 0 0 1 1.663-4.471 8.028 8.028 0 0 0-3.503 2.81c.529.638 1.149 1.199 1.84 1.66ZM17.334 6.798a7.973 7.973 0 0 1 .614 4.115 13.47 13.47 0 0 1-3.178 1.72 15.093 15.093 0 0 0 .174-3.939 10.043 10.043 0 0 0 2.39-1.896ZM2.666 6.798a10.042 10.042 0 0 0 2.39 1.896 15.196 15.196 0 0 0 .174 3.94 13.472 13.472 0 0 1-3.178-1.72 7.973 7.973 0 0 1 .615-4.115ZM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 0 1-1.72 3.178 8.099 8.099 0 0 1-1.826 0 13.47 13.47 0 0 1-1.72-3.178c.855.151 1.735.23 2.633.23ZM14.357 14.357a14.912 14.912 0 0 1-1.305 3.04 8.027 8.027 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305ZM6.948 17.397a8.027 8.027 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 0 0 1.305 3.04Z" }) }), "Go to envkit.co \u2192"] }) })] })] }));
}
exports.default = DefaultFallbackUI;
// Add these styles to your globals.css or equivalent
const styles = `
@keyframes pulse-slow {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
@keyframes pulse-slower {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
@keyframes pulse-slowest {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.5; }
}
@keyframes twinkle-1 {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes twinkle-2 {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes twinkle-3 {
0%, 100% { opacity: 0.7; }
50% { opacity: 0.1; }
}
.moon {
box-shadow: inset -10px -10px 50px rgba(0,0,0,0.15),
inset 5px 5px 30px rgba(255,255,255,0.1),
0 0 50px rgba(255,255,255,0.2);
transform: rotate(25deg);
backdrop-filter: blur(4px);
}
.animate-pulse-slow {
animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-pulse-slower {
animation: pulse-slower 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-pulse-slowest {
animation: pulse-slowest 10s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-twinkle-1 {
animation: twinkle-1 4s ease-in-out infinite;
}
.animate-twinkle-2 {
animation: twinkle-2 5s ease-in-out infinite;
}
.animate-twinkle-3 {
animation: twinkle-3 6s ease-in-out infinite;
}
.star-small {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.3);
}
.star-medium {
position: absolute;
width: 3px;
height: 3px;
background: white;
border-radius: 50%;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.4);
}
.star-large {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
}
/* Custom scrollbar styles */
.space-y-2::-webkit-scrollbar {
width: 6px;
}
.space-y-2::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.space-y-2::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
transition: background 0.2s ease;
}
.space-y-2::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
`;
// Add styles to document
if (typeof document !== 'undefined') {
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
}
//# sourceMappingURL=DefaultFallbackUI.js.map