github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-23 14:20:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Nariman Jelveh 2024-06-24 18:00:03 -07:00
parent 8e105715f1
commit c4cb830258
43 changed files with 690 additions and 681 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/UI/Settings/UITabAccount.js
View File

@ -32,45 +32,45 @@ export default {
// change password button // change password button
if(!window.user.is_temp){ if(!window.user.is_temp){
h += `<div class="settings-card">`; h += H`<div class="settings-card">`;
h += `<strong>${i18n('password')}</strong>`; h += H`<strong>${i18n('password')}</strong>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`; h += H`<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
// change username button // change username button
h += `<div class="settings-card">`; h += H`<div class="settings-card">`;
h += `<div>`; h += H`<div>`;
h += `<strong style="display:block;">${i18n('username')}</strong>`; h += H`<strong style="display:block;">${i18n('username')}</strong>`;
h += `<span class="username" style="display:block; margin-top:5px;">${html_encode(window.user.username)}</span>`; h += H`<span class="username" style="display:block; margin-top:5px;">${html_encode(window.user.username)}</span>`;
h += `</div>`; h += H`</div>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`; h += H`<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
h += `</div>` h += H`</div>`
h += `</div>`; h += H`</div>`;
// change email button // change email button
if(window.user.email){ if(window.user.email){
h += `<div class="settings-card">`; h += H`<div class="settings-card">`;
h += `<div>`; h += H`<div>`;
h += `<strong style="display:block;">${i18n('email')}</strong>`; h += H`<strong style="display:block;">${i18n('email')}</strong>`;
h += `<span class="user-email" style="display:block; margin-top:5px;">${html_encode(window.user.email)}</span>`; h += H`<span class="user-email" style="display:block; margin-top:5px;">${html_encode(window.user.email)}</span>`;
h += `</div>`; h += H`</div>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`; h += H`<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
// 'Delete Account' button // 'Delete Account' button
h += `<div class="settings-card settings-card-danger">`; h += H`<div class="settings-card settings-card-danger">`;
h += `<strong style="display: inline-block;">${i18n("delete_account")}</strong>`; h += H`<strong style="display: inline-block;">${i18n("delete_account")}</strong>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button button-danger delete-account" style="float:right;">${i18n("delete_account")}</button>`; h += H`<button class="button button-danger delete-account" style="float:right;">${i18n("delete_account")}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
return h; return h;
}, },

8
src/UI/Settings/UITabLanguage.js
View File

@ -27,17 +27,17 @@ export default {
let h = `<h1>${i18n('language')}</h1>`; let h = `<h1>${i18n('language')}</h1>`;
// search // search
h += `<div class="search-container" style="margin-bottom: 10px;"> h += H`<div class="search-container" style="margin-bottom: 10px;">
<input type="text" class="search search-language" placeholder="Search"> <input type="text" class="search search-language" placeholder="Search">
</div>`; </div>`;
// list of languages // list of languages
const available_languages = window.listSupportedLanguages(); const available_languages = window.listSupportedLanguages();
h += `<div class="language-list">`; h += H`<div class="language-list">`;
for (let lang of available_languages) { 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)}">${html_encode(lang.name)}</div>`; h += 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>`; h += H`</div>`;
return h; return h;
}, },
init: ($el_window) => { init: ($el_window) => {

44
src/UI/Settings/UITabSecurity.js
View File

@ -18,36 +18,36 @@ export default {
// change password button // change password button
if(!user.is_temp){ if(!user.is_temp){
h += `<div class="settings-card">`; h += H`<div class="settings-card">`;
h += `<strong>${i18n('password')}</strong>`; h += H`<strong>${i18n('password')}</strong>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`; h += H`<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
// session manager // session manager
h += `<div class="settings-card">`; h += H`<div class="settings-card">`;
h += `<strong>${i18n('sessions')}</strong>`; h += H`<strong>${i18n('sessions')}</strong>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button manage-sessions" style="float:right;">${i18n('manage_sessions')}</button>`; h += H`<button class="button manage-sessions" style="float:right;">${i18n('manage_sessions')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
// configure 2FA // configure 2FA
if(!user.is_temp){ if(!user.is_temp){
h += `<div class="settings-card settings-card-security ${user.otp ? 'settings-card-success' : 'settings-card-warning'}">`; h += H`<div class="settings-card settings-card-security ${user.otp ? 'settings-card-success' : 'settings-card-warning'}">`;
h += `<div>`; h += H`<div>`;
h += `<strong style="display:block;">${i18n('two_factor')}</strong>`; h += H`<strong style="display:block;">${i18n('two_factor')}</strong>`;
h += `<span class="user-otp-state" style="display:block; margin-top:5px;">${ h += H`<span class="user-otp-state" style="display:block; margin-top:5px;">${
i18n(user.otp ? 'two_factor_enabled' : 'two_factor_disabled') i18n(user.otp ? 'two_factor_enabled' : 'two_factor_disabled')
}</span>`; }</span>`;
h += `</div>`; h += H`</div>`;
h += `<div style="flex-grow:1;">`; h += H`<div style="flex-grow:1;">`;
h += `<button class="button enable-2fa" style="float:right;${user.otp ? 'display:none;' : ''}">${i18n('enable_2fa')}</button>`; h += H`<button class="button enable-2fa" style="float:right;${user.otp ? 'display:none;' : ''}">${i18n('enable_2fa')}</button>`;
h += `<button class="button disable-2fa" style="float:right;${user.otp ? '' : 'display:none;'}">${i18n('disable_2fa')}</button>`; h += H`<button class="button disable-2fa" style="float:right;${user.otp ? '' : 'display:none;'}">${i18n('disable_2fa')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
return h; return h;

26
src/UI/Settings/UIWindowChangeEmail.js
View File

@ -31,25 +31,25 @@ async function UIWindowChangeEmail(options){
const internal_id = window.uuidv4(); const internal_id = window.uuidv4();
let h = ''; let h = '';
h += `<div class="change-email" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div class="change-email" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
// error msg // error msg
h += `<div class="form-error-msg"></div>`; h += H`<div class="form-error-msg"></div>`;
// success msg // success msg
h += `<div class="form-success-msg"></div>`; h += H`<div class="form-success-msg"></div>`;
// new email // new email
h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`; h += H`<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
h += `<label for="confirm-new-email-${internal_id}">${i18n('new_email')}</label>`; h += H`<label for="confirm-new-email-${internal_id}">${i18n('new_email')}</label>`;
h += `<input id="confirm-new-email-${internal_id}" type="text" name="new-email" class="new-email" autocomplete="off" />`; h += H`<input id="confirm-new-email-${internal_id}" type="text" name="new-email" class="new-email" autocomplete="off" />`;
h += `</div>`; h += H`</div>`;
// password confirmation // password confirmation
h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`; h += H`<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
h += `<label>${i18n('account_password')}</label>`; h += H`<label>${i18n('account_password')}</label>`;
h += `${place_password_entry.html}`; h += H`${place_password_entry.html}`;
h += `</div>`; h += H`</div>`;
// Change Email // Change Email
h += `<button class="change-email-btn button button-primary button-block button-normal">${i18n('change_email')}</button>`; h += H`<button class="change-email-btn button button-primary button-block button-normal">${i18n('change_email')}</button>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: i18n('change_email'), title: i18n('change_email'),

14
src/UI/Settings/UIWindowConfirmUserDeletion.js
View File

@ -25,13 +25,13 @@ async function UIWindowConfirmUserDeletion(options){
options = options ?? {}; options = options ?? {};
let h = ''; let h = '';
h += `<div style="padding: 20px;">`; h += H`<div style="padding: 20px;">`;
h += `<div class="generic-close-window-button disable-user-select"> &times; </div>`; h += H`<div class="generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`; h += H`<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
h += `<p class="account-deletion-confirmation-prompt">${i18n('confirm_delete_user')}</p>`; h += H`<p class="account-deletion-confirmation-prompt">${i18n('confirm_delete_user')}</p>`;
h += `<button class="button button-block button-danger proceed-with-user-deletion">${i18n('proceed_with_account_deletion')}</button>`; h += H`<button class="button button-block button-danger proceed-with-user-deletion">${i18n('proceed_with_account_deletion')}</button>`;
h += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`; h += H`<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: i18n('confirm_delete_user_title'), title: i18n('confirm_delete_user_title'),

36
src/UI/Settings/UIWindowFinalizeUserDeletion.js
View File

@ -27,31 +27,31 @@ async function UIWindowFinalizeUserDeletion(options){
// if user is temporary, ask them to type in 'confirm' to delete their account // if user is temporary, ask them to type in 'confirm' to delete their account
if(window.user.is_temp){ if(window.user.is_temp){
h += `<div style="padding: 20px;">`; h += H`<div style="padding: 20px;">`;
h += `<div class="generic-close-window-button disable-user-select"> &times; </div>`; h += H`<div class="generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`; h += H`<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
h += `<p class="account-deletion-confirmation-prompt">${i18n('type_confirm_to_delete_account')}</p>`; h += H`<p class="account-deletion-confirmation-prompt">${i18n('type_confirm_to_delete_account')}</p>`;
// error message // error message
h += `<div class="error-message"></div>`; h += H`<div class="error-message"></div>`;
// input field // input field
h += `<input type="text" class="confirm-temporary-user-deletion" placeholder="${i18n('type_confirm_to_delete_account')}">`; h += H`<input type="text" class="confirm-temporary-user-deletion" placeholder="${i18n('type_confirm_to_delete_account')}">`;
h += `<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`; h += H`<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`;
h += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`; h += H`<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
h += `</div>`; h += H`</div>`;
} }
// otherwise ask for password // otherwise ask for password
else{ else{
h += `<div style="padding: 20px;">`; h += H`<div style="padding: 20px;">`;
h += `<div class="generic-close-window-button disable-user-select"> &times; </div>`; h += H`<div class="generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`; h += H`<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
h += `<p class="account-deletion-confirmation-prompt">${i18n('enter_password_to_confirm_delete_user')}</p>`; h += H`<p class="account-deletion-confirmation-prompt">${i18n('enter_password_to_confirm_delete_user')}</p>`;
// error message // error message
h += `<div class="error-message"></div>`; h += H`<div class="error-message"></div>`;
// input field // input field
h += `<input type="password" class="confirm-user-deletion-password" placeholder="${i18n('current_password')}">`; h += H`<input type="password" class="confirm-user-deletion-password" placeholder="${i18n('current_password')}">`;
h += `<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`; h += H`<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`;
h += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`; h += H`<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
h += `</div>`; h += H`</div>`;
} }
const el_window = await UIWindow({ const el_window = await UIWindow({

24
src/UI/Settings/UIWindowSettings.js
View File

@ -31,34 +31,34 @@ async function UIWindowSettings(options){
let h = ''; let h = '';
h += `<div class="settings-container">`; h += H`<div class="settings-container">`;
h += `<div class="settings">`; h += H`<div class="settings">`;
// side bar // side bar
h += `<div class="settings-sidebar disable-user-select disable-context-menu">`; h += H`<div class="settings-sidebar disable-user-select disable-context-menu">`;
tabs.forEach((tab, i) => { tabs.forEach((tab, i) => {
h += `<div class="settings-sidebar-item disable-context-menu disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${window.icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`; h += H`<div class="settings-sidebar-item disable-context-menu disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${window.icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
}); });
h += `</div>`; h += H`</div>`;
// content // content
h += `<div class="settings-content-container">`; h += H`<div class="settings-content-container">`;
tabs.forEach((tab, i) => { tabs.forEach((tab, i) => {
h += `<div class="settings-content ${i === 0 ? 'active' : ''}" data-settings="${tab.id}">`; h += H`<div class="settings-content ${i === 0 ? 'active' : ''}" data-settings="${tab.id}">`;
if ( tab.factory ) { if ( tab.factory ) {
tab_placeholders[i] = Placeholder(); tab_placeholders[i] = Placeholder();
h += tab_placeholders[i].html; h += tab_placeholders[i].html;
} else { } else {
h += tab.html(); h += tab.html();
} }
h += `</div>`; h += H`</div>`;
}); });
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += ``; h += H``;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Settings', title: 'Settings',

38
src/UI/UIAlert.js
View File

@ -46,30 +46,20 @@ function UIAlert(options){
if(options.type === 'success') if(options.type === 'success')
options.body_icon = window.icons['c-check.svg']; options.body_icon = window.icons['c-check.svg'];
let santized_message = html_encode(options.message);
// replace sanitized <strong> with <strong>
santized_message = santized_message.replace(/&lt;strong&gt;/g, '<strong>');
santized_message = santized_message.replace(/&lt;\/strong&gt;/g, '</strong>');
// replace sanitized <p> with <p>
santized_message = santized_message.replace(/&lt;p&gt;/g, '<p>');
santized_message = santized_message.replace(/&lt;\/p&gt;/g, '</p>');
let h = ''; let h = '';
// icon // icon
h += H`<img class="window-alert-icon" src="${html_encode(options.body_icon)}">`; h += H`<img class="window-alert-icon" src="${(options.body_icon)}">`;
// message // message. It's later sanitized and added to the window
h += H`<div class="window-alert-message">${santized_message}</div>`; h += H`<div class="window-alert-message"></div>`;
// buttons // buttons
if(options.buttons && options.buttons.length > 0){ if(options.buttons && options.buttons.length > 0){
h += H`<div style="overflow:hidden; margin-top:20px;">`; h += H`<div style="overflow:hidden; margin-top:20px;">`;
for(let y=0; y<options.buttons.length; y++){ for(let y=0; y<options.buttons.length; y++){
h += H`<button class="button button-block button-${html_encode(options.buttons[y].type)} alert-resp-button" h += H`<button class="button button-block button-${(options.buttons[y].type)} alert-resp-button"
data-label="${html_encode(options.buttons[y].label)}" data-label="${(options.buttons[y].label)}"
data-value="${html_encode(options.buttons[y].value ?? options.buttons[y].label)}" data-value="${(options.buttons[y].value ?? options.buttons[y].label)}"
${options.buttons[y].type === 'primary' ? 'autofocus' : ''} ${options.buttons[y].type === 'primary' ? 'autofocus' : ''}
>${html_encode(options.buttons[y].label)}</button>`; >${(options.buttons[y].label)}</button>`;
} }
h += H`</div>`; h += H`</div>`;
} }
@ -96,6 +86,20 @@ function UIAlert(options){
width: 350, width: 350,
parent_uuid: options.parent_uuid, parent_uuid: options.parent_uuid,
...options.window_options, ...options.window_options,
onAppend: function(el_window){
let santized_message = html_encode(options.message);
// replace sanitized <strong> with <strong>
santized_message = santized_message.replace(/&lt;strong&gt;/g, '<strong>');
santized_message = santized_message.replace(/&lt;\/strong&gt;/g, '</strong>');
// replace sanitized <p> with <p>
santized_message = santized_message.replace(/&lt;p&gt;/g, '<p>');
santized_message = santized_message.replace(/&lt;\/p&gt;/g, '</p>');
// set message
$(el_window).find('.window-alert-message').html(options.message);
},
window_css:{ window_css:{
height: 'initial', height: 'initial',
}, },

34
src/UI/UIContextMenu.js
View File

@ -351,7 +351,7 @@ function UIContextMenu(options){
const menu_id = window.global_element_id++; const menu_id = window.global_element_id++;
let h = ''; let h = '';
h += `<div h += H`<div
id="context-menu-${menu_id}" id="context-menu-${menu_id}"
data-is-submenu="${options.is_submenu ? 'true' : 'false'}" data-is-submenu="${options.is_submenu ? 'true' : 'false'}"
data-element-id="${menu_id}" data-element-id="${menu_id}"
@ -366,46 +366,46 @@ function UIContextMenu(options){
if(!options.items[i].is_divider && options.items[i] !== '-'){ if(!options.items[i].is_divider && options.items[i] !== '-'){
// single item // single item
if(options.items[i].items === undefined){ if(options.items[i].items === undefined){
h += `<li data-action="${i}" h += H`<li data-action="${i}"
class="context-menu-item ${options.items[i].disabled ? ' context-menu-item-disabled' : ''}" class="context-menu-item ${options.items[i].disabled ? ' context-menu-item-disabled' : ''}"
>`; >`;
// icon // icon
if(options.items[i].checked === true){ if(options.items[i].checked === true){
h += `<span class="context-menu-item-icon">✓</span>`; h += H`<span class="context-menu-item-icon">✓</span>`;
h += `<span class="context-menu-item-icon-active">✓</span>`; h += H`<span class="context-menu-item-icon-active">✓</span>`;
}else{ }else{
h += `<span class="context-menu-item-icon">${options.items[i].icon ?? ''}</span>`; h += H`<span class="context-menu-item-icon">${options.items[i].icon ?? ''}</span>`;
h += `<span class="context-menu-item-icon-active">${options.items[i].icon_active ?? (options.items[i].icon ?? '')}</span>`; h += H`<span class="context-menu-item-icon-active">${options.items[i].icon_active ?? (options.items[i].icon ?? '')}</span>`;
} }
// label // label
h += `<span class="contextmenu-label">${options.items[i].html}</span>`; h += H`<span class="contextmenu-label">${options.items[i].html}</span>`;
h += `<span class="contextmenu-label-active">${options.items[i].html_active ?? options.items[i].html}</span>`; h += H`<span class="contextmenu-label-active">${options.items[i].html_active ?? options.items[i].html}</span>`;
h += `</li>`; h += H`</li>`;
} }
// submenu // submenu
else{ else{
h += `<li data-action="${i}" h += H`<li data-action="${i}"
data-menu-id="${menu_id}-${i}" data-menu-id="${menu_id}-${i}"
data-has-submenu="true" data-has-submenu="true"
data-parent-element-id="${menu_id}" data-parent-element-id="${menu_id}"
class="context-menu-item-submenu context-menu-item${options.items[i].disabled ? ' context-menu-item-disabled' : ''}" class="context-menu-item-submenu context-menu-item${options.items[i].disabled ? ' context-menu-item-disabled' : ''}"
>`; >`;
// icon // icon
h += `<span class="context-menu-item-icon">${options.items[i].icon ?? ''}</span>`; h += H`<span class="context-menu-item-icon">${options.items[i].icon ?? ''}</span>`;
h += `<span class="context-menu-item-icon-active">${options.items[i].icon_active ?? (options.items[i].icon ?? '')}</span>`; h += H`<span class="context-menu-item-icon-active">${options.items[i].icon_active ?? (options.items[i].icon ?? '')}</span>`;
// label // label
h += `${html_encode(options.items[i].html)}`; h += H`${options.items[i].html}`;
// arrow // arrow
h += `<img class="submenu-arrow" src="${html_encode(window.icons['chevron-right.svg'])}"><img class="submenu-arrow submenu-arrow-active" src="${html_encode(window.icons['chevron-right-active.svg'])}">`; h += H`<img class="submenu-arrow" src="${window.icons['chevron-right.svg']}"><img class="submenu-arrow submenu-arrow-active" src="${window.icons['chevron-right-active.svg']}">`;
h += `</li>`; h += H`</li>`;
} }
} }
// divider // divider
else if(options.items[i].is_divider || options.items[i] === '-') else if(options.items[i].is_divider || options.items[i] === '-')
h += `<li class="context-menu-divider"><hr></li>`; h += H`<li class="context-menu-divider"><hr></li>`;
} }
h += `</div>` h += H`</div>`
$('body').append(h) $('body').append(h)
const contextMenu = document.getElementById(`context-menu-${menu_id}`); const contextMenu = document.getElementById(`context-menu-${menu_id}`);

10
src/UI/UIDesktop.js
View File

@ -534,24 +534,24 @@ async function UIDesktop(options){
}); });
// Hidden file dialog // Hidden file dialog
h += `<form name="upload-form" id="upload-form" style="display:hidden;"> h += H`<form name="upload-form" id="upload-form" style="display:hidden;">
<input type="hidden" name="name" id="upload-filename" value=""> <input type="hidden" name="name" id="upload-filename" value="">
<input type="hidden" name="path" id="upload-target-path" value=""> <input type="hidden" name="path" id="upload-target-path" value="">
<input type="file" name="file" id="upload-file-dialog" style="display: none;" multiple="multiple"> <input type="file" name="file" id="upload-file-dialog" style="display: none;" multiple="multiple">
</form>`; </form>`;
h += `<div class="window-container"></div>`; h += H`<div class="window-container"></div>`;
// Desktop // Desktop
// If desktop is not in fullpage/embedded mode, we hide it until files and directories are loaded and then fade in the UI // If desktop is not in fullpage/embedded mode, we hide it until files and directories are loaded and then fade in the UI
// This gives a calm and smooth experience for the user // This gives a calm and smooth experience for the user
h += `<div class="desktop item-container disable-user-select" h += H`<div class="desktop item-container disable-user-select"
data-uid="${options.desktop_fsentry.uid}" data-uid="${options.desktop_fsentry.uid}"
data-sort_by="${!options.desktop_fsentry.sort_by ? 'name' : options.desktop_fsentry.sort_by}" data-sort_by="${!options.desktop_fsentry.sort_by ? 'name' : options.desktop_fsentry.sort_by}"
data-sort_order="${!options.desktop_fsentry.sort_order ? 'asc' : options.desktop_fsentry.sort_order}" data-sort_order="${!options.desktop_fsentry.sort_order ? 'asc' : options.desktop_fsentry.sort_order}"
data-path="${html_encode(window.desktop_path)}" data-path="${html_encode(window.desktop_path)}"
>`; >`;
h += `</div>`; h += H`</div>`;
// Get window sidebar width // Get window sidebar width
puter.kv.get('window_sidebar_width').then(async (val) => { puter.kv.get('window_sidebar_width').then(async (val) => {
@ -1006,7 +1006,7 @@ async function UIDesktop(options){
// user options menu // user options menu
ht += `<div class="toolbar-btn user-options-menu-btn" style="background-image:url(${window.icons['profile.svg']})">`; ht += `<div class="toolbar-btn user-options-menu-btn" style="background-image:url(${window.icons['profile.svg']})">`;
h += `<span class="user-options-menu-username">${window.user.username}</span>`; h += H`<span class="user-options-menu-username">${window.user.username}</span>`;
ht += `</div>`; ht += `</div>`;
ht += `</div>`; ht += `</div>`;

5
src/UI/UIItem.js
View File

@ -73,7 +73,6 @@ function UIItem(options){
// -------------------------------------------------------- // --------------------------------------------------------
// HTML for Item // HTML for Item
// -------------------------------------------------------- // --------------------------------------------------------
console.log('options', options)
let h = ''; let h = '';
h += H`<div id="item-${item_id}" h += H`<div id="item-${item_id}"
class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}" class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}"
@ -163,7 +162,7 @@ function UIItem(options){
h += H`</div>`; h += H`</div>`;
// name // name
h += H`<span class="item-name" data-item-id="${item_id}" title="${(options.name)}"></span>` h += H`<span class="item-name" data-item-id="${item_id}" title="${(options.name)}">${options.is_trash ? i18n('trash') : (truncate_filename(options.name))}</span>`
// name editor // name editor
h += H`<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${(options.name)}</textarea>` h += H`<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${(options.name)}</textarea>`
h += H`</div>`; h += H`</div>`;
@ -181,8 +180,6 @@ function UIItem(options){
const el_item_icon = document.querySelector(`#item-${item_id} .item-icon`); const el_item_icon = document.querySelector(`#item-${item_id} .item-icon`);
const el_item_name_editor = document.querySelector(`#item-${item_id} > .item-name-editor`); const el_item_name_editor = document.querySelector(`#item-${item_id} > .item-name-editor`);
const is_trashed = $(el_item).attr('data-path').startsWith(window.trash_path + '/'); const is_trashed = $(el_item).attr('data-path').startsWith(window.trash_path + '/');
// set the item name
$(el_item_name).html(options.is_trash ? i18n('trash') : (truncate_filename(options.name)).replaceAll(' ', '&nbsp;'));
// update parent window's explorer item count if applicable // update parent window's explorer item count if applicable
if(options.appendTo !== undefined){ if(options.appendTo !== undefined){

20
src/UI/UINotification.js
View File

@ -22,16 +22,16 @@ function UINotification(options){
options.text = options.text ?? ''; options.text = options.text ?? '';
let h = ''; let h = '';
h += `<div id="ui-notification__${window.global_element_id}" data-el-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`; h += H`<div id="ui-notification__${window.global_element_id}" data-el-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
h += `<img class="notification-close disable-user-select" src="${html_encode(window.icons['close.svg'])}">`; h += H`<img class="notification-close disable-user-select" src="${window.icons['close.svg']}">`;
h += `<div class="notification-icon">`; h += H`<div class="notification-icon">`;
h += `<img src="${html_encode(options.icon ?? window.icons['bell.svg'])}">`; h += H`<img src="${options.icon ?? window.icons['bell.svg']}">`;
h += `</div>`; h += H`</div>`;
h += `<div class="notification-content">`; h += H`<div class="notification-content">`;
h += `<div class="notification-title">${html_encode(options.title)}</div>`; h += H`<div class="notification-title">${options.title}</div>`;
h += `<div class="notification-text">${html_encode(options.text)}</div>`; h += H`<div class="notification-text">${options.text}</div>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
$('.notification-container').prepend(h); $('.notification-container').prepend(h);

4
src/UI/UIPopover.js
View File

@ -30,9 +30,9 @@ function UIPopover(options){
options.content = options.content ?? ''; options.content = options.content ?? '';
let h = ''; let h = '';
h += `<div id="popover-${window.global_element_id}" class="popover">`; h += H`<div id="popover-${window.global_element_id}" class="popover">`;
h += options.content; h += options.content;
h += `</div>`; h += H`</div>`;
$('body').append(h); $('body').append(h);

16
src/UI/UIPrompt.js
View File

@ -44,17 +44,17 @@ function UIPrompt(options){
let h = ''; let h = '';
// message // message
h += `<div class="window-prompt-message">${options.message}</div>`; h += H`<div class="window-prompt-message">${options.message}</div>`;
// prompt // prompt
h += `<div class="window-alert-prompt" style="margin-top: 20px;">`; h += H`<div class="window-alert-prompt" style="margin-top: 20px;">`;
h += `<input type="text" class="prompt-input" placeholder="${options.placeholder ?? ''}" value="${options.value ?? ''}">`; h += H`<input type="text" class="prompt-input" placeholder="${options.placeholder ?? ''}" value="${options.value ?? ''}">`;
h += `</div>`; h += H`</div>`;
// buttons // buttons
if(options.buttons && options.buttons.length > 0){ if(options.buttons && options.buttons.length > 0){
h += `<div style="overflow:hidden; margin-top:20px; float:right;">`; h += H`<div style="overflow:hidden; margin-top:20px; float:right;">`;
h += `<button class="button button-default prompt-resp-button prompt-resp-btn-cancel" data-label="${i18n('cancel')}" style="padding: 0 20px;">${i18n('cancel')}</button>`; h += H`<button class="button button-default prompt-resp-button prompt-resp-btn-cancel" data-label="${i18n('cancel')}" style="padding: 0 20px;">${i18n('cancel')}</button>`;
h += `<button class="button button-primary prompt-resp-button prompt-resp-btn-ok" data-label="${i18n('ok')}" data-value="true" autofocus>${i18n('ok')}</button>`; h += H`<button class="button button-primary prompt-resp-button prompt-resp-btn-ok" data-label="${i18n('ok')}" data-value="true" autofocus>${i18n('ok')}</button>`;
h += `</div>`; h += H`</div>`;
} }
const el_window = await UIWindow({ const el_window = await UIWindow({

2
src/UI/UITaskbar.js
View File

@ -42,7 +42,7 @@ async function UITaskbar(options){
}); });
let h = ''; let h = '';
h += `<div id="ui-taskbar_${window.global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;"><span id='clock'></span></div>`; h += H`<div id="ui-taskbar_${window.global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;"><span id='clock'></span></div>`;
$('.desktop').append(h); $('.desktop').append(h);

26
src/UI/UITaskbarItem.js
View File

@ -32,30 +32,30 @@ function UITaskbarItem(options){
options.append_to_taskbar = options.append_to_taskbar ?? true; options.append_to_taskbar = options.append_to_taskbar ?? true;
const element_id = window.global_element_id++; const element_id = window.global_element_id++;
h += `<div class = "taskbar-item ${options.sortable ? 'taskbar-item-sortable' : ''} disable-user-select" h += H`<div class = "taskbar-item ${options.sortable ? 'taskbar-item-sortable' : ''} disable-user-select"
id = "taskbar-item-${tray_item_id}" id = "taskbar-item-${tray_item_id}"
data-taskbar-item-id = "${tray_item_id}" data-taskbar-item-id = "${tray_item_id}"
data-element-id = "${html_encode(element_id)}" data-element-id = "${element_id}"
data-name = "${html_encode(options.name)}" data-name = "${options.name}"
data-app = "${html_encode(options.app)}" data-app = "${options.app}"
data-keep-in-taskbar = "${html_encode(options.keep_in_taskbar ?? 'false')}" data-keep-in-taskbar = "${options.keep_in_taskbar ?? 'false'}"
data-open-windows="${(options.open_windows_count)}" data-open-windows="${options.open_windows_count}"
title = "${html_encode(options.name)}" title = "${options.name}"
style= "${options.style ? html_encode(options.style) : ''}" style= "${options.style ? options.style : ''}"
>`; >`;
let icon = options.icon ? options.icon : window.icons['app.svg']; let icon = options.icon ? options.icon : window.icons['app.svg'];
if(options.app === 'explorer') if(options.app === 'explorer')
icon = window.icons['folders.svg']; icon = window.icons['folders.svg'];
// taskbar icon // taskbar icon
h += `<div class="taskbar-icon">`; h += H`<div class="taskbar-icon">`;
h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`; h += H`<img src="${icon}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
h += `</div>`; h += H`</div>`;
// active indicator // active indicator
if(options.app !== 'apps') if(options.app !== 'apps')
h += `<span class="active-taskbar-indicator"></span>`; h += H`<span class="active-taskbar-indicator"></span>`;
h += `</div>`; h += H`</div>`;
if(options.append_to_taskbar) if(options.append_to_taskbar)
$('.taskbar').append(h); $('.taskbar').append(h);

198
src/UI/UIWindow.js
View File

@ -185,28 +185,28 @@ async function UIWindow(options) {
if(user_set_url_params.length > 0) if(user_set_url_params.length > 0)
user_set_url_params = '?'+ user_set_url_params.join('&'); user_set_url_params = '?'+ user_set_url_params.join('&');
} }
h += `<div class="window window-active h += H`<div class="window window-active
${options.cover_page ? 'window-cover-page' : ''} ${options.cover_page ? 'window-cover-page' : ''}
${options.uid !== undefined ? 'window-'+options.uid : ''} ${options.uid !== undefined ? 'window-'+options.uid : ''}
${options.window_class} ${options.window_class}
${options.allow_user_select ? ' allow-user-select' : ''} ${options.allow_user_select ? ' allow-user-select' : ''}
${options.is_openFileDialog || options.is_saveFileDialog || options.is_directoryPicker ? 'window-filedialog' : ''}" ${options.is_openFileDialog || options.is_saveFileDialog || options.is_directoryPicker ? 'window-filedialog' : ''}"
id="window-${win_id}" id="window-${win_id}"
data-allowed_file_types = "${html_encode(options.allowed_file_types)}" data-allowed_file_types = "${(options.allowed_file_types)}"
data-app="${html_encode(options.app)}" data-app="${(options.app)}"
data-app_uuid="${html_encode(options.app_uuid ?? '')}" data-app_uuid="${(options.app_uuid ?? '')}"
data-disable_parent_window = "${html_encode(options.disable_parent_window)}" data-disable_parent_window = "${(options.disable_parent_window)}"
data-name="${html_encode(options.title)}" data-name="${(options.title)}"
data-path ="${html_encode(options.path)}" data-path ="${(options.path)}"
data-uid ="${html_encode(options.uid)}" data-uid ="${(options.uid)}"
data-element_uuid="${html_encode(options.element_uuid)}" data-element_uuid="${(options.element_uuid)}"
data-parent_uuid="${html_encode(options.parent_uuid)}" data-parent_uuid="${(options.parent_uuid)}"
${options.parent_instance_id ? `data-parent_instance_id="${options.parent_instance_id}"` : ''} ${options.parent_instance_id ? `data-parent_instance_id="${options.parent_instance_id}"` : ''}
data-id ="${win_id}" data-id ="${win_id}"
data-iframe_msg_uid ="${html_encode(options.iframe_msg_uid)}" data-iframe_msg_uid ="${(options.iframe_msg_uid)}"
data-is_dir ="${options.is_dir}" data-is_dir ="${options.is_dir}"
data-return_to_parent_window = "${options.return_to_parent_window}" data-return_to_parent_window = "${options.return_to_parent_window}"
data-initiating_app_uuid = "${html_encode(options.initiating_app_uuid)}" data-initiating_app_uuid = "${(options.initiating_app_uuid)}"
data-is_openFileDialog ="${options.is_openFileDialog}" data-is_openFileDialog ="${options.is_openFileDialog}"
data-is_saveFileDialog ="${options.is_saveFileDialog}" data-is_saveFileDialog ="${options.is_saveFileDialog}"
data-is_directoryPicker ="${options.is_directoryPicker}" data-is_directoryPicker ="${options.is_directoryPicker}"
@ -219,93 +219,93 @@ async function UIWindow(options) {
data-sort_order ="${options.sort_order ?? 'asc'}" data-sort_order ="${options.sort_order ?? 'asc'}"
data-multiselectable = "${options.selectable_body}" data-multiselectable = "${options.selectable_body}"
data-update_window_url = "${options.update_window_url}" data-update_window_url = "${options.update_window_url}"
data-user_set_url_params = "${html_encode(user_set_url_params)}" data-user_set_url_params = "${(user_set_url_params)}"
data-initial_zindex = "${zindex}" data-initial_zindex = "${zindex}"
style=" z-index: ${zindex}; style=" z-index: ${zindex};
${options.width !== undefined ? 'width: ' + html_encode(options.width) +'; ':''} ${options.width !== undefined ? 'width: ' + (options.width) +'; ':''}
${options.height !== undefined ? 'height: ' + html_encode(options.height) +'; ':''} ${options.height !== undefined ? 'height: ' + (options.height) +'; ':''}
${options.border_radius !== undefined ? 'border-radius: ' + html_encode(options.border_radius) +'; ':''} ${options.border_radius !== undefined ? 'border-radius: ' + (options.border_radius) +'; ':''}
" "
>`; >`;
// window mask // window mask
h += `<div class="window-disable-mask">`; h += H`<div class="window-disable-mask">`;
//busy indicator //busy indicator
h += `<div class="busy-indicator">BUSY</div>`; h += H`<div class="busy-indicator">BUSY</div>`;
h += `</div>`; h += H`</div>`;
// Head // Head
if(options.has_head){ if(options.has_head){
h += `<div class="window-head">`; h += H`<div class="window-head">`;
// draggable handle which also contains icon and title // draggable handle which also contains icon and title
h+=`<div class="window-head-draggable">`; h+=`<div class="window-head-draggable">`;
// icon // icon
if(options.icon) if(options.icon)
h += `<img class="window-head-icon" />`; h += H`<img class="window-head-icon" />`;
// title // title
h += `<span class="window-head-title" title="${html_encode(options.title)}"></span>`; h += H`<span class="window-head-title" title="${(options.title)}"></span>`;
h += `</div>`; h += H`</div>`;
// Minimize button, only if window is resizable and not embedded // Minimize button, only if window is resizable and not embedded
if(options.is_resizable && options.show_minimize_button && !window.is_embedded) if(options.is_resizable && options.show_minimize_button && !window.is_embedded)
h += `<span class="window-action-btn window-minimize-btn" style="margin-left:0;"><img src="${html_encode(window.icons['minimize.svg'])}" draggable="false"></span>`; h += H`<span class="window-action-btn window-minimize-btn" style="margin-left:0;"><img src="${(window.icons['minimize.svg'])}" draggable="false"></span>`;
// Maximize button // Maximize button
if(options.is_resizable && options.show_maximize_button) if(options.is_resizable && options.show_maximize_button)
h += `<span class="window-action-btn window-scale-btn"><img src="${html_encode(window.icons['scale.svg'])}" draggable="false"></span>`; h += H`<span class="window-action-btn window-scale-btn"><img src="${(window.icons['scale.svg'])}" draggable="false"></span>`;
// Close button // Close button
h += `<span class="window-action-btn window-close-btn"><img src="${html_encode(window.icons['close.svg'])}" draggable="false"></span>`; h += H`<span class="window-action-btn window-close-btn"><img src="${(window.icons['close.svg'])}" draggable="false"></span>`;
h += `</div>`; h += H`</div>`;
} }
// Sidebar // Sidebar
if(options.is_dir && !isMobile.phone){ if(options.is_dir && !isMobile.phone){
h += `<div class="window-sidebar disable-user-select hide-scrollbar" h += H`<div class="window-sidebar disable-user-select hide-scrollbar"
style="${window.window_sidebar_width ? 'width: ' + html_encode(window.window_sidebar_width) + 'px !important;' : ''}" style="${window.window_sidebar_width ? 'width: ' + (window.window_sidebar_width) + 'px !important;' : ''}"
draggable="false" draggable="false"
>`; >`;
// favorites // favorites
h += `<h2 class="window-sidebar-title disable-user-select">Favorites</h2>`; h += H`<h2 class="window-sidebar-title disable-user-select">Favorites</h2>`;
h += `<div draggable="false" title="Home" class="window-sidebar-item disable-user-select ${options.path === window.home_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.home_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-home.svg'])}">Home</div>`; h += H`<div draggable="false" title="Home" class="window-sidebar-item disable-user-select ${options.path === window.home_path ? 'window-sidebar-item-active' : ''}" data-path="${(window.home_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${(window.icons['folder-home.svg'])}">Home</div>`;
h += `<div draggable="false" title="Documents" class="window-sidebar-item disable-user-select ${options.path === window.docs_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.docs_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-documents.svg'])}">Documents</div>`; h += H`<div draggable="false" title="Documents" class="window-sidebar-item disable-user-select ${options.path === window.docs_path ? 'window-sidebar-item-active' : ''}" data-path="${(window.docs_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${(window.icons['folder-documents.svg'])}">Documents</div>`;
h += `<div draggable="false" title="Public" class="window-sidebar-item disable-user-select ${options.path === window.public_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.public_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-public.svg'])}">Public</div>`; h += H`<div draggable="false" title="Public" class="window-sidebar-item disable-user-select ${options.path === window.public_path ? 'window-sidebar-item-active' : ''}" data-path="${(window.public_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${(window.icons['folder-public.svg'])}">Public</div>`;
h += `<div draggable="false" title="Pictures" class="window-sidebar-item disable-user-select ${options.path === window.pictures_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.pictures_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-pictures.svg'])}">Pictures</div>`; h += H`<div draggable="false" title="Pictures" class="window-sidebar-item disable-user-select ${options.path === window.pictures_path ? 'window-sidebar-item-active' : ''}" data-path="${(window.pictures_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${(window.icons['folder-pictures.svg'])}">Pictures</div>`;
h += `<div draggable="false" title="Desktop" class="window-sidebar-item disable-user-select ${options.path === window.desktop_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.desktop_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-desktop.svg'])}">Desktop</div>`; h += H`<div draggable="false" title="Desktop" class="window-sidebar-item disable-user-select ${options.path === window.desktop_path ? 'window-sidebar-item-active' : ''}" data-path="${(window.desktop_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${(window.icons['folder-desktop.svg'])}">Desktop</div>`;
h += `<div draggable="false" title="Videos" class="window-sidebar-item disable-user-select ${options.path === window.videos_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.videos_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-videos.svg'])}">Videos</div>`; h += H`<div draggable="false" title="Videos" class="window-sidebar-item disable-user-select ${options.path === window.videos_path ? 'window-sidebar-item-active' : ''}" data-path="${(window.videos_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${(window.icons['folder-videos.svg'])}">Videos</div>`;
h += `</div>`; h += H`</div>`;
} }
// Menubar // Menubar
if(window.menubar_style === 'window'){ if(window.menubar_style === 'window'){
h += `<div class="window-menubar" data-window-id="${win_id}"></div>`; h += H`<div class="window-menubar" data-window-id="${win_id}"></div>`;
}else if(window.menubar_style === 'desktop'){ }else if(window.menubar_style === 'desktop'){
$('.toolbar-puter-logo').after(`<div class="window-menubar window-menubar-global" data-window-id="${win_id}"></div>`); $('.toolbar-puter-logo').after(`<div class="window-menubar window-menubar-global" data-window-id="${win_id}"></div>`);
} }
// Navbar // Navbar
if(options.is_dir){ if(options.is_dir){
h += `<div class="window-navbar">`; h += H`<div class="window-navbar">`;
h += `<div style="float:left; margin-left:5px; margin-right:5px;">`; h += H`<div style="float:left; margin-left:5px; margin-right:5px;">`;
// Back // Back
h += `<img draggable="false" class="window-navbar-btn window-navbar-btn-back window-navbar-btn-disabled" src="${html_encode(window.icons['arrow-left.svg'])}" title="Click to go back.">`; h += H`<img draggable="false" class="window-navbar-btn window-navbar-btn-back window-navbar-btn-disabled" src="${(window.icons['arrow-left.svg'])}" title="Click to go back.">`;
// Forward // Forward
h += `<img draggable="false" class="window-navbar-btn window-navbar-btn-forward window-navbar-btn-disabled" src="${html_encode(window.icons['arrow-right.svg'])}" title="Click to go forward.">`; h += H`<img draggable="false" class="window-navbar-btn window-navbar-btn-forward window-navbar-btn-disabled" src="${(window.icons['arrow-right.svg'])}" title="Click to go forward.">`;
// Up // Up
h += `<img draggable="false" class="window-navbar-btn window-navbar-btn-up ${options.path === '/' ? 'window-navbar-btn-disabled' : ''}" src="${html_encode(window.icons['arrow-up.svg'])}" title="Click to go one directory up.">`; h += H`<img draggable="false" class="window-navbar-btn window-navbar-btn-up ${options.path === '/' ? 'window-navbar-btn-disabled' : ''}" src="${(window.icons['arrow-up.svg'])}" title="Click to go one directory up.">`;
h += `</div>`; h += H`</div>`;
// Path // Path
h += `<div class="window-navbar-path">${window.navbar_path(options.path, window.user.username)}</div>`; h += H`<div class="window-navbar-path">${window.navbar_path(options.path, window.user.username)}</div>`;
// Path editor // Path editor
h += `<input class="window-navbar-path-input" data-path="${html_encode(options.path)}" value="${html_encode(options.path)}" spellcheck="false"/>`; h += H`<input class="window-navbar-path-input" data-path="${(options.path)}" value="${(options.path)}" spellcheck="false"/>`;
// Layout settings // Layout settings
h += `<img class="window-navbar-layout-settings" src="${html_encode(options.layout === 'icons' ? window.icons['layout-icons.svg'] : window.icons['layout-list.svg'])}" draggable="false">`; h += H`<img class="window-navbar-layout-settings" src="${(options.layout === 'icons' ? window.icons['layout-icons.svg'] : window.icons['layout-list.svg'])}" draggable="false">`;
h += `</div>`; h += H`</div>`;
} }
// Body // Body
h += `<div h += H`<div
class="window-body${options.is_dir ? ' item-container' : ''}${options.iframe_url !== undefined || options.iframe_srcdoc !== undefined ? ' window-body-app' : ''}${options.is_saveFileDialog || options.is_openFileDialog || options.is_directoryPicker ? ' window-body-filedialog' : ''}" class="window-body${options.is_dir ? ' item-container' : ''}${options.iframe_url !== undefined || options.iframe_srcdoc !== undefined ? ' window-body-app' : ''}${options.is_saveFileDialog || options.is_openFileDialog || options.is_directoryPicker ? ' window-body-filedialog' : ''}"
data-allowed_file_types="${html_encode(options.allowed_file_types)}" data-allowed_file_types="${(options.allowed_file_types)}"
data-path="${html_encode(options.path)}" data-path="${(options.path)}"
data-multiselectable = "${options.selectable_body}" data-multiselectable = "${options.selectable_body}"
data-sort_by ="${options.sort_by ?? 'name'}" data-sort_by ="${options.sort_by ?? 'name'}"
data-sort_order ="${options.sort_order ?? 'asc'}" data-sort_order ="${options.sort_order ?? 'asc'}"
@ -317,12 +317,12 @@ async function UIWindow(options) {
// <iframe> // <iframe>
// Important: we don't allow allow-same-origin when iframe_srcdoc is used because this would allow the iframe to access the parent window's DOM, localStorage, etc. // Important: we don't allow allow-same-origin when iframe_srcdoc is used because this would allow the iframe to access the parent window's DOM, localStorage, etc.
// this is a security risk and must be avoided. // this is a security risk and must be avoided.
h += `<iframe tabindex="-1" h += H`<iframe tabindex="-1"
data-app="${html_encode(options.app)}" data-app="${(options.app)}"
class="window-app-iframe" class="window-app-iframe"
frameborder="0" frameborder="0"
${options.iframe_url ? 'src="'+ html_encode(options.iframe_url)+'"' : ''} ${options.iframe_url ? 'src="'+ (options.iframe_url)+'"' : ''}
${options.iframe_srcdoc ? 'srcdoc="'+ html_encode(options.iframe_srcdoc) +'"' : ''} ${options.iframe_srcdoc ? 'srcdoc="'+ (options.iframe_srcdoc) +'"' : ''}
allow = "accelerometer; camera; encrypted-media; gamepad; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; fullscreen;" allow = "accelerometer; camera; encrypted-media; gamepad; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; fullscreen;"
allowtransparency="true" allowtransparency="true"
allowpaymentrequest="true" allowpaymentrequest="true"
@ -355,7 +355,7 @@ async function UIWindow(options) {
if ( components.length === 2 && components[1] === 'Public' ) { if ( components.length === 2 && components[1] === 'Public' ) {
const username = components[0]; const username = components[0];
h += `<iframe h += H`<iframe
style="display:block;width:100%" style="display:block;width:100%"
tabindex="-1" tabindex="-1"
frameborder="0" frameborder="0"
@ -367,62 +367,62 @@ async function UIWindow(options) {
})(); })();
// Add 'This folder is empty' message by default // Add 'This folder is empty' message by default
h += `<div class="explorer-empty-message">This folder is empty</div>`; h += H`<div class="explorer-empty-message">This folder is empty</div>`;
h += `<div class="explorer-error-message">Error message is missing</div>`; h += H`<div class="explorer-error-message">Error message is missing</div>`;
// Loading spinner // Loading spinner
h += `<div class="explorer-loading-spinner">`; h += H`<div class="explorer-loading-spinner">`;
h +=`<svg style="display:block; margin: 0 auto; " xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`; h +=`<svg style="display:block; margin: 0 auto; " xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
h += `<p class="explorer-loading-spinner-msg">${i18n('loading')}...</p>`; h += H`<p class="explorer-loading-spinner-msg">${i18n('loading')}...</p>`;
h += `</div>`; h += H`</div>`;
} }
h += `</div>`; h += H`</div>`;
// Explorer footer // Explorer footer
if(options.is_dir && !options.is_saveFileDialog && !options.is_openFileDialog && !options.is_directoryPicker){ if(options.is_dir && !options.is_saveFileDialog && !options.is_openFileDialog && !options.is_directoryPicker){
h += `<div class="explorer-footer">` h += H`<div class="explorer-footer">`
h += `<span class="explorer-footer-item-count"></span>`; h += H`<span class="explorer-footer-item-count"></span>`;
h += `<span class="explorer-footer-seperator">|</span>`; h += H`<span class="explorer-footer-seperator">|</span>`;
h += `<span class="explorer-footer-selected-items-count"></span>`; h += H`<span class="explorer-footer-selected-items-count"></span>`;
h += `</div>`; h += H`</div>`;
} }
// is_saveFileDialog // is_saveFileDialog
if(options.is_saveFileDialog){ if(options.is_saveFileDialog){
h += `<div class="window-filedialog-prompt">`; h += H`<div class="window-filedialog-prompt">`;
h += `<div style="display:flex;">`; h += H`<div style="display:flex;">`;
h += `<input type="text" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${html_encode(options.saveFileDialog_default_filename) ?? ''}">`; h += H`<input type="text" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${(options.saveFileDialog_default_filename) ?? ''}">`;
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`; h += H`<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
h += `<button class="button `; h += H`<button class="button `;
if(options.saveFileDialog_default_filename === undefined || options.saveFileDialog_default_filename === '') if(options.saveFileDialog_default_filename === undefined || options.saveFileDialog_default_filename === '')
h+= `disabled `; h+= `disabled `;
h += `button-small button-primary savefiledialog-save-btn">Save</button>`; h += H`button-small button-primary savefiledialog-save-btn">Save</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
// is_openFileDialog // is_openFileDialog
else if(options.is_openFileDialog){ else if(options.is_openFileDialog){
h += `<div class="window-filedialog-prompt">`; h += H`<div class="window-filedialog-prompt">`;
h += `<div style="text-align:right;">`; h += H`<div style="text-align:right;">`;
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`; h += H`<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
h += `<button class="button disabled button-small button-primary openfiledialog-open-btn">Open</button>`; h += H`<button class="button disabled button-small button-primary openfiledialog-open-btn">Open</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
// is_directoryPicker // is_directoryPicker
else if(options.is_directoryPicker){ else if(options.is_directoryPicker){
h += `<div class="window-filedialog-prompt">`; h += H`<div class="window-filedialog-prompt">`;
h += `<div style="text-align:right;">`; h += H`<div style="text-align:right;">`;
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`; h += H`<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
h += `<button class="button button-small button-primary directorypicker-select-btn" style="margin-left:10px;">Select</button>`; h += H`<button class="button button-small button-primary directorypicker-select-btn" style="margin-left:10px;">Select</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
} }
h += `</div>`; h += H`</div>`;
// backdrop // backdrop
if(options.backdrop){ if(options.backdrop){
@ -1039,18 +1039,18 @@ async function UIWindow(options) {
puter.fs.readdir('/').then(function(shared_users){ puter.fs.readdir('/').then(function(shared_users){
let ht = ''; let ht = '';
if(shared_users && shared_users.length - 1 > 0){ if(shared_users && shared_users.length - 1 > 0){
ht += `<h2 class="window-sidebar-title disable-user-select">Shared with me</h2>`; ht += H`<h2 class="window-sidebar-title disable-user-select">Shared with me</h2>`;
for (let index = 0; index < shared_users.length; index++) { for (let index = 0; index < shared_users.length; index++) {
const shared_user = shared_users[index]; const shared_user = shared_users[index];
// don't show current user's folder! // don't show current user's folder!
if(shared_user.name === window.user.username) if(shared_user.name === window.user.username)
continue; continue;
ht += `<div class="window-sidebar-item disable-user-select ${options.path === shared_user.path ? 'window-sidebar-item-active' : ''}" ht += H`<div class="window-sidebar-item disable-user-select ${options.path === shared_user.path ? 'window-sidebar-item-active' : ''}"
data-path="${shared_user.path}" data-path="${shared_user.path}"
data-sharing-username="${html_encode(shared_user.name)}" data-sharing-username="${(shared_user.name)}"
title="${html_encode(shared_user.name)}" title="${(shared_user.name)}"
data-is_shared="1"> data-is_shared="1">
<img class="window-sidebar-item-icon" src="${html_encode(window.icons['shared-outline.svg'])}">${shared_user.name} <img class="window-sidebar-item-icon" src="${(window.icons['shared-outline.svg'])}">${shared_user.name}
</div>`; </div>`;
} }
} }
@ -3239,12 +3239,12 @@ window.set_sort_by = function(item_uid, sort_by, sort_order){
window.explore_table_headers = function(){ window.explore_table_headers = function(){
let h = ``; let h = ``;
h += `<div class="explore-table-headers">`; h += H`<div class="explore-table-headers">`;
h += `<div class="explore-table-headers-th explore-table-headers-th--name">Name<span class="header-sort-icon"></span></div>`; h += H`<div class="explore-table-headers-th explore-table-headers-th--name">Name<span class="header-sort-icon"></span></div>`;
h += `<div class="explore-table-headers-th explore-table-headers-th--modified">Modified<span class="header-sort-icon"></span></div>`; h += H`<div class="explore-table-headers-th explore-table-headers-th--modified">Modified<span class="header-sort-icon"></span></div>`;
h += `<div class="explore-table-headers-th explore-table-headers-th--size">Size<span class="header-sort-icon"></span></div>`; h += H`<div class="explore-table-headers-th explore-table-headers-th--size">Size<span class="header-sort-icon"></span></div>`;
h += `<div class="explore-table-headers-th explore-table-headers-th--type">Type<span class="header-sort-icon"></span></div>`; h += H`<div class="explore-table-headers-th explore-table-headers-th--type">Type<span class="header-sort-icon"></span></div>`;
h += `</div>`; h += H`</div>`;
return h; return h;
} }

34
src/UI/UIWindowChangePassword.js
View File

@ -25,30 +25,30 @@ async function UIWindowChangePassword(options){
const internal_id = window.uuidv4(); const internal_id = window.uuidv4();
let h = ''; let h = '';
h += `<div class="change-password" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div class="change-password" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
// error msg // error msg
h += `<div class="form-error-msg"></div>`; h += H`<div class="form-error-msg"></div>`;
// success msg // success msg
h += `<div class="form-success-msg"></div>`; h += H`<div class="form-success-msg"></div>`;
// current password // current password
h += `<div style="overflow: hidden; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-bottom: 20px;">`;
h += `<label for="current-password-${internal_id}">${i18n('current_password')}</label>`; h += H`<label for="current-password-${internal_id}">${i18n('current_password')}</label>`;
h += `<input id="current-password-${internal_id}" class="current-password" type="password" name="current-password" autocomplete="current-password" />`; h += H`<input id="current-password-${internal_id}" class="current-password" type="password" name="current-password" autocomplete="current-password" />`;
h += `</div>`; h += H`</div>`;
// new password // new password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
h += `<label for="new-password-${internal_id}">${i18n('new_password')}</label>`; h += H`<label for="new-password-${internal_id}">${i18n('new_password')}</label>`;
h += `<input id="new-password-${internal_id}" type="password" class="new-password" name="new-password" autocomplete="off" />`; h += H`<input id="new-password-${internal_id}" type="password" class="new-password" name="new-password" autocomplete="off" />`;
h += `</div>`; h += H`</div>`;
// confirm new password // confirm new password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
h += `<label for="confirm-new-password-${internal_id}">${i18n('confirm_new_password')}</label>`; h += H`<label for="confirm-new-password-${internal_id}">${i18n('confirm_new_password')}</label>`;
h += `<input id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" class="confirm-new-password" autocomplete="off" />`; h += H`<input id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" class="confirm-new-password" autocomplete="off" />`;
h += `</div>`; h += H`</div>`;
// Change Password // Change Password
h += `<button class="change-password-btn button button-primary button-block button-normal">${i18n('change_password')}</button>`; h += H`<button class="change-password-btn button button-primary button-block button-normal">${i18n('change_password')}</button>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Change Password', title: 'Change Password',

18
src/UI/UIWindowChangeUsername.js
View File

@ -25,20 +25,20 @@ async function UIWindowChangeUsername(options){
const internal_id = window.uuidv4(); const internal_id = window.uuidv4();
let h = ''; let h = '';
h += `<div class="change-username" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div class="change-username" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
// error msg // error msg
h += `<div class="form-error-msg"></div>`; h += H`<div class="form-error-msg"></div>`;
// success msg // success msg
h += `<div class="form-success-msg"></div>`; h += H`<div class="form-success-msg"></div>`;
// new username // new username
h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`; h += H`<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
h += `<label for="confirm-new-username-${internal_id}">${i18n('new_username')}</label>`; h += H`<label for="confirm-new-username-${internal_id}">${i18n('new_username')}</label>`;
h += `<input id="confirm-new-username-${internal_id}" type="text" name="new-username" class="new-username" autocomplete="off" />`; h += H`<input id="confirm-new-username-${internal_id}" type="text" name="new-username" class="new-username" autocomplete="off" />`;
h += `</div>`; h += H`</div>`;
// Change Username // Change Username
h += `<button class="change-username-btn button button-primary button-block button-normal">${i18n('change_username')}</button>`; h += H`<button class="change-username-btn button button-primary button-block button-normal">${i18n('change_username')}</button>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: i18n('change_username'), title: i18n('change_username'),

14
src/UI/UIWindowClaimReferral.js
View File

@ -23,13 +23,13 @@ import UIWindowSaveAccount from './UIWindowSaveAccount.js';
async function UIWindowClaimReferral(options){ async function UIWindowClaimReferral(options){
let h = ''; let h = '';
h += `<div>`; h += H`<div>`;
h += `<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> &times; </div>`; h += H`<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`; h += H`<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
h += `<h1 style="font-weight: 400; padding: 0 10px; font-size: 21px; text-align: center; margin-bottom: 0; color: #60626d; -webkit-font-smoothing: antialiased;">${i18n('you_have_been_referred_to_puter_by_a_friend')}</h1>`; h += H`<h1 style="font-weight: 400; padding: 0 10px; font-size: 21px; text-align: center; margin-bottom: 0; color: #60626d; -webkit-font-smoothing: antialiased;">${i18n('you_have_been_referred_to_puter_by_a_friend')}</h1>`;
h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 0px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('confirm_account_for_free_referral_storage_c2a')}</p>`; h += H`<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 0px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('confirm_account_for_free_referral_storage_c2a')}</p>`;
h += `<button class="button button-primary button-block create-account-ref-btn" style="display: block;">${i18n('create_account')}</button>`; h += H`<button class="button button-primary button-block create-account-ref-btn" style="display: block;">${i18n('create_account')}</button>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: `Refer a friend!`, title: `Refer a friend!`,

18
src/UI/UIWindowColorPicker.js
View File

@ -34,18 +34,18 @@ async function UIWindowColorPicker(options){
let colorPicker; let colorPicker;
let h = ``; let h = ``;
h += `<div>`; h += H`<div>`;
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`; h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
// picker // picker
h += `<div style="padding: 0; margin-bottom: 20px;">`; h += H`<div style="padding: 0; margin-bottom: 20px;">`;
h += `<div class="picker"></div>`; h += H`<div class="picker"></div>`;
h += `</div>`; h += H`</div>`;
// Select button // Select button
h += `<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>` h += H`<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>`
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: i18n('select_color'), title: i18n('select_color'),

74
src/UI/UIWindowDesktopBGSettings.js
View File

@ -29,54 +29,54 @@ async function UIWindowDesktopBGSettings(options){
bg_color = window.desktop_bg_color, bg_color = window.desktop_bg_color,
bg_fit = window.desktop_bg_fit; bg_fit = window.desktop_bg_fit;
h += `<div style="padding: 10px; border-bottom: 1px solid #ced7e1;">`; h += H`<div style="padding: 10px; border-bottom: 1px solid #ced7e1;">`;
// type // type
h += `<label>${i18n('background')}:</label>`; h += H`<label>${i18n('background')}:</label>`;
h += `<select class="desktop-bg-type" style="width: 150px; margin-bottom: 20px;">` h += H`<select class="desktop-bg-type" style="width: 150px; margin-bottom: 20px;">`
h += `<option value="default">${i18n('default')}</option>`; h += H`<option value="default">${i18n('default')}</option>`;
h += `<option value="picture">${i18n('picture')}</option>`; h += H`<option value="picture">${i18n('picture')}</option>`;
h += `<option value="color">${i18n('color')}</option>`; h += H`<option value="color">${i18n('color')}</option>`;
h += `</select>`; h += H`</select>`;
// Picture // Picture
h += `<div class="desktop-bg-settings-wrapper desktop-bg-settings-picture">`; h += H`<div class="desktop-bg-settings-wrapper desktop-bg-settings-picture">`;
h += `<label>${i18n('image')}:</label>`; h += H`<label>${i18n('image')}:</label>`;
h += `<button class="button button-default button-small browse">${i18n('browse')}</button>`; h += H`<button class="button button-default button-small browse">${i18n('browse')}</button>`;
h += `<label style="margin-top: 20px;">${i18n('fit')}:</label>`; h += H`<label style="margin-top: 20px;">${i18n('fit')}:</label>`;
h += `<select class="desktop-bg-fit" style="width: 150px;">` h += H`<select class="desktop-bg-fit" style="width: 150px;">`
h += `<option value="cover">${i18n('cover')}</option>`; h += H`<option value="cover">${i18n('cover')}</option>`;
h += `<option value="center">${i18n('center')}</option>`; h += H`<option value="center">${i18n('center')}</option>`;
h += `<option value="contain">${i18n('contain')}</option>`; h += H`<option value="contain">${i18n('contain')}</option>`;
h += `<option value="repeat">${i18n('repeat')}</option>`; h += H`<option value="repeat">${i18n('repeat')}</option>`;
h += `</select>`; h += H`</select>`;
h += `</div>` h += H`</div>`
// Color // Color
h += `<div class="desktop-bg-settings-wrapper desktop-bg-settings-color">`; h += H`<div class="desktop-bg-settings-wrapper desktop-bg-settings-color">`;
h += `<label>${i18n('color')}:</label>`; h += H`<label>${i18n('color')}:</label>`;
h += `<div class="desktop-bg-color-blocks">`; h += H`<div class="desktop-bg-color-blocks">`;
h += `<div class="desktop-bg-color-block" data-color="#4F7BB5" style="background-color: #4F7BB5"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#4F7BB5" style="background-color: #4F7BB5"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#545554" style="background-color: #545554"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#545554" style="background-color: #545554"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#F5D3CE" style="background-color: #F5D3CE"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#F5D3CE" style="background-color: #F5D3CE"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#52A758" style="background-color: #52A758"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#52A758" style="background-color: #52A758"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#ad3983" style="background-color: #ad3983"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#ad3983" style="background-color: #ad3983"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#ffffff" style="background-color: #ffffff"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#ffffff" style="background-color: #ffffff"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#000000" style="background-color: #000000"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#000000" style="background-color: #000000"></div>`;
h += `<div class="desktop-bg-color-block" data-color="#454545" style="background-color: #454545"></div>`; h += H`<div class="desktop-bg-color-block" data-color="#454545" style="background-color: #454545"></div>`;
h += `<div class="desktop-bg-color-block desktop-bg-color-block-palette" data-color="" style="background-image: url(${window.icons['palette.svg']}); h += H`<div class="desktop-bg-color-block desktop-bg-color-block-palette" data-color="" style="background-image: url(${window.icons['palette.svg']});
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center;"><input type="color" style="width:25px; height: 25px; opacity:0;"></div>`; background-position: center;"><input type="color" style="width:25px; height: 25px; opacity:0;"></div>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += `<div style="padding-top: 5px; overflow:hidden; margin-top: 25px; border-top: 1px solid #CCC;">` h += H`<div style="padding-top: 5px; overflow:hidden; margin-top: 25px; border-top: 1px solid #CCC;">`
h += `<button class="button button-primary apply" style="float:right;">${i18n('apply')}</button>`; h += H`<button class="button button-primary apply" style="float:right;">${i18n('apply')}</button>`;
h += `<button class="button button-default cancel" style="float:right; margin-right: 10px;">${i18n('cancel')}</button>`; h += H`<button class="button button-default cancel" style="float:right; margin-right: 10px;">${i18n('cancel')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: i18n('change_desktop_background'), title: i18n('change_desktop_background'),

32
src/UI/UIWindowEmailConfirmationRequired.js
View File

@ -29,14 +29,14 @@ function UIWindowEmailConfirmationRequired(options){
const submit_btn_txt = 'Confirm Email'; const submit_btn_txt = 'Confirm Email';
let h = ''; let h = '';
h += `<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>`; h += H`<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>`;
h += `<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`; h += H`<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`;
h += `<img src="${html_encode(window.icons['mail.svg'])}" style="display:block; margin:10px auto 10px;">`; h += H`<img src="${html_encode(window.icons['mail.svg'])}" style="display:block; margin:10px auto 10px;">`;
h += `<h3 style="text-align:center; font-weight: 500; font-size: 20px;">Confirm Your Email Address</h3>`; h += H`<h3 style="text-align:center; font-weight: 500; font-size: 20px;">Confirm Your Email Address</h3>`;
h += `<form>`; h += H`<form>`;
h += `<p style="text-align:center; padding: 0 20px;">To continue, please enter the 6-digit confirmation code sent to <strong style="font-weight: 500;">${window.user.email}</strong></p>`; h += H`<p style="text-align:center; padding: 0 20px;">To continue, please enter the 6-digit confirmation code sent to <strong style="font-weight: 500;">${window.user.email}</strong></p>`;
h += `<div class="error"></div>`; h += H`<div class="error"></div>`;
h += ` <fieldset name="number-code" style="border: none; padding:0;" data-number-code-form> h += H` <fieldset name="number-code" style="border: none; padding:0;" data-number-code-form>
<input class="digit-input" type="number" min='0' max='9' name='number-code-0' data-number-code-input='0' required /> <input class="digit-input" type="number" min='0' max='9' name='number-code-0' data-number-code-input='0' required />
<input class="digit-input" type="number" min='0' max='9' name='number-code-1' data-number-code-input='1' required /> <input class="digit-input" type="number" min='0' max='9' name='number-code-1' data-number-code-input='1' required />
<input class="digit-input" type="number" min='0' max='9' name='number-code-2' data-number-code-input='2' required /> <input class="digit-input" type="number" min='0' max='9' name='number-code-2' data-number-code-input='2' required />
@ -45,16 +45,16 @@ function UIWindowEmailConfirmationRequired(options){
<input class="digit-input" type="number" min='0' max='9' name='number-code-4' data-number-code-input='4' required /> <input class="digit-input" type="number" min='0' max='9' name='number-code-4' data-number-code-input='4' required />
<input class="digit-input" type="number" min='0' max='9' name='number-code-5' data-number-code-input='5' required /> <input class="digit-input" type="number" min='0' max='9' name='number-code-5' data-number-code-input='5' required />
</fieldset>`; </fieldset>`;
h += `<button type="submit" class="button button-block button-primary email-confirm-btn" style="margin-top:10px;" disabled>${submit_btn_txt}</button>`; h += H`<button type="submit" class="button button-block button-primary email-confirm-btn" style="margin-top:10px;" disabled>${submit_btn_txt}</button>`;
h += `</form>`; h += H`</form>`;
h += `<div style="text-align:center; padding:10px; font-size:14px; margin-top:10px;">`; h += H`<div style="text-align:center; padding:10px; font-size:14px; margin-top:10px;">`;
h += `<span class="send-conf-email">${i18n('resend_confirmation_code')}</span>`; h += H`<span class="send-conf-email">${i18n('resend_confirmation_code')}</span>`;
if(options.logout_in_footer){ if(options.logout_in_footer){
h += ` &bull; `; h += H` &bull; `;
h += `<span class="conf-email-log-out">${i18n('log_out')}</span>`; h += H`<span class="conf-email-log-out">${i18n('log_out')}</span>`;
} }
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: null, title: null,

20
src/UI/UIWindowFeedback.js
View File

@ -32,19 +32,19 @@ async function UIWindowQR(options){
} }
let h = ''; let h = '';
h += `<div style="padding: 20px; margin-top: 0;">`; h += H`<div style="padding: 20px; margin-top: 0;">`;
// success // success
h += `<div class="feedback-sent-success">`; h += H`<div class="feedback-sent-success">`;
h += `<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`; h += H`<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`;
h += `<p style="text-align:center; margin-bottom:10px; color: #005300; padding: 10px;">${i18n('feedback_sent_confirmation')}</p>`; h += H`<p style="text-align:center; margin-bottom:10px; color: #005300; padding: 10px;">${i18n('feedback_sent_confirmation')}</p>`;
h+= `</div>`; h+= `</div>`;
// form // form
h += `<div class="feedback-form">`; h += H`<div class="feedback-form">`;
h += `<p style="margin-top:0; font-size: 15px; -webkit-font-smoothing: antialiased;">${i18n('feedback_c2a')}</p>`; h += H`<p style="margin-top:0; font-size: 15px; -webkit-font-smoothing: antialiased;">${i18n('feedback_c2a')}</p>`;
h += `<textarea class="feedback-message" style="width:100%; height: 200px; padding: 10px; box-sizing: border-box;"></textarea>`; h += H`<textarea class="feedback-message" style="width:100%; height: 200px; padding: 10px; box-sizing: border-box;"></textarea>`;
h += `<button class="button button-primary send-feedback-btn" style="float: right; margin-bottom: 15px; margin-top: 10px;">${i18n('send')}</button>`; h += H`<button class="button button-primary send-feedback-btn" style="float: right; margin-bottom: 15px; margin-top: 10px;">${i18n('send')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: i18n('contact_us'), title: i18n('contact_us'),

18
src/UI/UIWindowFontPicker.js
View File

@ -51,19 +51,19 @@ async function UIWindowFontPicker(options){
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
let h = ``; let h = ``;
h += `<div>`; h += H`<div>`;
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`; h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
h += `<div class="font-list" style="margin-bottom: 10px; height: 200px; overflow-y: scroll; background-color: white; padding: 0 10px;">`; h += H`<div class="font-list" style="margin-bottom: 10px; height: 200px; overflow-y: scroll; background-color: white; padding: 0 10px;">`;
fontAvailable.forEach(element => { fontAvailable.forEach(element => {
h += `<p class="font-selector disable-user-select ${options.default === element ? 'font-selector-active' : ''}" style="font-family: '${html_encode(element)}';" data-font-family="${html_encode(element)}">${html_encode(element)}</p>`; // 👉️ one, two, three, four h += H`<p class="font-selector disable-user-select ${options.default === element ? 'font-selector-active' : ''}" style="font-family: '${html_encode(element)}';" data-font-family="${html_encode(element)}">${html_encode(element)}</p>`; // 👉️ one, two, three, four
}); });
h += `</div>`; h += H`</div>`;
// Select // Select
h += `<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>` h += H`<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>`
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Select font…', title: 'Select font…',

54
src/UI/UIWindowItemProperties.js
View File

@ -22,37 +22,37 @@ import UIWindow from './UIWindow.js'
// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB // todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
async function UIWindowItemProperties(item_name, item_path, item_uid, left, top, width, height){ async function UIWindowItemProperties(item_name, item_path, item_uid, left, top, width, height){
let h = ''; let h = '';
h += `<div class="item-props-tabview" style="display: flex; flex-direction: column; height: 100%;">`; h += H`<div class="item-props-tabview" style="display: flex; flex-direction: column; height: 100%;">`;
// tabs // tabs
h += `<div class="item-props-tab">`; h += H`<div class="item-props-tab">`;
h += `<div class="item-props-tab-btn antialiased disable-user-select item-props-tab-selected" data-tab="general">${i18n('general')}</div>`; h += H`<div class="item-props-tab-btn antialiased disable-user-select item-props-tab-selected" data-tab="general">${i18n('general')}</div>`;
h += `<div class="item-props-tab-btn antialiased disable-user-select item-props-tab-btn-versions" data-tab="versions">${i18n('versions')}</div>`; h += H`<div class="item-props-tab-btn antialiased disable-user-select item-props-tab-btn-versions" data-tab="versions">${i18n('versions')}</div>`;
h += `</div>`; h += H`</div>`;
h+= `<div class="item-props-tab-content item-props-tab-content-selected" data-tab="general" style="border-top-left-radius:0;">`; h+= `<div class="item-props-tab-content item-props-tab-content-selected" data-tab="general" style="border-top-left-radius:0;">`;
h += `<table class="item-props-tbl">`; h += H`<table class="item-props-tbl">`;
h += `<tr><td class="item-prop-label">Name</td><td class="item-prop-val item-prop-val-name"></td></tr>`; h += H`<tr><td class="item-prop-label">Name</td><td class="item-prop-val item-prop-val-name"></td></tr>`;
h += `<tr><td class="item-prop-label">Path</td><td class="item-prop-val item-prop-val-path"></td></tr>`; h += H`<tr><td class="item-prop-label">Path</td><td class="item-prop-val item-prop-val-path"></td></tr>`;
h += `<tr class="item-prop-original-name"><td class="item-prop-label">Original Name</td><td class="item-prop-val item-prop-val-original-name"></td></tr>`; h += H`<tr class="item-prop-original-name"><td class="item-prop-label">Original Name</td><td class="item-prop-val item-prop-val-original-name"></td></tr>`;
h += `<tr class="item-prop-original-path"><td class="item-prop-label">Original Path</td><td class="item-prop-val item-prop-val-original-path"></td></tr>`; h += H`<tr class="item-prop-original-path"><td class="item-prop-label">Original Path</td><td class="item-prop-val item-prop-val-original-path"></td></tr>`;
h += `<tr><td class="item-prop-label">Shortcut to</td><td class="item-prop-val item-prop-val-shortcut-to"></td></tr>`; h += H`<tr><td class="item-prop-label">Shortcut to</td><td class="item-prop-val item-prop-val-shortcut-to"></td></tr>`;
h += `<tr><td class="item-prop-label">UID</td><td class="item-prop-val item-prop-val-uid"></td></tr>`; h += H`<tr><td class="item-prop-label">UID</td><td class="item-prop-val item-prop-val-uid"></td></tr>`;
h += `<tr><td class="item-prop-label">Type</td><td class="item-prop-val item-prop-val-type"></td></tr>`; h += H`<tr><td class="item-prop-label">Type</td><td class="item-prop-val item-prop-val-type"></td></tr>`;
h += `<tr><td class="item-prop-label">Size</td><td class="item-prop-val item-prop-val-size"></td></tr>`; h += H`<tr><td class="item-prop-label">Size</td><td class="item-prop-val item-prop-val-size"></td></tr>`;
h += `<tr><td class="item-prop-label">Modified</td><td class="item-prop-val item-prop-val-modified"></td></tr>`; h += H`<tr><td class="item-prop-label">Modified</td><td class="item-prop-val item-prop-val-modified"></td></tr>`;
h += `<tr><td class="item-prop-label">Created</td><td class="item-prop-val item-prop-val-created"></td></tr>`; h += H`<tr><td class="item-prop-label">Created</td><td class="item-prop-val item-prop-val-created"></td></tr>`;
h += `<tr><td class="item-prop-label">Versions</td><td class="item-prop-val item-prop-val-versions"></td></tr>`; h += H`<tr><td class="item-prop-label">Versions</td><td class="item-prop-val item-prop-val-versions"></td></tr>`;
h += `<tr><td class="item-prop-label">Associated Websites</td><td class="item-prop-val item-prop-val-websites">`; h += H`<tr><td class="item-prop-label">Associated Websites</td><td class="item-prop-val item-prop-val-websites">`;
h += `</td></tr>`; h += H`</td></tr>`;
h += `<tr><td class="item-prop-label">${i18n('access_granted_to')}</td><td class="item-prop-val item-prop-val-permissions"></td></tr>`; h += H`<tr><td class="item-prop-label">${i18n('access_granted_to')}</td><td class="item-prop-val item-prop-val-permissions"></td></tr>`;
h += `</table>`; h += H`</table>`;
h += `</div>`; h += H`</div>`;
h += `<div class="item-props-tab-content" data-tab="versions" style="padding: 20px;">` h += H`<div class="item-props-tab-content" data-tab="versions" style="padding: 20px;">`
h += `<div class="item-props-version-list">`; h += H`<div class="item-props-version-list">`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: `${item_name} properties`, title: `${item_name} properties`,

50
src/UI/UIWindowLogin.js
View File

@ -21,13 +21,11 @@ import UIWindow from './UIWindow.js'
import UIWindowSignup from './UIWindowSignup.js' import UIWindowSignup from './UIWindowSignup.js'
import UIWindowRecoverPassword from './UIWindowRecoverPassword.js' import UIWindowRecoverPassword from './UIWindowRecoverPassword.js'
import TeePromise from '../util/TeePromise.js'; import TeePromise from '../util/TeePromise.js';
import UIAlert from './UIAlert.js';
import UIComponentWindow from './UIComponentWindow.js'; import UIComponentWindow from './UIComponentWindow.js';
import Flexer from './Components/Flexer.js'; import Flexer from './Components/Flexer.js';
import CodeEntryView from './Components/CodeEntryView.js'; import CodeEntryView from './Components/CodeEntryView.js';
import JustHTML from './Components/JustHTML.js'; import JustHTML from './Components/JustHTML.js';
import StepView from './Components/StepView.js'; import StepView from './Components/StepView.js';
import TestView from './Components/TestView.js';
import Button from './Components/Button.js'; import Button from './Components/Button.js';
import RecoveryCodeEntryView from './Components/RecoveryCodeEntryView.js'; import RecoveryCodeEntryView from './Components/RecoveryCodeEntryView.js';
@ -41,45 +39,45 @@ async function UIWindowLogin(options){
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
const internal_id = window.uuidv4(); const internal_id = window.uuidv4();
let h = ``; let h = ``;
h += `<div style="max-width: 500px; min-width: 340px;">`; h += H`<div style="max-width: 500px; min-width: 340px;">`;
if(!options.has_head && options.show_close_button !== false) if(!options.has_head && options.show_close_button !== false)
h += `<div class="generic-close-window-button"> &times; </div>`; h += H`<div class="generic-close-window-button"> &times; </div>`;
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`; h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
// title // title
h += `<h1 class="login-form-title">${i18n('log_in')}</h1>`; h += H`<h1 class="login-form-title">${i18n('log_in')}</h1>`;
// login form // login form
h += `<form class="login-form">`; h += H`<form class="login-form">`;
// error msg // error msg
h += `<div class="login-error-msg"></div>`; h += H`<div class="login-error-msg"></div>`;
// username/email // username/email
h += `<div style="overflow: hidden;">`; h += H`<div style="overflow: hidden;">`;
h += `<label for="email_or_username-${internal_id}">${i18n('email_or_username')}</label>`; h += H`<label for="email_or_username-${internal_id}">${i18n('email_or_username')}</label>`;
h += `<input id="email_or_username-${internal_id}" class="email_or_username" type="text" name="email_or_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false" autocomplete="username"/>`; h += H`<input id="email_or_username-${internal_id}" class="email_or_username" type="text" name="email_or_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false" autocomplete="username"/>`;
h += `</div>`; h += H`</div>`;
// password with conditional type based based on options.show_password // password with conditional type based based on options.show_password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px; position: relative;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px; position: relative;">`;
h += `<label for="password-${internal_id}">${i18n('password')}</label>`; h += H`<label for="password-${internal_id}">${i18n('password')}</label>`;
h += `<input id="password-${internal_id}" class="password" type="${options.show_password ? "text" : "password"}" name="password" autocomplete="current-password"/>`; h += H`<input id="password-${internal_id}" class="password" type="${options.show_password ? "text" : "password"}" name="password" autocomplete="current-password"/>`;
// show/hide icon // show/hide icon
h += `<span style="position: absolute; right: 5%; top: 50%; cursor: pointer;" id="toggle-show-password-${internal_id}"> h += H`<span style="position: absolute; right: 5%; top: 50%; cursor: pointer;" id="toggle-show-password-${internal_id}">
<img class="toggle-show-password-icon" src="${options.show_password ? window.icons["eye-closed.svg"] : window.icons["eye-open.svg"]}" width="20" height="20"> <img class="toggle-show-password-icon" src="${options.show_password ? window.icons["eye-closed.svg"] : window.icons["eye-open.svg"]}" width="20" height="20">
</span>`; </span>`;
h += `</div>`; h += H`</div>`;
// login // login
h += `<button class="login-btn button button-primary button-block button-normal">${i18n('log_in')}</button>`; h += H`<button class="login-btn button button-primary button-block button-normal">${i18n('log_in')}</button>`;
// password recovery // password recovery
h += `<p style="text-align:center; margin-bottom: 0;"><span class="forgot-password-link">${i18n('forgot_pass_c2a')}</span></p>`; h += H`<p style="text-align:center; margin-bottom: 0;"><span class="forgot-password-link">${i18n('forgot_pass_c2a')}</span></p>`;
// server and version info // server and version info
h += `<div id="version-placeholder" class="version" style="text-align:center;"></div>`; h += H`<div id="version-placeholder" class="version" style="text-align:center;"></div>`;
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
// create account link // create account link
if(options.show_signup_button === undefined || options.show_signup_button){ if(options.show_signup_button === undefined || options.show_signup_button){
h += `<div class="c2a-wrapper" style="padding:20px;">`; h += H`<div class="c2a-wrapper" style="padding:20px;">`;
h += `<button class="signup-c2a-clickable">${i18n('create_free_account')}</button>`; h += H`<button class="signup-c2a-clickable">${i18n('create_free_account')}</button>`;
h += `</div>`; h += H`</div>`;
} }
h += `</div>`; h += H`</div>`;
// server and version infomration // server and version infomration
puter.os.version() puter.os.version()

6
src/UI/UIWindowLoginInProgress.js
View File

@ -24,15 +24,15 @@ async function UIWindowLoginInProgress(options){
options = options ?? {}; options = options ?? {};
let h = ''; let h = '';
h += `<div class="login-progress">`; h += H`<div class="login-progress">`;
h += `<h1 style="text-align: center; h += H`<h1 style="text-align: center;
font-size: 20px; font-size: 20px;
padding: 10px; padding: 10px;
font-weight: 300; margin: -10px 10px 20px 10px;">Logging in as <strong>${options.user_info.email === null ? options.user_info.username : options.user_info.email}</strong></h1>`; font-weight: 300; margin: -10px 10px 20px 10px;">Logging in as <strong>${options.user_info.email === null ? options.user_info.username : options.user_info.email}</strong></h1>`;
// spinner // spinner
h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`; h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Authenticating...', title: 'Authenticating...',

26
src/UI/UIWindowMyWebsites.js
View File

@ -23,8 +23,8 @@ import UIAlert from './UIAlert.js'
async function UIWindowMyWebsites(options){ async function UIWindowMyWebsites(options){
let h = ''; let h = '';
h += `<div>`; h += H`<div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: `My Websites`, title: `My Websites`,
@ -79,22 +79,22 @@ async function UIWindowMyWebsites(options){
if(sites.length > 0){ if(sites.length > 0){
let h =''; let h ='';
for(let i=0; i< sites.length; i++){ for(let i=0; i< sites.length; i++){
h += `<div class="mywebsites-card" data-uuid="${sites[i].uid}">`; h += H`<div class="mywebsites-card" data-uuid="${sites[i].uid}">`;
h += `<a class="mywebsites-address-link" href="https://${sites[i].subdomain}.puter.site" target="_blank">${sites[i].subdomain}.puter.site</a>`; h += H`<a class="mywebsites-address-link" href="https://${sites[i].subdomain}.puter.site" target="_blank">${sites[i].subdomain}.puter.site</a>`;
h += `<img class="mywebsites-site-setting" data-site-uuid="${sites[i].uid}" src="${html_encode(window.icons['cog.svg'])}">`; h += H`<img class="mywebsites-site-setting" data-site-uuid="${sites[i].uid}" src="${html_encode(window.icons['cog.svg'])}">`;
// there is a directory associated with this site // there is a directory associated with this site
if(sites[i].root_dir){ if(sites[i].root_dir){
h += `<p class="mywebsites-dir-path" data-path="${html_encode(sites[i].root_dir.path)}" data-name="${html_encode(sites[i].root_dir.name)}" data-uuid="${sites[i].root_dir.id}">`; h += H`<p class="mywebsites-dir-path" data-path="${html_encode(sites[i].root_dir.path)}" data-name="${html_encode(sites[i].root_dir.name)}" data-uuid="${sites[i].root_dir.id}">`;
h+= `<img src="${html_encode(window.icons['folder.svg'])}">`; h+= `<img src="${html_encode(window.icons['folder.svg'])}">`;
h+= `${html_encode(sites[i].root_dir.path)}`; h+= `${html_encode(sites[i].root_dir.path)}`;
h += `</p>`; h += H`</p>`;
h += `<p style="margin-bottom:0; margin-top: 20px; font-size: 13px;">`; h += H`<p style="margin-bottom:0; margin-top: 20px; font-size: 13px;">`;
h += `<span class="mywebsites-dis-dir" data-dir-uuid="${html_encode(sites[i].root_dir.id)}" data-site-uuid="${html_encode(sites[i].uid)}">`; h += H`<span class="mywebsites-dis-dir" data-dir-uuid="${html_encode(sites[i].root_dir.id)}" data-site-uuid="${html_encode(sites[i].uid)}">`;
h += `<img style="width: 16px; margin-bottom: -2px; margin-right: 4px;" src="${html_encode(window.icons['plug.svg'])}">${i18n('disassociate_dir')}</span>`; h += H`<img style="width: 16px; margin-bottom: -2px; margin-right: 4px;" src="${html_encode(window.icons['plug.svg'])}">${i18n('disassociate_dir')}</span>`;
h += `</p>`; h += H`</p>`;
} }
h += `<p class="mywebsites-no-dir-notice" data-site-uuid="${html_encode(sites[i].uid)}" style="${sites[i].root_dir ? `display:none;` : `display:block;`}">${i18n('no_dir_associated_with_site')}</p>`; h += H`<p class="mywebsites-no-dir-notice" data-site-uuid="${html_encode(sites[i].uid)}" style="${sites[i].root_dir ? `display:none;` : `display:block;`}">${i18n('no_dir_associated_with_site')}</p>`;
h += `</div>`; h += H`</div>`;
} }
$(el_window).find('.window-body').html(h); $(el_window).find('.window-body').html(h);
} }

24
src/UI/UIWindowNewPassword.js
View File

@ -28,23 +28,23 @@ async function UIWindowNewPassword(options){
const internal_id = window.uuidv4(); const internal_id = window.uuidv4();
let h = ''; let h = '';
h += `<div class="change-password" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div class="change-password" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
// error msg // error msg
h += `<div class="form-error-msg"></div>`; h += H`<div class="form-error-msg"></div>`;
// new password // new password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
h += `<label for="new-password-${internal_id}">${i18n('new_password')}</label>`; h += H`<label for="new-password-${internal_id}">${i18n('new_password')}</label>`;
h += `<input class="new-password" id="new-password-${internal_id}" type="password" name="new-password" autocomplete="off" />`; h += H`<input class="new-password" id="new-password-${internal_id}" type="password" name="new-password" autocomplete="off" />`;
h += `</div>`; h += H`</div>`;
// confirm new password // confirm new password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
h += `<label for="confirm-new-password-${internal_id}">${i18n('confirm_new_password')}</label>`; h += H`<label for="confirm-new-password-${internal_id}">${i18n('confirm_new_password')}</label>`;
h += `<input class="confirm-new-password" id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" autocomplete="off" />`; h += H`<input class="confirm-new-password" id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" autocomplete="off" />`;
h += `</div>`; h += H`</div>`;
// Change Password // Change Password
h += `<button class="change-password-btn button button-primary button-block button-normal">${i18n('set_new_password')}</button>`; h += H`<button class="change-password-btn button button-primary button-block button-normal">${i18n('set_new_password')}</button>`;
h += `</div>`; h += H`</div>`;
const response = await fetch(window.api_origin + "/verify-pass-recovery-token", { const response = await fetch(window.api_origin + "/verify-pass-recovery-token", {
method: 'POST', method: 'POST',

48
src/UI/UIWindowProgress.js
View File

@ -39,45 +39,45 @@ async function UIWindowProgress({
const placeholder_ok_btn = Placeholder(); const placeholder_ok_btn = Placeholder();
let h = ''; let h = '';
h += `<div ${operation_id ? `data-operation-id="${operation_id}"` : ''}>`; h += H`<div ${operation_id ? `data-operation-id="${operation_id}"` : ''}>`;
h += `<div class="progress-running">`; h += H`<div class="progress-running">`;
h += `<div style="display: flex; align-items: center; gap: 7px;">`; h += H`<div style="display: flex; align-items: center; gap: 7px;">`;
// spinner // spinner
h += `<svg style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`; h += H`<svg style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
// Progress report // Progress report
h += `<div style="font-size:15px; overflow: hidden; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap;"> h += H`<div style="font-size:15px; overflow: hidden; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap;">
<span class="progress-msg">${i18n('preparing')}</span>`; <span class="progress-msg">${i18n('preparing')}</span>`;
if (show_progress) { if (show_progress) {
h += ` (<span class="progress-percent">0%</span>)`; h += H` (<span class="progress-percent">0%</span>)`;
} }
h += `</div>`; h += H`</div>`;
h +=`</div>`; h +=`</div>`;
if (show_progress) { if (show_progress) {
h += `<div class="progress-bar-container" style="margin-top:20px;">`; h += H`<div class="progress-bar-container" style="margin-top:20px;">`;
h += `<div class="progress-bar"></div>`; h += H`<div class="progress-bar"></div>`;
h += `</div>`; h += H`</div>`;
} }
if (on_cancel) { if (on_cancel) {
h += `<div style="display: flex; justify-content: flex-end;">`; h += H`<div style="display: flex; justify-content: flex-end;">`;
h += placeholder_cancel_btn.html; h += placeholder_cancel_btn.html;
h += `</div>`; h += H`</div>`;
} }
h += `</div>`; h += H`</div>`;
h += `<div class="progress-error" style="display: none">`; h += H`<div class="progress-error" style="display: none">`;
h += `<div style="display: flex; align-items: center; gap: 7px;">`; h += H`<div style="display: flex; align-items: center; gap: 7px;">`;
// Alert icon // Alert icon
h += `<img style="width:24px; height:24px;" src="${html_encode(window.icons['warning-sign.svg'])}" />`; h += H`<img style="width:24px; height:24px;" src="${html_encode(window.icons['warning-sign.svg'])}" />`;
// Progress report // Progress report
h += `<div style="font-size:15px; overflow: hidden; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap;"> h += H`<div style="font-size:15px; overflow: hidden; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap;">
<span class="progress-error-title"></span>`; <span class="progress-error-title"></span>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += `<p class="progress-error-message"></p>`; h += H`<p class="progress-error-message"></p>`;
h += `<div style="display: flex; justify-content: flex-end;">`; h += H`<div style="display: flex; justify-content: flex-end;">`;
h += placeholder_ok_btn.html; h += placeholder_ok_btn.html;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
uid: null, uid: null,

32
src/UI/UIWindowPublishWebsite.js
View File

@ -22,29 +22,29 @@ import UIWindowMyWebsites from './UIWindowMyWebsites.js'
async function UIWindowPublishWebsite(target_dir_uid, target_dir_name, target_dir_path){ async function UIWindowPublishWebsite(target_dir_uid, target_dir_name, target_dir_path){
let h = ''; let h = '';
h += `<div class="window-publishWebsite-content" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div class="window-publishWebsite-content" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
// success // success
h += `<div class="window-publishWebsite-success">`; h += H`<div class="window-publishWebsite-success">`;
h += `<img src="${html_encode(window.icons['c-check.svg'])}" style="width:80px; height:80px; display: block; margin:10px auto;">`; h += H`<img src="${html_encode(window.icons['c-check.svg'])}" style="width:80px; height:80px; display: block; margin:10px auto;">`;
h += `<p style="text-align:center;">${i18n('dir_published_as_website', `<strong>${html_encode(target_dir_name)}</strong>`, false)}<p>`; h += H`<p style="text-align:center;">${i18n('dir_published_as_website', `<strong>${html_encode(target_dir_name)}</strong>`, false)}<p>`;
h += `<p style="text-align:center;"><a class="publishWebsite-published-link" target="_blank"></a><img class="publishWebsite-published-link-icon" src="${html_encode(window.icons['launch.svg'])}"></p>`; h += H`<p style="text-align:center;"><a class="publishWebsite-published-link" target="_blank"></a><img class="publishWebsite-published-link-icon" src="${html_encode(window.icons['launch.svg'])}"></p>`;
h += `<button class="button button-normal button-block button-primary publish-window-ok-btn" style="margin-top:20px;">OK</button>`; h += H`<button class="button button-normal button-block button-primary publish-window-ok-btn" style="margin-top:20px;">OK</button>`;
h+= `</div>`; h+= `</div>`;
// form // form
h += `<form class="window-publishWebsite-form">`; h += H`<form class="window-publishWebsite-form">`;
// error msg // error msg
h += `<div class="publish-website-error-msg"></div>`; h += H`<div class="publish-website-error-msg"></div>`;
// subdomain // subdomain
h += `<div style="overflow: hidden;">`; h += H`<div style="overflow: hidden;">`;
h += `<label style="margin-bottom: 10px;">${i18n('pick_name_for_website')}</label>`; h += H`<label style="margin-bottom: 10px;">${i18n('pick_name_for_website')}</label>`;
h += `<div style="font-family: monospace;">https://<input class="publish-website-subdomain" style="width:235px;" type="text" autocomplete="subdomain" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>.${html_encode(window.hosting_domain)}</div>`; h += H`<div style="font-family: monospace;">https://<input class="publish-website-subdomain" style="width:235px;" type="text" autocomplete="subdomain" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>.${html_encode(window.hosting_domain)}</div>`;
h += `</div>`; h += H`</div>`;
// uid // uid
h += `<input class="publishWebsiteTargetDirUID" type="hidden" value="${html_encode(target_dir_uid)}"/>`; h += H`<input class="publishWebsiteTargetDirUID" type="hidden" value="${html_encode(target_dir_uid)}"/>`;
// Publish // Publish
h += `<button class="publish-btn button button-action button-block button-normal">${i18n('publish')}</button>` h += H`<button class="publish-btn button button-action button-block button-normal">${i18n('publish')}</button>`
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Publish Website', title: 'Publish Website',

8
src/UI/UIWindowQR.js
View File

@ -34,12 +34,12 @@ async function UIWindowQR(options){
let h = ''; let h = '';
// close button containing the multiplication sign // close button containing the multiplication sign
h += `<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>`; h += H`<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>`;
h += `<div class="otp-qr-code">`; h += H`<div class="otp-qr-code">`;
h += `<h1 style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${ h += H`<h1 style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${
i18n(options.message_i18n_key || 'scan_qr_generic') i18n(options.message_i18n_key || 'scan_qr_generic')
}</h1>`; }</h1>`;
h += `</div>`; h += H`</div>`;
h += placeholder_qr.html; h += placeholder_qr.html;

20
src/UI/UIWindowRecoverPassword.js
View File

@ -25,16 +25,16 @@ function UIWindowRecoverPassword(options){
options = options ?? {}; options = options ?? {};
let h = ''; let h = '';
h += `<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`; h += H`<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`;
h += `<h3 style="text-align:center; font-weight: 400; font-size: 20px;">${i18n('recover_password')}</h3>`; h += H`<h3 style="text-align:center; font-weight: 400; font-size: 20px;">${i18n('recover_password')}</h3>`;
h += `<form class="pass-recovery-form">`; h += H`<form class="pass-recovery-form">`;
h += `<p style="text-align:center; padding: 0 20px;"></p>`; h += H`<p style="text-align:center; padding: 0 20px;"></p>`;
h += `<div class="error"></div>`; h += H`<div class="error"></div>`;
h += `<label>${i18n('email_or_username')}</label>`; h += H`<label>${i18n('email_or_username')}</label>`;
h += `<input class="pass-recovery-username-or-email" type="text"/>`; h += H`<input class="pass-recovery-username-or-email" type="text"/>`;
h += `<button type="submit" class="send-recovery-email button button-block button-primary" style="margin-top:10px;">${i18n('send_password_recovery_email')}</button>`; h += H`<button type="submit" class="send-recovery-email button button-block button-primary" style="margin-top:10px;">${i18n('send_password_recovery_email')}</button>`;
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: null, title: null,

18
src/UI/UIWindowRefer.js
View File

@ -25,15 +25,15 @@ async function UIWindowRefer(options){
let h = ''; let h = '';
const url = `${window.gui_origin}/?r=${window.user.referral_code}`; const url = `${window.gui_origin}/?r=${window.user.referral_code}`;
h += `<div>`; h += H`<div>`;
h += `<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> &times; </div>`; h += H`<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> &times; </div>`;
h += `<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`; h += H`<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('refer_friends_c2a')}</p>`; h += H`<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${i18n('refer_friends_c2a')}</p>`;
h += `<label style="font-weight: bold;">${i18n('invite_link')}</label>`; h += H`<label style="font-weight: bold;">${i18n('invite_link')}</label>`;
h += `<input type="text" style="margin-bottom:10px;" class="downloadable-link" readonly />`; h += H`<input type="text" style="margin-bottom:10px;" class="downloadable-link" readonly />`;
h += `<button class="button button-primary copy-downloadable-link" style="white-space:nowrap; text-align:center;">${i18n('copy_link')}</button>` h += H`<button class="button button-primary copy-downloadable-link" style="white-space:nowrap; text-align:center;">${i18n('copy_link')}</button>`
h += `<img class="share-copy-link-on-social" src="${window.icons['share-outline.svg']}">`; h += H`<img class="share-copy-link-on-social" src="${window.icons['share-outline.svg']}">`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: `Refer a friend!`, title: `Refer a friend!`,

16
src/UI/UIWindowRequestPermission.js
View File

@ -58,17 +58,17 @@ async function UIWindowRequestPermission(options){
} }
let h = ``; let h = ``;
h += `<div>`; h += H`<div>`;
h += `<div style="padding: 20px; width: 100%; box-sizing: border-box;">`; h += H`<div style="padding: 20px; width: 100%; box-sizing: border-box;">`;
// title // title
h += `<h1 class="perm-title">"<span style="word-break: break-word;">${html_encode(options.app_uid ?? options.origin)}</span>" would Like to use ${html_encode(driver.human_name)}</h1>`; h += H`<h1 class="perm-title">"<span style="word-break: break-word;">${html_encode(options.app_uid ?? options.origin)}</span>" would Like to use ${html_encode(driver.human_name)}</h1>`;
// todo show the real description of action // todo show the real description of action
h += `<p class="perm-description">${html_encode(driver.description)}</p>`; h += H`<p class="perm-description">${html_encode(driver.description)}</p>`;
// Allow/Don't Allow // Allow/Don't Allow
h += `<button type="button" class="app-auth-allow button button-primary button-block" style="margin-top: 10px;">Allow</button>`; h += H`<button type="button" class="app-auth-allow button button-primary button-block" style="margin-top: 10px;">Allow</button>`;
h += `<button type="button" class="app-auth-dont-allow button button-default button-block" style="margin-top: 10px;">Don't Allow</button>`; h += H`<button type="button" class="app-auth-dont-allow button button-default button-block" style="margin-top: 10px;">Don't Allow</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: null, title: null,

54
src/UI/UIWindowSaveAccount.js
View File

@ -28,46 +28,46 @@ async function UIWindowSaveAccount(options){
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
let h = ''; let h = '';
h += `<div>`; h += H`<div>`;
// success // success
h += `<div class="save-account-success">`; h += H`<div class="save-account-success">`;
h += `<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`; h += H`<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`;
h += `<p style="text-align:center; margin-bottom:10px;">${i18n('session_saved')}</p>`; h += H`<p style="text-align:center; margin-bottom:10px;">${i18n('session_saved')}</p>`;
h += `<button class="button button-action button-block save-account-success-ok-btn">${i18n('ok')}</button>` h += H`<button class="button button-action button-block save-account-success-ok-btn">${i18n('ok')}</button>`
h+= `</div>`; h+= `</div>`;
// form // form
h += `<div class="save-account-form" style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`; h += H`<div class="save-account-form" style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
// title // title
h += `<h1 class="signup-form-title" style="margin-bottom:0;">${i18n('create_account')}</h1>`; h += H`<h1 class="signup-form-title" style="margin-bottom:0;">${i18n('create_account')}</h1>`;
// description // description
h += `<p class="create-account-desc">${options.message ?? i18n('save_session_c2a')}</p>`; h += H`<p class="create-account-desc">${options.message ?? i18n('save_session_c2a')}</p>`;
// signup form // signup form
h += `<form class="signup-form">`; h += H`<form class="signup-form">`;
// error msg // error msg
h += `<div class="signup-error-msg"></div>`; h += H`<div class="signup-error-msg"></div>`;
// username // username
h += `<div style="overflow: hidden;">`; h += H`<div style="overflow: hidden;">`;
h += `<label for="username-${internal_id}">${i18n('username')}</label>`; h += H`<label for="username-${internal_id}">${i18n('username')}</label>`;
h += `<input id="username-${internal_id}" class="username" value="${options.default_username ?? ''}" type="text" autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`; h += H`<input id="username-${internal_id}" class="username" value="${options.default_username ?? ''}" type="text" autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
h += `</div>`; h += H`</div>`;
// email // email
h += `<div style="overflow: hidden; margin-top: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px;">`;
h += `<label for="email-${internal_id}">${i18n('email')}</label>`; h += H`<label for="email-${internal_id}">${i18n('email')}</label>`;
h += `<input id="email-${internal_id}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`; h += H`<input id="email-${internal_id}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
h += `</div>`; h += H`</div>`;
// password // password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
h += `<label for="password-${internal_id}">${i18n('password')}</label>`; h += H`<label for="password-${internal_id}">${i18n('password')}</label>`;
h += `<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`; h += H`<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`;
h += `</div>`; h += H`</div>`;
// bot trap - if this value is submitted server will ignore the request // bot trap - if this value is submitted server will ignore the request
h += `<input type="text" name="p102xyzname" class="p102xyzname" value="">`; h += H`<input type="text" name="p102xyzname" class="p102xyzname" value="">`;
// Create Account // Create Account
h += `<button class="signup-btn button button-primary button-block button-normal">${i18n('create_account')}</button>` h += H`<button class="signup-btn button button-primary button-block button-normal">${i18n('create_account')}</button>`
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: null, title: null,

16
src/UI/UIWindowSessionList.js
View File

@ -27,18 +27,18 @@ async function UIWindowSessionList(options){
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
let h = ''; let h = '';
h += `<div style="margin:10px;">`; h += H`<div style="margin:10px;">`;
h += `<div class="loading">${i18n('signing_in')}</div>` h += H`<div class="loading">${i18n('signing_in')}</div>`
h += `<div style="overflow-y: scroll; max-width: 400px; margin: 0 auto;">`; h += H`<div style="overflow-y: scroll; max-width: 400px; margin: 0 auto;">`;
h += `<h1 style="text-align: center; font-size: 18px; font-weight: normal; color: #757575;"><img src="${window.icons['logo-white.svg']}" style="padding: 4px; background-color: blue; border-radius: 5px; width: 25px; box-sizing: border-box; margin-bottom: -6px; margin-right: 6px;">${i18n('sign_in_with_puter')}</h1>` h += H`<h1 style="text-align: center; font-size: 18px; font-weight: normal; color: #757575;"><img src="${window.icons['logo-white.svg']}" style="padding: 4px; background-color: blue; border-radius: 5px; width: 25px; box-sizing: border-box; margin-bottom: -6px; margin-right: 6px;">${i18n('sign_in_with_puter')}</h1>`
for (let index = 0; index < window.logged_in_users.length; index++) { for (let index = 0; index < window.logged_in_users.length; index++) {
const l_user = window.logged_in_users[index]; const l_user = window.logged_in_users[index];
h += `<div data-uuid="${l_user.uuid}" class="session-entry">${l_user.username}</div>`; h += H`<div data-uuid="${l_user.uuid}" class="session-entry">${l_user.username}</div>`;
} }
h += `</div>`; h += H`</div>`;
h += `<div style="margin-top: 20px; margin-bottom: 20px; text-align:center;"><span class="login-c2a-session-list">Log Into Another Account</span> &bull; <span class="signup-c2a-session-list">${i18n('create_account')}</span></div>`; h += H`<div style="margin-top: 20px; margin-bottom: 20px; text-align:center;"><span class="login-c2a-session-list">Log Into Another Account</span> &bull; <span class="signup-c2a-session-list">${i18n('create_account')}</span></div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Session List!', title: 'Session List!',

74
src/UI/UIWindowShare.js
View File

@ -3,76 +3,76 @@ import UIWindow from './UIWindow.js'
async function UIWindowShare(items, recipient){ async function UIWindowShare(items, recipient){
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
let h = ''; let h = '';
h += `<div style="padding: 30px 40px 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div style="padding: 30px 40px 20px; border-bottom: 1px solid #ced7e1;">`;
h += `<div class="qr-code-window-close-btn generic-close-window-button" style="margin: 5px;"> &times; </div>`; h += H`<div class="qr-code-window-close-btn generic-close-window-button" style="margin: 5px;"> &times; </div>`;
//------------------------------------------------ //------------------------------------------------
// Icon // Icon
//------------------------------------------------ //------------------------------------------------
// 1 item shared // 1 item shared
h += `<div style="display:flex; justify-content: center; margin-bottom: 10px;">`; h += H`<div style="display:flex; justify-content: center; margin-bottom: 10px;">`;
if(items.length === 1) if(items.length === 1)
h += `<img src="${items[0].icon}" style="width:70px; height:70px;">`; h += H`<img src="${items[0].icon}" style="width:70px; height:70px;">`;
// 2 items shared // 2 items shared
else if(items.length === 2){ else if(items.length === 2){
h += `<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 2;">`; h += H`<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 2;">`;
h += `<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -10px; z-index:1; transform:scale(0.8);">`; h += H`<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -10px; z-index:1; transform:scale(0.8);">`;
} }
// 3 items shared // 3 items shared
else if(items.length === 3){ else if(items.length === 3){
h += `<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 3;">`; h += H`<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 3;">`;
h += `<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -10px; z-index:2; transform:scale(0.8);">`; h += H`<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -10px; z-index:2; transform:scale(0.8);">`;
h += `<img src="${items[2].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -20px; z-index:1; transform:scale(0.6);">`; h += H`<img src="${items[2].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -20px; z-index:1; transform:scale(0.6);">`;
} }
// 4 items shared // 4 items shared
else if(items.length === 4){ else if(items.length === 4){
h += `<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 4;">`; h += H`<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 4;">`;
h += `<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -15px; z-index:3; transform:scale(0.8);">`; h += H`<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -15px; z-index:3; transform:scale(0.8);">`;
h += `<img src="${items[2].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -25px; z-index:2; transform:scale(0.6);">`; h += H`<img src="${items[2].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -25px; z-index:2; transform:scale(0.6);">`;
h += `<img src="${items[3].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -35px; z-index:1; transform:scale(0.4);">`; h += H`<img src="${items[3].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -35px; z-index:1; transform:scale(0.4);">`;
} }
// 5 items shared // 5 items shared
else if(items.length >= 5){ else if(items.length >= 5){
h += `<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 5;">`; h += H`<img src="${items[0].icon}" style="width:70px; height:70px; z-index: 5;">`;
h += `<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -15px; z-index:4; transform:scale(0.8);">`; h += H`<img src="${items[1].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -15px; z-index:4; transform:scale(0.8);">`;
h += `<img src="${items[2].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -25px; z-index:3; transform:scale(0.6);">`; h += H`<img src="${items[2].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -25px; z-index:3; transform:scale(0.6);">`;
h += `<img src="${items[3].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -35px; z-index:2; transform:scale(0.4);">`; h += H`<img src="${items[3].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -35px; z-index:2; transform:scale(0.4);">`;
h += `<img src="${items[4].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -45px; z-index:1; transform:scale(0.2);">`; h += H`<img src="${items[4].icon}" style="width:70px; height:70px; margin-left:-60px; margin-top: -45px; z-index:1; transform:scale(0.2);">`;
} }
h += `</div>`; h += H`</div>`;
// ------------------------------------------------ // ------------------------------------------------
// Name // Name
// ------------------------------------------------ // ------------------------------------------------
h += `<h2 style="font-size: 17px; margin-top:0; text-align:center; margin-bottom: 40px; font-weight: 400; color: #303d49;">`; h += H`<h2 style="font-size: 17px; margin-top:0; text-align:center; margin-bottom: 40px; font-weight: 400; color: #303d49;">`;
h += `Share <strong>${html_encode(items[0].name)}</strong>`; h += H`Share <strong>${html_encode(items[0].name)}</strong>`;
if(items.length > 1) if(items.length > 1)
h += ` and ${items.length - 1} other item${items.length > 2 ? 's' : ''}`; h += H` and ${items.length - 1} other item${items.length > 2 ? 's' : ''}`;
h += `</h2>`; h += H`</h2>`;
// form // form
h += `<form class="window-give-item-access-form">`; h += H`<form class="window-give-item-access-form">`;
// Error msg // Error msg
h += `<div class="error"></div>`; h += H`<div class="error"></div>`;
// Username/email // Username/email
h += `<div style="overflow: hidden;">`; h += H`<div style="overflow: hidden;">`;
h += `<label style="font-size: 16px; font-weight: 600;">Share with:</label>`; h += H`<label style="font-size: 16px; font-weight: 600;">Share with:</label>`;
h += `<div style="display: flex;">`; h += H`<div style="display: flex;">`;
// Username/email // Username/email
h += `<input placeholder="username" class="access-recipient" value="${html_encode(recipient ?? '')}" style="border-right: none; margin-bottom: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0;" type="text" autocomplete="recipient_email_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`; h += H`<input placeholder="username" class="access-recipient" value="${html_encode(recipient ?? '')}" style="border-right: none; margin-bottom: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0;" type="text" autocomplete="recipient_email_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
// Share // Share
h += `<button class="give-access-btn button button-primary button-normal" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" ${!recipient ? 'disabled' : ''}>Share</button>` h += H`<button class="give-access-btn button button-primary button-normal" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" ${!recipient ? 'disabled' : ''}>Share</button>`
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
h += `</form>`; h += H`</form>`;
//recipients //recipients
h += `<p style="font-size: 14px; margin-bottom: 0px; color: #303d49; text-shadow: 1px 1px white;">People with access</p>`; h += H`<p style="font-size: 14px; margin-bottom: 0px; color: #303d49; text-shadow: 1px 1px white;">People with access</p>`;
h += `<div class="share-recipients">`; h += H`<div class="share-recipients">`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: 'Share With…', title: 'Share With…',

56
src/UI/UIWindowSignup.js
View File

@ -31,51 +31,51 @@ function UIWindowSignup(options){
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
const internal_id = window.uuidv4(); const internal_id = window.uuidv4();
let h = ''; let h = '';
h += `<div style="margin: 0 auto; max-width: 500px; min-width: 400px;">`; h += H`<div style="margin: 0 auto; max-width: 500px; min-width: 400px;">`;
// logo // logo
h += `<img src="${window.icons['logo-white.svg']}" style="width: 40px; height: 40px; margin: 0 auto; display: block; padding: 15px; background-color: blue; border-radius: 5px;">`; h += H`<img src="${window.icons['logo-white.svg']}" style="width: 40px; height: 40px; margin: 0 auto; display: block; padding: 15px; background-color: blue; border-radius: 5px;">`;
// close button // close button
if(!options.has_head && options.show_close_button !== false) if(!options.has_head && options.show_close_button !== false)
h += `<div class="generic-close-window-button"> &times; </div>`; h += H`<div class="generic-close-window-button"> &times; </div>`;
// Form // Form
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1;">`; h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
// title // title
h += `<h1 class="signup-form-title">${i18n('create_free_account')}</h1>`; h += H`<h1 class="signup-form-title">${i18n('create_free_account')}</h1>`;
// signup form // signup form
h += `<form class="signup-form">`; h += H`<form class="signup-form">`;
// error msg // error msg
h += `<div class="signup-error-msg"></div>`; h += H`<div class="signup-error-msg"></div>`;
// username // username
h += `<div style="overflow: hidden;">`; h += H`<div style="overflow: hidden;">`;
h += `<label for="username-${internal_id}">${i18n('username')}</label>`; h += H`<label for="username-${internal_id}">${i18n('username')}</label>`;
h += `<input id="username-${internal_id}" value="${html_encode(options.username ?? '')}" class="username" type="text" autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`; h += H`<input id="username-${internal_id}" value="${html_encode(options.username ?? '')}" class="username" type="text" autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
h += `</div>`; h += H`</div>`;
// email // email
h += `<div style="overflow: hidden; margin-top: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px;">`;
h += `<label for="email-${internal_id}">${i18n('email')}</label>`; h += H`<label for="email-${internal_id}">${i18n('email')}</label>`;
h += `<input id="email-${internal_id}" value="${html_encode(options.email ?? '')}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`; h += H`<input id="email-${internal_id}" value="${html_encode(options.email ?? '')}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
h += `</div>`; h += H`</div>`;
// password // password
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`; h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
h += `<label for="password-${internal_id}">${i18n('password')}</label>`; h += H`<label for="password-${internal_id}">${i18n('password')}</label>`;
h += `<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`; h += H`<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`;
h += `</div>`; h += H`</div>`;
// bot trap - if this value is submitted server will ignore the request // bot trap - if this value is submitted server will ignore the request
h += `<input type="text" name="p102xyzname" class="p102xyzname" value="">`; h += H`<input type="text" name="p102xyzname" class="p102xyzname" value="">`;
// terms and privacy // terms and privacy
h += `<p class="signup-terms">${i18n('tos_fineprint', [], false)}</p>`; h += H`<p class="signup-terms">${i18n('tos_fineprint', [], false)}</p>`;
// Create Account // Create Account
h += `<button class="signup-btn button button-primary button-block button-normal">${i18n('create_free_account')}</button>` h += H`<button class="signup-btn button button-primary button-block button-normal">${i18n('create_free_account')}</button>`
h += `</form>`; h += H`</form>`;
h += `</div>`; h += H`</div>`;
// login link // login link
// create account link // create account link
h += `<div class="c2a-wrapper" style="padding:20px;">`; h += H`<div class="c2a-wrapper" style="padding:20px;">`;
h += `<button class="login-c2a-clickable">${i18n('log_in')}</button>`; h += H`<button class="login-c2a-clickable">${i18n('log_in')}</button>`;
h += `</div>`; h += H`</div>`;
h += `</div>`; h += H`</div>`;
const el_window = await UIWindow({ const el_window = await UIWindow({
title: null, title: null,

12
src/UI/UIWindowTaskManager.js
View File

@ -253,22 +253,22 @@ class TaskManagerRow extends Component {
const el = $(this.dom_).find('.task-indentation'); const el = $(this.dom_).find('.task-indentation');
let h = ''; let h = '';
for (const c of indentation) { for (const c of indentation) {
h += `<div class="indentcell">`; h += H`<div class="indentcell">`;
switch (c) { switch (c) {
case ' ': case ' ':
break; break;
case '|': case '|':
h += `<div class="indentcell-trunk"></div>`; h += H`<div class="indentcell-trunk"></div>`;
break; break;
case '└': case '└':
h += `<div class="indentcell-branch"></div>`; h += H`<div class="indentcell-branch"></div>`;
break; break;
case '├': case '├':
h += `<div class="indentcell-trunk"></div>`; h += H`<div class="indentcell-trunk"></div>`;
h += `<div class="indentcell-branch"></div>`; h += H`<div class="indentcell-branch"></div>`;
break; break;
} }
h += `</div>`; h += H`</div>`;
} }
el.html(h); el.html(h);
}); });

52
src/helpers/get_html_element_from_options.js
View File

@ -48,7 +48,7 @@ const get_html_element_from_options = async function(options){
// HTML for Item // HTML for Item
// -------------------------------------------------------- // --------------------------------------------------------
let h = ''; let h = '';
h += `<div id="item-${item_id}" h += H`<div id="item-${item_id}"
class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}" class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}"
data-id="${item_id}" data-id="${item_id}"
data-name="${html_encode(options.name)}" data-name="${html_encode(options.name)}"
@ -71,53 +71,53 @@ const get_html_element_from_options = async function(options){
data-path="${html_encode(options.path)}">`; data-path="${html_encode(options.path)}">`;
// spinner // spinner
h += `<div class="item-spinner">`; h += H`<div class="item-spinner">`;
h += `</div>`; h += H`</div>`;
// modified // modified
h += `<div class="item-attr item-attr--modified">`; h += H`<div class="item-attr item-attr--modified">`;
h += `<span>${options.modified === 0 ? '-' : timeago.format(options.modified*1000)}</span>`; h += H`<span>${options.modified === 0 ? '-' : timeago.format(options.modified*1000)}</span>`;
h += `</div>`; h += H`</div>`;
// size // size
h += `<div class="item-attr item-attr--size">`; h += H`<div class="item-attr item-attr--size">`;
h += `<span>${options.size ? window.byte_format(options.size) : '-'}</span>`; h += H`<span>${options.size ? window.byte_format(options.size) : '-'}</span>`;
h += `</div>`; h += H`</div>`;
// type // type
h += `<div class="item-attr item-attr--type">`; h += H`<div class="item-attr item-attr--type">`;
if(options.is_dir) if(options.is_dir)
h += `<span>Folder</span>`; h += H`<span>Folder</span>`;
else else
h += `<span>${options.type ? html_encode(options.type) : '-'}</span>`; h += H`<span>${options.type ? html_encode(options.type) : '-'}</span>`;
h += `</div>`; h += H`</div>`;
// icon // icon
h += `<div class="item-icon">`; h += H`<div class="item-icon">`;
h += `<img src="${html_encode(options.icon.image)}" class="item-icon-${options.icon.type}" data-item-id="${item_id}">`; h += H`<img src="${html_encode(options.icon.image)}" class="item-icon-${options.icon.type}" data-item-id="${item_id}">`;
h += `</div>`; h += H`</div>`;
// badges // badges
h += `<div class="item-badges">`; h += H`<div class="item-badges">`;
// website badge // website badge
h += `<img class="item-badge item-has-website-badge long-hover" h += H`<img class="item-badge item-has-website-badge long-hover"
style="${options.has_website ? 'display:block;' : ''}" style="${options.has_website ? 'display:block;' : ''}"
src="${html_encode(window.icons['world.svg'])}" src="${html_encode(window.icons['world.svg'])}"
data-item-id="${item_id}" data-item-id="${item_id}"
>`; >`;
// link badge // link badge
h += `<img class="item-badge item-has-website-url-badge" h += H`<img class="item-badge item-has-website-url-badge"
style="${website_url ? 'display:block;' : ''}" style="${website_url ? 'display:block;' : ''}"
src="${html_encode(window.icons['link.svg'])}" src="${html_encode(window.icons['link.svg'])}"
data-item-id="${item_id}" data-item-id="${item_id}"
>`; >`;
// shared badge // shared badge
h += `<img class="item-badge item-badge-has-permission" h += H`<img class="item-badge item-badge-has-permission"
style="display: ${ is_shared_with_me ? 'block' : 'none'}; style="display: ${ is_shared_with_me ? 'block' : 'none'};
background-color: #ffffff; background-color: #ffffff;
padding: 2px;" src="${html_encode(window.icons['shared.svg'])}" padding: 2px;" src="${html_encode(window.icons['shared.svg'])}"
data-item-id="${item_id}" data-item-id="${item_id}"
title="A user has shared this item with you.">`; title="A user has shared this item with you.">`;
// owner-shared badge // owner-shared badge
h += `<img class="item-badge item-is-shared" h += H`<img class="item-badge item-is-shared"
style="background-color: #ffffff; padding: 2px; ${!is_shared_with_me && options.is_shared ? 'display:block;' : ''}" style="background-color: #ffffff; padding: 2px; ${!is_shared_with_me && options.is_shared ? 'display:block;' : ''}"
src="${html_encode(window.icons['owner-shared.svg'])}" src="${html_encode(window.icons['owner-shared.svg'])}"
data-item-id="${item_id}" data-item-id="${item_id}"
@ -126,20 +126,20 @@ const get_html_element_from_options = async function(options){
title="You have shared this item with at least one other user." title="You have shared this item with at least one other user."
>`; >`;
// shortcut badge // shortcut badge
h += `<img class="item-badge item-shortcut" h += H`<img class="item-badge item-shortcut"
style="background-color: #ffffff; padding: 2px; ${options.is_shortcut !== 0 ? 'display:block;' : ''}" style="background-color: #ffffff; padding: 2px; ${options.is_shortcut !== 0 ? 'display:block;' : ''}"
src="${html_encode(window.icons['shortcut.svg'])}" src="${html_encode(window.icons['shortcut.svg'])}"
data-item-id="${item_id}" data-item-id="${item_id}"
title="Shortcut" title="Shortcut"
>`; >`;
h += `</div>`; h += H`</div>`;
// name // name
h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;')}</span>` h += H`<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;')}</span>`
// name editor // name editor
h += `<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${html_encode(options.name)}</textarea>` h += H`<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${html_encode(options.name)}</textarea>`
h += `</div>`; h += H`</div>`;
return h; return h;
} }

12
src/initgui.js
View File

@ -1515,7 +1515,17 @@ window.privacy_aware_path = function(fspath){
// A fake html_encode for the example at the bottom // A fake html_encode for the example at the bottom
window.hescape = text => { window.hescape = text => {
return html_encode(text); if(!text)
return '';
// escape html
text = html_encode(text);
// replace space with &nbsp; to preserve spaces
if(typeof text === 'string')
text = text.replaceAll(' ', '&nbsp;');
// return the escaped text
return text;
}; };
// The entire implementation of the thing // The entire implementation of the thing