mirror of
https://github.com/HeyPuter/puter
synced 2024-11-15 06:15:47 +00:00
wip
This commit is contained in:
Nariman Jelveh
parent
8e105715f1
commit
c4cb830258
@ -32,45 +32,45 @@ export default {
|
||||
|
||||
// change password button
|
||||
if(!window.user.is_temp){
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<strong>${i18n('password')}</strong>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="settings-card">`;
|
||||
h += H`<strong>${i18n('password')}</strong>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// change username button
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<div>`;
|
||||
h += `<strong style="display:block;">${i18n('username')}</strong>`;
|
||||
h += `<span class="username" style="display:block; margin-top:5px;">${html_encode(window.user.username)}</span>`;
|
||||
h += `</div>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
|
||||
h += `</div>`
|
||||
h += `</div>`;
|
||||
h += H`<div class="settings-card">`;
|
||||
h += H`<div>`;
|
||||
h += H`<strong style="display:block;">${i18n('username')}</strong>`;
|
||||
h += H`<span class="username" style="display:block; margin-top:5px;">${html_encode(window.user.username)}</span>`;
|
||||
h += H`</div>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button change-username" style="float:right;">${i18n('change_username')}</button>`;
|
||||
h += H`</div>`
|
||||
h += H`</div>`;
|
||||
|
||||
// change email button
|
||||
if(window.user.email){
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<div>`;
|
||||
h += `<strong style="display:block;">${i18n('email')}</strong>`;
|
||||
h += `<span class="user-email" style="display:block; margin-top:5px;">${html_encode(window.user.email)}</span>`;
|
||||
h += `</div>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="settings-card">`;
|
||||
h += H`<div>`;
|
||||
h += H`<strong style="display:block;">${i18n('email')}</strong>`;
|
||||
h += H`<span class="user-email" style="display:block; margin-top:5px;">${html_encode(window.user.email)}</span>`;
|
||||
h += H`</div>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button change-email" style="float:right;">${i18n('change_email')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// 'Delete Account' button
|
||||
h += `<div class="settings-card settings-card-danger">`;
|
||||
h += `<strong style="display: inline-block;">${i18n("delete_account")}</strong>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button button-danger delete-account" style="float:right;">${i18n("delete_account")}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="settings-card settings-card-danger">`;
|
||||
h += H`<strong style="display: inline-block;">${i18n("delete_account")}</strong>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button button-danger delete-account" style="float:right;">${i18n("delete_account")}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
return h;
|
||||
},
|
||||
|
||||
@ -27,17 +27,17 @@ export default {
|
||||
let h = `<h1>${i18n('language')}</h1>`;
|
||||
|
||||
// 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">
|
||||
</div>`;
|
||||
|
||||
// list of languages
|
||||
const available_languages = window.listSupportedLanguages();
|
||||
h += `<div class="language-list">`;
|
||||
h += H`<div class="language-list">`;
|
||||
for (let lang of available_languages) {
|
||||
h += `<div class="language-item ${window.locale === lang.code ? 'active': ''}" data-lang="${lang.code}" data-english-name="${html_encode(lang.english_name)}">${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;
|
||||
},
|
||||
init: ($el_window) => {
|
||||
|
||||
@ -18,36 +18,36 @@ export default {
|
||||
|
||||
// change password button
|
||||
if(!user.is_temp){
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<strong>${i18n('password')}</strong>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="settings-card">`;
|
||||
h += H`<strong>${i18n('password')}</strong>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button change-password" style="float:right;">${i18n('change_password')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// session manager
|
||||
h += `<div class="settings-card">`;
|
||||
h += `<strong>${i18n('sessions')}</strong>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
h += `<button class="button manage-sessions" style="float:right;">${i18n('manage_sessions')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="settings-card">`;
|
||||
h += H`<strong>${i18n('sessions')}</strong>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button manage-sessions" style="float:right;">${i18n('manage_sessions')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// configure 2FA
|
||||
if(!user.is_temp){
|
||||
h += `<div class="settings-card settings-card-security ${user.otp ? 'settings-card-success' : 'settings-card-warning'}">`;
|
||||
h += `<div>`;
|
||||
h += `<strong style="display:block;">${i18n('two_factor')}</strong>`;
|
||||
h += `<span class="user-otp-state" style="display:block; margin-top:5px;">${
|
||||
h += H`<div class="settings-card settings-card-security ${user.otp ? 'settings-card-success' : 'settings-card-warning'}">`;
|
||||
h += H`<div>`;
|
||||
h += H`<strong style="display:block;">${i18n('two_factor')}</strong>`;
|
||||
h += H`<span class="user-otp-state" style="display:block; margin-top:5px;">${
|
||||
i18n(user.otp ? 'two_factor_enabled' : 'two_factor_disabled')
|
||||
}</span>`;
|
||||
h += `</div>`;
|
||||
h += `<div style="flex-grow:1;">`;
|
||||
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 += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`<div style="flex-grow:1;">`;
|
||||
h += H`<button class="button enable-2fa" style="float:right;${user.otp ? 'display:none;' : ''}">${i18n('enable_2fa')}</button>`;
|
||||
h += H`<button class="button disable-2fa" style="float:right;${user.otp ? '' : 'display:none;'}">${i18n('disable_2fa')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
return h;
|
||||
|
||||
@ -31,25 +31,25 @@ async function UIWindowChangeEmail(options){
|
||||
|
||||
const internal_id = window.uuidv4();
|
||||
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
|
||||
h += `<div class="form-error-msg"></div>`;
|
||||
h += H`<div class="form-error-msg"></div>`;
|
||||
// success msg
|
||||
h += `<div class="form-success-msg"></div>`;
|
||||
h += H`<div class="form-success-msg"></div>`;
|
||||
// new email
|
||||
h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
|
||||
h += H`<label for="confirm-new-email-${internal_id}">${i18n('new_email')}</label>`;
|
||||
h += H`<input id="confirm-new-email-${internal_id}" type="text" name="new-email" class="new-email" autocomplete="off" />`;
|
||||
h += H`</div>`;
|
||||
// password confirmation
|
||||
h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
|
||||
h += `<label>${i18n('account_password')}</label>`;
|
||||
h += `${place_password_entry.html}`;
|
||||
h += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
|
||||
h += H`<label>${i18n('account_password')}</label>`;
|
||||
h += H`${place_password_entry.html}`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Change Email
|
||||
h += `<button class="change-email-btn button button-primary button-block button-normal">${i18n('change_email')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="change-email-btn button button-primary button-block button-normal">${i18n('change_email')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('change_email'),
|
||||
|
||||
@ -25,13 +25,13 @@ async function UIWindowConfirmUserDeletion(options){
|
||||
options = options ?? {};
|
||||
|
||||
let h = '';
|
||||
h += `<div style="padding: 20px;">`;
|
||||
h += `<div class="generic-close-window-button disable-user-select"> × </div>`;
|
||||
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 += `<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 += `</div>`;
|
||||
h += H`<div style="padding: 20px;">`;
|
||||
h += H`<div class="generic-close-window-button disable-user-select"> × </div>`;
|
||||
h += H`<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
|
||||
h += H`<p class="account-deletion-confirmation-prompt">${i18n('confirm_delete_user')}</p>`;
|
||||
h += 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-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('confirm_delete_user_title'),
|
||||
|
||||
@ -27,31 +27,31 @@ async function UIWindowFinalizeUserDeletion(options){
|
||||
|
||||
// if user is temporary, ask them to type in 'confirm' to delete their account
|
||||
if(window.user.is_temp){
|
||||
h += `<div style="padding: 20px;">`;
|
||||
h += `<div class="generic-close-window-button disable-user-select"> × </div>`;
|
||||
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`<div style="padding: 20px;">`;
|
||||
h += H`<div class="generic-close-window-button disable-user-select"> × </div>`;
|
||||
h += H`<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
|
||||
h += H`<p class="account-deletion-confirmation-prompt">${i18n('type_confirm_to_delete_account')}</p>`;
|
||||
// error message
|
||||
h += `<div class="error-message"></div>`;
|
||||
h += H`<div class="error-message"></div>`;
|
||||
// input field
|
||||
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 += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<input type="text" class="confirm-temporary-user-deletion" placeholder="${i18n('type_confirm_to_delete_account')}">`;
|
||||
h += H`<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`;
|
||||
h += H`<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
// otherwise ask for password
|
||||
else{
|
||||
h += `<div style="padding: 20px;">`;
|
||||
h += `<div class="generic-close-window-button disable-user-select"> × </div>`;
|
||||
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`<div style="padding: 20px;">`;
|
||||
h += H`<div class="generic-close-window-button disable-user-select"> × </div>`;
|
||||
h += H`<img src="${window.icons['danger.svg']}" class="account-deletion-confirmation-icon">`;
|
||||
h += H`<p class="account-deletion-confirmation-prompt">${i18n('enter_password_to_confirm_delete_user')}</p>`;
|
||||
// error message
|
||||
h += `<div class="error-message"></div>`;
|
||||
h += H`<div class="error-message"></div>`;
|
||||
// input field
|
||||
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 += `<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<input type="password" class="confirm-user-deletion-password" placeholder="${i18n('current_password')}">`;
|
||||
h += H`<button class="button button-block button-danger proceed-with-user-deletion">${i18n('delete_account')}</button>`;
|
||||
h += H`<button class="button button-block button-secondary cancel-user-deletion">${i18n('cancel')}</button>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
const el_window = await UIWindow({
|
||||
|
||||
@ -31,34 +31,34 @@ async function UIWindowSettings(options){
|
||||
|
||||
let h = '';
|
||||
|
||||
h += `<div class="settings-container">`;
|
||||
h += `<div class="settings">`;
|
||||
h += H`<div class="settings-container">`;
|
||||
h += H`<div class="settings">`;
|
||||
// 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) => {
|
||||
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
|
||||
h += `<div class="settings-content-container">`;
|
||||
h += H`<div class="settings-content-container">`;
|
||||
|
||||
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 ) {
|
||||
tab_placeholders[i] = Placeholder();
|
||||
h += tab_placeholders[i].html;
|
||||
} else {
|
||||
h += tab.html();
|
||||
}
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
});
|
||||
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
h += ``;
|
||||
h += H``;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Settings',
|
||||
|
||||
@ -46,30 +46,20 @@ function UIAlert(options){
|
||||
if(options.type === 'success')
|
||||
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(/<strong>/g, '<strong>');
|
||||
santized_message = santized_message.replace(/<\/strong>/g, '</strong>');
|
||||
|
||||
// replace sanitized <p> with <p>
|
||||
santized_message = santized_message.replace(/<p>/g, '<p>');
|
||||
santized_message = santized_message.replace(/<\/p>/g, '</p>');
|
||||
|
||||
let h = '';
|
||||
// icon
|
||||
h += H`<img class="window-alert-icon" src="${html_encode(options.body_icon)}">`;
|
||||
// message
|
||||
h += H`<div class="window-alert-message">${santized_message}</div>`;
|
||||
h += H`<img class="window-alert-icon" src="${(options.body_icon)}">`;
|
||||
// message. It's later sanitized and added to the window
|
||||
h += H`<div class="window-alert-message"></div>`;
|
||||
// buttons
|
||||
if(options.buttons && options.buttons.length > 0){
|
||||
h += H`<div style="overflow:hidden; margin-top:20px;">`;
|
||||
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"
|
||||
data-label="${html_encode(options.buttons[y].label)}"
|
||||
data-value="${html_encode(options.buttons[y].value ?? options.buttons[y].label)}"
|
||||
h += H`<button class="button button-block button-${(options.buttons[y].type)} alert-resp-button"
|
||||
data-label="${(options.buttons[y].label)}"
|
||||
data-value="${(options.buttons[y].value ?? options.buttons[y].label)}"
|
||||
${options.buttons[y].type === 'primary' ? 'autofocus' : ''}
|
||||
>${html_encode(options.buttons[y].label)}</button>`;
|
||||
>${(options.buttons[y].label)}</button>`;
|
||||
}
|
||||
h += H`</div>`;
|
||||
}
|
||||
@ -96,6 +86,20 @@ function UIAlert(options){
|
||||
width: 350,
|
||||
parent_uuid: options.parent_uuid,
|
||||
...options.window_options,
|
||||
onAppend: function(el_window){
|
||||
let santized_message = html_encode(options.message);
|
||||
|
||||
// replace sanitized <strong> with <strong>
|
||||
santized_message = santized_message.replace(/<strong>/g, '<strong>');
|
||||
santized_message = santized_message.replace(/<\/strong>/g, '</strong>');
|
||||
|
||||
// replace sanitized <p> with <p>
|
||||
santized_message = santized_message.replace(/<p>/g, '<p>');
|
||||
santized_message = santized_message.replace(/<\/p>/g, '</p>');
|
||||
|
||||
// set message
|
||||
$(el_window).find('.window-alert-message').html(options.message);
|
||||
},
|
||||
window_css:{
|
||||
height: 'initial',
|
||||
},
|
||||
|
||||
@ -351,7 +351,7 @@ function UIContextMenu(options){
|
||||
|
||||
const menu_id = window.global_element_id++;
|
||||
let h = '';
|
||||
h += `<div
|
||||
h += H`<div
|
||||
id="context-menu-${menu_id}"
|
||||
data-is-submenu="${options.is_submenu ? 'true' : 'false'}"
|
||||
data-element-id="${menu_id}"
|
||||
@ -366,46 +366,46 @@ function UIContextMenu(options){
|
||||
if(!options.items[i].is_divider && options.items[i] !== '-'){
|
||||
// single item
|
||||
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' : ''}"
|
||||
>`;
|
||||
// icon
|
||||
if(options.items[i].checked === true){
|
||||
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">✓</span>`;
|
||||
h += H`<span class="context-menu-item-icon-active">✓</span>`;
|
||||
}else{
|
||||
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">${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
|
||||
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">${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
|
||||
else{
|
||||
h += `<li data-action="${i}"
|
||||
h += H`<li data-action="${i}"
|
||||
data-menu-id="${menu_id}-${i}"
|
||||
data-has-submenu="true"
|
||||
data-parent-element-id="${menu_id}"
|
||||
class="context-menu-item-submenu context-menu-item${options.items[i].disabled ? ' context-menu-item-disabled' : ''}"
|
||||
>`;
|
||||
// icon
|
||||
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">${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
|
||||
h += `${html_encode(options.items[i].html)}`;
|
||||
h += H`${options.items[i].html}`;
|
||||
// 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 += `</li>`;
|
||||
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 += H`</li>`;
|
||||
}
|
||||
}
|
||||
// divider
|
||||
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)
|
||||
|
||||
const contextMenu = document.getElementById(`context-menu-${menu_id}`);
|
||||
|
||||
@ -534,24 +534,24 @@ async function UIDesktop(options){
|
||||
});
|
||||
|
||||
// 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="path" id="upload-target-path" value="">
|
||||
<input type="file" name="file" id="upload-file-dialog" style="display: none;" multiple="multiple">
|
||||
</form>`;
|
||||
|
||||
h += `<div class="window-container"></div>`;
|
||||
h += H`<div class="window-container"></div>`;
|
||||
|
||||
// Desktop
|
||||
// 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
|
||||
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-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-path="${html_encode(window.desktop_path)}"
|
||||
>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Get window sidebar width
|
||||
puter.kv.get('window_sidebar_width').then(async (val) => {
|
||||
@ -1006,7 +1006,7 @@ async function UIDesktop(options){
|
||||
|
||||
// user options menu
|
||||
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>`;
|
||||
|
||||
|
||||
@ -73,7 +73,6 @@ function UIItem(options){
|
||||
// --------------------------------------------------------
|
||||
// HTML for Item
|
||||
// --------------------------------------------------------
|
||||
console.log('options', options)
|
||||
let h = '';
|
||||
h += H`<div id="item-${item_id}"
|
||||
class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}"
|
||||
@ -163,7 +162,7 @@ function UIItem(options){
|
||||
h += H`</div>`;
|
||||
|
||||
// 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
|
||||
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>`;
|
||||
@ -181,8 +180,6 @@ function UIItem(options){
|
||||
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 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(' ', ' '));
|
||||
|
||||
// update parent window's explorer item count if applicable
|
||||
if(options.appendTo !== undefined){
|
||||
|
||||
@ -22,16 +22,16 @@ function UINotification(options){
|
||||
options.text = options.text ?? '';
|
||||
|
||||
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 += `<img class="notification-close disable-user-select" src="${html_encode(window.icons['close.svg'])}">`;
|
||||
h += `<div class="notification-icon">`;
|
||||
h += `<img src="${html_encode(options.icon ?? window.icons['bell.svg'])}">`;
|
||||
h += `</div>`;
|
||||
h += `<div class="notification-content">`;
|
||||
h += `<div class="notification-title">${html_encode(options.title)}</div>`;
|
||||
h += `<div class="notification-text">${html_encode(options.text)}</div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
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`<img class="notification-close disable-user-select" src="${window.icons['close.svg']}">`;
|
||||
h += H`<div class="notification-icon">`;
|
||||
h += H`<img src="${options.icon ?? window.icons['bell.svg']}">`;
|
||||
h += H`</div>`;
|
||||
h += H`<div class="notification-content">`;
|
||||
h += H`<div class="notification-title">${options.title}</div>`;
|
||||
h += H`<div class="notification-text">${options.text}</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
$('.notification-container').prepend(h);
|
||||
|
||||
|
||||
@ -30,9 +30,9 @@ function UIPopover(options){
|
||||
options.content = options.content ?? '';
|
||||
|
||||
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 += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
$('body').append(h);
|
||||
|
||||
|
||||
@ -44,17 +44,17 @@ function UIPrompt(options){
|
||||
|
||||
let h = '';
|
||||
// message
|
||||
h += `<div class="window-prompt-message">${options.message}</div>`;
|
||||
h += H`<div class="window-prompt-message">${options.message}</div>`;
|
||||
// prompt
|
||||
h += `<div class="window-alert-prompt" style="margin-top: 20px;">`;
|
||||
h += `<input type="text" class="prompt-input" placeholder="${options.placeholder ?? ''}" value="${options.value ?? ''}">`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="window-alert-prompt" style="margin-top: 20px;">`;
|
||||
h += H`<input type="text" class="prompt-input" placeholder="${options.placeholder ?? ''}" value="${options.value ?? ''}">`;
|
||||
h += H`</div>`;
|
||||
// buttons
|
||||
if(options.buttons && options.buttons.length > 0){
|
||||
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 += `<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 style="overflow:hidden; margin-top:20px; float:right;">`;
|
||||
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 += 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`</div>`;
|
||||
}
|
||||
|
||||
const el_window = await UIWindow({
|
||||
|
||||
@ -42,7 +42,7 @@ async function UITaskbar(options){
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
|
||||
@ -32,30 +32,30 @@ function UITaskbarItem(options){
|
||||
options.append_to_taskbar = options.append_to_taskbar ?? true;
|
||||
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}"
|
||||
data-taskbar-item-id = "${tray_item_id}"
|
||||
data-element-id = "${html_encode(element_id)}"
|
||||
data-name = "${html_encode(options.name)}"
|
||||
data-app = "${html_encode(options.app)}"
|
||||
data-keep-in-taskbar = "${html_encode(options.keep_in_taskbar ?? 'false')}"
|
||||
data-open-windows="${(options.open_windows_count)}"
|
||||
title = "${html_encode(options.name)}"
|
||||
style= "${options.style ? html_encode(options.style) : ''}"
|
||||
data-element-id = "${element_id}"
|
||||
data-name = "${options.name}"
|
||||
data-app = "${options.app}"
|
||||
data-keep-in-taskbar = "${options.keep_in_taskbar ?? 'false'}"
|
||||
data-open-windows="${options.open_windows_count}"
|
||||
title = "${options.name}"
|
||||
style= "${options.style ? options.style : ''}"
|
||||
>`;
|
||||
let icon = options.icon ? options.icon : window.icons['app.svg'];
|
||||
if(options.app === 'explorer')
|
||||
icon = window.icons['folders.svg'];
|
||||
|
||||
// taskbar icon
|
||||
h += `<div class="taskbar-icon">`;
|
||||
h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="taskbar-icon">`;
|
||||
h += H`<img src="${icon}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
|
||||
h += H`</div>`;
|
||||
|
||||
// active indicator
|
||||
if(options.app !== 'apps')
|
||||
h += `<span class="active-taskbar-indicator"></span>`;
|
||||
h += `</div>`;
|
||||
h += H`<span class="active-taskbar-indicator"></span>`;
|
||||
h += H`</div>`;
|
||||
|
||||
if(options.append_to_taskbar)
|
||||
$('.taskbar').append(h);
|
||||
|
||||
@ -185,28 +185,28 @@ async function UIWindow(options) {
|
||||
if(user_set_url_params.length > 0)
|
||||
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.uid !== undefined ? 'window-'+options.uid : ''}
|
||||
${options.window_class}
|
||||
${options.allow_user_select ? ' allow-user-select' : ''}
|
||||
${options.is_openFileDialog || options.is_saveFileDialog || options.is_directoryPicker ? 'window-filedialog' : ''}"
|
||||
id="window-${win_id}"
|
||||
data-allowed_file_types = "${html_encode(options.allowed_file_types)}"
|
||||
data-app="${html_encode(options.app)}"
|
||||
data-app_uuid="${html_encode(options.app_uuid ?? '')}"
|
||||
data-disable_parent_window = "${html_encode(options.disable_parent_window)}"
|
||||
data-name="${html_encode(options.title)}"
|
||||
data-path ="${html_encode(options.path)}"
|
||||
data-uid ="${html_encode(options.uid)}"
|
||||
data-element_uuid="${html_encode(options.element_uuid)}"
|
||||
data-parent_uuid="${html_encode(options.parent_uuid)}"
|
||||
data-allowed_file_types = "${(options.allowed_file_types)}"
|
||||
data-app="${(options.app)}"
|
||||
data-app_uuid="${(options.app_uuid ?? '')}"
|
||||
data-disable_parent_window = "${(options.disable_parent_window)}"
|
||||
data-name="${(options.title)}"
|
||||
data-path ="${(options.path)}"
|
||||
data-uid ="${(options.uid)}"
|
||||
data-element_uuid="${(options.element_uuid)}"
|
||||
data-parent_uuid="${(options.parent_uuid)}"
|
||||
${options.parent_instance_id ? `data-parent_instance_id="${options.parent_instance_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-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_saveFileDialog ="${options.is_saveFileDialog}"
|
||||
data-is_directoryPicker ="${options.is_directoryPicker}"
|
||||
@ -219,93 +219,93 @@ async function UIWindow(options) {
|
||||
data-sort_order ="${options.sort_order ?? 'asc'}"
|
||||
data-multiselectable = "${options.selectable_body}"
|
||||
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}"
|
||||
style=" z-index: ${zindex};
|
||||
${options.width !== undefined ? 'width: ' + html_encode(options.width) +'; ':''}
|
||||
${options.height !== undefined ? 'height: ' + html_encode(options.height) +'; ':''}
|
||||
${options.border_radius !== undefined ? 'border-radius: ' + html_encode(options.border_radius) +'; ':''}
|
||||
${options.width !== undefined ? 'width: ' + (options.width) +'; ':''}
|
||||
${options.height !== undefined ? 'height: ' + (options.height) +'; ':''}
|
||||
${options.border_radius !== undefined ? 'border-radius: ' + (options.border_radius) +'; ':''}
|
||||
"
|
||||
>`;
|
||||
// window mask
|
||||
h += `<div class="window-disable-mask">`;
|
||||
h += H`<div class="window-disable-mask">`;
|
||||
//busy indicator
|
||||
h += `<div class="busy-indicator">BUSY</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="busy-indicator">BUSY</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
|
||||
// Head
|
||||
if(options.has_head){
|
||||
h += `<div class="window-head">`;
|
||||
h += H`<div class="window-head">`;
|
||||
// draggable handle which also contains icon and title
|
||||
h+=`<div class="window-head-draggable">`;
|
||||
// icon
|
||||
if(options.icon)
|
||||
h += `<img class="window-head-icon" />`;
|
||||
h += H`<img class="window-head-icon" />`;
|
||||
// title
|
||||
h += `<span class="window-head-title" title="${html_encode(options.title)}"></span>`;
|
||||
h += `</div>`;
|
||||
h += H`<span class="window-head-title" title="${(options.title)}"></span>`;
|
||||
h += H`</div>`;
|
||||
// Minimize button, only if window is resizable and not 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
|
||||
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
|
||||
h += `<span class="window-action-btn window-close-btn"><img src="${html_encode(window.icons['close.svg'])}" draggable="false"></span>`;
|
||||
h += `</div>`;
|
||||
h += H`<span class="window-action-btn window-close-btn"><img src="${(window.icons['close.svg'])}" draggable="false"></span>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
if(options.is_dir && !isMobile.phone){
|
||||
h += `<div class="window-sidebar disable-user-select hide-scrollbar"
|
||||
style="${window.window_sidebar_width ? 'width: ' + html_encode(window.window_sidebar_width) + 'px !important;' : ''}"
|
||||
h += H`<div class="window-sidebar disable-user-select hide-scrollbar"
|
||||
style="${window.window_sidebar_width ? 'width: ' + (window.window_sidebar_width) + 'px !important;' : ''}"
|
||||
draggable="false"
|
||||
>`;
|
||||
// favorites
|
||||
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 += `<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 += `<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 += `<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 += `<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 += `<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 += `</div>`;
|
||||
h += H`<h2 class="window-sidebar-title disable-user-select">Favorites</h2>`;
|
||||
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 += 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 += 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 += 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 += 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 += 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 += H`</div>`;
|
||||
|
||||
}
|
||||
|
||||
// Menubar
|
||||
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'){
|
||||
$('.toolbar-puter-logo').after(`<div class="window-menubar window-menubar-global" data-window-id="${win_id}"></div>`);
|
||||
}
|
||||
|
||||
// Navbar
|
||||
if(options.is_dir){
|
||||
h += `<div class="window-navbar">`;
|
||||
h += `<div style="float:left; margin-left:5px; margin-right:5px;">`;
|
||||
h += H`<div class="window-navbar">`;
|
||||
h += H`<div style="float:left; margin-left:5px; margin-right:5px;">`;
|
||||
// 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
|
||||
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
|
||||
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 += `</div>`;
|
||||
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 += H`</div>`;
|
||||
// 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
|
||||
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
|
||||
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 += `</div>`;
|
||||
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 += H`</div>`;
|
||||
}
|
||||
|
||||
// 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' : ''}"
|
||||
data-allowed_file_types="${html_encode(options.allowed_file_types)}"
|
||||
data-path="${html_encode(options.path)}"
|
||||
data-allowed_file_types="${(options.allowed_file_types)}"
|
||||
data-path="${(options.path)}"
|
||||
data-multiselectable = "${options.selectable_body}"
|
||||
data-sort_by ="${options.sort_by ?? 'name'}"
|
||||
data-sort_order ="${options.sort_order ?? 'asc'}"
|
||||
@ -317,12 +317,12 @@ async function UIWindow(options) {
|
||||
// <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.
|
||||
// this is a security risk and must be avoided.
|
||||
h += `<iframe tabindex="-1"
|
||||
data-app="${html_encode(options.app)}"
|
||||
h += H`<iframe tabindex="-1"
|
||||
data-app="${(options.app)}"
|
||||
class="window-app-iframe"
|
||||
frameborder="0"
|
||||
${options.iframe_url ? 'src="'+ html_encode(options.iframe_url)+'"' : ''}
|
||||
${options.iframe_srcdoc ? 'srcdoc="'+ html_encode(options.iframe_srcdoc) +'"' : ''}
|
||||
${options.iframe_url ? 'src="'+ (options.iframe_url)+'"' : ''}
|
||||
${options.iframe_srcdoc ? 'srcdoc="'+ (options.iframe_srcdoc) +'"' : ''}
|
||||
allow = "accelerometer; camera; encrypted-media; gamepad; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; fullscreen;"
|
||||
allowtransparency="true"
|
||||
allowpaymentrequest="true"
|
||||
@ -355,7 +355,7 @@ async function UIWindow(options) {
|
||||
|
||||
if ( components.length === 2 && components[1] === 'Public' ) {
|
||||
const username = components[0];
|
||||
h += `<iframe
|
||||
h += H`<iframe
|
||||
style="display:block;width:100%"
|
||||
tabindex="-1"
|
||||
frameborder="0"
|
||||
@ -367,62 +367,62 @@ async function UIWindow(options) {
|
||||
})();
|
||||
|
||||
// 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
|
||||
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 += `<p class="explorer-loading-spinner-msg">${i18n('loading')}...</p>`;
|
||||
h += `</div>`;
|
||||
h += H`<p class="explorer-loading-spinner-msg">${i18n('loading')}...</p>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Explorer footer
|
||||
if(options.is_dir && !options.is_saveFileDialog && !options.is_openFileDialog && !options.is_directoryPicker){
|
||||
h += `<div class="explorer-footer">`
|
||||
h += `<span class="explorer-footer-item-count"></span>`;
|
||||
h += `<span class="explorer-footer-seperator">|</span>`;
|
||||
h += `<span class="explorer-footer-selected-items-count"></span>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="explorer-footer">`
|
||||
h += H`<span class="explorer-footer-item-count"></span>`;
|
||||
h += H`<span class="explorer-footer-seperator">|</span>`;
|
||||
h += H`<span class="explorer-footer-selected-items-count"></span>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// is_saveFileDialog
|
||||
if(options.is_saveFileDialog){
|
||||
h += `<div class="window-filedialog-prompt">`;
|
||||
h += `<div style="display:flex;">`;
|
||||
h += `<input type="text" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${html_encode(options.saveFileDialog_default_filename) ?? ''}">`;
|
||||
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
||||
h += `<button class="button `;
|
||||
h += H`<div class="window-filedialog-prompt">`;
|
||||
h += H`<div style="display:flex;">`;
|
||||
h += H`<input type="text" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${(options.saveFileDialog_default_filename) ?? ''}">`;
|
||||
h += H`<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
||||
h += H`<button class="button `;
|
||||
if(options.saveFileDialog_default_filename === undefined || options.saveFileDialog_default_filename === '')
|
||||
h+= `disabled `;
|
||||
h += `button-small button-primary savefiledialog-save-btn">Save</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`button-small button-primary savefiledialog-save-btn">Save</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// is_openFileDialog
|
||||
else if(options.is_openFileDialog){
|
||||
h += `<div class="window-filedialog-prompt">`;
|
||||
h += `<div style="text-align:right;">`;
|
||||
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 += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="window-filedialog-prompt">`;
|
||||
h += H`<div style="text-align:right;">`;
|
||||
h += H`<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
||||
h += H`<button class="button disabled button-small button-primary openfiledialog-open-btn">Open</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
|
||||
// is_directoryPicker
|
||||
else if(options.is_directoryPicker){
|
||||
h += `<div class="window-filedialog-prompt">`;
|
||||
h += `<div style="text-align:right;">`;
|
||||
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 += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="window-filedialog-prompt">`;
|
||||
h += H`<div style="text-align:right;">`;
|
||||
h += H`<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
||||
h += H`<button class="button button-small button-primary directorypicker-select-btn" style="margin-left:10px;">Select</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// backdrop
|
||||
if(options.backdrop){
|
||||
@ -1039,18 +1039,18 @@ async function UIWindow(options) {
|
||||
puter.fs.readdir('/').then(function(shared_users){
|
||||
let ht = '';
|
||||
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++) {
|
||||
const shared_user = shared_users[index];
|
||||
// don't show current user's folder!
|
||||
if(shared_user.name === window.user.username)
|
||||
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-sharing-username="${html_encode(shared_user.name)}"
|
||||
title="${html_encode(shared_user.name)}"
|
||||
data-sharing-username="${(shared_user.name)}"
|
||||
title="${(shared_user.name)}"
|
||||
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>`;
|
||||
}
|
||||
}
|
||||
@ -3239,12 +3239,12 @@ window.set_sort_by = function(item_uid, sort_by, sort_order){
|
||||
|
||||
window.explore_table_headers = function(){
|
||||
let 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 += `<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 += `<div class="explore-table-headers-th explore-table-headers-th--type">Type<span class="header-sort-icon"></span></div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="explore-table-headers">`;
|
||||
h += 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--modified">Modified<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 += H`<div class="explore-table-headers-th explore-table-headers-th--type">Type<span class="header-sort-icon"></span></div>`;
|
||||
h += H`</div>`;
|
||||
return h;
|
||||
}
|
||||
|
||||
|
||||
@ -25,30 +25,30 @@ async function UIWindowChangePassword(options){
|
||||
|
||||
const internal_id = window.uuidv4();
|
||||
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
|
||||
h += `<div class="form-error-msg"></div>`;
|
||||
h += H`<div class="form-error-msg"></div>`;
|
||||
// success msg
|
||||
h += `<div class="form-success-msg"></div>`;
|
||||
h += H`<div class="form-success-msg"></div>`;
|
||||
// current password
|
||||
h += `<div style="overflow: hidden; margin-bottom: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-bottom: 20px;">`;
|
||||
h += H`<label for="current-password-${internal_id}">${i18n('current_password')}</label>`;
|
||||
h += H`<input id="current-password-${internal_id}" class="current-password" type="password" name="current-password" autocomplete="current-password" />`;
|
||||
h += H`</div>`;
|
||||
// new password
|
||||
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
h += H`<label for="new-password-${internal_id}">${i18n('new_password')}</label>`;
|
||||
h += H`<input id="new-password-${internal_id}" type="password" class="new-password" name="new-password" autocomplete="off" />`;
|
||||
h += H`</div>`;
|
||||
// confirm new password
|
||||
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 += `<input id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" class="confirm-new-password" autocomplete="off" />`;
|
||||
h += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
h += H`<label for="confirm-new-password-${internal_id}">${i18n('confirm_new_password')}</label>`;
|
||||
h += H`<input id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" class="confirm-new-password" autocomplete="off" />`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Change Password
|
||||
h += `<button class="change-password-btn button button-primary button-block button-normal">${i18n('change_password')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="change-password-btn button button-primary button-block button-normal">${i18n('change_password')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Change Password',
|
||||
|
||||
@ -25,20 +25,20 @@ async function UIWindowChangeUsername(options){
|
||||
|
||||
const internal_id = window.uuidv4();
|
||||
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
|
||||
h += `<div class="form-error-msg"></div>`;
|
||||
h += H`<div class="form-error-msg"></div>`;
|
||||
// success msg
|
||||
h += `<div class="form-success-msg"></div>`;
|
||||
h += H`<div class="form-success-msg"></div>`;
|
||||
// new username
|
||||
h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
|
||||
h += H`<label for="confirm-new-username-${internal_id}">${i18n('new_username')}</label>`;
|
||||
h += H`<input id="confirm-new-username-${internal_id}" type="text" name="new-username" class="new-username" autocomplete="off" />`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Change Username
|
||||
h += `<button class="change-username-btn button button-primary button-block button-normal">${i18n('change_username')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="change-username-btn button button-primary button-block button-normal">${i18n('change_username')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('change_username'),
|
||||
|
||||
@ -23,13 +23,13 @@ import UIWindowSaveAccount from './UIWindowSaveAccount.js';
|
||||
async function UIWindowClaimReferral(options){
|
||||
let h = '';
|
||||
|
||||
h += `<div>`;
|
||||
h += `<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> × </div>`;
|
||||
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 += `<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 += `</div>`;
|
||||
h += H`<div>`;
|
||||
h += H`<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> × </div>`;
|
||||
h += H`<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
|
||||
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 += 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`<button class="button button-primary button-block create-account-ref-btn" style="display: block;">${i18n('create_account')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: `Refer a friend!`,
|
||||
|
||||
@ -34,18 +34,18 @@ async function UIWindowColorPicker(options){
|
||||
let colorPicker;
|
||||
|
||||
let h = ``;
|
||||
h += `<div>`;
|
||||
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
|
||||
h += H`<div>`;
|
||||
h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
|
||||
// picker
|
||||
h += `<div style="padding: 0; margin-bottom: 20px;">`;
|
||||
h += `<div class="picker"></div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div style="padding: 0; margin-bottom: 20px;">`;
|
||||
h += H`<div class="picker"></div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Select button
|
||||
h += `<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>`
|
||||
h += `</form>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>`
|
||||
h += H`</form>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('select_color'),
|
||||
|
||||
@ -29,54 +29,54 @@ async function UIWindowDesktopBGSettings(options){
|
||||
bg_color = window.desktop_bg_color,
|
||||
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
|
||||
h += `<label>${i18n('background')}:</label>`;
|
||||
h += `<select class="desktop-bg-type" style="width: 150px; margin-bottom: 20px;">`
|
||||
h += `<option value="default">${i18n('default')}</option>`;
|
||||
h += `<option value="picture">${i18n('picture')}</option>`;
|
||||
h += `<option value="color">${i18n('color')}</option>`;
|
||||
h += `</select>`;
|
||||
h += H`<label>${i18n('background')}:</label>`;
|
||||
h += H`<select class="desktop-bg-type" style="width: 150px; margin-bottom: 20px;">`
|
||||
h += H`<option value="default">${i18n('default')}</option>`;
|
||||
h += H`<option value="picture">${i18n('picture')}</option>`;
|
||||
h += H`<option value="color">${i18n('color')}</option>`;
|
||||
h += H`</select>`;
|
||||
|
||||
// Picture
|
||||
h += `<div class="desktop-bg-settings-wrapper desktop-bg-settings-picture">`;
|
||||
h += `<label>${i18n('image')}:</label>`;
|
||||
h += `<button class="button button-default button-small browse">${i18n('browse')}</button>`;
|
||||
h += `<label style="margin-top: 20px;">${i18n('fit')}:</label>`;
|
||||
h += `<select class="desktop-bg-fit" style="width: 150px;">`
|
||||
h += `<option value="cover">${i18n('cover')}</option>`;
|
||||
h += `<option value="center">${i18n('center')}</option>`;
|
||||
h += `<option value="contain">${i18n('contain')}</option>`;
|
||||
h += `<option value="repeat">${i18n('repeat')}</option>`;
|
||||
h += `</select>`;
|
||||
h += `</div>`
|
||||
h += H`<div class="desktop-bg-settings-wrapper desktop-bg-settings-picture">`;
|
||||
h += H`<label>${i18n('image')}:</label>`;
|
||||
h += H`<button class="button button-default button-small browse">${i18n('browse')}</button>`;
|
||||
h += H`<label style="margin-top: 20px;">${i18n('fit')}:</label>`;
|
||||
h += H`<select class="desktop-bg-fit" style="width: 150px;">`
|
||||
h += H`<option value="cover">${i18n('cover')}</option>`;
|
||||
h += H`<option value="center">${i18n('center')}</option>`;
|
||||
h += H`<option value="contain">${i18n('contain')}</option>`;
|
||||
h += H`<option value="repeat">${i18n('repeat')}</option>`;
|
||||
h += H`</select>`;
|
||||
h += H`</div>`
|
||||
|
||||
// Color
|
||||
h += `<div class="desktop-bg-settings-wrapper desktop-bg-settings-color">`;
|
||||
h += `<label>${i18n('color')}:</label>`;
|
||||
h += `<div class="desktop-bg-color-blocks">`;
|
||||
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 += `<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 += `<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 += `<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 += `<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-settings-wrapper desktop-bg-settings-color">`;
|
||||
h += H`<label>${i18n('color')}:</label>`;
|
||||
h += H`<div class="desktop-bg-color-blocks">`;
|
||||
h += 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="#545554" style="background-color: #545554"></div>`;
|
||||
h += 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="#52A758" style="background-color: #52A758"></div>`;
|
||||
h += 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="#ffffff" style="background-color: #ffffff"></div>`;
|
||||
h += 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="#454545" style="background-color: #454545"></div>`;
|
||||
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-size: contain;
|
||||
background-position: center;"><input type="color" style="width:25px; height: 25px; opacity:0;"></div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
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 += `<button class="button button-default cancel" style="float:right; margin-right: 10px;">${i18n('cancel')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<div style="padding-top: 5px; overflow:hidden; margin-top: 25px; border-top: 1px solid #CCC;">`
|
||||
h += H`<button class="button button-primary apply" style="float:right;">${i18n('apply')}</button>`;
|
||||
h += H`<button class="button button-default cancel" style="float:right; margin-right: 10px;">${i18n('cancel')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('change_desktop_background'),
|
||||
|
||||
@ -29,14 +29,14 @@ function UIWindowEmailConfirmationRequired(options){
|
||||
const submit_btn_txt = 'Confirm Email';
|
||||
|
||||
let h = '';
|
||||
h += `<div class="qr-code-window-close-btn generic-close-window-button"> × </div>`;
|
||||
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 += `<h3 style="text-align:center; font-weight: 500; font-size: 20px;">Confirm Your Email Address</h3>`;
|
||||
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 += `<div class="error"></div>`;
|
||||
h += ` <fieldset name="number-code" style="border: none; padding:0;" data-number-code-form>
|
||||
h += H`<div class="qr-code-window-close-btn generic-close-window-button"> × </div>`;
|
||||
h += H`<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`;
|
||||
h += H`<img src="${html_encode(window.icons['mail.svg'])}" style="display:block; margin:10px auto 10px;">`;
|
||||
h += H`<h3 style="text-align:center; font-weight: 500; font-size: 20px;">Confirm Your Email Address</h3>`;
|
||||
h += H`<form>`;
|
||||
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 += H`<div class="error"></div>`;
|
||||
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-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 />
|
||||
@ -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-5' data-number-code-input='5' required />
|
||||
</fieldset>`;
|
||||
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 += `<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`<button type="submit" class="button button-block button-primary email-confirm-btn" style="margin-top:10px;" disabled>${submit_btn_txt}</button>`;
|
||||
h += H`</form>`;
|
||||
h += H`<div style="text-align:center; padding:10px; font-size:14px; margin-top:10px;">`;
|
||||
h += H`<span class="send-conf-email">${i18n('resend_confirmation_code')}</span>`;
|
||||
if(options.logout_in_footer){
|
||||
h += ` • `;
|
||||
h += `<span class="conf-email-log-out">${i18n('log_out')}</span>`;
|
||||
h += H` • `;
|
||||
h += H`<span class="conf-email-log-out">${i18n('log_out')}</span>`;
|
||||
}
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: null,
|
||||
|
||||
@ -32,19 +32,19 @@ async function UIWindowQR(options){
|
||||
}
|
||||
|
||||
let h = '';
|
||||
h += `<div style="padding: 20px; margin-top: 0;">`;
|
||||
h += H`<div style="padding: 20px; margin-top: 0;">`;
|
||||
// success
|
||||
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 += `<p style="text-align:center; margin-bottom:10px; color: #005300; padding: 10px;">${i18n('feedback_sent_confirmation')}</p>`;
|
||||
h += H`<div class="feedback-sent-success">`;
|
||||
h += H`<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`;
|
||||
h += H`<p style="text-align:center; margin-bottom:10px; color: #005300; padding: 10px;">${i18n('feedback_sent_confirmation')}</p>`;
|
||||
h+= `</div>`;
|
||||
// form
|
||||
h += `<div class="feedback-form">`;
|
||||
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 += `<button class="button button-primary send-feedback-btn" style="float: right; margin-bottom: 15px; margin-top: 10px;">${i18n('send')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="feedback-form">`;
|
||||
h += H`<p style="margin-top:0; font-size: 15px; -webkit-font-smoothing: antialiased;">${i18n('feedback_c2a')}</p>`;
|
||||
h += H`<textarea class="feedback-message" style="width:100%; height: 200px; padding: 10px; box-sizing: border-box;"></textarea>`;
|
||||
h += H`<button class="button button-primary send-feedback-btn" style="float: right; margin-bottom: 15px; margin-top: 10px;">${i18n('send')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: i18n('contact_us'),
|
||||
|
||||
@ -51,19 +51,19 @@ async function UIWindowFontPicker(options){
|
||||
|
||||
return new Promise(async (resolve) => {
|
||||
let h = ``;
|
||||
h += `<div>`;
|
||||
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>`;
|
||||
h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
|
||||
h += H`<div class="font-list" style="margin-bottom: 10px; height: 200px; overflow-y: scroll; background-color: white; padding: 0 10px;">`;
|
||||
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
|
||||
h += `<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>`
|
||||
h += `</form>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="select-btn button button-primary button-block button-normal">${i18n('select')}</button>`
|
||||
h += H`</form>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Select font…',
|
||||
|
||||
@ -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
|
||||
async function UIWindowItemProperties(item_name, item_path, item_uid, left, top, width, height){
|
||||
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
|
||||
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 += `<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 class="item-props-tab">`;
|
||||
h += 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-btn-versions" data-tab="versions">${i18n('versions')}</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 += `<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 += `<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 += `<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 += `<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 += `<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 += `<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 += `<tr><td class="item-prop-label">Associated Websites</td><td class="item-prop-val item-prop-val-websites">`;
|
||||
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 += `</table>`;
|
||||
h += `</div>`;
|
||||
h += H`<table class="item-props-tbl">`;
|
||||
h += 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">Path</td><td class="item-prop-val item-prop-val-path"></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 += 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><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">UID</td><td class="item-prop-val item-prop-val-uid"></td></tr>`;
|
||||
h += 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">Size</td><td class="item-prop-val item-prop-val-size"></td></tr>`;
|
||||
h += 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">Created</td><td class="item-prop-val item-prop-val-created"></td></tr>`;
|
||||
h += 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">Associated Websites</td><td class="item-prop-val item-prop-val-websites">`;
|
||||
h += H`</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 += H`</table>`;
|
||||
h += H`</div>`;
|
||||
|
||||
h += `<div class="item-props-tab-content" data-tab="versions" style="padding: 20px;">`
|
||||
h += `<div class="item-props-version-list">`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="item-props-tab-content" data-tab="versions" style="padding: 20px;">`
|
||||
h += H`<div class="item-props-version-list">`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: `${item_name} properties`,
|
||||
|
||||
@ -21,13 +21,11 @@ import UIWindow from './UIWindow.js'
|
||||
import UIWindowSignup from './UIWindowSignup.js'
|
||||
import UIWindowRecoverPassword from './UIWindowRecoverPassword.js'
|
||||
import TeePromise from '../util/TeePromise.js';
|
||||
import UIAlert from './UIAlert.js';
|
||||
import UIComponentWindow from './UIComponentWindow.js';
|
||||
import Flexer from './Components/Flexer.js';
|
||||
import CodeEntryView from './Components/CodeEntryView.js';
|
||||
import JustHTML from './Components/JustHTML.js';
|
||||
import StepView from './Components/StepView.js';
|
||||
import TestView from './Components/TestView.js';
|
||||
import Button from './Components/Button.js';
|
||||
import RecoveryCodeEntryView from './Components/RecoveryCodeEntryView.js';
|
||||
|
||||
@ -41,45 +39,45 @@ async function UIWindowLogin(options){
|
||||
return new Promise(async (resolve) => {
|
||||
const internal_id = window.uuidv4();
|
||||
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)
|
||||
h += `<div class="generic-close-window-button"> × </div>`;
|
||||
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
|
||||
h += H`<div class="generic-close-window-button"> × </div>`;
|
||||
h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
|
||||
// title
|
||||
h += `<h1 class="login-form-title">${i18n('log_in')}</h1>`;
|
||||
h += H`<h1 class="login-form-title">${i18n('log_in')}</h1>`;
|
||||
// login form
|
||||
h += `<form class="login-form">`;
|
||||
h += H`<form class="login-form">`;
|
||||
// error msg
|
||||
h += `<div class="login-error-msg"></div>`;
|
||||
h += H`<div class="login-error-msg"></div>`;
|
||||
// username/email
|
||||
h += `<div style="overflow: hidden;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden;">`;
|
||||
h += H`<label for="email_or_username-${internal_id}">${i18n('email_or_username')}</label>`;
|
||||
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 += H`</div>`;
|
||||
// password with conditional type based based on options.show_password
|
||||
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px; position: relative;">`;
|
||||
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`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px; position: relative;">`;
|
||||
h += H`<label for="password-${internal_id}">${i18n('password')}</label>`;
|
||||
h += H`<input id="password-${internal_id}" class="password" type="${options.show_password ? "text" : "password"}" name="password" autocomplete="current-password"/>`;
|
||||
// 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">
|
||||
</span>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
// 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
|
||||
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
|
||||
h += `<div id="version-placeholder" class="version" style="text-align:center;"></div>`;
|
||||
h += `</form>`;
|
||||
h += `</div>`;
|
||||
h += H`<div id="version-placeholder" class="version" style="text-align:center;"></div>`;
|
||||
h += H`</form>`;
|
||||
h += H`</div>`;
|
||||
// create account link
|
||||
if(options.show_signup_button === undefined || options.show_signup_button){
|
||||
h += `<div class="c2a-wrapper" style="padding:20px;">`;
|
||||
h += `<button class="signup-c2a-clickable">${i18n('create_free_account')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="c2a-wrapper" style="padding:20px;">`;
|
||||
h += H`<button class="signup-c2a-clickable">${i18n('create_free_account')}</button>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// server and version infomration
|
||||
puter.os.version()
|
||||
|
||||
@ -24,15 +24,15 @@ async function UIWindowLoginInProgress(options){
|
||||
options = options ?? {};
|
||||
|
||||
let h = '';
|
||||
h += `<div class="login-progress">`;
|
||||
h += `<h1 style="text-align: center;
|
||||
h += H`<div class="login-progress">`;
|
||||
h += H`<h1 style="text-align: center;
|
||||
font-size: 20px;
|
||||
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>`;
|
||||
// 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 += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Authenticating...',
|
||||
|
||||
@ -23,8 +23,8 @@ import UIAlert from './UIAlert.js'
|
||||
|
||||
async function UIWindowMyWebsites(options){
|
||||
let h = '';
|
||||
h += `<div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: `My Websites`,
|
||||
@ -79,22 +79,22 @@ async function UIWindowMyWebsites(options){
|
||||
if(sites.length > 0){
|
||||
let h ='';
|
||||
for(let i=0; i< sites.length; i++){
|
||||
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 += `<img class="mywebsites-site-setting" data-site-uuid="${sites[i].uid}" src="${html_encode(window.icons['cog.svg'])}">`;
|
||||
h += H`<div class="mywebsites-card" data-uuid="${sites[i].uid}">`;
|
||||
h += H`<a class="mywebsites-address-link" href="https://${sites[i].subdomain}.puter.site" target="_blank">${sites[i].subdomain}.puter.site</a>`;
|
||||
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
|
||||
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+= `${html_encode(sites[i].root_dir.path)}`;
|
||||
h += `</p>`;
|
||||
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 += `<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 += H`<p style="margin-bottom:0; margin-top: 20px; font-size: 13px;">`;
|
||||
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 += H`<img style="width: 16px; margin-bottom: -2px; margin-right: 4px;" src="${html_encode(window.icons['plug.svg'])}">${i18n('disassociate_dir')}</span>`;
|
||||
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 += `</div>`;
|
||||
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 += H`</div>`;
|
||||
}
|
||||
$(el_window).find('.window-body').html(h);
|
||||
}
|
||||
|
||||
@ -28,23 +28,23 @@ async function UIWindowNewPassword(options){
|
||||
|
||||
const internal_id = window.uuidv4();
|
||||
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
|
||||
h += `<div class="form-error-msg"></div>`;
|
||||
h += H`<div class="form-error-msg"></div>`;
|
||||
// new password
|
||||
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
h += H`<label for="new-password-${internal_id}">${i18n('new_password')}</label>`;
|
||||
h += H`<input class="new-password" id="new-password-${internal_id}" type="password" name="new-password" autocomplete="off" />`;
|
||||
h += H`</div>`;
|
||||
// confirm new password
|
||||
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 += `<input class="confirm-new-password" id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" autocomplete="off" />`;
|
||||
h += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
h += H`<label for="confirm-new-password-${internal_id}">${i18n('confirm_new_password')}</label>`;
|
||||
h += H`<input class="confirm-new-password" id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" autocomplete="off" />`;
|
||||
h += H`</div>`;
|
||||
|
||||
// Change Password
|
||||
h += `<button class="change-password-btn button button-primary button-block button-normal">${i18n('set_new_password')}</button>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="change-password-btn button button-primary button-block button-normal">${i18n('set_new_password')}</button>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const response = await fetch(window.api_origin + "/verify-pass-recovery-token", {
|
||||
method: 'POST',
|
||||
|
||||
@ -39,45 +39,45 @@ async function UIWindowProgress({
|
||||
const placeholder_ok_btn = Placeholder();
|
||||
|
||||
let h = '';
|
||||
h += `<div ${operation_id ? `data-operation-id="${operation_id}"` : ''}>`;
|
||||
h += `<div class="progress-running">`;
|
||||
h += `<div style="display: flex; align-items: center; gap: 7px;">`;
|
||||
h += H`<div ${operation_id ? `data-operation-id="${operation_id}"` : ''}>`;
|
||||
h += H`<div class="progress-running">`;
|
||||
h += H`<div style="display: flex; align-items: center; gap: 7px;">`;
|
||||
// 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
|
||||
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>`;
|
||||
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>`;
|
||||
if (show_progress) {
|
||||
h += `<div class="progress-bar-container" style="margin-top:20px;">`;
|
||||
h += `<div class="progress-bar"></div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="progress-bar-container" style="margin-top:20px;">`;
|
||||
h += H`<div class="progress-bar"></div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
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 += `</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
h += `</div>`;
|
||||
h += `<div class="progress-error" style="display: none">`;
|
||||
h += `<div style="display: flex; align-items: center; gap: 7px;">`;
|
||||
h += H`</div>`;
|
||||
h += H`<div class="progress-error" style="display: none">`;
|
||||
h += H`<div style="display: flex; align-items: center; gap: 7px;">`;
|
||||
// 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
|
||||
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>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += `<p class="progress-error-message"></p>`;
|
||||
h += `<div style="display: flex; justify-content: flex-end;">`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`<p class="progress-error-message"></p>`;
|
||||
h += H`<div style="display: flex; justify-content: flex-end;">`;
|
||||
h += placeholder_ok_btn.html;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
uid: null,
|
||||
|
||||
@ -22,29 +22,29 @@ import UIWindowMyWebsites from './UIWindowMyWebsites.js'
|
||||
|
||||
async function UIWindowPublishWebsite(target_dir_uid, target_dir_name, target_dir_path){
|
||||
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
|
||||
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 += `<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 += `<button class="button button-normal button-block button-primary publish-window-ok-btn" style="margin-top:20px;">OK</button>`;
|
||||
h += H`<div class="window-publishWebsite-success">`;
|
||||
h += H`<img src="${html_encode(window.icons['c-check.svg'])}" style="width:80px; height:80px; display: block; margin:10px auto;">`;
|
||||
h += 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;"><a class="publishWebsite-published-link" target="_blank"></a><img class="publishWebsite-published-link-icon" src="${html_encode(window.icons['launch.svg'])}"></p>`;
|
||||
h += H`<button class="button button-normal button-block button-primary publish-window-ok-btn" style="margin-top:20px;">OK</button>`;
|
||||
h+= `</div>`;
|
||||
// form
|
||||
h += `<form class="window-publishWebsite-form">`;
|
||||
h += H`<form class="window-publishWebsite-form">`;
|
||||
// error msg
|
||||
h += `<div class="publish-website-error-msg"></div>`;
|
||||
h += H`<div class="publish-website-error-msg"></div>`;
|
||||
// subdomain
|
||||
h += `<div style="overflow: hidden;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden;">`;
|
||||
h += H`<label style="margin-bottom: 10px;">${i18n('pick_name_for_website')}</label>`;
|
||||
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 += H`</div>`;
|
||||
// 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
|
||||
h += `<button class="publish-btn button button-action button-block button-normal">${i18n('publish')}</button>`
|
||||
h += `</form>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="publish-btn button button-action button-block button-normal">${i18n('publish')}</button>`
|
||||
h += H`</form>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Publish Website',
|
||||
|
||||
@ -34,12 +34,12 @@ async function UIWindowQR(options){
|
||||
|
||||
let h = '';
|
||||
// close button containing the multiplication sign
|
||||
h += `<div class="qr-code-window-close-btn generic-close-window-button"> × </div>`;
|
||||
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`<div class="qr-code-window-close-btn generic-close-window-button"> × </div>`;
|
||||
h += H`<div class="otp-qr-code">`;
|
||||
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')
|
||||
}</h1>`;
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
h += placeholder_qr.html;
|
||||
|
||||
|
||||
@ -25,16 +25,16 @@ function UIWindowRecoverPassword(options){
|
||||
options = options ?? {};
|
||||
|
||||
let 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 += `<form class="pass-recovery-form">`;
|
||||
h += `<p style="text-align:center; padding: 0 20px;"></p>`;
|
||||
h += `<div class="error"></div>`;
|
||||
h += `<label>${i18n('email_or_username')}</label>`;
|
||||
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 += `</form>`;
|
||||
h += `</div>`;
|
||||
h += H`<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`;
|
||||
h += H`<h3 style="text-align:center; font-weight: 400; font-size: 20px;">${i18n('recover_password')}</h3>`;
|
||||
h += H`<form class="pass-recovery-form">`;
|
||||
h += H`<p style="text-align:center; padding: 0 20px;"></p>`;
|
||||
h += H`<div class="error"></div>`;
|
||||
h += H`<label>${i18n('email_or_username')}</label>`;
|
||||
h += H`<input class="pass-recovery-username-or-email" type="text"/>`;
|
||||
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 += H`</form>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: null,
|
||||
|
||||
@ -25,15 +25,15 @@ async function UIWindowRefer(options){
|
||||
let h = '';
|
||||
const url = `${window.gui_origin}/?r=${window.user.referral_code}`;
|
||||
|
||||
h += `<div>`;
|
||||
h += `<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> × </div>`;
|
||||
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 += `<label style="font-weight: bold;">${i18n('invite_link')}</label>`;
|
||||
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 += `<img class="share-copy-link-on-social" src="${window.icons['share-outline.svg']}">`;
|
||||
h += `</div>`;
|
||||
h += H`<div>`;
|
||||
h += H`<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> × </div>`;
|
||||
h += H`<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
|
||||
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 += H`<label style="font-weight: bold;">${i18n('invite_link')}</label>`;
|
||||
h += H`<input type="text" style="margin-bottom:10px;" class="downloadable-link" readonly />`;
|
||||
h += H`<button class="button button-primary copy-downloadable-link" style="white-space:nowrap; text-align:center;">${i18n('copy_link')}</button>`
|
||||
h += H`<img class="share-copy-link-on-social" src="${window.icons['share-outline.svg']}">`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: `Refer a friend!`,
|
||||
|
||||
@ -58,17 +58,17 @@ async function UIWindowRequestPermission(options){
|
||||
}
|
||||
|
||||
let h = ``;
|
||||
h += `<div>`;
|
||||
h += `<div style="padding: 20px; width: 100%; box-sizing: border-box;">`;
|
||||
h += H`<div>`;
|
||||
h += H`<div style="padding: 20px; width: 100%; box-sizing: border-box;">`;
|
||||
// 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
|
||||
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
|
||||
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 += `</div>`;
|
||||
h += `</div>`;
|
||||
h += 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-dont-allow button button-default button-block" style="margin-top: 10px;">Don't Allow</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: null,
|
||||
|
||||
@ -28,46 +28,46 @@ async function UIWindowSaveAccount(options){
|
||||
|
||||
return new Promise(async (resolve) => {
|
||||
let h = '';
|
||||
h += `<div>`;
|
||||
h += H`<div>`;
|
||||
// success
|
||||
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 += `<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`<div class="save-account-success">`;
|
||||
h += H`<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`;
|
||||
h += H`<p style="text-align:center; margin-bottom:10px;">${i18n('session_saved')}</p>`;
|
||||
h += H`<button class="button button-action button-block save-account-success-ok-btn">${i18n('ok')}</button>`
|
||||
h+= `</div>`;
|
||||
|
||||
// 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
|
||||
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
|
||||
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
|
||||
h += `<form class="signup-form">`;
|
||||
h += H`<form class="signup-form">`;
|
||||
// error msg
|
||||
h += `<div class="signup-error-msg"></div>`;
|
||||
h += H`<div class="signup-error-msg"></div>`;
|
||||
// username
|
||||
h += `<div style="overflow: hidden;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden;">`;
|
||||
h += H`<label for="username-${internal_id}">${i18n('username')}</label>`;
|
||||
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 += H`</div>`;
|
||||
// email
|
||||
h += `<div style="overflow: hidden; margin-top: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px;">`;
|
||||
h += H`<label for="email-${internal_id}">${i18n('email')}</label>`;
|
||||
h += H`<input id="email-${internal_id}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
|
||||
h += H`</div>`;
|
||||
// password
|
||||
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
h += H`<label for="password-${internal_id}">${i18n('password')}</label>`;
|
||||
h += H`<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`;
|
||||
h += H`</div>`;
|
||||
// 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
|
||||
h += `<button class="signup-btn button button-primary button-block button-normal">${i18n('create_account')}</button>`
|
||||
h += `</form>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="signup-btn button button-primary button-block button-normal">${i18n('create_account')}</button>`
|
||||
h += H`</form>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: null,
|
||||
|
||||
@ -27,18 +27,18 @@ async function UIWindowSessionList(options){
|
||||
|
||||
return new Promise(async (resolve) => {
|
||||
let h = '';
|
||||
h += `<div style="margin:10px;">`;
|
||||
h += `<div class="loading">${i18n('signing_in')}</div>`
|
||||
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`<div style="margin:10px;">`;
|
||||
h += H`<div class="loading">${i18n('signing_in')}</div>`
|
||||
h += H`<div style="overflow-y: scroll; max-width: 400px; margin: 0 auto;">`;
|
||||
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++) {
|
||||
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> • <span class="signup-c2a-session-list">${i18n('create_account')}</span></div>`;
|
||||
h += `</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> • <span class="signup-c2a-session-list">${i18n('create_account')}</span></div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Session List!',
|
||||
|
||||
@ -3,76 +3,76 @@ import UIWindow from './UIWindow.js'
|
||||
async function UIWindowShare(items, recipient){
|
||||
return new Promise(async (resolve) => {
|
||||
let 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;"> × </div>`;
|
||||
h += H`<div style="padding: 30px 40px 20px; border-bottom: 1px solid #ced7e1;">`;
|
||||
h += H`<div class="qr-code-window-close-btn generic-close-window-button" style="margin: 5px;"> × </div>`;
|
||||
|
||||
//------------------------------------------------
|
||||
// Icon
|
||||
//------------------------------------------------
|
||||
|
||||
// 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)
|
||||
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
|
||||
else if(items.length === 2){
|
||||
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[0].icon}" style="width:70px; height:70px; z-index: 2;">`;
|
||||
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
|
||||
else if(items.length === 3){
|
||||
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 += `<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[0].icon}" style="width:70px; height:70px; z-index: 3;">`;
|
||||
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 += 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
|
||||
else if(items.length === 4){
|
||||
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 += `<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[0].icon}" style="width:70px; height:70px; z-index: 4;">`;
|
||||
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 += 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[3].icon}" style="width:70px; height:70px; margin-left:-55px; margin-top: -35px; z-index:1; transform:scale(0.4);">`;
|
||||
}
|
||||
// 5 items shared
|
||||
else if(items.length >= 5){
|
||||
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 += `<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 += `<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[0].icon}" style="width:70px; height:70px; z-index: 5;">`;
|
||||
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 += 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[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[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
|
||||
// ------------------------------------------------
|
||||
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`<h2 style="font-size: 17px; margin-top:0; text-align:center; margin-bottom: 40px; font-weight: 400; color: #303d49;">`;
|
||||
h += H`Share <strong>${html_encode(items[0].name)}</strong>`;
|
||||
if(items.length > 1)
|
||||
h += ` and ${items.length - 1} other item${items.length > 2 ? 's' : ''}`;
|
||||
h += `</h2>`;
|
||||
h += H` and ${items.length - 1} other item${items.length > 2 ? 's' : ''}`;
|
||||
h += H`</h2>`;
|
||||
|
||||
// form
|
||||
h += `<form class="window-give-item-access-form">`;
|
||||
h += H`<form class="window-give-item-access-form">`;
|
||||
// Error msg
|
||||
h += `<div class="error"></div>`;
|
||||
h += H`<div class="error"></div>`;
|
||||
// Username/email
|
||||
h += `<div style="overflow: hidden;">`;
|
||||
h += `<label style="font-size: 16px; font-weight: 600;">Share with:</label>`;
|
||||
h += `<div style="display: flex;">`;
|
||||
h += H`<div style="overflow: hidden;">`;
|
||||
h += H`<label style="font-size: 16px; font-weight: 600;">Share with:</label>`;
|
||||
h += H`<div style="display: flex;">`;
|
||||
// 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
|
||||
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 += `</div>`;
|
||||
h += `</form>`;
|
||||
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 += H`</div>`;
|
||||
h += H`</div>`;
|
||||
h += H`</form>`;
|
||||
|
||||
//recipients
|
||||
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 += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<p style="font-size: 14px; margin-bottom: 0px; color: #303d49; text-shadow: 1px 1px white;">People with access</p>`;
|
||||
h += H`<div class="share-recipients">`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Share With…',
|
||||
|
||||
@ -31,51 +31,51 @@ function UIWindowSignup(options){
|
||||
return new Promise(async (resolve) => {
|
||||
const internal_id = window.uuidv4();
|
||||
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
|
||||
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
|
||||
if(!options.has_head && options.show_close_button !== false)
|
||||
h += `<div class="generic-close-window-button"> × </div>`;
|
||||
h += H`<div class="generic-close-window-button"> × </div>`;
|
||||
|
||||
// Form
|
||||
h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
|
||||
h += H`<div style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
|
||||
// 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
|
||||
h += `<form class="signup-form">`;
|
||||
h += H`<form class="signup-form">`;
|
||||
// error msg
|
||||
h += `<div class="signup-error-msg"></div>`;
|
||||
h += H`<div class="signup-error-msg"></div>`;
|
||||
// username
|
||||
h += `<div style="overflow: hidden;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden;">`;
|
||||
h += H`<label for="username-${internal_id}">${i18n('username')}</label>`;
|
||||
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 += H`</div>`;
|
||||
// email
|
||||
h += `<div style="overflow: hidden; margin-top: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px;">`;
|
||||
h += H`<label for="email-${internal_id}">${i18n('email')}</label>`;
|
||||
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 += H`</div>`;
|
||||
// password
|
||||
h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
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 += `</div>`;
|
||||
h += H`<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
|
||||
h += H`<label for="password-${internal_id}">${i18n('password')}</label>`;
|
||||
h += H`<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`;
|
||||
h += H`</div>`;
|
||||
// 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
|
||||
h += `<p class="signup-terms">${i18n('tos_fineprint', [], false)}</p>`;
|
||||
h += H`<p class="signup-terms">${i18n('tos_fineprint', [], false)}</p>`;
|
||||
// Create Account
|
||||
h += `<button class="signup-btn button button-primary button-block button-normal">${i18n('create_free_account')}</button>`
|
||||
h += `</form>`;
|
||||
h += `</div>`;
|
||||
h += H`<button class="signup-btn button button-primary button-block button-normal">${i18n('create_free_account')}</button>`
|
||||
h += H`</form>`;
|
||||
h += H`</div>`;
|
||||
// login link
|
||||
// create account link
|
||||
h += `<div class="c2a-wrapper" style="padding:20px;">`;
|
||||
h += `<button class="login-c2a-clickable">${i18n('log_in')}</button>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="c2a-wrapper" style="padding:20px;">`;
|
||||
h += H`<button class="login-c2a-clickable">${i18n('log_in')}</button>`;
|
||||
h += H`</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: null,
|
||||
|
||||
@ -253,22 +253,22 @@ class TaskManagerRow extends Component {
|
||||
const el = $(this.dom_).find('.task-indentation');
|
||||
let h = '';
|
||||
for (const c of indentation) {
|
||||
h += `<div class="indentcell">`;
|
||||
h += H`<div class="indentcell">`;
|
||||
switch (c) {
|
||||
case ' ':
|
||||
break;
|
||||
case '|':
|
||||
h += `<div class="indentcell-trunk"></div>`;
|
||||
h += H`<div class="indentcell-trunk"></div>`;
|
||||
break;
|
||||
case '└':
|
||||
h += `<div class="indentcell-branch"></div>`;
|
||||
h += H`<div class="indentcell-branch"></div>`;
|
||||
break;
|
||||
case '├':
|
||||
h += `<div class="indentcell-trunk"></div>`;
|
||||
h += `<div class="indentcell-branch"></div>`;
|
||||
h += H`<div class="indentcell-trunk"></div>`;
|
||||
h += H`<div class="indentcell-branch"></div>`;
|
||||
break;
|
||||
}
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
}
|
||||
el.html(h);
|
||||
});
|
||||
|
||||
@ -48,7 +48,7 @@ const get_html_element_from_options = async function(options){
|
||||
// HTML for Item
|
||||
// --------------------------------------------------------
|
||||
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}"
|
||||
data-id="${item_id}"
|
||||
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)}">`;
|
||||
|
||||
// spinner
|
||||
h += `<div class="item-spinner">`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="item-spinner">`;
|
||||
h += H`</div>`;
|
||||
// modified
|
||||
h += `<div class="item-attr item-attr--modified">`;
|
||||
h += `<span>${options.modified === 0 ? '-' : timeago.format(options.modified*1000)}</span>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="item-attr item-attr--modified">`;
|
||||
h += H`<span>${options.modified === 0 ? '-' : timeago.format(options.modified*1000)}</span>`;
|
||||
h += H`</div>`;
|
||||
// size
|
||||
h += `<div class="item-attr item-attr--size">`;
|
||||
h += `<span>${options.size ? window.byte_format(options.size) : '-'}</span>`;
|
||||
h += `</div>`;
|
||||
h += H`<div class="item-attr item-attr--size">`;
|
||||
h += H`<span>${options.size ? window.byte_format(options.size) : '-'}</span>`;
|
||||
h += H`</div>`;
|
||||
// type
|
||||
h += `<div class="item-attr item-attr--type">`;
|
||||
h += H`<div class="item-attr item-attr--type">`;
|
||||
if(options.is_dir)
|
||||
h += `<span>Folder</span>`;
|
||||
h += H`<span>Folder</span>`;
|
||||
else
|
||||
h += `<span>${options.type ? html_encode(options.type) : '-'}</span>`;
|
||||
h += `</div>`;
|
||||
h += H`<span>${options.type ? html_encode(options.type) : '-'}</span>`;
|
||||
h += H`</div>`;
|
||||
|
||||
|
||||
// icon
|
||||
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 += `</div>`;
|
||||
h += H`<div class="item-icon">`;
|
||||
h += H`<img src="${html_encode(options.icon.image)}" class="item-icon-${options.icon.type}" data-item-id="${item_id}">`;
|
||||
h += H`</div>`;
|
||||
// badges
|
||||
h += `<div class="item-badges">`;
|
||||
h += H`<div class="item-badges">`;
|
||||
// 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;' : ''}"
|
||||
src="${html_encode(window.icons['world.svg'])}"
|
||||
data-item-id="${item_id}"
|
||||
>`;
|
||||
// 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;' : ''}"
|
||||
src="${html_encode(window.icons['link.svg'])}"
|
||||
data-item-id="${item_id}"
|
||||
>`;
|
||||
|
||||
// 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'};
|
||||
background-color: #ffffff;
|
||||
padding: 2px;" src="${html_encode(window.icons['shared.svg'])}"
|
||||
data-item-id="${item_id}"
|
||||
title="A user has shared this item with you.">`;
|
||||
// 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;' : ''}"
|
||||
src="${html_encode(window.icons['owner-shared.svg'])}"
|
||||
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."
|
||||
>`;
|
||||
// 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;' : ''}"
|
||||
src="${html_encode(window.icons['shortcut.svg'])}"
|
||||
data-item-id="${item_id}"
|
||||
title="Shortcut"
|
||||
>`;
|
||||
|
||||
h += `</div>`;
|
||||
h += H`</div>`;
|
||||
|
||||
// name
|
||||
h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name)).replaceAll(' ', ' ')}</span>`
|
||||
h += H`<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name)).replaceAll(' ', ' ')}</span>`
|
||||
// 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 += `</div>`;
|
||||
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 += H`</div>`;
|
||||
|
||||
return h;
|
||||
}
|
||||
|
||||
@ -1515,7 +1515,17 @@ window.privacy_aware_path = function(fspath){
|
||||
|
||||
// A fake html_encode for the example at the bottom
|
||||
window.hescape = text => {
|
||||
return html_encode(text);
|
||||
if(!text)
|
||||
return '';
|
||||
// escape html
|
||||
text = html_encode(text);
|
||||
|
||||
// replace space with to preserve spaces
|
||||
if(typeof text === 'string')
|
||||
text = text.replaceAll(' ', ' ');
|
||||
|
||||
// return the escaped text
|
||||
return text;
|
||||
};
|
||||
|
||||
// The entire implementation of the thing
|
||||
|
||||
Loading…
Reference in New Issue
Block a user