??
-
-
-
-
+
+
@@ -100,24 +110,42 @@ export class LoginScreen {
+
+
+ ${i18n.t('login.verifyCertificate')}
+
+
+
+
+
+
+
${i18n.t('login.instructions')}
-
-
-
+
+
@@ -216,15 +248,24 @@ export class LoginScreen {
});
});
- // First name input on Enter
- const nameInput = this.container.querySelector('#login-firstname-input');
- if (nameInput) {
- nameInput.addEventListener('keydown', (e) => {
- if (e.key === 'Enter') {
- this._handleConnect();
- }
- });
- nameInput.focus();
+ // Inputs on Enter
+ const firstNameInput = this.container.querySelector('#login-firstname-input');
+ const lastNameInput = this.container.querySelector('#login-lastname-input');
+
+ [firstNameInput, lastNameInput].forEach(inp => {
+ if (inp) {
+ inp.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ this._handleConnect();
+ }
+ });
+ }
+ });
+
+ if (firstNameInput && !firstNameInput.value) {
+ firstNameInput.focus();
+ } else if (lastNameInput && !lastNameInput.value) {
+ lastNameInput.focus();
}
// Connect button click
@@ -252,24 +293,39 @@ export class LoginScreen {
_handleConnect() {
this._clearError();
- const nameInput = this.container.querySelector('#login-firstname-input');
- const rawName = nameInput ? nameInput.value : '';
- const firstName = rawName.trim();
+ const firstNameInput = this.container.querySelector('#login-firstname-input');
+ const lastNameInput = this.container.querySelector('#login-lastname-input');
+
+ const firstName = firstNameInput ? firstNameInput.value.trim() : '';
+ const lastName = lastNameInput ? lastNameInput.value.trim() : '';
// 1. Validate First Name
if (!firstName) {
this._showError(i18n.t('login.firstNameRequired'));
- if (nameInput) nameInput.focus();
+ if (firstNameInput) firstNameInput.focus();
return;
}
if (firstName.length > 50) {
this._showError(i18n.t('login.firstNameTooLong'));
- if (nameInput) nameInput.focus();
+ if (firstNameInput) firstNameInput.focus();
return;
}
- // 2. Validate Selected Network
+ // 2. Validate Last Name
+ if (!lastName) {
+ this._showError(i18n.t('login.lastNameRequired'));
+ if (lastNameInput) lastNameInput.focus();
+ return;
+ }
+
+ if (lastName.length > 50) {
+ this._showError(i18n.t('login.lastNameTooLong'));
+ if (lastNameInput) lastNameInput.focus();
+ return;
+ }
+
+ // 3. Validate Selected Network
const selectedScenario = this.scenarios.find(s => s.id === this.selectedScenarioId);
if (!selectedScenario) {
this._showError(i18n.t('login.selectNetwork'));
@@ -292,6 +348,8 @@ export class LoginScreen {
if (this.onConnect) {
this.onConnect({
firstName,
+ lastName,
+ name: `${firstName} ${lastName}`,
scenarioId: selectedScenario.id,
scenarioPath: selectedScenario.path,
locale: currentLocale
diff --git a/src/js/engine/action_dispatcher.js b/src/js/engine/action_dispatcher.js
index 4ff31b2..b179dbf 100644
--- a/src/js/engine/action_dispatcher.js
+++ b/src/js/engine/action_dispatcher.js
@@ -289,6 +289,7 @@ export class ActionDispatcher {
const fullName = learner.name || 'User';
const firstName = learner.firstName || (learner.name ? learner.name.split(' ')[0] : 'User');
+ const lastName = learner.lastName || (learner.name ? learner.name.split(' ').slice(1).join(' ') : '');
let timestamp = new Date().toLocaleTimeString();
if (this.scenarioState && typeof this.scenarioState.getCurrentTime === 'function') {
@@ -300,6 +301,7 @@ export class ActionDispatcher {
return {
'learner.firstName': ActionDispatcher.escapeHtml(firstName),
+ 'learner.lastName': ActionDispatcher.escapeHtml(lastName),
'learner.name': ActionDispatcher.escapeHtml(fullName),
'learner.email': ActionDispatcher.escapeHtml(learner.email || 'user@example.com'),
'learner.role': ActionDispatcher.escapeHtml(learner.role || 'Employee'),
diff --git a/src/js/main.js b/src/js/main.js
index b236632..91a40fe 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -132,7 +132,10 @@ export class CyberSimEngine {
// Hide desktop shell during login
if (taskbarEl) taskbarEl.style.display = 'none';
- if (startMenuEl) startMenuEl.style.display = 'none';
+ if (startMenuEl) {
+ startMenuEl.classList.remove('open');
+ startMenuEl.style.display = '';
+ }
const login = new LoginScreen({
containerElement: desktopEl,
@@ -142,8 +145,13 @@ export class CyberSimEngine {
login.render();
}
- async launchScenario({ firstName, scenarioId, scenarioPath, locale }) {
+ async launchScenario({ firstName, lastName, name, scenarioId, scenarioPath, locale }) {
this.currentLearnerFirstName = firstName;
+ this.currentLearnerLastName = lastName;
+
+ const finalFirstName = firstName || 'User';
+ const finalLastName = lastName || '';
+ const finalFullName = name || (finalLastName ? `${finalFirstName} ${finalLastName}` : finalFirstName);
// Set active locale
await i18n.setLocale(locale || i18n.defaultLocale);
@@ -168,17 +176,13 @@ export class CyberSimEngine {
this.scenario._canonicalScenario = loadResult.scenario._canonicalScenario;
}
- // Personalize learner state with first name
+ // Personalize learner state with first and last name
if (!this.scenario.learner) {
- this.scenario.learner = { name: firstName, role: 'Employee', email: `${firstName.toLowerCase()}@example.internal` };
- }
- this.scenario.learner.firstName = firstName;
- // Personalize full name with entered first name
- if (this.scenario.learner.name) {
- const parts = this.scenario.learner.name.split(' ');
- const lastName = parts.length > 1 ? parts.slice(1).join(' ') : '';
- this.scenario.learner.name = lastName ? `${firstName} ${lastName}` : firstName;
+ this.scenario.learner = { name: finalFullName, role: 'Employee', email: `${finalFirstName.toLowerCase()}@example.internal` };
}
+ this.scenario.learner.firstName = finalFirstName;
+ this.scenario.learner.lastName = finalLastName;
+ this.scenario.learner.name = finalFullName;
// Validate schema
const schemaResult = validateSchema(this.scenario);
@@ -215,11 +219,14 @@ export class CyberSimEngine {
// Initialize UI
await this.initializeUI();
- // Show taskbar & start menu
+ // Show taskbar and ensure start menu starts closed
const taskbarEl = document.getElementById('taskbar');
const startMenuEl = document.getElementById('start-menu');
if (taskbarEl) taskbarEl.style.display = 'flex';
- if (startMenuEl) startMenuEl.style.display = 'flex';
+ if (startMenuEl) {
+ startMenuEl.classList.remove('open');
+ startMenuEl.style.display = '';
+ }
// Start event scheduler
const conditionEvaluator = new ConditionEvaluator(this.scenarioState);
diff --git a/src/locales/en.json b/src/locales/en.json
index 61c6aa1..39ffe80 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,12 +2,17 @@
"login.title": "CyberSim OS - Enterprise Workstation Login",
"login.subtitle": "Simulated Workplace Environment",
"login.welcome": "Welcome",
- "login.instructions": "Enter your first name and select an available network to begin your scheduled shift.",
+ "login.instructions": "Enter your first and last name and select an available network to begin your scheduled shift.",
"login.firstName": "First Name",
"login.firstNamePlaceholder": "e.g. Chris",
"login.firstNameRequired": "Please enter your first name.",
"login.firstNameTooLong": "First name must be 50 characters or less.",
+ "login.lastName": "Last Name",
+ "login.lastNamePlaceholder": "e.g. Morgan",
+ "login.lastNameRequired": "Please enter your last name.",
+ "login.lastNameTooLong": "Last name must be 50 characters or less.",
"login.language": "Language",
+ "login.verifyCertificate": "Verify Certificate",
"login.availableNetworks": "Available Networks & Workplaces",
"login.networkUnavailable": "Unavailable in selected language",
"login.selectNetwork": "Select a workplace network to connect",
diff --git a/src/locales/es.json b/src/locales/es.json
index 43ffa4c..d71d3e0 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -2,12 +2,17 @@
"login.title": "CyberSim OS - Inicio de Sesión de Estación de Trabajo",
"login.subtitle": "Entorno de Trabajo Simulado",
"login.welcome": "Bienvenido",
- "login.instructions": "Ingrese su nombre de pila y seleccione una red disponible para comenzar su turno programado.",
- "login.firstName": "Nombre de pila",
+ "login.instructions": "Ingrese su nombre y apellido y seleccione una red disponible para comenzar su turno programado.",
+ "login.firstName": "Nombre",
"login.firstNamePlaceholder": "ej. Carlos",
- "login.firstNameRequired": "Por favor, ingrese su nombre de pila.",
+ "login.firstNameRequired": "Por favor, ingrese su nombre.",
"login.firstNameTooLong": "El nombre debe tener 50 caracteres o menos.",
+ "login.lastName": "Apellido",
+ "login.lastNamePlaceholder": "ej. Morgan",
+ "login.lastNameRequired": "Por favor, ingrese su apellido.",
+ "login.lastNameTooLong": "El apellido debe tener 50 caracteres o menos.",
"login.language": "Idioma",
+ "login.verifyCertificate": "Verificar Certificado",
"login.availableNetworks": "Redes y Lugares de Trabajo Disponibles",
"login.networkUnavailable": "No disponible en el idioma seleccionado",
"login.selectNetwork": "Seleccione una red de trabajo para conectarse",
diff --git a/src/verify.html b/src/verify.html
index afd5715..4cd5af4 100644
--- a/src/verify.html
+++ b/src/verify.html
@@ -6,6 +6,7 @@
+
+
+
+
+
+
+
+
+
@@ -168,8 +196,12 @@ export class LoginScreen {
${i18n.t('login.disclaimer')}
-
- ${i18n.t('login.sessionInfo')}
+
+
${i18n.t('login.sessionInfo')}
+
+
+ ${i18n.t('login.verifyCertificate')}
+
✕ ${i18n.t('verify.invalidFormat')}
The file could not be parsed as a valid CyberSim credential: ${err.message}
`;
+ resultContainer.innerHTML = `
+
+ `;
}
}
@@ -171,27 +221,81 @@
if (res.valid) {
const d = res.certData;
- resultContainer.className = 'result-box valid';
- resultContainer.innerHTML = `
- ✓ ${i18n.t('verify.verifiedTitle')}
- ${i18n.t('verify.verifiedDesc')}
+ const companyName = d.learner?.assigned_organization || 'Enterprise Workplace';
-
- 
';
const mockScenario = {
- learner: { firstName: xssPayload, name: xssPayload },
+ learner: { firstName: xssPayload, lastName: xssPayload, name: xssPayload },
organizations: [{ name: 'NexaCore' }]
};
const dispatcher = new ActionDispatcher({ scenario: mockScenario });
${i18n.t('verify.learner')} ${d.learner.name}
- ${i18n.t('verify.role')} ${d.learner.assigned_role}
- ${i18n.t('verify.score')} ${d.evaluation.score} / ${d.evaluation.max_score} (${d.evaluation.passed ? i18n.t('verify.passed') : i18n.t('verify.failed')})
- ${i18n.t('verify.date')} ${new Date(d.issued_at).toLocaleDateString()}
- ${i18n.t('verify.scenario')} ${d.scenario_title}
- ${i18n.t('verify.certId')} ${d.certificate_id.substring(0, 16)}...
- ${i18n.t('verify.scenarioSha')} ${d.scenario_fingerprint}
- ${i18n.t('verify.integrityHash')} ${d.integrity_hash}
+ resultContainer.innerHTML = `
+
+
+
+
+
+
`;
+
+ const printBtn = resultContainer.querySelector('#btn-print-verified-cert');
+ if (printBtn) {
+ printBtn.addEventListener('click', () => window.print());
+ }
+
+ const resetBtn = resultContainer.querySelector('#btn-verify-another');
+ if (resetBtn) {
+ resetBtn.addEventListener('click', () => {
+ lastLoadedJson = null;
+ resultContainer.style.display = 'none';
+ resultContainer.innerHTML = '';
+ fileInput.value = '';
+ });
+ }
} else {
- resultContainer.className = 'result-box invalid';
resultContainer.innerHTML = `
-
+
+ ${companyName} • ${i18n.t('cert.environment')}
+ ${i18n.t('cert.competencyTitle')}
+ ${i18n.t('cert.subtitle')}
+
+ ${i18n.t('cert.certifiesThat')}
+ ${d.learner.name}
+
+
+ ${i18n.t('cert.statement', { scenarioTitle: `${d.scenario_title}` })}
+
+
+
+ ${i18n.t('cert.finalScore', { score: d.evaluation.score })}
+
+
+
+ ✕ ${i18n.t('verify.failedTitle')}
- ${res.error || 'Integrity check failed.'}
+
`;
}
}
diff --git a/tests/run_tests.js b/tests/run_tests.js
index 11eb834..28ae9ab 100644
--- a/tests/run_tests.js
+++ b/tests/run_tests.js
@@ -90,6 +90,16 @@ async function runAllTests() {
assert(res.includes('NexaCore'));
});
+ await test('Default embedded English catalog contains all cert.* keys without missing labels', async () => {
+ const rawI18n = new I18nService({ defaultLocale: 'en' });
+ const certTitle = rawI18n.t('cert.title');
+ const compTitle = rawI18n.t('cert.competencyTitle');
+ const env = rawI18n.t('cert.environment');
+ assert(!certTitle.startsWith('[missing:'));
+ assert(!compTitle.startsWith('[missing:'));
+ assert(!env.startsWith('[missing:'));
+ });
+
console.log('\n--- 2. Corporate Branding Tests ---');
const customConfig = {
organization: {
@@ -117,25 +127,26 @@ async function runAllTests() {
});
console.log('\n--- 3. Personalization & Safe Template Interpolation Tests ---');
- await test('ActionDispatcher resolves {{learner.firstName}} and {{learner.name}}', async () => {
+ await test('ActionDispatcher resolves {{learner.firstName}}, {{learner.lastName}}, and {{learner.name}}', async () => {
const mockScenario = {
- learner: { firstName: 'Alex', name: 'Alex Rivera', role: 'Specialist' },
+ learner: { firstName: 'Chris', lastName: 'Morgan', name: 'Chris Morgan', role: 'Specialist' },
organizations: [{ name: 'NexaCore' }]
};
const dispatcher = new ActionDispatcher({ scenario: mockScenario });
const ctx = dispatcher._buildInterpolationContext();
- assert.equal(ctx['learner.firstName'], 'Alex');
- assert.equal(ctx['learner.name'], 'Alex Rivera');
+ assert.equal(ctx['learner.firstName'], 'Chris');
+ assert.equal(ctx['learner.lastName'], 'Morgan');
+ assert.equal(ctx['learner.name'], 'Chris Morgan');
- const tmpl = 'Hello {{learner.firstName}}, your full name is {{learner.name}}.';
+ const tmpl = 'Hello {{learner.firstName}} {{learner.lastName}}, full: {{learner.name}}.';
const interpolated = dispatcher.interpolate(tmpl, ctx);
- assert.equal(interpolated, 'Hello Alex, your full name is Alex Rivera.');
+ assert.equal(interpolated, 'Hello Chris Morgan, full: Chris Morgan.');
});
- await test('Malicious HTML entered as first name is escaped harmlessly', async () => {
+ await test('Malicious HTML entered as first/last name is escaped harmlessly', async () => {
const xssPayload = '