safely escape settings strings

src/UI/Settings/UITabAbout.js

@@ -96,7 +96,7 @@ export default {
         puter.os.version()
         .then(res => {
             const deployed_date = new Date(res.deploy_timestamp).toLocaleString();
-            $el_window.find('.version').html(`Version: ${html_encode(res.version)} • Server: ${html_encode(res.location)} • Deployed: ${deployed_date}`);
+            $el_window.find('.version').html(`Version: ${html_encode(res.version)} • Server: ${html_encode(res.location)} • Deployed: ${html_encode(deployed_date)}`);
         })
         .catch(error => {
             console.error("Failed to fetch server info:", error);

src/UI/Settings/UITabAccount.js

@@ -44,7 +44,7 @@ export default {
         h += `<div class="settings-card">`;
             h += `<div>`;
                 h += `<strong style="display:block;">${i18n('username')}</strong>`;
-                h += `<span class="username" style="display:block; margin-top:5px;">${user.username}</span>`;
+                h += `<span class="username" style="display:block; margin-top:5px;">${html_encode(user.username)}</span>`;
             h += `</div>`;
             h += `<div style="flex-grow:1;">`;
                 h += `<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
@@ -56,7 +56,7 @@ export default {
             h += `<div class="settings-card">`;
                 h += `<div>`;
                     h += `<strong style="display:block;">${i18n('email')}</strong>`;
-                    h += `<span class="user-email" style="display:block; margin-top:5px;">${user.email}</span>`;
+                    h += `<span class="user-email" style="display:block; margin-top:5px;">${html_encode(user.email)}</span>`;
                 h += `</div>`;
                 h += `<div style="flex-grow:1;">`;
                     h += `<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`;
@@ -104,7 +104,6 @@ export default {
         });
 
         $el_window.find('.change-email').on('click', function (e) {
-            console.log('change email', $el_window.attr('data-element_uuid'));
             UIWindowChangeEmail({
                 window_options:{
                     parent_uuid: $el_window.attr('data-element_uuid'),

src/UI/Settings/UITabLanguage.js

@@ -35,7 +35,7 @@ export default {
         const available_languages = listSupportedLanguages();
         h += `<div class="language-list">`;
             for (let lang of available_languages) {
-                h += `<div class="language-item ${window.locale === lang.code ? 'active': ''}" data-lang="${lang.code}" data-english-name="${html_encode(lang.english_name)}">${lang.name}</div>`;
+                h += `<div class="language-item ${window.locale === lang.code ? 'active': ''}" data-lang="${lang.code}" data-english-name="${html_encode(lang.english_name)}">${html_encode(lang.name)}</div>`;
             }
         h += `</div>`;
         return h;

src/UI/Settings/UITabUsage.js

@@ -67,7 +67,7 @@ export default {
                         usage_percentage = usage_percentage > 100 ? 100 : usage_percentage; // Cap at 100%
                         usageDisplay = `
                             <div class="driver-usage" style="margin-bottom: 10px;">
-                                <h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
+                                <h3 style="margin-bottom: 5px; font-size: 14px;">${html_encode(service.service['driver.interface'])} (${html_encode(service.service['driver.method'])}):</h3>
                                 <span style="font-size: 13px; margin-bottom: 3px;">${monthly_usage} used of ${monthly_limit}</span>
                                 <div class="usage-progbar-wrapper" style="width: 100%;">
                                     <div class="usage-progbar" style="width: ${usage_percentage}%;"><span class="usage-progbar-percent">${usage_percentage}%</span></div>
@@ -78,7 +78,7 @@ export default {
                     else {
                         usageDisplay = `
                             <div class="driver-usage" style="margin-bottom: 10px;">
-                                <h3 style="margin-bottom: 5px; font-size: 14px;">${service.service['driver.interface']} (${service.service['driver.method']}):</h3>
+                                <h3 style="margin-bottom: 5px; font-size: 14px;">${html_encode(service.service['driver.interface'])} (${html_encode(service.service['driver.method'])}):</h3>
                                 <span style="font-size: 13px; margin-bottom: 3px;">${i18n('usage')}: ${monthly_usage} (${i18n('unlimited')})</span>
                             </div>
                         `;