67069f3bda
1. Fix typewriter double-letter bug (race condition) 2. Replace flag emojis with text labels (NL/AR/EN) 3. Fix health check TLS options for Bun compatibility 4. Translate 'yourname' placeholder per language
526 lines
18 KiB
JavaScript
526 lines
18 KiB
JavaScript
const translations = {
|
|
en: {
|
|
title: 'AI Stack Deployer',
|
|
subtitle: 'Deploy your personal OpenCode AI coding assistant in seconds',
|
|
chooseStackName: 'Choose Your Stack Name',
|
|
availableAt: 'Your AI assistant will be available at',
|
|
stackName: 'Stack Name',
|
|
placeholder: 'e.g., john-dev',
|
|
inputHint: '3-20 characters, lowercase letters, numbers, and hyphens only',
|
|
deployBtn: 'Deploy My AI Stack',
|
|
deploying: 'Deploying Your Stack',
|
|
stack: 'Stack',
|
|
initializing: 'Initializing deployment...',
|
|
successMessage: 'Your AI coding assistant is ready to use',
|
|
stackNameLabel: 'Stack Name:',
|
|
openStack: 'Open My AI Stack',
|
|
deployAnother: 'Deploy Another Stack',
|
|
tryAgain: 'Try Again',
|
|
poweredBy: 'Powered by',
|
|
deploymentComplete: 'Deployment Complete',
|
|
deploymentFailed: 'Deployment Failed',
|
|
nameRequired: 'Name is required',
|
|
nameLengthError: 'Name must be between 3 and 20 characters',
|
|
nameCharsError: 'Only lowercase letters, numbers, and hyphens allowed',
|
|
nameHyphenError: 'Cannot start or end with a hyphen',
|
|
nameReserved: 'This name is reserved',
|
|
checkingAvailability: 'Checking availability...',
|
|
nameAvailable: '✓ Name is available!',
|
|
nameNotAvailable: 'Name is not available',
|
|
checkFailed: 'Failed to check availability',
|
|
connectionLost: 'Connection lost. Please refresh and try again.',
|
|
deployingText: 'Deploying...',
|
|
yournamePlaceholder: 'yourname'
|
|
},
|
|
nl: {
|
|
title: 'AI Stack Deployer',
|
|
subtitle: 'Implementeer je persoonlijke OpenCode AI programmeerassistent in seconden',
|
|
chooseStackName: 'Kies Je Stack Naam',
|
|
availableAt: 'Je AI-assistent is beschikbaar op',
|
|
stackName: 'Stack Naam',
|
|
placeholder: 'bijv., jan-dev',
|
|
inputHint: '3-20 tekens, kleine letters, cijfers en koppeltekens',
|
|
deployBtn: 'Implementeer Mijn AI Stack',
|
|
deploying: 'Stack Wordt Geïmplementeerd',
|
|
stack: 'Stack',
|
|
initializing: 'Implementatie initialiseren...',
|
|
successMessage: 'Je AI programmeerassistent is klaar voor gebruik',
|
|
stackNameLabel: 'Stack Naam:',
|
|
openStack: 'Open Mijn AI Stack',
|
|
deployAnother: 'Implementeer Nog Een Stack',
|
|
tryAgain: 'Probeer Opnieuw',
|
|
poweredBy: 'Mogelijk gemaakt door',
|
|
deploymentComplete: 'Implementatie Voltooid',
|
|
deploymentFailed: 'Implementatie Mislukt',
|
|
nameRequired: 'Naam is verplicht',
|
|
nameLengthError: 'Naam moet tussen 3 en 20 tekens zijn',
|
|
nameCharsError: 'Alleen kleine letters, cijfers en koppeltekens toegestaan',
|
|
nameHyphenError: 'Kan niet beginnen of eindigen met een koppelteken',
|
|
nameReserved: 'Deze naam is gereserveerd',
|
|
checkingAvailability: 'Beschikbaarheid controleren...',
|
|
nameAvailable: '✓ Naam is beschikbaar!',
|
|
nameNotAvailable: 'Naam is niet beschikbaar',
|
|
checkFailed: 'Controle mislukt',
|
|
connectionLost: 'Verbinding verbroken. Ververs de pagina en probeer opnieuw.',
|
|
deployingText: 'Implementeren...',
|
|
yournamePlaceholder: 'jouwnaam'
|
|
},
|
|
ar: {
|
|
title: 'AI Stack Deployer',
|
|
subtitle: 'انشر مساعد البرمجة الذكي الخاص بك في ثوانٍ',
|
|
chooseStackName: 'اختر اسم المشروع',
|
|
availableAt: 'سيكون مساعدك الذكي متاحًا على',
|
|
stackName: 'اسم المشروع',
|
|
placeholder: 'مثال: أحمد-dev',
|
|
inputHint: '3-20 حرف، أحرف صغيرة وأرقام وشرطات فقط',
|
|
deployBtn: 'انشر مشروعي',
|
|
deploying: 'جاري النشر',
|
|
stack: 'المشروع',
|
|
initializing: 'جاري التهيئة...',
|
|
successMessage: 'مساعد البرمجة الذكي جاهز للاستخدام',
|
|
stackNameLabel: 'اسم المشروع:',
|
|
openStack: 'افتح مشروعي',
|
|
deployAnother: 'انشر مشروع آخر',
|
|
tryAgain: 'حاول مرة أخرى',
|
|
poweredBy: 'مدعوم من',
|
|
deploymentComplete: 'تم النشر بنجاح',
|
|
deploymentFailed: 'فشل النشر',
|
|
nameRequired: 'الاسم مطلوب',
|
|
nameLengthError: 'يجب أن يكون الاسم بين 3 و 20 حرفًا',
|
|
nameCharsError: 'يُسمح فقط بالأحرف الصغيرة والأرقام والشرطات',
|
|
nameHyphenError: 'لا يمكن أن يبدأ أو ينتهي بشرطة',
|
|
nameReserved: 'هذا الاسم محجوز',
|
|
checkingAvailability: 'جاري التحقق...',
|
|
nameAvailable: '✓ الاسم متاح!',
|
|
nameNotAvailable: 'الاسم غير متاح',
|
|
checkFailed: 'فشل التحقق',
|
|
connectionLost: 'انقطع الاتصال. يرجى تحديث الصفحة والمحاولة مرة أخرى.',
|
|
deployingText: 'جاري النشر...',
|
|
yournamePlaceholder: 'اسمك'
|
|
}
|
|
};
|
|
|
|
let currentLang = 'en';
|
|
|
|
function detectLanguage() {
|
|
const browserLang = navigator.language || navigator.userLanguage;
|
|
const lang = browserLang.split('-')[0].toLowerCase();
|
|
|
|
if (translations[lang]) {
|
|
return lang;
|
|
}
|
|
return 'en';
|
|
}
|
|
|
|
function t(key) {
|
|
return translations[currentLang][key] || translations['en'][key] || key;
|
|
}
|
|
|
|
function setLanguage(lang) {
|
|
if (!translations[lang]) return;
|
|
|
|
currentLang = lang;
|
|
localStorage.setItem('preferredLanguage', lang);
|
|
|
|
document.documentElement.lang = lang;
|
|
document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
|
|
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const key = el.getAttribute('data-i18n');
|
|
el.textContent = t(key);
|
|
});
|
|
|
|
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
|
|
const key = el.getAttribute('data-i18n-placeholder');
|
|
el.placeholder = t(key);
|
|
});
|
|
|
|
document.querySelectorAll('.lang-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
if (btn.getAttribute('data-lang') === lang) {
|
|
btn.classList.add('active');
|
|
}
|
|
});
|
|
|
|
const previewNameEl = document.getElementById('preview-name');
|
|
if (previewNameEl && !stackNameInput?.value) {
|
|
previewNameEl.textContent = t('yournamePlaceholder');
|
|
}
|
|
|
|
const typewriterTarget = document.getElementById('typewriter-target');
|
|
if (typewriterTarget && currentState === STATE.FORM) {
|
|
typewriter(typewriterTarget, t('chooseStackName'));
|
|
}
|
|
}
|
|
|
|
function initLanguage() {
|
|
const saved = localStorage.getItem('preferredLanguage');
|
|
const lang = saved || detectLanguage();
|
|
setLanguage(lang);
|
|
|
|
document.querySelectorAll('.lang-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
setLanguage(btn.getAttribute('data-lang'));
|
|
});
|
|
});
|
|
}
|
|
|
|
// Track active typewriter instances to prevent race conditions
|
|
let activeTypewriters = new Map();
|
|
|
|
function typewriter(element, text, speed = 50) {
|
|
// Cancel any existing typewriter on this element
|
|
const elementId = element.id || 'default';
|
|
if (activeTypewriters.has(elementId)) {
|
|
clearTimeout(activeTypewriters.get(elementId));
|
|
activeTypewriters.delete(elementId);
|
|
}
|
|
|
|
let i = 0;
|
|
element.innerHTML = '';
|
|
|
|
const cursor = document.createElement('span');
|
|
cursor.className = 'typing-cursor';
|
|
|
|
const existingCursor = element.parentNode.querySelector('.typing-cursor');
|
|
if (existingCursor) {
|
|
existingCursor.remove();
|
|
}
|
|
|
|
element.parentNode.insertBefore(cursor, element.nextSibling);
|
|
|
|
function type() {
|
|
if (i < text.length) {
|
|
element.textContent += text.charAt(i);
|
|
i++;
|
|
const timeoutId = setTimeout(type, speed);
|
|
activeTypewriters.set(elementId, timeoutId);
|
|
} else {
|
|
activeTypewriters.delete(elementId);
|
|
}
|
|
}
|
|
type();
|
|
}
|
|
|
|
// State Machine for Deployment
|
|
const STATE = {
|
|
FORM: 'form',
|
|
PROGRESS: 'progress',
|
|
SUCCESS: 'success',
|
|
ERROR: 'error'
|
|
};
|
|
|
|
let currentState = STATE.FORM;
|
|
let deploymentId = null;
|
|
let deploymentUrl = null;
|
|
let eventSource = null;
|
|
|
|
// DOM Elements
|
|
const formState = document.getElementById('form-state');
|
|
const progressState = document.getElementById('progress-state');
|
|
const successState = document.getElementById('success-state');
|
|
const errorState = document.getElementById('error-state');
|
|
|
|
const deployForm = document.getElementById('deploy-form');
|
|
const stackNameInput = document.getElementById('stack-name');
|
|
const deployBtn = document.getElementById('deploy-btn');
|
|
const validationMessage = document.getElementById('validation-message');
|
|
const previewName = document.getElementById('preview-name');
|
|
|
|
const progressBar = document.getElementById('progress-fill');
|
|
const progressPercent = document.getElementById('progress-percent');
|
|
const deployingName = document.getElementById('deploying-name');
|
|
const deployingUrl = document.getElementById('deploying-url');
|
|
const progressLog = document.getElementById('progress-log');
|
|
|
|
const successName = document.getElementById('success-name');
|
|
const successUrl = document.getElementById('success-url');
|
|
const openStackBtn = document.getElementById('open-stack-btn');
|
|
const deployAnotherBtn = document.getElementById('deploy-another-btn');
|
|
|
|
const errorMessage = document.getElementById('error-message');
|
|
const tryAgainBtn = document.getElementById('try-again-btn');
|
|
|
|
// State Management
|
|
function setState(newState) {
|
|
currentState = newState;
|
|
|
|
const states = [formState, progressState, successState, errorState];
|
|
|
|
states.forEach(state => {
|
|
state.style.display = 'none';
|
|
state.classList.remove('fade-in');
|
|
});
|
|
|
|
let activeState;
|
|
switch (newState) {
|
|
case STATE.FORM:
|
|
activeState = formState;
|
|
break;
|
|
case STATE.PROGRESS:
|
|
activeState = progressState;
|
|
break;
|
|
case STATE.SUCCESS:
|
|
activeState = successState;
|
|
break;
|
|
case STATE.ERROR:
|
|
activeState = errorState;
|
|
break;
|
|
}
|
|
|
|
if (activeState) {
|
|
activeState.style.display = 'block';
|
|
// Add a slight delay to ensure the display property has taken effect before adding the class
|
|
setTimeout(() => {
|
|
activeState.classList.add('fade-in');
|
|
}, 10);
|
|
}
|
|
}
|
|
|
|
function validateName(name) {
|
|
if (!name) {
|
|
return { valid: false, error: t('nameRequired') };
|
|
}
|
|
|
|
const trimmedName = name.trim().toLowerCase();
|
|
|
|
if (trimmedName.length < 3 || trimmedName.length > 20) {
|
|
return { valid: false, error: t('nameLengthError') };
|
|
}
|
|
|
|
if (!/^[a-z0-9-]+$/.test(trimmedName)) {
|
|
return { valid: false, error: t('nameCharsError') };
|
|
}
|
|
|
|
if (trimmedName.startsWith('-') || trimmedName.endsWith('-')) {
|
|
return { valid: false, error: t('nameHyphenError') };
|
|
}
|
|
|
|
const reservedNames = ['admin', 'api', 'www', 'root', 'system', 'test', 'demo', 'portal'];
|
|
if (reservedNames.includes(trimmedName)) {
|
|
return { valid: false, error: t('nameReserved') };
|
|
}
|
|
|
|
return { valid: true, name: trimmedName };
|
|
}
|
|
|
|
// Real-time Name Validation
|
|
let checkTimeout;
|
|
stackNameInput.addEventListener('input', (e) => {
|
|
const value = e.target.value.toLowerCase();
|
|
e.target.value = value;
|
|
|
|
previewName.textContent = value || t('yournamePlaceholder');
|
|
|
|
// Clear previous timeout
|
|
clearTimeout(checkTimeout);
|
|
|
|
// Validate format first
|
|
const validation = validateName(value);
|
|
|
|
if (!validation.valid) {
|
|
stackNameInput.classList.remove('success');
|
|
stackNameInput.classList.add('error');
|
|
validationMessage.textContent = validation.error;
|
|
validationMessage.className = 'validation-message error';
|
|
deployBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
stackNameInput.classList.remove('error', 'success');
|
|
validationMessage.textContent = t('checkingAvailability');
|
|
validationMessage.className = 'validation-message';
|
|
|
|
checkTimeout = setTimeout(async () => {
|
|
try {
|
|
const response = await fetch(`/api/check/${validation.name}`);
|
|
const data = await response.json();
|
|
|
|
if (data.available && data.valid) {
|
|
stackNameInput.classList.add('success');
|
|
validationMessage.textContent = t('nameAvailable');
|
|
validationMessage.className = 'validation-message success';
|
|
deployBtn.disabled = false;
|
|
} else {
|
|
stackNameInput.classList.add('error');
|
|
validationMessage.textContent = data.error || t('nameNotAvailable');
|
|
validationMessage.className = 'validation-message error';
|
|
deployBtn.disabled = true;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to check name availability:', error);
|
|
validationMessage.textContent = t('checkFailed');
|
|
validationMessage.className = 'validation-message error';
|
|
deployBtn.disabled = true;
|
|
}
|
|
}, 500);
|
|
});
|
|
|
|
// Form Submission
|
|
deployForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const validation = validateName(stackNameInput.value);
|
|
if (!validation.valid) {
|
|
return;
|
|
}
|
|
|
|
deployBtn.disabled = true;
|
|
deployBtn.innerHTML = `<span class="btn-text">${t('deployingText')}</span>`;
|
|
|
|
try {
|
|
const response = await fetch('/api/deploy', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: validation.name
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok || !data.success) {
|
|
throw new Error(data.error || 'Deployment failed');
|
|
}
|
|
|
|
deploymentId = data.deploymentId;
|
|
deploymentUrl = data.url;
|
|
|
|
// Update progress UI
|
|
deployingName.textContent = validation.name;
|
|
deployingUrl.textContent = deploymentUrl;
|
|
|
|
// Switch to progress state
|
|
setState(STATE.PROGRESS);
|
|
|
|
// Start SSE connection
|
|
startProgressStream(deploymentId);
|
|
|
|
} catch (error) {
|
|
console.error('Deployment error:', error);
|
|
showError(error.message);
|
|
deployBtn.disabled = false;
|
|
deployBtn.innerHTML = `
|
|
<span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</span>
|
|
<svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
`;
|
|
}
|
|
});
|
|
|
|
// SSE Progress Streaming
|
|
function startProgressStream(deploymentId) {
|
|
eventSource = new EventSource(`/api/status/${deploymentId}`);
|
|
|
|
eventSource.addEventListener('progress', (event) => {
|
|
const data = JSON.parse(event.data);
|
|
updateProgress(data);
|
|
});
|
|
|
|
eventSource.addEventListener('complete', (event) => {
|
|
const data = JSON.parse(event.data);
|
|
eventSource.close();
|
|
showSuccess(data);
|
|
});
|
|
|
|
eventSource.addEventListener('error', (event) => {
|
|
const data = event.data ? JSON.parse(event.data) : { message: 'Unknown error' };
|
|
eventSource.close();
|
|
showError(data.message);
|
|
});
|
|
|
|
eventSource.onerror = () => {
|
|
eventSource.close();
|
|
showError(t('connectionLost'));
|
|
};
|
|
}
|
|
|
|
// Update Progress UI
|
|
function updateProgress(data) {
|
|
// Update progress bar
|
|
progressBar.style.width = `${data.progress}%`;
|
|
progressPercent.textContent = `${data.progress}%`;
|
|
|
|
// Update current step
|
|
const stepContainer = document.querySelector('.progress-steps');
|
|
stepContainer.innerHTML = `
|
|
<div class="step active">
|
|
<div class="step-icon">⚙️</div>
|
|
<div class="step-text">${data.currentStep}</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add to log
|
|
const logEntry = document.createElement('div');
|
|
logEntry.className = 'log-entry';
|
|
logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${data.currentStep}`;
|
|
progressLog.appendChild(logEntry);
|
|
progressLog.scrollTop = progressLog.scrollHeight;
|
|
}
|
|
|
|
function showSuccess(data) {
|
|
successName.textContent = deployingName.textContent;
|
|
successUrl.textContent = deploymentUrl;
|
|
successUrl.href = deploymentUrl;
|
|
openStackBtn.href = deploymentUrl;
|
|
|
|
setState(STATE.SUCCESS);
|
|
const targetSpan = document.getElementById('success-title');
|
|
if(targetSpan) {
|
|
typewriter(targetSpan, t('deploymentComplete'));
|
|
}
|
|
}
|
|
|
|
function showError(message) {
|
|
errorMessage.textContent = message;
|
|
setState(STATE.ERROR);
|
|
const targetSpan = document.getElementById('error-title');
|
|
if(targetSpan) {
|
|
typewriter(targetSpan, t('deploymentFailed'), 30);
|
|
}
|
|
}
|
|
|
|
function resetToForm() {
|
|
deploymentId = null;
|
|
deploymentUrl = null;
|
|
stackNameInput.value = '';
|
|
previewName.textContent = t('yournamePlaceholder');
|
|
validationMessage.textContent = '';
|
|
validationMessage.className = 'validation-message';
|
|
stackNameInput.classList.remove('error', 'success');
|
|
progressLog.innerHTML = '';
|
|
progressBar.style.width = '0%';
|
|
progressPercent.textContent = '0%';
|
|
|
|
deployBtn.disabled = false;
|
|
deployBtn.innerHTML = `
|
|
<span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</span>
|
|
<svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
`;
|
|
|
|
setState(STATE.FORM);
|
|
const targetSpan = document.getElementById('typewriter-target');
|
|
if(targetSpan) {
|
|
typewriter(targetSpan, t('chooseStackName'));
|
|
}
|
|
}
|
|
|
|
// Event Listeners
|
|
deployAnotherBtn.addEventListener('click', resetToForm);
|
|
tryAgainBtn.addEventListener('click', resetToForm);
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initLanguage();
|
|
setState(STATE.FORM);
|
|
const targetSpan = document.getElementById('typewriter-target');
|
|
if(targetSpan) {
|
|
typewriter(targetSpan, t('chooseStackName'));
|
|
}
|
|
console.log('AI Stack Deployer initialized');
|
|
});
|